code quality changes
This commit is contained in:
Brian Bjarke Jensen
@@ -240,30 +240,132 @@
|
||||
|
||||
<div class="section">
|
||||
<h2>🌓 Theme Preference</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 20px; font-size: 14px">
|
||||
<p
|
||||
style="
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
Choose how Baby Monitor looks to you.
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<div style="display: flex; flex-direction: column; gap: 15px">
|
||||
<label style="display: flex; align-items: center; cursor: pointer; padding: 12px; border: 2px solid var(--border-light); border-radius: 8px; transition: all 0.2s;" class="theme-option" data-theme="light">
|
||||
<input type="radio" name="theme" value="light" style="margin-right: 12px; width: 20px; height: 20px; cursor: pointer;" />
|
||||
<label
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
border: 2px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
"
|
||||
class="theme-option"
|
||||
data-theme="light"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="light"
|
||||
style="
|
||||
margin-right: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
"
|
||||
/>
|
||||
<div>
|
||||
<div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">☀️ Light Mode</div>
|
||||
<div style="font-size: 12px; color: var(--text-secondary);">Always use light theme</div>
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
"
|
||||
>
|
||||
☀️ Light Mode
|
||||
</div>
|
||||
<div style="font-size: 12px; color: var(--text-secondary)">
|
||||
Always use light theme
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; cursor: pointer; padding: 12px; border: 2px solid var(--border-light); border-radius: 8px; transition: all 0.2s;" class="theme-option" data-theme="dark">
|
||||
<input type="radio" name="theme" value="dark" style="margin-right: 12px; width: 20px; height: 20px; cursor: pointer;" />
|
||||
<label
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
border: 2px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
"
|
||||
class="theme-option"
|
||||
data-theme="dark"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="dark"
|
||||
style="
|
||||
margin-right: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
"
|
||||
/>
|
||||
<div>
|
||||
<div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">🌙 Dark Mode</div>
|
||||
<div style="font-size: 12px; color: var(--text-secondary);">Always use dark theme</div>
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
"
|
||||
>
|
||||
🌙 Dark Mode
|
||||
</div>
|
||||
<div style="font-size: 12px; color: var(--text-secondary)">
|
||||
Always use dark theme
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; cursor: pointer; padding: 12px; border: 2px solid var(--border-light); border-radius: 8px; transition: all 0.2s;" class="theme-option" data-theme="auto">
|
||||
<input type="radio" name="theme" value="auto" style="margin-right: 12px; width: 20px; height: 20px; cursor: pointer;" />
|
||||
<label
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
border: 2px solid var(--border-light);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
"
|
||||
class="theme-option"
|
||||
data-theme="auto"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="auto"
|
||||
style="
|
||||
margin-right: 12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
"
|
||||
/>
|
||||
<div>
|
||||
<div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">🔄 Auto</div>
|
||||
<div style="font-size: 12px; color: var(--text-secondary);">Match your browser settings</div>
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
"
|
||||
>
|
||||
🔄 Auto
|
||||
</div>
|
||||
<div style="font-size: 12px; color: var(--text-secondary)">
|
||||
Match your browser settings
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
@@ -298,7 +400,13 @@
|
||||
"
|
||||
>
|
||||
<h3 style="color: #dc3545; margin-bottom: 15px">⚠️ Danger Zone</h3>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 15px; font-size: 14px">
|
||||
<p
|
||||
style="
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
Deleting your account is permanent and cannot be undone. This will:
|
||||
</p>
|
||||
<ul
|
||||
@@ -322,9 +430,7 @@
|
||||
</ul>
|
||||
<button
|
||||
class="button"
|
||||
style="
|
||||
background: var(--gradient-error);
|
||||
"
|
||||
style="background: var(--gradient-error)"
|
||||
onclick="confirmDeleteAccount()"
|
||||
>
|
||||
🗑️ Delete Account
|
||||
@@ -337,7 +443,7 @@
|
||||
|
||||
<button
|
||||
class="quick-action"
|
||||
onclick="window.location.href='/add-child.html'"
|
||||
onclick="window.location.href = '/add-child.html'"
|
||||
>
|
||||
➕ Add New Child
|
||||
</button>
|
||||
@@ -382,7 +488,9 @@
|
||||
width: 90%;
|
||||
"
|
||||
>
|
||||
<h2 style="margin-top: 0; color: var(--text-primary);">🔗 Redeem Share Code</h2>
|
||||
<h2 style="margin-top: 0; color: var(--text-primary)">
|
||||
🔗 Redeem Share Code
|
||||
</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 20px">
|
||||
Enter the share code to get access to a child.
|
||||
</p>
|
||||
@@ -448,8 +556,11 @@
|
||||
width: 90%;
|
||||
"
|
||||
>
|
||||
<h2 style="margin-top: 0; color: var(--text-primary);">🔗 Share Code</h2>
|
||||
<p style="color: var(--text-secondary); margin-bottom: 20px" id="shareCodeChildName"></p>
|
||||
<h2 style="margin-top: 0; color: var(--text-primary)">🔗 Share Code</h2>
|
||||
<p
|
||||
style="color: var(--text-secondary); margin-bottom: 20px"
|
||||
id="shareCodeChildName"
|
||||
></p>
|
||||
<div
|
||||
style="
|
||||
background: var(--bg-tertiary);
|
||||
@@ -490,7 +601,13 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color: var(--text-secondary); font-size: 14px; margin-bottom: 20px">
|
||||
<p
|
||||
style="
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
"
|
||||
>
|
||||
Share this code with another user. They can use it in Settings >
|
||||
Redeem Share Code to get access to this child.
|
||||
<br /><br />
|
||||
@@ -520,7 +637,9 @@
|
||||
// Initialize theme selector
|
||||
function initThemeSelector() {
|
||||
const currentTheme = window.getThemePreference();
|
||||
const themeRadio = document.querySelector(`input[name="theme"][value="${currentTheme}"]`);
|
||||
const themeRadio = document.querySelector(
|
||||
`input[name="theme"][value="${currentTheme}"]`,
|
||||
);
|
||||
if (themeRadio) {
|
||||
themeRadio.checked = true;
|
||||
}
|
||||
@@ -529,8 +648,8 @@
|
||||
updateThemeOptionStyles();
|
||||
|
||||
// Listen for theme changes
|
||||
document.querySelectorAll('input[name="theme"]').forEach(radio => {
|
||||
radio.addEventListener('change', (e) => {
|
||||
document.querySelectorAll('input[name="theme"]').forEach((radio) => {
|
||||
radio.addEventListener("change", (e) => {
|
||||
window.setTheme(e.target.value);
|
||||
updateThemeOptionStyles();
|
||||
});
|
||||
@@ -538,15 +657,17 @@
|
||||
}
|
||||
|
||||
function updateThemeOptionStyles() {
|
||||
const selectedValue = document.querySelector('input[name="theme"]:checked')?.value;
|
||||
document.querySelectorAll('.theme-option').forEach(option => {
|
||||
const selectedValue = document.querySelector(
|
||||
'input[name="theme"]:checked',
|
||||
)?.value;
|
||||
document.querySelectorAll(".theme-option").forEach((option) => {
|
||||
const isSelected = option.dataset.theme === selectedValue;
|
||||
if (isSelected) {
|
||||
option.style.borderColor = '#667eea';
|
||||
option.style.background = 'rgba(102, 126, 234, 0.05)';
|
||||
option.style.borderColor = "#667eea";
|
||||
option.style.background = "rgba(102, 126, 234, 0.05)";
|
||||
} else {
|
||||
option.style.borderColor = '#e0e0e0';
|
||||
option.style.background = 'transparent';
|
||||
option.style.borderColor = "#e0e0e0";
|
||||
option.style.background = "transparent";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user