175 lines
7.1 KiB
HTML
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>
|