-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsettings.html
More file actions
147 lines (130 loc) · 6.86 KB
/
Copy pathsettings.html
File metadata and controls
147 lines (130 loc) · 6.86 KB
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LogAI — Settings</title>
<meta name="description"
content="Customize your LogAI experience. Change themes, view account info and usage limits.">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<!-- Fonts -->
<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=Inter:ital,opsz,wght@0,14..32,300..700;1,14..32,300..700&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet">
<!-- Anti-FOUC: apply saved theme instantly before any paint -->
<script>
document.documentElement.setAttribute(
'data-theme',
localStorage.getItem('logai_theme') || 'dark'
);
</script>
<!-- Base styles -->
<link rel="stylesheet" href="style.css">
<!-- Page-specific styles -->
<link rel="stylesheet" href="css/settings.css">
</head>
<body>
<div class="app-container">
<!-- ── SIDEBAR ─────────────────────────────────────────────────── -->
<aside class="sidebar">
<div class="brand">
<div class="logo-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<h1>LogAI</h1>
</div>
<nav>
<a href="index.html"><span>Dashboard</span></a>
<a href="history.html"><span>History</span></a>
<a href="settings.html" class="active"><span>Settings</span></a>
</nav>
</aside>
<!-- ── MAIN CONTENT ───────────────────────────────────────────── -->
<main class="main-content">
<header class="top-bar">
<h2>Settings</h2>
</header>
<div class="content-wrapper">
<section class="settings-section">
<div class="card settings-card">
<!-- ── Appearance ───────────────────────────── -->
<div class="card-header">
<h3>Appearance</h3>
</div>
<div class="card-body">
<div class="settings-section-title">Theme</div>
<!-- Theme grid — populated by settings.js -->
<div class="theme-grid" id="themeGrid"></div>
</div>
<!-- ── Account ──────────────────────────────── -->
<div class="card-header" style="margin-top:4px; border-top:1px solid var(--border);">
<h3>Account</h3>
</div>
<div class="card-body">
<div class="settings-item">
<div>
<div class="settings-label">Email</div>
<div class="settings-desc">Your logged-in account</div>
</div>
<span class="settings-badge" id="settingsEmail">—</span>
</div>
<div class="settings-item">
<div>
<div class="settings-label">Plan</div>
<div class="settings-desc">Your current usage tier</div>
</div>
<span class="settings-badge" id="settingsPlan">Free</span>
</div>
<div class="settings-item">
<div>
<div class="settings-label">Daily Limit</div>
<div class="settings-desc">Max analyses per calendar day (UTC)</div>
</div>
<span class="settings-badge" id="settingsLimit">3 per day</span>
</div>
</div>
<!-- ── System ───────────────────────────────── -->
<div class="card-header" style="margin-top:4px; border-top:1px solid var(--border);">
<h3>System</h3>
</div>
<div class="card-body">
<div class="settings-item">
<div>
<div class="settings-label">Analysis Model</div>
<div class="settings-desc">AI model powering log analysis</div>
</div>
<span class="settings-badge">Gemini 2.0 Flash</span>
</div>
<div class="settings-item">
<div>
<div class="settings-label">Chunk Size</div>
<div class="settings-desc">Log lines processed per AI call</div>
</div>
<span class="settings-badge">~30 KB</span>
</div>
<div class="settings-item" style="border-bottom:none;">
<div>
<div class="settings-label">Status</div>
<div class="settings-desc">Live backend health</div>
</div>
<span class="settings-badge" id="settingsStatus">
<span class="dot online" style="display:inline-block;margin-right:5px;"></span>
Operational
</span>
</div>
</div>
</div>
</section>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="settings.js"></script>
</body>
</html>