@sigit / siti
Code Commits Issues Pulls Cloud Agent CI/CD
development
development fix/asc-key-path main release/windows-microsoft-store
html 271 lines 6.61 KB
Raw
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <link rel="preconnect" href="https://fonts.googleapis.com">
6 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
7 <style>
8 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
9
10 html, body {
11 width: 3840px;
12 height: 2160px;
13 overflow: hidden;
14 font-family: 'Inter', system-ui, -apple-system, sans-serif;
15 }
16
17 .stage {
18 position: relative;
19 width: 3840px;
20 height: 2160px;
21 background: linear-gradient(155deg, #eceae4 0%, #d9d6cd 55%, #cdc9bd 100%);
22 display: flex;
23 align-items: center;
24 overflow: hidden;
25 }
26
27 .glow {
28 position: absolute;
29 border-radius: 50%;
30 filter: blur(180px);
31 opacity: 0.55;
32 }
33 .glow-1 { width: 1400px; height: 1400px; top: -420px; left: -320px; background: #ffffff; opacity: 0.5; }
34 .glow-2 { width: 1200px; height: 1200px; bottom: -480px; right: -260px; background: #3a7a56; opacity: 0.16; }
35
36 .floor {
37 position: absolute;
38 left: 0; right: 0; bottom: 260px;
39 height: 1px;
40 background: linear-gradient(90deg, transparent, rgba(26,52,40,0.10) 30%, rgba(26,52,40,0.10) 70%, transparent);
41 }
42
43 .text-section {
44 position: relative;
45 z-index: 2;
46 width: 1180px;
47 padding-left: 160px;
48 padding-right: 60px;
49 }
50
51 .label {
52 font-size: 34px;
53 font-weight: 700;
54 letter-spacing: 0.18em;
55 text-transform: uppercase;
56 color: #3a7a56;
57 margin-bottom: 34px;
58 }
59
60 .headline {
61 font-size: 96px;
62 font-weight: 800;
63 line-height: 1.08;
64 color: #1a3428;
65 margin-bottom: 42px;
66 }
67
68 .headline .accent {
69 color: #3a7a56;
70 }
71
72 .subtext {
73 font-size: 38px;
74 font-weight: 400;
75 line-height: 1.5;
76 color: #5f6a62;
77 max-width: 820px;
78 }
79
80 .window-wrap {
81 position: relative;
82 z-index: 2;
83 flex: 1;
84 display: flex;
85 align-items: center;
86 justify-content: center;
87 padding-right: 140px;
88 perspective: 2400px;
89 }
90
91 .window {
92 width: 1760px;
93 height: 1560px;
94 border-radius: 46px;
95 background: rgba(255, 255, 255, 0.82);
96 border: 1.5px solid rgba(255, 255, 255, 0.9);
97 box-shadow:
98 0 6px 0 rgba(255,255,255,0.5) inset,
99 0 90px 160px rgba(20, 30, 24, 0.28),
100 0 30px 60px rgba(20, 30, 24, 0.16);
101 overflow: hidden;
102 display: flex;
103 flex-direction: column;
104 transform: rotateY(-4deg) rotateX(1deg);
105 }
106
107 .sheet-header {
108 flex-shrink: 0;
109 display: flex;
110 align-items: center;
111 justify-content: space-between;
112 padding: 38px 48px 30px;
113 }
114
115 .sheet-title {
116 font-size: 34px;
117 font-weight: 700;
118 color: #14211a;
119 }
120
121 .sheet-action {
122 font-size: 24px;
123 font-weight: 600;
124 color: #3a7a56;
125 }
126 .sheet-action.muted { color: #9aa39c; }
127
128 .divider {
129 height: 1.5px;
130 background: rgba(20, 33, 26, 0.08);
131 margin: 0 48px;
132 }
133
134 .section {
135 padding: 30px 48px 6px;
136 }
137
138 .section-label {
139 font-size: 19px;
140 font-weight: 600;
141 letter-spacing: 0.08em;
142 text-transform: uppercase;
143 color: #9aa39c;
144 margin-bottom: 16px;
145 }
146
147 .prompt-box {
148 background: rgba(20, 33, 26, 0.05);
149 border-radius: 20px;
150 padding: 24px 26px;
151 font-size: 21px;
152 line-height: 1.55;
153 color: #3f4a43;
154 min-height: 168px;
155 }
156
157 .footnote {
158 font-size: 17px;
159 color: #9aa39c;
160 margin-top: 14px;
161 line-height: 1.5;
162 }
163
164 .preset-list {
165 display: flex;
166 flex-direction: column;
167 gap: 14px;
168 }
169
170 .preset-row {
171 display: flex;
172 align-items: flex-start;
173 gap: 18px;
174 background: rgba(20, 33, 26, 0.05);
175 border-radius: 18px;
176 padding: 20px 24px;
177 }
178
179 .preset-row.active {
180 background: rgba(58, 122, 86, 0.12);
181 border: 1.5px solid rgba(58, 122, 86, 0.35);
182 }
183
184 .radio {
185 width: 22px;
186 height: 22px;
187 border-radius: 50%;
188 border: 2px solid #c3cac4;
189 margin-top: 4px;
190 flex-shrink: 0;
191 }
192
193 .radio.checked {
194 border-color: #3a7a56;
195 background: #3a7a56;
196 box-shadow: inset 0 0 0 4px #fff;
197 }
198
199 .preset-title {
200 font-size: 22px;
201 font-weight: 600;
202 color: #14211a;
203 }
204
205 .preset-sub {
206 font-size: 18px;
207 color: #8a938c;
208 margin-top: 3px;
209 }
210 </style>
211 </head>
212 <body>
213 <div class="stage">
214 <div class="glow glow-1"></div>
215 <div class="glow glow-2"></div>
216 <div class="floor"></div>
217
218 <div class="text-section">
219 <div class="label">Model Settings</div>
220 <div class="headline">
221 Set it once. <span class="accent">Keep it private.</span>
222 </div>
223 <div class="subtext">Tune the system prompt and response style — every setting stays on-device, just like every conversation.</div>
224 </div>
225
226 <div class="window-wrap">
227 <div class="window">
228 <div class="sheet-header">
229 <span class="sheet-action muted">Cancel</span>
230 <span class="sheet-title">Model Settings</span>
231 <span class="sheet-action">Save</span>
232 </div>
233
234 <div class="divider"></div>
235
236 <div class="section">
237 <div class="section-label">System Prompt</div>
238 <div class="prompt-box">You are Siti, a friendly and capable personal assistant that runs entirely on the user's device. Nothing the user says ever leaves the device.</div>
239 </div>
240
241 <div class="section">
242 <div class="section-label" style="margin-top: 10px;">Response Style</div>
243 <div class="preset-list">
244 <div class="preset-row active">
245 <div class="radio checked"></div>
246 <div>
247 <div class="preset-title">Balanced</div>
248 <div class="preset-sub">General-purpose responses with a bit of creativity.</div>
249 </div>
250 </div>
251 <div class="preset-row">
252 <div class="radio"></div>
253 <div>
254 <div class="preset-title">Deterministic</div>
255 <div class="preset-sub">Reproducible, focused answers.</div>
256 </div>
257 </div>
258 <div class="preset-row">
259 <div class="radio"></div>
260 <div>
261 <div class="preset-title">Fast</div>
262 <div class="preset-sub">Shorter responses with lower latency.</div>
263 </div>
264 </div>
265 </div>
266 </div>
267 </div>
268 </div>
269 </div>
270 </body>
271 </html>