From 8f6d8f2e518171537d9fdb326aa93985e8e3fe79 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Mon, 2 Jun 2025 23:25:10 +0200
Subject: [PATCH] auto-git:  [change] index.html

---
 index.html | 488 ++++++++++++++++++++---------------------------------
 1 file changed, 184 insertions(+), 304 deletions(-)

diff --git a/index.html b/index.html
index 121afbc..80b5ab9 100644
--- a/index.html
+++ b/index.html
@@ -5,327 +5,207 @@
   <title>auto-git</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <style>
-:root {
-    --bg-main: #fff;
-    --bg-sidebar: #fff1f2;
-    --accent: #9f1239;
-    --border: #ffe4e6;
-}
+    :root {
+      /* Default-Modus: Weißes Panel mit Rosa-Akzenten */
+      --bg-main:    #fff;        /* Hintergrund Content */
+      --bg-sidebar: #fff1f2;     /* Sidebar */
+      --accent:     #9f1239;     /* Rosa */
+      --border:     #ffe4e6;
+    }
+    body.sky-mode {
+      /* Sky-Mode: Himmelshintergrund und passende Akzente */
+      --bg-main:    rgb(173,216,230); /* sanftes Baby-Blau */
+      --bg-sidebar: rgb(200,220,240); /* etwas dunkleres Blau */
+      --accent:     rgb(20,60,100);   /* dunkles Marine-Blau als Akzent */
+      --border:     rgb(180,200,220);
+    }
 
-body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    margin: 0;
-    background: var(--bg-main);
-    color: #23262f;
-}
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      overflow: hidden;
+    }
 
-.container {
-    max-width: 850px;
-    margin: 3em auto;
-    background: var(--bg-main);
-    padding: 2em 2em 2.5em 2em;
-    border-radius: 18px;
-    box-shadow: 0 6px 36px rgba(159,18,57,0.09), 0 2px 8px rgba(159,18,57,0.04);
-    border: 1.5px solid var(--border);
-}
+    /* Außenschale für den Diff: overflow + max-height */
+    .diff-container {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease;
+      background-color: #f3f4f6;
+    }
 
-h2 {
-    margin: 0 0 1.2em 0;
-    font-size: 2.1em;
-    font-weight: 700;
-    color: var(--accent);
-    letter-spacing: -0.5px;
-}
+    /* Pfeil-Icon: 90°-Rotation */
+    .rotate {
+      transition: transform 0.3s ease;
+    }
+    .rotate.open {
+      transform: rotate(90deg);
+    }
 
-.section {
-    margin-bottom: 2.2em;
-}
+    /* Diff-Zeilen hervorheben */
+    .diff-line {
+      white-space: pre-wrap;
+      font-family: monospace;
+    }
+    .diff-line.addition {
+      background-color: #dafbe1; /* GitHub-grün */
+    }
+    .diff-line.deletion {
+      background-color: #ffeef0; /* GitHub-rot */
+    }
+    /* Deaktivierter Button */
+    .disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    /* verhindert den Hover-Effekt, wenn disabled */
+    button.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+    button.disabled:hover {
+      background-color: transparent;
+    }
 
-input[type="text"] {
-    width: 68%;
-    font-size: 1.07em;
-    padding: 0.7em 1.2em;
-    border: 2px solid var(--border);
-    border-radius: 7px;
-    background: #fff6fa;
-    transition: border 0.2s;
-    color: #681128;
-}
-input[type="text"]:focus {
-    outline: none;
-    border-color: var(--accent);
-    background: #fff9fc;
-}
+    @keyframes glow { 
+      0%, 100% { box-shadow: 0 0 4px gold; }
+      50%      { box-shadow: 0 0 12px gold; }
+    }
 
-button {
-    font-size: 1.05em;
-    font-weight: 500;
-    padding: 0.6em 1.6em;
-    margin-left: 1em;
-    background: var(--accent);
-    color: #fff;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    box-shadow: 0 1.5px 6px rgba(159,18,57,0.09);
-    transition: background 0.18s, box-shadow 0.15s;
-}
-button:disabled {
-    background: #ffd5de;
-    color: #fff;
-    cursor: not-allowed;
-}
+    /* Klasse für den aktuellen Commit */
+    .current-commit {
+      animation: glow 4s infinite ease-in-out;
+      /* stell sicher, dass Du überhaupt eine sichtbare Border hast: */
+      border-width: 1px !important;
+      border-style: solid !important;
+      border-color: gold !important;
+    }
+    .needs-relocation {
+      opacity: 0.5;
+      filter: grayscale(1);
+      pointer-events: auto !important; /* Damit Buttons weiter gehen */
+    }
+    .relocation-warning-symbol {
+      color: #e11d48;
+      font-weight: bold;
+      font-size: 1.2em;
+      margin-right: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
 
-.spinner {
-    display: none;
-    margin-left: 1em;
-    font-size: 1em;
-    color: var(--accent);
-}
-.spinner.active {
-    display: inline-block;
-}
+    #currentTitle {
+      /* erlauben, dass der Text umbricht */
+      white-space: normal;          
+      word-break: break-all;        /* bricht auch mitten in langen Wörtern */
+      overflow-wrap: anywhere;      /* bricht an Notfällen wie '/' */
+      /* keine Ellipse mehr */
+      overflow: visible;
+      /* falls der Parent eine horizontale Scrollbar bekommt, wird sie nicht vom Titel verursacht */
+    }
 
