439 lines
11 KiB
HTML
439 lines
11 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 {
|
||
--bg-main: #fff;
|
||
--bg-sidebar: #fff1f2;
|
||
--accent: #9f1239;
|
||
--border: #ffe4e6;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
margin: 0;
|
||
background: var(--bg-main);
|
||
color: #23262f;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
h2 {
|
||
margin: 0 0 1.2em 0;
|
||
font-size: 2.1em;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 2.2em;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
.spinner {
|
||
display: none;
|
||
margin-left: 1em;
|
||
font-size: 1em;
|
||
color: var(--accent);
|
||
}
|
||
.spinner.active {
|
||
display: inline-block;
|
||
}
|
||
|
||
label {
|
||
font-weight: 600;
|
||
color: #7b1930;
|
||
margin-bottom: 0.5em;
|
||
display: block;
|
||
font-size: 1.02em;
|
||
}
|
||
|
||
#moreBtn {
|
||
display: none;
|
||
margin-top: 1em;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* 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);
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
#lightboxContent,
|
||
#lightbox3DContent {
|
||
position: relative;
|
||
max-width: 96vw;
|
||
max-height: 96vh;
|
||
margin: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
#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; }
|
||
</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>-->
|
||
<button id="readmeBtn"
|
||
class="ml-4 px-4 py-2 border rounded font-semibold"
|
||
style="background: var(--accent); color: #fff; border-color: var(--border)">
|
||
Generate README
|
||
</button>
|
||
<button id="pushBtn"
|
||
class="ml-2 px-4 py-2 border rounded font-semibold"
|
||
style="background: var(--accent); color: #fff; border-color: var(--border)">
|
||
Push to Gitea
|
||
</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> |