sneak
f1cc7d65a6
- Add Alpine.js (self-hosted, embedded in static/) - Refactor app.js to use Alpine.js stores and components - Update templates to use x-data, x-bind, x-show, x-text directives - Add reactive deploy button state, live logs, status badges - Add auto-dismiss alerts with close button and transitions - Add copy-to-clipboard component with feedback - Add confirm dialog component for destructive actions - Add relative time component with auto-update - Add prettier to make fmt target for JS formatting
97 lines
4.5 KiB
HTML
97 lines
4.5 KiB
HTML
{{define "base"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<title>{{block "title" .}}µPaaS{{end}}</title>
|
|
<link rel="stylesheet" href="/s/css/tailwind.css">
|
|
<style>[x-cloak] { display: none !important; }</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen flex flex-col">
|
|
<div class="flex-grow">
|
|
{{block "content" .}}{{end}}
|
|
</div>
|
|
{{template "footer" .}}
|
|
<script defer src="/s/js/alpine.min.js"></script>
|
|
<script src="/s/js/app.js"></script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|
|
|
|
{{define "nav"}}
|
|
<nav class="app-bar">
|
|
<div class="max-w-6xl mx-auto flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<a href="/" class="text-xl font-medium text-gray-900 hover:text-primary-600 transition-colors">µPaaS</a>
|
|
<span class="text-sm text-gray-500">by <a href="https://sneak.berlin" class="text-primary-600 hover:text-primary-800">@sneak</a></span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<a href="/apps/new" class="btn-primary">
|
|
New App
|
|
</a>
|
|
<form method="POST" action="/logout" class="inline">
|
|
<button type="submit" class="btn-text">Logout</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
{{end}}
|
|
|
|
{{define "footer"}}
|
|
<footer class="bg-gray-100 border-t border-gray-200 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] mt-8">
|
|
<div class="max-w-6xl mx-auto px-8 py-6">
|
|
<div class="text-center text-sm text-gray-500 font-mono font-light">
|
|
<a href="https://git.eeqj.de/sneak/upaas" class="hover:text-gray-700">µPaaS</a>
|
|
<span class="mx-1">by</span>
|
|
<a href="https://sneak.berlin" class="hover:text-gray-700">@sneak</a>
|
|
<span class="mx-3">|</span>
|
|
<span>WTFPL</span>
|
|
<span class="mx-3">|</span>
|
|
<span>{{if .Version}}{{.Version}}{{else}}dev{{end}}</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
{{end}}
|
|
|
|
{{define "alert-error"}}
|
|
{{if .Error}}
|
|
<div class="alert-error" x-data="autoDismiss(8000)" x-show="show" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<span>{{.Error}}</span>
|
|
</div>
|
|
<button @click="dismiss()" class="text-error-500 hover:text-error-700 ml-4">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
|
|
{{define "alert-success"}}
|
|
{{if .Success}}
|
|
<div class="alert-success" x-data="autoDismiss(5000)" x-show="show" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<span>{{.Success}}</span>
|
|
</div>
|
|
<button @click="dismiss()" class="text-success-500 hover:text-success-700 ml-4">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|