63 lines
16 KiB
Go
63 lines
16 KiB
Go
// Code generated by templ - DO NOT EDIT.
|
|
|
|
// templ: version: v0.3.833
|
|
package layouts
|
|
|
|
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
|
|
|
import "github.com/a-h/templ"
|
|
import templruntime "github.com/a-h/templ/runtime"
|
|
|
|
// Base provides the basic HTML structure for all pages
|
|
func Base(title string) templ.Component {
|
|
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
|
|
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
|
|
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
|
|
return templ_7745c5c3_CtxErr
|
|
}
|
|
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
|
|
if !templ_7745c5c3_IsBuffer {
|
|
defer func() {
|
|
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
|
|
if templ_7745c5c3_Err == nil {
|
|
templ_7745c5c3_Err = templ_7745c5c3_BufErr
|
|
}
|
|
}()
|
|
}
|
|
ctx = templ.InitializeContext(ctx)
|
|
templ_7745c5c3_Var1 := templ.GetChildren(ctx)
|
|
if templ_7745c5c3_Var1 == nil {
|
|
templ_7745c5c3_Var1 = templ.NopComponent
|
|
}
|
|
ctx = templ.ClearChildren(ctx)
|
|
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
|
|
if templ_7745c5c3_Err != nil {
|
|
return templ_7745c5c3_Err
|
|
}
|
|
var templ_7745c5c3_Var2 string
|
|
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
|
|
if templ_7745c5c3_Err != nil {
|
|
return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/layouts/base.templ`, Line: 10, Col: 15}
|
|
}
|
|
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
|
|
if templ_7745c5c3_Err != nil {
|
|
return templ_7745c5c3_Err
|
|
}
|
|
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</title><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap\" rel=\"stylesheet\"><script src=\"https://unpkg.com/htmx.org@2.0.4\" integrity=\"sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+\" crossorigin=\"anonymous\"></script><style>\n body {\n font-family: 'JetBrains Mono', monospace;\n }\n \n /* Storage meter styles */\n .storage-meter {\n height: 12px;\n background-color: var(--gruvbox-bg2);\n border-radius: 6px;\n overflow: hidden;\n margin: 0.25rem 0;\n }\n \n .storage-meter.small {\n height: 6px;\n margin: 0.15rem 0;\n }\n \n .storage-progress {\n height: 100%;\n background-color: var(--gruvbox-blue);\n border-radius: 6px;\n transition: width 0.5s ease;\n }\n \n /* Icon styles */\n .storage-icon {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n background-color: rgba(255, 255, 255, 0.1);\n }\n \n .status-icon {\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .status-icon.error {\n color: var(--gruvbox-red);\n }\n \n .status-icon.warning {\n color: var(--gruvbox-yellow);\n }\n \n .status-icon.success {\n color: var(--gruvbox-green);\n }\n \n /* Backup tool tags */\n .backup-tool-tag {\n display: inline-block;\n padding: 0.15rem 0.5rem;\n border-radius: 4px;\n font-size: 0.8rem;\n margin-right: 0.5rem;\n background-color: rgba(255, 255, 255, 0.1);\n }\n \n /* Chart styles */\n .donut-chart {\n width: 120px;\n height: 120px;\n }\n \n /* Gruvbox Material Dark Theme for Backea */\n :root {\n /* Gruvbox Hard Dark Palette */\n --gruvbox-bg-hard: #1d2021;\n --gruvbox-bg0: #282828;\n --gruvbox-bg1: #3c3836;\n --gruvbox-bg2: #504945;\n --gruvbox-bg3: #665c54;\n --gruvbox-bg4: #7c6f64;\n \n --gruvbox-fg: #fbf1c7;\n --gruvbox-fg-dim: #d5c4a1;\n \n --gruvbox-red: #fb4934;\n --gruvbox-green: #b8bb26;\n --gruvbox-yellow: #fabd2f;\n --gruvbox-blue: #83a598;\n --gruvbox-purple: #d3869b;\n --gruvbox-aqua: #8ec07c;\n --gruvbox-orange: #fe8019;\n --gruvbox-gray: #928374;\n }\n /* Base dark mode styles */\n .gruvbox-dark {\n background-color: var(--gruvbox-bg-hard);\n color: var(--gruvbox-fg);\n min-height: 100vh;\n }\n /* Background colors */\n .gruvbox-bg-hard { background-color: var(--gruvbox-bg-hard); }\n .gruvbox-bg0 { background-color: var(--gruvbox-bg0); }\n .gruvbox-bg1 { background-color: var(--gruvbox-bg1); }\n .gruvbox-bg2 { background-color: var(--gruvbox-bg2); }\n /* Text colors */\n .gruvbox-fg { color: var(--gruvbox-fg); }\n .gruvbox-red { color: var(--gruvbox-red); }\n .gruvbox-green { color: var(--gruvbox-green); }\n .gruvbox-yellow { color: var(--gruvbox-yellow); }\n .gruvbox-blue { color: var(--gruvbox-blue); }\n .gruvbox-purple { color: var(--gruvbox-purple); }\n .gruvbox-aqua { color: var(--gruvbox-aqua); }\n .gruvbox-orange { color: var(--gruvbox-orange); }\n .gruvbox-gray { color: var(--gruvbox-gray); }\n /* Border colors */\n .gruvbox-red-border { border-color: var(--gruvbox-red); }\n .gruvbox-green-border { border-color: var(--gruvbox-green); }\n .gruvbox-yellow-border { border-color: var(--gruvbox-yellow); }\n .gruvbox-blue-border { border-color: var(--gruvbox-blue); }\n .gruvbox-purple-border { border-color: var(--gruvbox-purple); }\n .gruvbox-aqua-border { border-color: var(--gruvbox-aqua); }\n /* Base dark mode styles */\n html, body {\n background-color: var(--gruvbox-bg-hard);\n color: var(--gruvbox-fg);\n margin: 0;\n padding: 0;\n min-height: 100vh;\n width: 100%;\n }\n /* Table Styles */\n .gruvbox-table {\n width: 100%;\n border-collapse: collapse;\n border-color: var(--gruvbox-bg3);\n }\n .gruvbox-table th {\n font-weight: bold;\n border-bottom: 1px solid var(--gruvbox-bg3);\n }\n .gruvbox-table tr {\n border-bottom: 1px solid var(--gruvbox-bg2);\n }\n .gruvbox-table td, .gruvbox-table th {\n padding: 0.5rem;\n }\n /* Link styles */\n .gruvbox-link {\n color: var(--gruvbox-blue);\n text-decoration: none;\n transition: color 0.2s ease;\n }\n .gruvbox-link:hover {\n color: var(--gruvbox-aqua);\n text-decoration: underline;\n }\n /* Warning container */\n .gruvbox-warning {\n background-color: var(--gruvbox-bg1);\n border: 1px solid var(--gruvbox-yellow);\n color: var(--gruvbox-yellow);\n padding: 1rem;\n border-radius: 0.25rem;\n }\n /* Add Beer CSS compatibility for spacing and layout classes */\n .responsive {\n width: 100%;\n padding: 1rem;\n max-width: 1200px;\n margin: 0 auto;\n }\n .round {\n border-radius: 0.25rem;\n }\n .padding {\n padding: 1rem;\n }\n .padding-small {\n padding: 0.5rem;\n }\n .margin-bottom {\n margin-bottom: 1rem;\n }\n .margin-bottom-large {\n margin-bottom: 2rem;\n }\n .margin-top {\n margin-top: 1rem;\n }\n .margin-top-small {\n margin-top: 0.5rem;\n }\n .border {\n border: 1px solid;\n }\n .border-bottom {\n border-bottom: 1px solid var(--gruvbox-bg3);\n }\n .left-align {\n text-align: left;\n }\n .right-align {\n text-align: right;\n }\n .center-align {\n text-align: center;\n }\n .overflow {\n overflow-x: auto;\n }\n .extra-large {\n font-size: 2rem;\n }\n .large {\n font-size: 1.5rem;\n }\n .medium {\n font-weight: 500;\n }\n /* Skeleton loading styles */\n.skeleton-table {\n max-width: 95%;\n border-collapse: collapse;\n margin-bottom: 1rem;\n}\n\n.skeleton-header {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 8px;\n padding: 8px 0;\n border-bottom: 1px solid rgba(168, 153, 132, 0.3);\n}\n\n.skeleton-row {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 8px;\n padding: 8px 0;\n border-bottom: 1px solid rgba(168, 153, 132, 0.1);\n}\n\n.skeleton-cell {\n height: 1.2rem;\n background: linear-gradient(90deg, rgba(168, 153, 132, 0.1) 25%, rgba(168, 153, 132, 0.2) 50%, rgba(168, 153, 132, 0.1) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n border-radius: 4px;\n}\n\n@keyframes shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n\n/* Loading indicator */\n.loading-spinner {\n width: 30px;\n height: 30px;\n margin: 20px auto;\n border: 3px solid rgba(168, 153, 132, 0.3);\n border-top: 3px solid #b8bb26; /* gruvbox green */\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.htmx-indicator {\n display: none;\n}\n\n.htmx-request .htmx-indicator {\n display: block;\n}\n\n.htmx-request.htmx-indicator {\n display: block;\n}\n\n/* Improve spacing in tables */\n.overflow {\n overflow-x: auto;\n margin-bottom: 1rem;\n}\n\n.table-skeleton {\n background-color: var(--gruvbox-bg1);\n border-radius: 4px;\n padding: 16px;\n}\n\n/* Fade in animation for loaded content */\n.group-backups-table {\n animation: fadeIn 0.3s ease-in-out;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n.skeleton-text {\n position: relative;\n overflow: hidden;\n background: linear-gradient(90deg, rgba(168, 153, 132, 0.1) 25%, rgba(168, 153, 132, 0.2) 50%, rgba(168, 153, 132, 0.1) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n border-radius: 4px;\n color: transparent !important;\n width: 40px;\n display: inline-block;\n}\n\n/* Skeleton table styles remain the same */\n.skeleton-table {\n width: 100%;\n border-collapse: collapse;\n margin-bottom: 1rem;\n}\n\n.skeleton-header {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 8px;\n padding: 8px 0;\n border-bottom: 1px solid rgba(168, 153, 132, 0.3);\n}\n\n.skeleton-row {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 8px;\n padding: 8px 0;\n border-bottom: 1px solid rgba(168, 153, 132, 0.1);\n}\n\n.skeleton-cell {\n height: 1.2rem;\n background: linear-gradient(90deg, rgba(168, 153, 132, 0.1) 25%, rgba(168, 153, 132, 0.2) 50%, rgba(168, 153, 132, 0.1) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n border-radius: 4px;\n}\n\n@keyframes shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n\n/* Loading indicator */\n.loading-spinner {\n width: 30px;\n height: 30px;\n margin: 20px auto;\n border: 3px solid rgba(168, 153, 132, 0.3);\n border-top: 3px solid #b8bb26; /* gruvbox green */\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.htmx-indicator {\n display: none;\n}\n\n.htmx-request .htmx-indicator {\n display: block;\n}\n\n.htmx-request.htmx-indicator {\n display: block;\n}\n\n/* Entry animation for both header and content */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.group-backups-table, \n#group-header-* {\n animation: fadeIn 0.3s ease-out;\n}\n\n/* Button styles */\n.gruvbox-button {\n display: inline-block;\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 4px;\n color: var(--gruvbox-fg);\n cursor: pointer;\n font-family: inherit;\n font-size: 0.9rem;\n text-decoration: none;\n transition: background-color 0.2s ease, transform 0.1s ease;\n}\n\n.gruvbox-button:hover {\n background-color: var(--gruvbox-bg3);\n transform: translateY(-1px);\n}\n\n.gruvbox-button:active {\n transform: translateY(1px);\n}\n\n/* Inline spinner for buttons */\n.inline-spinner {\n width: 16px;\n height: 16px;\n margin-left: 8px;\n display: inline-block;\n vertical-align: middle;\n}\n\n/* Animation for table transitions */\n.group-backups-table {\n transition: opacity 0.2s ease;\n}\n\n.htmx-swapping {\n opacity: 0.5;\n}\n\n/* Make the table header sticky */\n.gruvbox-table thead {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--gruvbox-bg1);\n}\n\n/* Action buttons styling */\n.action-buttons {\n display: flex;\n gap: 8px;\n white-space: nowrap;\n}\n\n.action-button {\n font-size: 0.8rem;\n padding: 0.25rem 0.5rem;\n border-radius: 3px;\n cursor: pointer;\n font-family: inherit;\n text-decoration: none;\n display: inline-block;\n text-align: center;\n border: none;\n transition: background-color 0.15s ease, transform 0.1s ease;\n}\n\n.restore-button {\n background-color: var(--gruvbox-blue);\n color: var(--gruvbox-bg-hard);\n}\n\n.download-button {\n background-color: var(--gruvbox-green);\n color: var(--gruvbox-bg-hard);\n}\n\n.action-button:hover {\n transform: translateY(-1px);\n filter: brightness(1.1);\n}\n\n.action-button:active {\n transform: translateY(1px);\n}\n\n/* Make sure the table has enough width */\n.gruvbox-table {\n width: 100%;\n table-layout: auto;\n}\n\n/* Ensure columns have appropriate widths */\n.gruvbox-table th:last-child,\n.gruvbox-table td:last-child {\n width: 1%;\n white-space: nowrap;\n}\n\n/* Responsive adjustments for small screens */\n@media (max-width: 768px) {\n .action-buttons {\n flex-direction: column;\n gap: 4px;\n }\n \n .action-button {\n font-size: 0.7rem;\n padding: 0.2rem 0.4rem;\n }\n}\n/* Add these styles to your CSS file */\n\n.restore-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 90%;\n max-width: 500px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);\n z-index: 1000;\n padding: 2rem;\n border-radius: 8px;\n}\n\n.restore-modal:before {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: -1;\n}\n\n.backup-details {\n margin-bottom: 1rem;\n padding: 0.5rem;\n background: rgba(40, 40, 40, 0.4);\n border-radius: 4px;\n}\n\n.form-group {\n margin-bottom: 1rem;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 0.5rem;\n}\n\n.gruvbox-input {\n width: 100%;\n padding: 0.5rem;\n background-color: #1d2021;\n border: 1px solid #3c3836;\n color: #ebdbb2;\n border-radius: 4px;\n font-family: inherit;\n font-size: 1rem;\n}\n\n.gruvbox-input:focus {\n outline: none;\n border-color: #fabd2f;\n}\n\n.form-buttons {\n display: flex;\n justify-content: space-between;\n margin-top: 1.5rem;\n}\n\t</style></head><body class=\"gruvbox-bg0 gruvbox-fg\"><header class=\"gruvbox-bg-hard padding\"><div class=\"responsive\"><div style=\"display: flex; justify-content: space-between; align-items: center;\"><a href=\"/\" class=\"gruvbox-yellow no-underline\"><h1 class=\"large\">Backea</h1></a><nav><ul style=\"display: flex; gap: 1rem;\"><li><a href=\"/\" class=\"gruvbox-link\">Home</a></li><li><a href=\"/about\" class=\"gruvbox-link\">About</a></li></ul></nav></div></div></header><!-- Notification area for displaying feedback --><div id=\"notification-area\"></div><main class=\"padding\">")
|
|
if templ_7745c5c3_Err != nil {
|
|
return templ_7745c5c3_Err
|
|
}
|
|
templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
|
|
if templ_7745c5c3_Err != nil {
|
|
return templ_7745c5c3_Err
|
|
}
|
|
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main><footer class=\"gruvbox-bg-hard padding margin-top\"><div class=\"responsive\"><p class=\"text-center\"><small class=\"gruvbox-fg-dim\">Backea - Unified Backup Dashboard</small></p></div></footer></body></html>")
|
|
if templ_7745c5c3_Err != nil {
|
|
return templ_7745c5c3_Err
|
|
}
|
|
return nil
|
|
})
|
|
}
|
|
|
|
var _ = templruntime.GeneratedTemplate
|