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

Refactor and enhance settings.html with new styles and features

Browse Source
This commit is contained in:
Victor Giers
2025-05-24 20:56:45 +02:00
parent 2347d477ae
commit bc8b9f3ab4
1 changed files with 102 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
settings.html
View File

@@ -5,73 +5,104 @@
<title>Einstellungen</title> <title>Einstellungen</title>
<style> <style>
html, body { html, body {
margin: 0; margin: 0; padding: 0; width: 100%; height: 100%;
padding: 0; overflow: hidden;
width: 100%; display: flex; align-items: center; justify-content: center;
height: 100%; font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
overflow: hidden; /* keine Scrollbars */ background: linear-gradient(120deg, #8ecae6 0%, #fff 100%);
display: flex; /* SkyMode default */
align-items: center; /* vertikal zentrieren */ transition: background 0.6s;
justify-content: center; /* horizontal zentrieren */ }
background: rgba(0,0,0,0.1);/* halbtransparenter Untergrund */ body.night {
font-family: sans-serif; background: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);
-webkit-user-select: none; }
user-select: none; .clouds {
position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
pointer-events: none; z-index: 0; opacity: 0.35;
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-repeat: repeat-x;
animation: cloudmove 60s linear infinite;
}
@keyframes cloudmove {
from { background-position-x: 0; }
to { background-position-x: -400px; }
} }
.dialog { .dialog {
border: 2px solid #fbcfe8; position: relative; z-index: 1;
border-radius: 8px; border-radius: 24px;
padding: 1rem; padding: 2.2rem 2.5rem 1.5rem 2.5rem;
width: 100%; min-width: 380px;
height: 100%; max-width: 430px;
box-sizing: border-box; box-shadow: 0 8px 42px rgba(60, 80, 160, 0.16), 0 2px 8px #fff3;
background: white; background: rgba(255,255,255,0.96);
position: relative; backdrop-filter: blur(2px);
border: none;
display: flex; flex-direction: column;
gap: 1.2rem;
} }
.header { .header {
display: flex; display: flex; justify-content: space-between; align-items: center;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.header h1 { .header h1 {
font-size: 1.25rem; font-size: 2rem; margin: 0;
margin: 0; font-weight: 900; letter-spacing: -1px;
text-shadow: 0 3px 18px #9be5fc7a;
} }
.close-btn { .close-btn {
background: transparent; background: transparent; border: none; font-size: 2rem;
border: none; color: #db2777; cursor: pointer; font-weight: 400;
font-size: 1.25rem; transition: color 0.2s;
}
.close-btn:hover { color: #0284c7; }
.options { display: flex; flex-direction: column; gap: 1.2rem; }
label.option, .dropdown-label {
font-size: 1.17rem;
font-weight: 600;
display: flex; align-items: center; gap: 0.8em;
}
input[type="checkbox"] {
accent-color: #38bdf8;
width: 1.35em; height: 1.35em;
border-radius: 5px; margin-right: 0.7em;
box-shadow: 0 0 2px #0ea5e9;
cursor: pointer; cursor: pointer;
color: #9f1239;
} }
.options { input[type="number"], select {
display: flex; border: 1.5px solid #bae6fd;
flex-direction: column; border-radius: 8px;
gap: 0.5rem; 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;
} }
.option { input[type="number"]:focus, select:focus {
display: flex; outline: none;
align-items: center; box-shadow: 0 0 0 2px #7dd3fc;
}
.option input[type="checkbox"] {
margin-left: 1.5rem;
margin-right: 0.5rem;
}
.buttons {
margin-top: 1rem;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
} }
.buttons { display: flex; justify-content: flex-end; gap: 1.5em; margin-top: 2em;}
button { button {
padding: 0.4rem 0.8rem; padding: 0.5em 1.6em;
border-radius: 4px; font-size: 1.1em;
border: 1px solid #ccc; font-weight: 700;
background: white; border-radius: 8px;
border: none;
background: linear-gradient(93deg, #38bdf8 10%, #f472b6 90%);
color: #fff;
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 8px #bae6fd50;
transition: background 0.2s, box-shadow 0.2s;
}
button:hover { background: linear-gradient(90deg, #0ea5e9, #db2777);}
button#cancelBtn {
background: #e0e7ef;
color: #64748b;
font-weight: 500;
box-shadow: none;
}
button#cancelBtn:hover { background: #cbd5e1; color: #000; }
.ollama-info {
margin-top: 1.2em; color: #dc2626; font-weight: bold; text-align: center;
} }
button:hover { background: #f3f4f6; }
</style> </style>
<script> <script>
window.addEventListener('DOMContentLoaded', async () => { window.addEventListener('DOMContentLoaded', async () => {
@@ -82,14 +113,15 @@
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;
@@ -194,9 +226,10 @@
</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>
@@ -211,17 +244,24 @@
<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="block mb-2 font-semibold"> <label class="dropdown-label">
Intelligent commit after Intelligent commit after
<input type="number" id="intelligentCommitThresholdInput" min="1" max="1000" value="10" step="1" class="border rounded px-2 py-1 w-20 mx-1"> <input type="number" id="intelligentCommitThresholdInput" min="1" max="1000" value="10" step="1">
lines of diff lines of diff
</label> </label>
<div class="options"> <label class="dropdown-label">
<!-- Hier kommt das Model-Selector-HTML rein --> Model for commit message generation:
<div id="ollama-model-selectors"></div> <select id="commitModelSelect">
</div> <option>qwen2.5-coder:7b</option>
</select>
<!-- Weitere Optionen in Zukunft hier hinzufügen --> </label>
<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>