..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 | package templates
templ Base(title string) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Majin Mail | { title }</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=Exo+2:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"/>
<link href="/static/css/styles.css" rel="stylesheet"/>
<script src="/static/js/htmx.min.js"></script>
</head>
<body class="min-h-screen bg-slate-900">
<div id="notification-container" class="fixed top-4 right-4 z-50 space-y-2"></div>
<div id="main-content">
{ children... }
</div>
<script>
function showNotification(message, type = 'info') {
const container = document.getElementById('notification-container');
const notification = document.createElement('div');
const bgColor = type === 'error' ? 'bg-red-900/50' : 'bg-cyan-900/50';
const borderColor = type === 'error' ? 'border-red-500/30' : 'border-cyan-500/30';
const textColor = type === 'error' ? 'text-red-400' : 'text-cyan-400';
notification.className = `${bgColor} ${borderColor} ${textColor} border backdrop-blur-sm p-4 text-sm notification-enter w-96`;
notification.textContent = message;
container.appendChild(notification);
const timeout = setTimeout(() => {
notification.classList.add('notification-exit');
setTimeout(() => {
if (container.contains(notification)) {
container.removeChild(notification);
}
}, 300);
}, 3000);
return { element: notification, timeout: timeout };
}
</script>
</body>
</html>
}
|
|
