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

auto-git:

Browse Source 
[change] settings.html
This commit is contained in:
Victor Giers
2025-05-24 21:04:17 +02:00
parent c41964b940
commit 48955b7f29
1 changed files with 81 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
settings.html
View File

@@ -4,140 +4,104 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Einstellungen</title> <title>Einstellungen</title>
<style> <style>
/* Grund-Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { html, body {
width: 100%; height: 100%; margin: 0; padding: 0; width: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center;
display: flex; font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
justify-content: center; background: linear-gradient(120deg, #8ecae6 0%, #fff 100%);
align-items: center; /* SkyMode default */
transition: background 0.5s ease; transition: background 0.6s;
} }
/* Sky-Mode Hintergrund */
body.sky {
background: linear-gradient(120deg, #8ecae6 0%, #38bdf8 70%, #fff 100%);
}
/* Night-Mode (rosa) */
body.night { body.night {
background: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 70%, #fff 100%); background: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);
} }
/* Wolken-Overlay */
.clouds { .clouds {
position: absolute; top: 0; left: 0; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
width: 100vw; height: 100vh; pointer-events: none; z-index: 0; opacity: 0.35;
pointer-events: none; background: url('data:image/svg+xml;utf8,<svg width="400" height="200" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="60" cy="90" rx="55" ry="32" fill="%23fff"/><ellipse cx="120" cy="110" rx="55" ry="30" fill="%23fff"/><ellipse cx="170" cy="90" rx="50" ry="25" fill="%23fff"/></svg>');
background: url('data:image/svg+xml;utf8,<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"><ellipse cx="50" cy="50" rx="50" ry="30" fill="%23ffffff88"/><ellipse cx="120" cy="60" rx="50" ry="25" fill="%23ffffff88"/></svg>') repeat-x; background-repeat: repeat-x;
opacity: 0.3; animation: cloudmove 60s linear infinite;
animation: cloudMove 80s linear infinite;
} }
@keyframes cloudMove { @keyframes cloudmove {
from { background-position-x: 0; } from { background-position-x: 0; }
to { background-position-x: -200px; } to { background-position-x: -400px; }
} }
/* Dialog-Box */
.dialog { .dialog {
position: relative; position: relative; z-index: 1;
z-index: 10; border-radius: 24px;
width: 420px; padding: 2.2rem 2.5rem 1.5rem 2.5rem;
background: rgba(255,255,255,0.93); min-width: 380px;
backdrop-filter: blur(8px); max-width: 430px;
border-radius: 20px; box-shadow: 0 8px 42px rgba(60, 80, 160, 0.16), 0 2px 8px #fff3;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); background: rgba(255,255,255,0.96);
padding: 1.8rem 2.2rem; backdrop-filter: blur(2px);
display: flex; flex-direction: column; gap: 1.2rem; border: none;
display: flex; flex-direction: column;
gap: 1.2rem;
} }
.header { .header {
display: flex; align-items: center; justify-content: space-between; display: flex; justify-content: space-between; align-items: center;
margin-bottom: 1rem;
} }
.header h1 { .header h1 {
font-size: 1.9rem; font-size: 2rem; margin: 0;
font-weight: 800; font-weight: 900; letter-spacing: -1px;
color: #1e293b; text-shadow: 0 3px 18px #9be5fc7a;
} }
.close-btn { .close-btn {
background: none; border: none; background: transparent; border: none; font-size: 2rem;
font-size: 1.6rem; cursor: pointer; color: #db2777; cursor: pointer; font-weight: 400;
color: #64748b;
transition: color 0.2s; transition: color 0.2s;
} }
.close-btn:hover { color: #0f172a; } .close-btn:hover { color: #0284c7; }
.options { display: flex; flex-direction: column; gap: 1.2rem; }
/* Optionen */ label.option, .dropdown-label {
.options { display: flex; flex-direction: column; gap: 1.0rem; } font-size: 1.17rem;
label { font-weight: 600;
display: flex; align-items: center; font-size: 1.05rem; display: flex; align-items: center; gap: 0.8em;
color: #1e293b;
} }
label.option input { input[type="checkbox"] {
margin-right: 0.8rem;
width: 1.3em; height: 1.3em;
accent-color: #38bdf8; accent-color: #38bdf8;
} width: 1.35em; height: 1.35em;
.row { border-radius: 5px; margin-right: 0.7em;
display: flex; align-items: center; justify-content: space-between; box-shadow: 0 0 2px #0ea5e9;
}
.row > span {
flex: 1;
color: #1e293b;
font-weight: 600;
}
.row > input,
.row > select {
flex: 1;
margin-left: 0.8rem;
padding: 0.4em 0.6em;
border: 1.2px solid #cbd5e1;
border-radius: 6px;
font-size: 1rem;
color: #334155;
background: #f8fafc;
transition: border-color 0.2s, box-shadow 0.2s;
}
.row > input:focus,
.row > select:focus {
border-color: #38bdf8;
box-shadow: 0 0 0 2px rgba(56,189,248,0.3);
outline: none;
}
/* Buttons */
.buttons {
display: flex; justify-content: flex-end; gap: 1rem;
margin-top: 1.4rem;
}
button.action {
padding: 0.5em 1.3em;
font-size: 1rem;
font-weight: 600;
border: none; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: background 0.2s;
} }
#cancelBtn { input[type="number"], select {
background: #e2e8f0; border: 1.5px solid #bae6fd;
color: #475569; border-radius: 8px;
padding: 0.4em 0.8em; margin-left: 0.6em; font-size: 1.07em;
background: #f0faff; color: #334155; font-weight: 500;
transition: box-shadow 0.2s;
} }
#cancelBtn:hover { input[type="number"]:focus, select:focus {
background: #cbd5e1; outline: none;
color: #1e293b; box-shadow: 0 0 0 2px #7dd3fc;
} }
#okBtn { .buttons { display: flex; justify-content: flex-end; gap: 1.5em; margin-top: 2em;}
background: #38bdf8; button {
padding: 0.5em 1.6em;
font-size: 1.1em;
font-weight: 700;
border-radius: 8px;
border: none;
background: linear-gradient(93deg, #38bdf8 10%, #f472b6 90%);
color: #fff; color: #fff;
cursor: pointer;
box-shadow: 0 2px 8px #bae6fd50;
transition: background 0.2s, box-shadow 0.2s;
} }
#okBtn:hover { button:hover { background: linear-gradient(90deg, #0ea5e9, #db2777);}
background: #0ea5e9; button#cancelBtn {
background: #e0e7ef;
color: #64748b;
font-weight: 500;
box-shadow: none;
} }
button#cancelBtn:hover { background: #cbd5e1; color: #000; }
/* Infotext */
.ollama-info { .ollama-info {
font-size: 0.95rem; margin-top: 1.2em; color: #dc2626; font-weight: bold; text-align: center;
color: #dc2626;
text-align: center;
margin-top: 0.8rem;
} }
</style> </style>
<script> <script>
@@ -149,15 +113,14 @@
const ok = document.getElementById('okBtn'); const ok = document.getElementById('okBtn');
const cancel = document.getElementById('cancelBtn'); const cancel = document.getElementById('cancelBtn');
const close = document.getElementById('closeBtn'); const close = document.getElementById('closeBtn');
// Initialwerte parallel laden
const [initialSky, initialSkip, initialThreshold] = await Promise.all([ const [initialSky, initialSkip, initialThreshold] = await Promise.all([
window.settingsAPI.getSkyMode(), window.settingsAPI.getSkyMode(),
window.settingsAPI.getSkipPrompt(), window.settingsAPI.getSkipPrompt(),
window.electronAPI.getIntelligentCommitThreshold() window.electronAPI.getIntelligentCommitThreshold()
]); ]);
const sky = await (window.settingsAPI?.getSkyMode?.() || Promise.resolve(true));
document.body.classList.toggle('night', !sky);
// Inputs setzen // Inputs setzen
cbSky.checked = initialSky; cbSky.checked = initialSky;
cbSkip.checked = initialSkip; cbSkip.checked = initialSkip;
@@ -262,10 +225,9 @@
</select> </select>
</label>`; </label>`;
}); });
</script> </script>
</head> </head>
<body> <body>
<div class="clouds"></div>
<div class="dialog"> <div class="dialog">
<div class="header"> <div class="header">
<h1>Settings</h1> <h1>Settings</h1>
@@ -280,24 +242,17 @@
<input type="checkbox" id="skipPrompt" /> <input type="checkbox" id="skipPrompt" />
Skip prompt asking to remove .git folder if it has only one commit and no changes Skip prompt asking to remove .git folder if it has only one commit and no changes
</label> </label>
<label class="dropdown-label"> <label class="block mb-2 font-semibold">
Intelligent commit after Intelligent commit after
<input type="number" id="intelligentCommitThresholdInput" min="1" max="1000" value="10" step="1"> <input type="number" id="intelligentCommitThresholdInput" min="1" max="1000" value="10" step="1" class="border rounded px-2 py-1 w-20 mx-1">
lines of diff lines of diff
</label> </label>
<label class="dropdown-label"> <div class="options">
Model for commit message generation: <!-- Hier kommt das Model-Selector-HTML rein -->
<select id="commitModelSelect"> <div id="ollama-model-selectors"></div>
<option>qwen2.5-coder:7b</option> </div>
</select>
</label> <!-- Weitere Optionen in Zukunft hier hinzufügen -->
<label class="dropdown-label">
Model for README generation:
<select id="readmeModelSelect">
<option>qwen2.5-coder:32b</option>
</select>
</label>
<div class="ollama-info" id="ollamaInfo"></div>
</div> </div>
<div class="buttons"> <div class="buttons">
<button id="cancelBtn">Cancel</button> <button id="cancelBtn">Cancel</button>