-label {
-    font-weight: 600;
-    color: #7b1930;
-    margin-bottom: 0.5em;
-    display: block;
-    font-size: 1.02em;
-}
+    /* Sicherstellen, dass der Content-Bereich nicht horizontal scrollt */
+    .flex-1.p-4.overflow-y-auto {
+      overflow-x: hidden;
+    }
 
-#moreBtn {
-    display: none;
-    margin-top: 1em;
-}
+    /* generelle List-Items in der Sidebar */
+    aside ul#folderList li {
+      background: transparent;          /* kein festes Rosa mehr */
+      color: var(--accent);             /* Text- und Icon-Farbe */
+      border-radius: 0.375rem;          /* gleiche r-Klasse wie before */
+      transition: background 0.2s ease;
+    }
 
-/* Gallery: immer 4 pro Zeile, responsive */
-.images,
-.models {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 16px;
-    margin-top: 1.4em;
-}
-@media (max-width: 1100px) {
-    .images, .models { grid-template-columns: repeat(3, 1fr); }
-}
-@media (max-width: 820px) {
-    .images, .models { grid-template-columns: repeat(2, 1fr); }
-}
-@media (max-width: 600px) {
-    .images, .models { grid-template-columns: 1fr; }
-}
-.images img,
-.model-thumb {
-    width: 100%;
-    aspect-ratio: 1/1;
-    object-fit: cover;
-    border: 2px solid var(--border);
-    border-radius: 11px;
-    cursor: pointer;
-    background: var(--bg-sidebar);
-    transition: box-shadow 0.18s, border-color 0.14s;
-}
-.images img:hover,
-.model-thumb:hover {
-    box-shadow: 0 0 0 3px #fda4af65;
-    border-color: var(--accent);
-}
-.model-thumb {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
+    /* Hover-Effekt */
+    aside ul#folderList li:hover,
+    aside ul#folderList li.selected {
+      background: var(--border);        /* statt hover:bg-[#fecdd3] */
+    }
 
-/* Context menu */
-#ctxMenu {
-    position: absolute;
-    z-index: 5000;
-    background: #fff;
-    border: 1.5px solid var(--border);
-    border-radius: 8px;
-    box-shadow: 0 4px 24px rgba(159,18,57,0.10);
-    display: none;
-    min-width: 164px;
-    font-size: 1em;
-    overflow: hidden;
-}
-#ctxMenu div {
-    padding: 0.77em 1.21em;
-    cursor: pointer;
-    transition: background 0.13s;
-}
-#ctxMenu div:hover {
-    background: #fff1f2;
-    color: var(--accent);
-}
+    /* Icon und Text separat noch sicher auf var(--accent) setzen */
+    aside ul#folderList li svg,
+    aside ul#folderList li span {
+      color: var(--accent) !important;
+    }
 
-/* LLM & JSON Output Boxes */
-.section:has(#llm_out:empty) {
-    display: none !important;
-}
-#llm_out {
-    background: #fff1f2;
-    padding: 1em 1.1em;
-    border: 1.7px solid var(--border);
-    border-radius: 7px;
-    max-height: 220px;
-    overflow-y: auto;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    font-family: 'JetBrains Mono', 'Fira Mono', 'Menlo', monospace;
-    font-size: 1em;
-    margin-bottom: 1.1em;
-    margin-top: 0.2em;
-    color: #7b1930;
-}
+    .diff-container {
+      position: relative;
+    }
+    .copy-diff-btn {
+      all: unset !important;
+      position: absolute !important;
+      top: 0.25rem !important;    /* knapp unter dem Container-Rand */
+      right: 0.25rem !important;
+      padding: 0.25rem !important;
+      border-radius: 0.25rem !important;
+      cursor: pointer !important;
+      background: transparent !important;
+    }
+    .copy-diff-btn:hover {
+      background: transparent !important;
+    }
+    /* Entferne ggf. globales pre-Top-Padding */
+    .diff-container pre {
+      padding-top: 0 !important;
+    }
 
-#json_out {
-    background: #fff1f2;
-    padding: 1em 1.1em;
-    border: 1.7px solid var(--border);
-    border-radius: 7px;
-    width: 100%;
-    height: 220px;
-    resize: none;
-    font-family: 'JetBrains Mono', 'Fira Mono', 'Menlo', monospace;
-    font-size: 1em;
-    margin: 0 auto 1.2em;
-    box-sizing: border-box;
-    color: #681128;
-}
+    .sidebar, .interaction-bar, .content-area button {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+    .content-area ul#contentList li {
+      word-break: break-all;
+      overflow-wrap: anywhere;
+    }
+    #folderHierarchyDropdown.open {
+      display: block;
+    }
+    #folderTitleArrow.open {
+      transform: rotate(90deg);
+    }
+    .interaction-bar {
+      min-height: 3.5rem;   /* = h-16 (56px, wie jetzt schon) */
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+      font-size: 0.95rem;
+    }
 
