307 lines
9.9 KiB
HTML
307 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>auto-git</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
: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;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Pfeil-Icon: 90°-Rotation */
|
|
.rotate {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.rotate.open {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
@keyframes glow {
|
|
0%, 100% { box-shadow: 0 0 4px gold; }
|
|
50% { box-shadow: 0 0 12px gold; }
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
#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 */
|
|
}
|
|
|
|
/* Sicherstellen, dass der Content-Bereich nicht horizontal scrollt */
|
|
.flex-1.p-4.overflow-y-auto {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* Hover-Effekt */
|
|
aside ul#folderList li:hover,
|
|
aside ul#folderList li.selected {
|
|
background: var(--border); /* statt hover:bg-[#fecdd3] */
|
|
}
|
|
|
|
/* Icon und Text separat noch sicher auf var(--accent) setzen */
|
|
aside ul#folderList li svg,
|
|
aside ul#folderList li span {
|
|
color: var(--accent) !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.sidebar, .interaction-bar, .content-area button {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.interaction-bar .flex {
|
|
line-height: 1.2; /* wenig Zeilenabstand */
|
|
height: 100%; /* volle Höhe ausnutzen, vertikal zentrieren */
|
|
margin-left: 90px;
|
|
}
|
|
|
|
.interaction-bar span {
|
|
font-size: inherit !important; /* gleiche Größe wie restlicher Text */
|
|
font-weight: 800;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.paw-queued {
|
|
position: absolute;
|
|
top: 40px; /* so weit nach unten */
|
|
right: 30px; /* nur ganz am Rand, feintune hier! */
|
|
width: 2rem;
|
|
height: 2rem;
|
|
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.10));
|
|
transform: translateX(-60px) rotate(var(--paw-rotate, 0deg)); /* -60px nach innen */
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex h-screen bg-white">
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="w-64 border-r flex flex-col sidebar"
|
|
style="background: var(--bg-sidebar); border-color: var(--border)">
|
|
<h2 class="px-4 py-3 text-lg font-semibold"
|
|
style="color: var(--accent)">
|
|
Monitored Folders
|
|
</h2>
|
|
<ul id="folderList" class="flex-1 px-2 space-y-2 overflow-y-auto"></ul>
|
|
<button id="addFolderBtn"
|
|
class="mx-4 mb-4 flex items-center justify-center space-x-2 px-3 py-2 rounded"
|
|
style="background: var(--border); color: var(--accent)"
|
|
onmouseenter="this.style.background='var(--bg-sidebar)'"
|
|
onmouseleave="this.style.background='var(--border)'">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
|
style="color: var(--accent)">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
<span class="text-sm font-medium" style="color: var(--accent)">Add Folder</span>
|
|
</button>
|
|
</aside>
|
|
|
|
<!-- Main panel: wieder p-4 wie gehabt -->
|
|
<main class="relative flex flex-col flex-1" style="background: var(--bg-main)">
|
|
|
|
<!-- Content-Area -->
|
|
<div class="flex-1 p-4 overflow-y-auto content-area">
|
|
<!-- Title -->
|
|
<div id="folderTitleDrop"
|
|
class="relative flex items-baseline space-x-1 cursor-pointer select-none group pb-2">
|
|
<svg id="folderTitleArrow"
|
|
class="h-4 w-6 flex-none transition-transform"
|
|
viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-width="2" fill="none"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 5l7 7-7 7"/>
|
|
</svg>
|
|
<span id="currentTitle" class="font-semibold text-xl truncate"></span>
|
|
</div>
|
|
<pre id="folderHierarchyDropdown"
|
|
class="hidden text-sm font-mono select-text leading-snug mb-2 mt-1 max-h-80 overflow-auto"
|
|
style="background: none; border: none; color: inherit; padding: 0;"></pre>
|
|
|
|
<div class="border-t mb-2" style="border-color: var(--border)"></div>
|
|
|
|
<!-- Content List -->
|
|
<ul id="contentList" class="space-y-1"></ul>
|
|
</div>
|
|
|
|
<!-- Cat -->
|
|
<!--<div id="cat-glow"></div>
|
|
<img id="cat-sprite" src="assets/cat/default.png">-->
|
|
<div id="catSlot" class="absolute bottom-2 left-2"></div>
|
|
|
|
<!-- Interaction Bar -->
|
|
<div class="w-full h-16 flex items-center interaction-bar"
|
|
style="background: var(--bg-sidebar); border-top: 1px solid var(--border)">
|
|
<div class="flex flex-col justify-center ml-10 text-[var(--accent)] font-medium text-sm leading-tight h-full">
|
|
<div><span id="commitsToday" class="font-medium commits-glow"></span> commits today</div>
|
|
<div><span id="linesUntilRewrite" class="font-bold"></span> lines until rewrite</div>
|
|
<div><span id="countdown" class="font-medium"></span> until rewrite</div>
|
|
</div>
|
|
<!--<button id="commitBtn"
|
|
class="ml-auto px-4 py-2 border rounded font-semibold"
|
|
style="background: var(--accent); color: #fff; border-color: var(--border)">
|
|
Commit
|
|
</button>-->
|
|
</div>
|
|
|
|
<script src="renderer.js"></script>
|
|
<script src="animeCat.js"></script>
|
|
<script type="module">
|
|
/*import { AnimeCat } from './animeCat.js';
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const slot = document.getElementById('catSlot');
|
|
const cat = new AnimeCat(slot, {
|
|
images: {
|
|
default: 'assets/cat/default.png',
|
|
eyesClosed: 'assets/cat/eyes_closed.png',
|
|
mouthOpen: 'assets/cat/mouth_open.png'
|
|
}
|
|
});
|
|
async function simulateStream(text) {
|
|
cat.beginSpeech();
|
|
for (let ch of text) {
|
|
cat.appendSpeech(ch);
|
|
await new Promise(r => setTimeout(r, 50));
|
|
}
|
|
cat.endSpeech();
|
|
}
|
|
simulateStream("Hi there! I'm your friendly assistant 👋");
|
|
});*/
|
|
</script>
|
|
</main>
|
|
</body>
|
|
</html> |