giers10/auto-git-gui
1
0
Fork 0
Code Releases Activity

Add settings dialog for Sky Mode and Skip Prompt, update main HTML and script

Browse Source 
- Created `settings.html` with a dialog for adjusting settings related to Sky Mode and Skip Prompt.
- Updated `main.html` to include context menus for folder operations.
- Enhanced `main.js` with functionality to handle settings changes, apply Sky Mode, and add copy-to-clipboard feature for diffs.

This commit message was automatically generated by auto-git
This commit is contained in:
Victor Giers
2025-05-23 19:36:42 +02:00
parent 1f046d17b5
commit 134a3b7f27
11 changed files with 595 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
index.html
View File

@@ -5,9 +5,25 @@
<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;
}
#catSlot img {
width: 120px;
height: 120px;
@@ -18,6 +34,7 @@
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background-color: #f3f4f6;
}
/* Pfeil-Icon: 90°-Rotation */
@@ -53,6 +70,7 @@
button.disabled:hover {
background-color: transparent;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 4px gold; }
50% { box-shadow: 0 0 12px gold; }
@@ -66,32 +84,104 @@
border-style: solid !important;
border-color: gold !important;
}
#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;
}
</style>
</head>
<body class="flex h-screen bg-white">
<!-- Sidebar -->
<aside class="w-64 bg-[#fff1f2] border-r border-[#ffe4e6] flex flex-col">
<h2 class="px-4 py-3 text-lg font-semibold text-gray-900">Monitored Folders</h2>
<aside class="w-64 border-r flex flex-col"
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 bg-[#ffe4e6] rounded hover:bg-[#fecdd3]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#9f1239]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
<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 text-[#9f1239]">Add Folder</span>
<span class="text-sm font-medium" style="color: var(--accent)">Add Folder</span>
</button>
</aside>
<!-- Main panel -->
<main class="relative flex flex-col flex-1 bg-white">
<!-- Main panel: wieder p-4 wie gehabt -->
<main class="relative flex flex-col flex-1" style="background: var(--bg-main)">
<div class="flex-1 p-4 overflow-y-auto">
<h3 id="currentTitle" class="text-xl font-semibold mb-2">No folder selected</h3>
<div class="border-t border-[#ffe4e6] mb-4"></div>
<h3 id="currentTitle" class="text-xl font-semibold mb-2"
style="color: var(--accent)">
No folder selected
</h3>
<div class="border-t mb-4" style="border-color: var(--border)"></div>
<ul id="contentList" class="space-y-1"></ul>
</div>
<div id="catSlot" class="absolute bottom-10 right-4"></div>
<div class="w-full flex items-center p-4 bg-[#fff1f2] border-t border-[#ffe4e6]"></div>
<div id="catSlot" class="absolute bottom-12 right-2"></div>
<div class="w-full h-16 flex items-center p-4"
style="background: var(--bg-sidebar); border-top: 1px solid var(--border)">
</div>
<script src="renderer.js"></script>
<script type="module">