N0VA/Kreatyw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile UI

Browse Source
This commit is contained in:
N0VA
2026-01-06 21:32:01 +01:00
parent efb4436b00
commit 9d5118f973
3 changed files with 193 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ui/index.html
View File

@@ -7,9 +7,29 @@
<link rel="stylesheet" href="/ui/style.css" /> <link rel="stylesheet" href="/ui/style.css" />
</head> </head>
<body> <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"> <div class="app-layout">
<aside class="sidebar"> <aside class="sidebar" id="sidebar">
<div class="sidebar-header"> <div class="sidebar-header desktop-only">
<div class="brand-wrapper"> <div class="brand-wrapper">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -100,6 +120,9 @@
autofocus autofocus
placeholder="Start writing something poetic..." placeholder="Start writing something poetic..."
></textarea> ></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>
</div> </div>
</main> </main>

40
ui/script.js
View File

@@ -13,6 +13,9 @@ document.addEventListener('DOMContentLoaded', () => {
const lengthInput = document.getElementById('length'); const lengthInput = document.getElementById('length');
const lengthValDisplay = document.getElementById('length-val'); const lengthValDisplay = document.getElementById('length-val');
const generateBtn = document.getElementById('generate-more-btn'); const generateBtn = document.getElementById('generate-more-btn');
const sidebarToggle = document.getElementById('sidebar-toggle');
const sidebar = document.getElementById('sidebar');
const acceptSuggestionBtn = document.getElementById('accept-suggestion-btn');
let currentSuggestion = ''; let currentSuggestion = '';
let isFetching = false; let isFetching = false;
@@ -26,6 +29,16 @@ document.addEventListener('DOMContentLoaded', () => {
lengthValDisplay.textContent = lengthInput.value; lengthValDisplay.textContent = lengthInput.value;
}; };
sidebarToggle.addEventListener('click', () => {
sidebar.classList.toggle('open');
});
const closeSidebarOnMobile = () => {
if (window.innerWidth <= 768) {
sidebar.classList.remove('open');
}
};
tempInput.addEventListener('input', updateUI); tempInput.addEventListener('input', updateUI);
lengthInput.addEventListener('input', updateUI); lengthInput.addEventListener('input', updateUI);
nGramSelect.addEventListener('change', () => { nGramSelect.addEventListener('change', () => {
@@ -40,8 +53,15 @@ document.addEventListener('DOMContentLoaded', () => {
if (prompt.trim().length > 0) fetchPrediction(prompt); if (prompt.trim().length > 0) fetchPrediction(prompt);
}; };
tempInput.addEventListener('change', triggerUpdate); tempInput.addEventListener('change', () => {
lengthInput.addEventListener('change', triggerUpdate); triggerUpdate();
// Optional: close sidebar on change if on mobile
// closeSidebarOnMobile();
});
lengthInput.addEventListener('change', () => {
triggerUpdate();
});
// --- Core Functions --- // --- Core Functions ---
@@ -88,6 +108,13 @@ document.addEventListener('DOMContentLoaded', () => {
const editorText = editor.value; const editorText = editor.value;
const space = (editorText.length > 0 && !/\s$/.test(editorText)) ? ' ' : ''; const space = (editorText.length > 0 && !/\s$/.test(editorText)) ? ' ' : '';
suggestionOverlay.textContent = editorText + space + currentSuggestion; suggestionOverlay.textContent = editorText + space + currentSuggestion;
// Show/hide accept button
if (currentSuggestion) {
acceptSuggestionBtn.classList.add('visible');
} else {
acceptSuggestionBtn.classList.remove('visible');
}
}; };
const insertText = (text) => { const insertText = (text) => {
@@ -121,8 +148,17 @@ document.addEventListener('DOMContentLoaded', () => {
} }
}); });
acceptSuggestionBtn.addEventListener('click', () => {
if (currentSuggestion) {
insertText(currentSuggestion);
fetchPrediction(editor.value);
editor.focus();
}
});
generateBtn.addEventListener('click', () => { generateBtn.addEventListener('click', () => {
fetchPrediction(editor.value, 50); fetchPrediction(editor.value, 50);
closeSidebarOnMobile();
}); });
// Sync scroll // Sync scroll

130
ui/style.css
View File

@@ -30,12 +30,63 @@ body {
overflow: hidden; overflow: hidden;
} }
@media (max-width: 768px) {
body {
height: auto;
overflow: auto;
}
}
/* Mobile Header */
.mobile-header {
display: none;
background-color: var(--card);
border-bottom: 1px solid var(--border);
padding: 0.75rem 1rem;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.btn-icon {
background: transparent;
border: none;
color: var(--foreground);
cursor: pointer;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.desktop-only {
display: block;
}
@media (max-width: 768px) {
.mobile-header {
display: flex;
}
.desktop-only {
display: none;
}
}
.app-layout { .app-layout {
display: flex; display: flex;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
} }
@media (max-width: 768px) {
.app-layout {
flex-direction: column;
height: calc(100vh - 57px); /* Subtract header height */
}
}
/* Sidebar */ /* Sidebar */
.sidebar { .sidebar {
width: 300px; width: 300px;
@@ -45,12 +96,63 @@ body {
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;
flex-shrink: 0; flex-shrink: 0;
transition: transform 0.3s ease-in-out;
}
@media (max-width: 768px) {
.sidebar {
position: fixed;
top: 57px;
left: 0;
width: 100%;
height: calc(100vh - 57px);
z-index: 90;
transform: translateX(-100%);
border-right: none;
}
.sidebar.open {
transform: translateX(0);
}
}
/* Floating Action Button for Suggestions */
.btn-floating {
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background-color: var(--primary);
color: var(--primary-foreground);
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
cursor: pointer;
display: none; /* Hidden by default, shown when suggestion exists */
align-items: center;
justify-content: center;
z-index: 10;
transition: transform 0.2s, opacity 0.2s;
}
.btn-floating:active {
transform: scale(0.95);
}
.btn-floating.visible {
display: flex;
} }
.sidebar-header { .sidebar-header {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
@media (max-width: 768px) {
.sidebar-header {
margin-bottom: 1rem;
}
}
.brand-wrapper { .brand-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -77,6 +179,13 @@ body {
flex-grow: 1; flex-grow: 1;
} }
@media (max-width: 768px) {
.settings {
gap: 1rem;
margin-bottom: 1rem;
}
}
.setting-item { .setting-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -180,6 +289,12 @@ label {
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
} }
@media (max-width: 768px) {
.sidebar-footer {
display: none; /* Hide footer on mobile to save space */
}
}
.status-indicator { .status-indicator {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -216,6 +331,14 @@ label {
background-color: var(--background); background-color: var(--background);
} }
@media (max-width: 768px) {
.editor-main {
padding: 1rem;
height: 100%;
width: 100%;
}
}
.editor-container { .editor-container {
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
@@ -246,6 +369,13 @@ label {
box-sizing: border-box; box-sizing: border-box;
} }
@media (max-width: 768px) {
#editor, #suggestion-overlay {
padding: 1rem;
font-size: 1rem;
}
}
#editor { #editor {
position: relative; position: relative;
z-index: 2; z-index: 2;