Files
Kreatyw/ui/index.html
2026-01-07 11:17:49 +01:00

175 lines
7.1 KiB
HTML

<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kreatyw</title>
<link rel="stylesheet" href="/ui/style.css" />
<link rel="icon" type="image/x-icon" href="/ui/favicon.ico" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Kreatyw" />
<meta property="og:description" content="" />
<meta property="og:image" content="/ui/icon.png" />
<meta name="theme-color" content="#fafafa" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Kreatyw" />
<meta name="twitter:image" content="/ui/icon.png" />
</head>
<body>
<div class="mobile-header">
<div class="brand-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="white"
class="sparkle-icon"
>
<path
d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"
/>
</svg>
<h1 class="brand">Kreatyw</h1>
</div>
<button id="sidebar-toggle" class="btn-icon">
<svg
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"
>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
</div>
<div class="app-layout">
<aside class="sidebar" id="sidebar">
<div class="sidebar-header desktop-only">
<div class="brand-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="white"
class="sparkle-icon"
>
<path
d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"
/>
</svg>
<h1 class="brand">Kreatyw</h1>
</div>
</div>
<nav class="settings">
<div class="setting-item">
<div class="setting-label">
<label for="n-gram">Complexity (N)</label>
<span class="value-badge"
>N=<span id="n-val">4</span></span
>
</div>
<select id="n-gram" class="select-input">
<option value="2">2 (Bigram)</option>
<option value="3">3 (Trigram)</option>
<option value="4" selected>4 (Tetragram)</option>
<option value="5">5 (Pentagram)</option>
</select>
</div>
<div class="setting-item">
<div class="setting-label">
<label for="temperature">Creativity (Temp)</label>
<span class="value-badge" id="temp-val">1.6</span>
</div>
<input
type="range"
id="temperature"
min="0.1"
max="2.0"
step="0.1"
value="1.6"
class="slider"
/>
</div>
<div class="setting-item">
<div class="setting-label">
<label for="length">Token Length</label>
<span class="value-badge" id="length-val">5</span>
</div>
<input
type="range"
id="length"
min="1"
max="50"
step="1"
value="5"
class="slider"
/>
</div>
<div class="action-area">
<button id="generate-more-btn" class="btn btn-primary">
Generate Paragraph
</button>
</div>
</nav>
<div class="sidebar-footer">
<div class="status-indicator">
<span class="status-dot"></span>
<span id="status">Idle</span>
</div>
</div>
</aside>
<main class="editor-main">
<div class="editor-container">
<div class="editor-viewport card">
<div id="suggestion-overlay"></div>
<textarea
id="editor"
spellcheck="false"
autofocus
placeholder="Start typing here..."
></textarea>
<button
id="accept-suggestion-btn"
class="btn-floating"
title="Accept Suggestion"
>
<svg
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"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</button>
</div>
</div>
</main>
</div>
<script src="/ui/script.js"></script>
</body>
</html>