Icons and descriptions

Mobile UI
2026-01-06 21:43:06 +01:00 · 2026-01-06 21:32:01 +01:00
6 changed files with 236 additions and 4 deletions
--- a/icon.svg
+++ b/icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fafafa"><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>
--- a/ui/favicon.ico
+++ b/ui/favicon.ico
--- a/ui/icon.png
+++ b/ui/icon.png
--- a/ui/index.html
+++ b/ui/index.html
@@ -5,11 +5,57 @@
        <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">
-                <div class="sidebar-header">
+            <aside class="sidebar" id="sidebar">
+                <div class="sidebar-header desktop-only">
                    <div class="brand-wrapper">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
@@ -100,6 +146,25 @@
                            autofocus
                            placeholder="Start writing something poetic..."
                        ></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>
--- a/ui/script.js
+++ b/ui/script.js
@@ -13,6 +13,9 @@ document.addEventListener('DOMContentLoaded', () => {
    const lengthInput = document.getElementById('length');
    const lengthValDisplay = document.getElementById('length-val');
    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 isFetching = false;
@@ -26,6 +29,16 @@ document.addEventListener('DOMContentLoaded', () => {
        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);
    lengthInput.addEventListener('input', updateUI);
    nGramSelect.addEventListener('change', () => {
@@ -40,8 +53,15 @@ document.addEventListener('DOMContentLoaded', () => {
        if (prompt.trim().length > 0) fetchPrediction(prompt);
    };

-    tempInput.addEventListener('change', triggerUpdate);
-    lengthInput.addEventListener('change', triggerUpdate);
+    tempInput.addEventListener('change', () => {
+        triggerUpdate();
+        // Optional: close sidebar on change if on mobile
+        // closeSidebarOnMobile();
+    });
+    
+    lengthInput.addEventListener('change', () => {
+        triggerUpdate();
+    });

    // --- Core Functions ---

@@ -88,6 +108,13 @@ document.addEventListener('DOMContentLoaded', () => {
        const editorText = editor.value;
        const space = (editorText.length > 0 && !/\s$/.test(editorText)) ? ' ' : '';
        suggestionOverlay.textContent = editorText + space + currentSuggestion;
+        
+        // Show/hide accept button
+        if (currentSuggestion) {
+            acceptSuggestionBtn.classList.add('visible');
+        } else {
+            acceptSuggestionBtn.classList.remove('visible');
+        }
    };
    
    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', () => {
        fetchPrediction(editor.value, 50);
+        closeSidebarOnMobile();
    });

    // Sync scroll
--- a/ui/style.css
+++ b/ui/style.css
@@ -30,12 +30,63 @@ body {
    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 {
    display: flex;
    height: 100vh;
    width: 100vw;
 }

+@media (max-width: 768px) {
+    .app-layout {
+        flex-direction: column;
+        height: calc(100vh - 57px); /* Subtract header height */
+    }
+}
+
 /* Sidebar */
 .sidebar {
    width: 300px;
@@ -45,12 +96,63 @@ body {
    flex-direction: column;
    padding: 1.5rem;
    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 {
    margin-bottom: 2.5rem;
 }

+@media (max-width: 768px) {
+    .sidebar-header {
+        margin-bottom: 1rem;
+    }
+}
+
 .brand-wrapper {
    display: flex;
    align-items: center;
@@ -77,6 +179,13 @@ body {
    flex-grow: 1;
 }

+@media (max-width: 768px) {
+    .settings {
+        gap: 1rem;
+        margin-bottom: 1rem;
+    }
+}
+
 .setting-item {
    display: flex;
    flex-direction: column;
@@ -180,6 +289,12 @@ label {
    border-top: 1px solid var(--border);
 }

+@media (max-width: 768px) {
+    .sidebar-footer {
+        display: none; /* Hide footer on mobile to save space */
+    }
+}
+
 .status-indicator {
    display: flex;
    align-items: center;
@@ -216,6 +331,14 @@ label {
    background-color: var(--background);
 }

+@media (max-width: 768px) {
+    .editor-main {
+        padding: 1rem;
+        height: 100%;
+        width: 100%;
+    }
+}
+
 .editor-container {
    width: 100%;
    max-width: 800px;
@@ -246,6 +369,13 @@ label {
    box-sizing: border-box;
 }

+@media (max-width: 768px) {
+    #editor, #suggestion-overlay {
+        padding: 1rem;
+        font-size: 1rem;
+    }
+}
+
 #editor {
    position: relative;
    z-index: 2;
Author	SHA1	Message	Date
N0VA	f1146ecdcb	Icons and descriptions	2026-01-06 21:43:06 +01:00
N0VA	9d5118f973	Mobile UI	2026-01-06 21:32:01 +01:00
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fafafa"><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>`