package views
import (
"fmt"
"github.com/ditatompel/xmr-remote-nodes/internal/config"
"time"
)
var buildTime = time.Now().Unix()
type Meta struct {
Title string
Description string
Keywords string
Robots string
Permalink string
Identifier string
}
templ base(m Meta) {
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8"/>
<title>{ m.Title } — xmr.ditatompel.com</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="title" content={ fmt.Sprintf("%s — xmr.ditatompel.com", m.Title) }/>
<meta name="description" content={ m.Description }/>
<meta name="keywords" content={ m.Keywords }/>
<meta name="robots" content={ m.Robots }/>
<meta name="theme-color" content="#272b31"/>
<meta name="author" content="ditatompel"/>
<meta property="og:site_name" content="xmr.ditatompel.com"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content={ m.Permalink }/>
<meta property="og:locale" content="en_US"/>
<meta property="og:title" content={ fmt.Sprintf("%s — xmr.ditatompel.com", m.Title) }/>
<meta property="og:description" content={ m.Description }/>
<link href={ fmt.Sprintf("/assets/css/main.min.css?t=%d", buildTime) } rel="stylesheet"/>
<script src={ fmt.Sprintf("/assets/js/htmx.min.js?t=%d", buildTime) }></script>
<script src={ fmt.Sprintf("/assets/js/clipboard.min.js?t=%d", buildTime) }></script>
<script src={ fmt.Sprintf("/assets/js/main.min.js?t=%d", buildTime) }></script>
</head>
<body class="bg-neutral-900 text-neutral-400" hx-boost="true" hx-indicator="#hx-indicator-main">
@navbar(m.Identifier)
<main class="shrink-0 min-h-screen">
{ children... }
</main>
<footer class="mt-auto py-3 bg-neutral-800 text-center">
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-sm">XMR Nodes { config.Version }, <a href="https://github.com/ditatompel/xmr-remote-nodes" target="_blank" rel="noopener" class="external">source code</a> licensed under <strong>BSD-3-Clause</strong> license.</p>
</div>
</footer>
<div id="modal-section" class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="modal-section-label"></div>
</body>
</html>
}
templ BaseLayout(m Meta, cmp templ.Component) {
@base(m) {
@cmp
}
}
templ BlankLayout(cmp templ.Component) {
@cmp
}
templ ModalLayout(title string, cmp templ.Component) {
<div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all lg:max-w-4xl lg:w-full m-3 lg:mx-auto h-[calc(100%-3.5rem)] min-h-[calc(100%-3.5rem)] flex items-center">
<div class="modal-container">
<div class="modal-header">
<h3 class="font-bold">{ title }</h3>
<button type="button" class="btn-close" data-hs-overlay="#modal-section">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
<div class="modal-body">
@cmp
</div>
<div class="modal-footer">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 bg-neutral-900 text-sm text-white rounded-lg shadow-sm border border-neutral-700 hover:bg-neutral-800" data-hs-overlay="#modal-section">Close</button>
</div>
</div>
</div>
}
templ heroGradient() {
<div aria-hidden="true" class="flex absolute -top-96 start-1/2 transform -translate-x-1/2">
<div class="bg-gradient-to-r blur-3xl w-[25rem] h-[44rem] rotate-[-60deg] transform -translate-x-[10rem] from-amber-800/30 to-orange-800/40"></div>
<div class="bg-gradient-to-tl blur-3xl w-[90rem] h-[50rem] rounded-fulls origin-top-left -rotate-12 -translate-x-[15rem] from-orange-900/60 via-orange-900/40 to-amber-900/80"></div>
</div>
}
templ Alert(status, message string) {
switch status {
case "success":
<div class="mt-2 bg-green-600 text-white rounded-lg p-4"><strong>Success:</strong> { message }</div>
case "error":
<div class="mt-2 bg-red-600 text-white rounded-lg p-4"><strong>Error:</strong> { message }</div>
default:
<div class="mt-2 bg-blue-600 text-white rounded-lg p-4">{ message }</div>
}
}