Layout & Style
+
+
+
+ 15%
+
+
+
+
+
+
+
+
+
+
+ 8px
+
+
+
diff --git a/startpage/js/main.js b/startpage/js/main.js
index 963d564..3be8cb8 100755
--- a/startpage/js/main.js
+++ b/startpage/js/main.js
@@ -141,7 +141,8 @@ document.addEventListener('DOMContentLoaded', () => {
// Theme handling
const themeSelect = document.getElementById('themeSelect');
- function setTheme(theme) {
+ const setTheme = (theme) => {
+ document.body.style.transition = 'background-color 0.3s ease';
const root = document.documentElement;
root.style.setProperty('--base', `var(--${theme}-base)`);
root.style.setProperty('--base-rgb', `var(--${theme}-base-rgb)`);
@@ -151,7 +152,13 @@ document.addEventListener('DOMContentLoaded', () => {
root.style.setProperty('--blue', `var(--${theme}-blue)`);
root.style.setProperty('--pink', `var(--${theme}-pink)`);
localStorage.setItem('theme', theme);
- }
+
+ // Add smooth transition class
+ document.body.classList.add('theme-transition');
+ setTimeout(() => {
+ document.body.classList.remove('theme-transition');
+ }, 300);
+ };
// Load saved theme
const savedTheme = localStorage.getItem('theme') || 'mocha';
@@ -300,4 +307,71 @@ document.addEventListener('DOMContentLoaded', () => {
resetLinkSize.addEventListener('click', () => {
setLinkSize(DEFAULT_LINK_SIZE);
});
+
+ // Transparency and Blur controls
+ const transparencyControl = document.getElementById('transparencyControl');
+ const transparencyValue = document.getElementById('transparencyValue');
+ const resetTransparency = document.getElementById('resetTransparency');
+ const blurToggle = document.getElementById('blurToggle');
+ const blurControl = document.getElementById('blurControl');
+ const blurValue = document.getElementById('blurValue');
+ const resetBlur = document.getElementById('resetBlur');
+
+ const DEFAULT_TRANSPARENCY = 15;
+ const DEFAULT_BLUR = 8;
+
+ const setTransparency = (value) => {
+ const opacity = (100 - value) / 100;
+ document.documentElement.style.setProperty('--container-opacity', opacity);
+ transparencyValue.textContent = `${value}%`;
+ transparencyControl.value = value;
+ localStorage.setItem('transparency', value);
+ };
+
+ const setBlur = (enabled, value) => {
+ const blurEffect = enabled ? `blur(${value}px)` : 'none';
+ document.documentElement.style.setProperty('--container-blur', blurEffect);
+ blurValue.textContent = `${value}px`;
+ blurControl.value = value;
+ blurToggle.checked = enabled;
+ localStorage.setItem('blurEnabled', enabled);
+ localStorage.setItem('blurAmount', value);
+ blurControl.disabled = !enabled;
+ blurValue.style.opacity = enabled ? '1' : '0.5';
+ blurControl.style.opacity = enabled ? '1' : '0.5';
+ };
+
+ // Load saved values or set defaults
+ const savedTransparency = localStorage.getItem('transparency') || DEFAULT_TRANSPARENCY;
+ const savedBlurEnabled = localStorage.getItem('blurEnabled') === 'true';
+ const savedBlurAmount = localStorage.getItem('blurAmount') || DEFAULT_BLUR;
+
+ setTransparency(parseInt(savedTransparency));
+ setBlur(savedBlurEnabled, parseInt(savedBlurAmount));
+
+ // Event listeners
+ transparencyControl.addEventListener('input', (e) => {
+ setTransparency(parseInt(e.target.value));
+ });
+
+ resetTransparency.addEventListener('click', () => {
+ setTransparency(DEFAULT_TRANSPARENCY);
+ });
+
+ blurToggle.addEventListener('change', (e) => {
+ const currentValue = parseInt(blurControl.value);
+ setBlur(e.target.checked, currentValue);
+ });
+
+ blurControl.addEventListener('input', (e) => {
+ if (blurToggle.checked) {
+ setBlur(true, parseInt(e.target.value));
+ }
+ });
+
+ // Add reset blur handler
+ resetBlur.addEventListener('click', () => {
+ setBlur(true, DEFAULT_BLUR);
+ blurToggle.checked = true;
+ });
});
\ No newline at end of file
diff --git a/startpage/styles.css b/startpage/styles.css
index 7459d4a..50c9972 100755
--- a/startpage/styles.css
+++ b/startpage/styles.css
@@ -75,38 +75,41 @@ body {
overflow: hidden; /* Prevent body scrolling */
}
+/* Enhanced Container Styles */
.container {
- max-width: 800px;
- margin: 4rem auto;
- padding: 2rem;
- background-color: rgba(var(--base-rgb), 0.8);
- border-radius: 16px;
- backdrop-filter: blur(8px);
+ max-width: 900px;
+ margin: 2rem auto;
+ padding: 2.5rem;
+ background-color: rgba(var(--base-rgb), var(--container-opacity, 0.85));
+ border-radius: 24px;
+ backdrop-filter: var(--container-blur, blur(12px));
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
max-height: calc(100vh - 8rem); /* Account for margins */
overflow-y: auto; /* Change from hidden to auto */
scrollbar-width: thin; /* Firefox */
scrollbar-color: var(--surface1) transparent; /* Firefox */
}
+/* Improved Search Box */
.search-box {
- margin: 2rem 0;
- text-align: center;
+ margin: 2.5rem auto;
+ max-width: 600px;
}
#search-input {
width: 100%;
- max-width: 600px;
- padding: 1rem;
- border: none;
- border-radius: 8px;
- background-color: var(--surface0);
- color: var(--text);
+ padding: 1.2rem 1.5rem;
+ border-radius: 12px;
font-size: 1.1rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
#search-input:focus {
- outline: none;
- box-shadow: 0 0 0 2px var(--blue);
+ box-shadow: 0 4px 16px rgba(var(--base-rgb), 0.2),
+ 0 0 0 3px var(--blue);
+ transform: translateY(-1px);
}
.links-container {
@@ -115,16 +118,25 @@ body {
gap: 2rem;
}
+/* Enhanced Category Cards */
.category {
background-color: var(--surface0);
- padding: 1.5rem;
- border-radius: 8px;
+ padding: 1.8rem;
+ border-radius: 16px;
+ transition: all 0.3s ease;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.category:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.category h2 {
- margin: 0 0 1rem 0;
- font-size: 1.2rem;
- color: var(--blue);
+ font-size: 1.3rem;
+ margin-bottom: 1.2rem;
+ padding-bottom: 0.8rem;
+ border-bottom: 2px solid var(--surface1);
}
.category ul {
@@ -147,7 +159,15 @@ body {
transition: all 0.2s;
font-size: var(--link-size, 16px);
line-height: 1.5;
- padding: 0.25rem 0;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.2s ease;
+}
+
+.container .links-container .category li a:hover {
+ background-color: var(--surface1);
+ transform: translateX(4px);
+ color: var(--pink);
}
.container .links-container .category li a i,
@@ -183,22 +203,27 @@ a:not(.container .links-container .category li a):hover {
color: var(--pink);
}
+/* Clock Section Enhancement */
.clock-section {
text-align: center;
- margin-bottom: 2rem;
+ margin: 1rem 0 3rem;
}
.clock {
- font-size: 3.5rem;
+ font-size: 4rem;
+ font-weight: 300;
+ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 0;
color: var(--pink);
font-family: var(--font-mono, 'MapelMono, monospace');
}
#greeting {
- font-size: 1.2rem;
+ font-size: 1.4rem;
+ font-weight: 500;
+ margin-bottom: 0.8rem;
+ text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
color: var(--blue);
- margin-bottom: 0.5rem;
}
.image-controls {
@@ -223,11 +248,13 @@ a:not(.container .links-container .category li a):hover {
background-color: var(--surface1);
}
+/* Settings Button Animation */
.settings-button {
position: fixed;
top: 1rem;
right: 1rem;
- background-color: var(--surface0);
+ backdrop-filter: blur(8px);
+ background-color: rgba(var(--base-rgb), 0.8);
color: var(--text);
width: 40px;
height: 40px;
@@ -238,13 +265,16 @@ a:not(.container .links-container .category li a):hover {
cursor: pointer;
transition: transform 0.3s, background-color 0.2s;
z-index: 1000;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-button:hover {
background-color: var(--surface1);
- transform: rotate(45deg);
+ transform: rotate(90deg) scale(1.1);
}
+/* Settings Modal Improvements */
.settings-popup {
display: none;
position: fixed;
@@ -263,14 +293,15 @@ a:not(.container .links-container .category li a):hover {
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--base);
- padding: 2rem;
- border-radius: 12px;
+ padding: 2.5rem;
+ border-radius: 20px;
min-width: 300px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
scrollbar-width: thin;
scrollbar-color: var(--surface1) transparent;
+ box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
}
.settings-content::-webkit-scrollbar {
@@ -290,11 +321,18 @@ a:not(.container .links-container .category li a):hover {
background-color: var(--surface0);
}
+/* Enhanced Settings Section */
.settings-section {
margin: 1.5rem 0;
- padding: 1rem;
+ padding: 1.5rem;
background-color: var(--surface0);
- border-radius: 8px;
+ border-radius: 12px;
+ transition: all 0.2s ease;
+}
+
+.settings-section:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.settings-section h4 {
@@ -302,20 +340,26 @@ a:not(.container .links-container .category li a):hover {
color: var(--blue);
}
+/* Better Button Styles */
.settings-btn {
background-color: var(--surface1);
color: var(--text);
border: none;
padding: 0.5rem 1rem;
- border-radius: 4px;
+ border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s;
margin: 0.5rem 0;
width: 100%;
+ transition: all 0.2s ease;
+ font-weight: 500;
}
.settings-btn:hover {
background-color: #585b70;
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ background-color: var(--blue);
}
#bgImage {
@@ -878,3 +922,121 @@ a:not(.container .links-container .category li a):hover {
transform: translateY(-2px);
background: var(--surface0);
}
+
+/* Smooth Scrollbar */
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--surface1);
+ border-radius: 5px;
+ border: 3px solid var(--base);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--blue);
+}
+
+/* Toggle Switch Styles - Updated */
+.toggle-switch {
+ position: relative;
+ display: inline-block;
+ width: 100px; /* Reduced from 44px */
+ height: 20px; /* Reduced from 24px */
+ margin: 0 4px; /* Reduced from 8px */
+}
+
+.toggle-switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.toggle-switch label {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: var(--surface0);
+ transition: .3s;
+ border-radius: 20px;
+}
+
+.toggle-switch label:before {
+ position: absolute;
+ content: "";
+ height: 14px; /* Reduced from 16px */
+ width: 14px; /* Reduced from 16px */
+ left: 3px; /* Adjusted from 4px */
+ bottom: 3px; /* Adjusted from 4px */
+ background-color: var(--text);
+ transition: .3s;
+ border-radius: 50%;
+}
+
+.toggle-switch input:checked + label {
+ background-color: var(--blue);
+}
+
+.toggle-switch input:checked + label:before {
+ transform: translateX(16px); /* Adjusted from 20px */
+}
+
+/* Blur and Transparency Controls */
+.setting-group {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+ padding: 0.8rem;
+ border-radius: 8px;
+ background: var(--surface1);
+}
+
+.setting-group label {
+ min-width: 100px;
+ font-weight: 500;
+}
+
+/* Blur Controls - Updated */
+.blur-controls {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ flex: 1;
+ margin-left: 0.25rem; /* Added small margin */
+}
+
+.blur-controls input[type="range"] {
+ flex: 1;
+}
+
+.blur-controls span {
+ min-width: 45px;
+ text-align: right;
+}
+
+.toggle-switch {
+ min-width: 44px;
+ margin: 0;
+}
+
+.setting-group input[type="range"] {
+ flex: 1;
+}
+
+.setting-group span {
+ min-width: 50px;
+ text-align: right;
+}
+
+.setting-group input[type="range"]:disabled {
+ cursor: not-allowed;
+}