-/* Tabs */
-.tabs {
-    display: flex;
-    gap: 1.4em;
-    margin-bottom: 1.4em;
-}
-.tab {
-    background: #fff1f2;
-    border: none;
-    padding: 0.72em 2.2em;
-    cursor: pointer;
-    border-radius: 8px 8px 0 0;
-    font-weight: 600;
-    font-size: 1.11em;
-    color: #b91c3a;
-    transition: background 0.13s, color 0.11s;
-}
-.tab.active {
-    background: #fff;
-    color: var(--accent);
-    border-bottom: 2.5px solid var(--accent);
-    z-index: 1;
-}
+    .interaction-bar .flex {
+      line-height: 1.2;     /* wenig Zeilenabstand */ 
+      height: 100%;         /* volle Höhe ausnutzen, vertikal zentrieren */
+      margin-left: 90px;
+    }
 
-/* Lightbox & Overlays – identisch für Bilder & 3D! */
-#lightboxOverlay,
-#lightbox3DOverlay {
-    display: none;
-    position: fixed;
-    z-index: 3000;
-    top: 0; left: 0; width: 100vw; height: 100vh;
-    background: rgba(255, 17, 62, 0.84); /* leichter Rot-Ton im Overlay */
-    justify-content: center;
-    align-items: center;
-    transition: background 0.18s;
-}
+    .interaction-bar span {
+      font-size: inherit !important; /* gleiche Größe wie restlicher Text */
+      font-weight: 800;
+    }
 
-#lightboxContent,
-#lightbox3DContent {
-    position: relative;
-    max-width: 96vw;
-    max-height: 96vh;
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
+    .interaction-bar div > div {
+      margin-bottom: 0.1em; /* nur minimal Abstand */
+    }
+    .interaction-bar div > div:last-child {
+      margin-bottom: 0;
+    }
+    .commits-glow { 
+      text-shadow:
+        1px 1px 2px rgba(0,0,0,0.25),
+        0px 1px 1px color-mix(in srgb, currentColor 40%, black);
+    }
 
-#lightboxImg {
-    max-width: 92vw;
-    max-height: 87vh;
-    border-radius: 12px;
-    background: #fff1f2;
-    border: 2.5px solid var(--border);
-    box-shadow: 0 5px 34px rgba(159,18,57,0.14);
-    display: block;
-}
-
-/* X-Button – immer oben rechts */
-#lightboxClose,
-#lightbox3DClose {
-    position: fixed;
-    top: 24px;
-    right: 32px;
-    z-index: 3100;
-    background: none;
-    border: none;
-    color: var(--accent);
-    font-size: 2.3em;
-    font-weight: 500;
-    padding: 0;
-    cursor: pointer;
-    box-shadow: none;
-    line-height: 1;
-    transition: color 0.18s;
-}
-#lightboxClose:hover,
-#lightbox3DClose:hover {
-    color: #fd4c77;
-}
-
-/* Pfeile – immer 10vw vom Rand, identisch in beiden Lightboxes */
-#lightboxPrev,
-#lightboxNext,
-#lightbox3DPrev,
-#lightbox3DNext {
-    position: fixed;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 3100;
-    background: none;
-    border: none;
-    color: var(--accent);
-    font-size: 3em;
-    font-weight: 500;
-    padding: 0;
-    cursor: pointer;
-    box-shadow: none;
-    line-height: 1;
-    transition: color 0.17s;
-    pointer-events: auto;
-    user-select: none;
-}
-#lightboxPrev,
-#lightbox3DPrev { left: 7vw; }
-#lightboxNext,
-#lightbox3DNext { right: 7vw; }
-#lightboxPrev:hover,
-#lightboxNext:hover,
-#lightbox3DPrev:hover,
-#lightbox3DNext:hover { color: #fd4c77; }
-
-/* Klickbare Lightbox-Sides zum Navigieren */
-.lightbox-nav-left,
-.lightbox-nav-right {
-    position: fixed;
-    top: 0; bottom: 0;
-    width: 20vw;
-    z-index: 3099;
-    cursor: pointer;
-}
-.lightbox-nav-left  { left: 0; }
-.lightbox-nav-right { right: 0; }
-@media (max-width: 1000px) {
-    .lightbox-nav-left, .lightbox-nav-right { width: 30vw; }
-}
-
-/* Remove ugly outlines */
-button:focus { outline: none; }
-textarea { resize: none !important; }
+    .paw-queued {
+      position: absolute; 
+      top: 33px;      /* so weit nach unten */
+      right: 40px;  /* nur ganz am Rand, feintune hier! */
+      width: 2rem;
+      height: 2rem;
+      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.10));
+      pointer-events: none;
+      z-index: 10;
+    }
+  } 
   </style>
 </head>
 <body class="flex h-screen bg-white">