Sami20178 · Sami20178 · Apr 7, 2026 · Apr 7, 2026 · chatgpt-codex-connector · Apr 7, 2026
diff --git a/README.md b/README.md
@@ -1,2 +1,19 @@
 # Sami-App
-Sami App entwickeln
+
+Sami App als **Samibookkonsole Frontend-Prototyp** mit mehr Menüs, A-Z Launcher und AI-Antworten.
+
+## Features
+
+- Neues Home-Design im Stil einer Desktop/Konsole-Mischung.
+- Große Navigation: Home, A-Z Apps, Spiele, Apps, Tools, Media, KI/Modu, Start, Lernen, Store, Einstellungen, Account, Hilfe, Abmelden.
+- A-Z App Launcher mit alphabetischer Filterung.
+- AI-Ansicht mit dynamischen Antworten (intent-basiert) für Code, Python, Lernplan, Social-Clones und Design-Fragen.
+- Suchfeld mit Bereichs-Navigation und Schnellkacheln.
+- Theme-Umschaltung (Dark/Light).
+
+## Start
+
+1. `index.html` im Browser öffnen.
+2. Menü oder Schnellkacheln nutzen.
+3. In `KI / Modu` Fragen stellen.
+4. In `A-Z Apps` per Buchstaben filtern.
diff --git a/index.html b/index.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sami Ki / AI App - Samibookkonsole</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="app-shell">
+      <aside class="sidebar">
+        <header class="profile-card compact">
+          <div class="avatar yellow"></div>
+          <h1>Sami Soliman</h1>
+          <p class="username">@sam</p>
+        </header>
+
+        <nav>
+          <button class="nav-item active" data-view="home">🏠 Home</button>
+          <button class="nav-item" data-view="a-z">🔤 A-Z Apps</button>
+          <button class="nav-item" data-view="games">🎮 Spiele</button>
+          <button class="nav-item" data-view="apps">🧩 Apps</button>
+          <button class="nav-item" data-view="tools">🛠️ Tools</button>
+          <button class="nav-item" data-view="media">🎬 Media</button>
+          <button class="nav-item" data-view="ai">🧠 KI / Modu</button>
+          <button class="nav-item" data-view="start">⭐ Start</button>
+          <button class="nav-item" data-view="learn">📘 Lernen</button>
+          <button class="nav-item" data-view="store">🛒 Store</button>
+          <button class="nav-item" data-view="settings">⚙️ Einstellungen</button>
+          <button class="nav-item" data-view="account">👤 Account</button>
+          <button class="nav-item" data-view="help">❓ Hilfe</button>
+          <button class="nav-item" data-view="logout">🚪 Abmelden</button>
+        </nav>
+      </aside>
+
+      <main class="content">
+        <section class="hero">
+          <div>
+            <h2>🤖 Sami Ki / AI App</h2>
+            <p>Sami AI hilft mit Schreiben, Code und Sprachideen in der Samibookkonsole.</p>
+          </div>
+          <button id="theme-toggle">🌗 Theme</button>
+        </section>
+
+        <section class="search-wrap">
+          <input id="global-search" type="text" placeholder="Suche starten..." />
+          <button id="search-btn">mehr</button>
+        </section>
+
+        <section class="view active" data-view="home">
+          <div class="quick-grid">
+            <button class="quick-tile" data-jump="start">⭐ <span>Start</span></button>
+            <button class="quick-tile" data-jump="apps">📣 <span>Extras</span></button>
+            <button class="quick-tile" data-jump="games">🎮 <span>Spiele</span></button>
+            <button class="quick-tile" data-jump="settings">🔧 <span>Admin</span></button>
+            <button class="quick-tile" data-jump="account">⬆️ <span>Upgraden</span></button>
+            <button class="quick-tile" data-jump="store">💶 <span>Preise</span></button>
+            <button class="quick-tile" data-jump="apps">🚀 <span>Module</span></button>
+            <button class="quick-tile" data-jump="tools">📁 <span>Tools</span></button>
+            <button class="quick-tile" data-jump="ai">▶️ <span>Screen</span></button>
+            <button class="quick-tile" data-jump="settings">🎨 <span>Themes</span></button>
+            <button class="quick-tile" data-jump="learn">🎯 <span>Mini-Module</span></button>
+            <button class="quick-tile" data-jump="a-z">🔤 <span>A-Z</span></button>
+          </div>
+        </section>
+
+        <section class="view" data-view="a-z">
+          <article class="panel">
+            <h3>🔤 A-Z App Launcher</h3>
+            <div id="az-filter" class="az-filter"></div>
+            <ul id="az-list" class="az-list"></ul>
+          </article>
+        </section>
+
+        <section class="view" data-view="ai">
+          <article class="panel">
+            <h3>Echte AI Antworten (lokal intelligent)</h3>
+            <p class="muted">Schreibe eine Frage. Die AI erkennt Absicht (Code, Lernen, Planung, Allgemein) und antwortet passend.</p>
+            <div id="ai-messages" class="ai-messages">
+              <p><strong>Sami AI:</strong> Hallo! Frag mich nach Code, Python, App-Ideen oder Lernplänen.</p>
+            </div>
+            <div class="chat-send">
+              <input id="ai-input" type="text" placeholder="Frage an Sami AI..." />
+              <button id="ai-send">Senden</button>
+            </div>
+          </article>
+        </section>
+
+        <section class="view" data-view="games"><article class="panel"><h3>🎮 Spiele Menü</h3><ul><li>Quiz Arena</li><li>Snake Turbo</li><li>Memory Blitz</li><li>Racing Mini</li><li>Galaxy Shooter</li></ul></article></section>
+
+        <section class="view" data-view="apps"><article class="panel"><h3>🧩 Apps Menü</h3><ul><li>Instagram Cloun</li><li>Facebook Cloun</li><li>Waapapp Cloun</li><li>Code Cloun</li><li>Pyphone Cloun</li></ul></article></section>
+
+        <section class="view" data-view="tools"><article class="panel"><h3>🛠️ Tools</h3><ul><li>Rechner</li><li>Datei Explorer</li><li>Clipboard Manager</li><li>Screenshot Hub</li></ul></article></section>
+
+        <section class="view" data-view="media"><article class="panel"><h3>🎬 Media</h3><ul><li>Music Player</li><li>Video Hub</li><li>Wallpaper Engine</li></ul></article></section>
+
+        <section class="view" data-view="start"><article class="panel"><h3>⭐ Start Center</h3><p>Willkommen in der Samibookkonsole – Desktop + Konsole + Mobile in einem Design.</p></article></section>
+
+        <section class="view" data-view="learn"><article class="panel"><h3>📘 Lernen</h3><p>JS, Python, AI Builder, UI/UX und API Grundlagen.</p></article></section>
+
+        <section class="view" data-view="store"><article class="panel"><h3>🛒 Store</h3><ul><li>Premium Themes</li><li>Mini-Module Packs</li><li>Pro Tools Bundle</li></ul></article></section>
+
+        <section class="view" data-view="settings">
+          <article class="panel">
+            <h3>⚙️ Einstellungen</h3>
+            <label class="row"><span>Dark Mode</span><input id="dark-switch" type="checkbox" checked /></label>
+            <label class="row"><span>AI Schnellmodus</span><input id="ai-fast" type="checkbox" checked /></label>
+          </article>
+        </section>
+
+        <section class="view" data-view="account"><article class="panel"><h3>👤 Account</h3><p>Name: Sami Soliman</p><p>Plan: Premium Alpha</p></article></section>
+
+        <section class="view" data-view="help"><article class="panel"><h3>❓ Hilfe</h3><p>Tipps: Nutze A-Z, Suche und KI / Modu für schnelle Navigation.</p></article></section>
+
+        <section class="view" data-view="logout"><article class="panel"><h3>🚪 Abmelden</h3><p>Du wurdest erfolgreich abgemeldet (Demo).</p></article></section>
+      </main>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,136 @@
+const navButtons = document.querySelectorAll('.nav-item');
+const views = document.querySelectorAll('.view');
+const quickTiles = document.querySelectorAll('.quick-tile');
+
+const themeToggle = document.getElementById('theme-toggle');
+const darkSwitch = document.getElementById('dark-switch');
+
+const aiInput = document.getElementById('ai-input');
+const aiSend = document.getElementById('ai-send');
+const aiMessages = document.getElementById('ai-messages');
+
+const globalSearch = document.getElementById('global-search');
+const searchBtn = document.getElementById('search-btn');
+
+const azFilter = document.getElementById('az-filter');
+const azList = document.getElementById('az-list');
+
+const appNames = [
+  'AI Studio', 'App Center', 'Browser Pro', 'Cloud Sync', 'Code Cloun', 'Design Lab',
+  'Explorer', 'Facebook Cloun', 'File Guard', 'Game Hub', 'Help Center', 'Instagram Cloun',
+  'JavaScript Learn', 'Keyboard Studio', 'Launcher', 'Media Deck', 'Notes', 'Optimizer',
+  'Pyphone Cloun', 'Quick Share', 'Recorder', 'Settings+', 'Theme Maker', 'Updater',
+  'Video Mix', 'Waapapp Cloun', 'X-Tools', 'YouStudio', 'Zen Mode'
+];
+
+function setActiveView(viewName) {
+  views.forEach((view) => {
+    view.classList.toggle('active', view.dataset.view === viewName);
+  });
+
+  navButtons.forEach((button) => {
+    button.classList.toggle('active', button.dataset.view === viewName);
+  });
+}
+
+function smartAnswer(question) {
+  const q = question.toLowerCase();
+
+  if (q.includes('python')) return 'Python Tipp: Starte mit Funktionen, Listen und kleinen CLI-Projekten. Soll ich dir eine Übung erstellen?';
+  if (q.includes('code') || q.includes('javascript') || q.includes('js')) return 'Code-Modus: Ich empfehle eine Komponenten-Struktur (HTML/CSS/JS getrennt) und dann Schritt für Schritt Features.';
+  if (q.includes('instagram') || q.includes('facebook') || q.includes('whatsapp')) return 'Social-Clone Plan: 1) UI 2) State-Management 3) Auth 4) Realtime Chat/Feed 5) Backend API.';
+  if (q.includes('lernen') || q.includes('kurs') || q.includes('plan')) return 'Lernplan: 30 Min pro Tag — 10 Min Theorie, 15 Min Coden, 5 Min Reflektion + Notizen.';
+  if (q.includes('samibook') || q.includes('konsole') || q.includes('design')) return 'Samibookkonsole Design: Kombiniere Dock-Icons, linke Sidebar, Fensterkarten und ein Such-Launcher wie bei Desktop-OS.';
+
+  return 'Gute Frage! Ich kann dir bei App-Planung, UI, Python, JS und Feature-Ideen helfen. Sag mir dein Ziel in 1 Satz.';
+}
+
+function addAiMessage(author, text) {
+  if (!aiMessages) return;
+  const msg = document.createElement('p');
+  msg.innerHTML = `<strong>${author}:</strong> ${text}`;
+  aiMessages.append(msg);
+  aiMessages.scrollTop = aiMessages.scrollHeight;
+}
+
+function renderAZ(letter = 'ALL') {
+  if (!azList) return;
+  azList.innerHTML = '';
+
+  const filtered = appNames.filter((name) => letter === 'ALL' || name.toUpperCase().startsWith(letter));
+
+  filtered.forEach((name) => {
+    const li = document.createElement('li');
+    li.textContent = name;
+    azList.append(li);
+  });
+}
+
+function initAZFilter() {
+  if (!azFilter) return;
+
+  const letters = ['ALL', ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];
+  letters.forEach((letter) => {
+    const button = document.createElement('button');
+    button.textContent = letter;
+    button.className = 'az-btn';
+    button.addEventListener('click', () => renderAZ(letter));
+    azFilter.append(button);
+  });
+
+  renderAZ();
+}
+
+navButtons.forEach((button) => {
+  button.addEventListener('click', () => setActiveView(button.dataset.view));
+});
+
+quickTiles.forEach((tile) => {
+  tile.addEventListener('click', () => setActiveView(tile.dataset.jump));
+});
+
+if (themeToggle) {
+  themeToggle.addEventListener('click', () => {
+    document.body.classList.toggle('light');
+    if (darkSwitch) darkSwitch.checked = !document.body.classList.contains('light');
+  });
+}
+
+if (darkSwitch) {
+  darkSwitch.addEventListener('change', () => {
+    document.body.classList.toggle('light', !darkSwitch.checked);
+  });
+}
+
+if (aiSend && aiInput) {
+  aiSend.addEventListener('click', () => {
+    const question = aiInput.value.trim();
+    if (!question) return;
+
+    addAiMessage('Du', question);
+    addAiMessage('Sami AI', smartAnswer(question));
+    aiInput.value = '';
+  });
+}
+
+if (searchBtn && globalSearch) {
+  searchBtn.addEventListener('click', () => {
+    const query = globalSearch.value.toLowerCase();
+
+    if (!query) {
+      setActiveView('home');
+      return;
+    }
+
+    const map = [
+      ['a-z', 'a-z'], ['spiel', 'games'], ['app', 'apps'], ['tool', 'tools'], ['media', 'media'],
+      ['ai', 'ai'], ['ki', 'ai'], ['lern', 'learn'], ['store', 'store'], ['hilfe', 'help'],
+      ['einst', 'settings'], ['konto', 'account'], ['start', 'start']
+    ];
+
+    const found = map.find(([key]) => query.includes(key));
+    setActiveView(found ? found[1] : 'home');
+  });
+}
+
+initAZFilter();
diff --git a/styles.css b/styles.css
@@ -0,0 +1,86 @@
+:root {
+  --bg: #06080f;
+  --surface: #0c121d;
+  --text: #f0f6ff;
+  --muted: #9fb4ca;
+  --accent: #2dbbff;
+  --line: rgba(74, 156, 224, 0.45);
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
+  color: var(--text);
+  background: radial-gradient(circle at top, #101829 0, #05070d 60%);
+}
+
+body.light {
+  --surface: #ffffff;
+  --text: #1b2834;
+  --muted: #496175;
+  --line: rgba(37, 111, 167, 0.35);
+  background: linear-gradient(180deg, #f4faff, #deefff);
+}
+
+.app-shell { display: grid; grid-template-columns: 255px 1fr; min-height: 100vh; }
+.sidebar { background: #030509; border-right: 1px solid var(--line); padding: 1rem 0.8rem; overflow: auto; }
+body.light .sidebar { background: #edf6ff; }
+
+.profile-card.compact { display: flex; flex-direction: column; gap: 0.3rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 0.9rem; margin-bottom: 0.9rem; }
+.avatar.yellow { width: 48px; height: 48px; border-radius: 999px; background: #ffe539; }
+.profile-card h1 { margin: 0; font-size: 1.6rem; }
+.username { margin: 0; color: var(--muted); }
+
+.nav-item {
+  width: 100%; text-align: left; margin: 0.25rem 0; border: 0; border-radius: 10px;
+  padding: 0.72rem 0.7rem; background: linear-gradient(90deg, #081b2b, #12283c); color: #eff7ff; cursor: pointer;
+}
+.nav-item.active { background: linear-gradient(90deg, #2eb8ff, #1c5f8d); }
+
+.content { padding: 1rem; background: linear-gradient(180deg, rgba(4, 9, 15, 0.9), rgba(3, 6, 11, 0.98)); }
+body.light .content { background: transparent; }
+
+.hero { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); padding: 1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
+.hero h2 { margin: 0; font-size: 2rem; }
+.hero p { margin: 0.35rem 0 0; color: var(--muted); }
+
+#theme-toggle, #search-btn, #ai-send, .az-btn {
+  border: 0; border-radius: 10px; padding: 0.64rem 0.85rem;
+  background: linear-gradient(90deg, #081d2e, #1a3248); color: #e8f5ff; cursor: pointer;
+}
+
+.search-wrap { margin-top: 0.75rem; display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
+input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem 0.8rem; background: #050b15; color: #cde8ff; }
+body.light input { background: #f7fbff; color: #0e2638; }
+
+.quick-grid { margin-top: 0.9rem; display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 0.7rem; }
+.quick-tile {
+  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text);
+  min-height: 95px; display: grid; place-items: center; align-content: center; gap: 0.35rem; font-size: 1.65rem; cursor: pointer;
+}
+.quick-tile span { font-size: 0.92rem; }
+
+.view { display: none; margin-top: 0.8rem; }
+.view.active { display: block; }
+
+.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 1rem; }
+.panel h3 { margin-top: 0; }
+.panel ul { margin: 0; padding-left: 1.2rem; }
+.muted { color: var(--muted); }
+
+.ai-messages { border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem; min-height: 170px; max-height: 300px; overflow: auto; background: rgba(5, 12, 20, 0.75); }
+.chat-send { margin-top: 0.6rem; display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
+.row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 0.55rem 0; }
+
+.az-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
+.az-btn { padding: 0.4rem 0.55rem; min-width: 40px; }
+.az-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
+.az-list li { border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.6rem; background: rgba(11, 26, 41, 0.5); }
+
+@media (max-width: 980px) {
+  .app-shell { grid-template-columns: 1fr; }
+  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
+  .quick-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
+}