From 0c4c2c0e58ef400a70b5301cc349ec24576fe80a Mon Sep 17 00:00:00 2001
From: fOuttaMyPaint <TMhospitalitystrategies@gmail.com>
Date: Tue, 24 Dec 2024 15:08:11 -0500
Subject: [PATCH] Refactor QR code component styles

---
 css/components/image-resizer.css | 303 ++++++++++++++++++++-------
 css/components/qr-code.css       | 152 +++++++++-----
 css/styles.css                   | 340 ++++++++++++++++++++++---------
 index.html                       | 152 ++++++++++++--
 js/features/image-resizer.js     | 338 +++++++++++++++++-------------
 js/features/qr-code.js           | 111 +++++++---
 pages/image-resizer.html         | 125 ++++++++----
 pages/qr-code.html               | 157 +++++++-------
 8 files changed, 1149 insertions(+), 529 deletions(-)

diff --git a/css/components/image-resizer.css b/css/components/image-resizer.css
index 60fdfe3..d57be7d 100644
--- a/css/components/image-resizer.css
+++ b/css/components/image-resizer.css
@@ -1,123 +1,284 @@
-.image-container {
-    width: 100%;
-    min-height: 200px;
-    border: 2px dashed var(--accent-color);
+.resizer-controls {
+    background: var(--card-bg);
     border-radius: 10px;
-    margin: 1rem 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-    transition: all 0.3s ease;
+    padding: 2rem;
+    margin-top: 2rem;
+}
+
+/* Drop Zone */
+.drop-zone {
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 10px;
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: var(--transition);
     position: relative;
 }
 
-.image-container.drag-over {
-    background-color: var(--accent-color);
+.drop-zone:hover, .drop-zone.drag-over {
+    border-color: var(--primary-color);
+    background: rgba(0, 255, 255, 0.05);
+}
+
+.drop-zone-content {
+    pointer-events: none;
+}
+
+.drop-zone-content i {
+    font-size: 3rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+.file-types {
+    font-size: 0.9rem;
     opacity: 0.7;
+    margin-top: 0.5rem;
+}
+
+.file-input {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    cursor: pointer;
+}
+
+/* Preview Container */
+.preview-container {
+    margin-top: 2rem;
+}
+
+.preview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
 }
 
-.image-container img {
+.file-info {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.change-image {
+    background: none;
+    border: 1px solid var(--primary-color);
+    color: var(--primary-color);
+    padding: 0.5rem 1rem;
+}
+
+.change-image:hover {
+    background: var(--primary-color);
+    color: var(--text-dark);
+}
+
+.preview-image-container {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
+    padding: 1rem;
+    text-align: center;
+}
+
+#preview-image {
     max-width: 100%;
     max-height: 400px;
-    object-fit: contain;
-    margin: 1rem 0;
+    border-radius: 5px;
 }
 
-.image-controls {
+/* Settings Panel */
+.settings-panel {
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.settings-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1rem;
-    width: 100%;
-    margin-top: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
 }
 
 .dimension-controls {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
     gap: 1rem;
-    align-items: center;
+    align-items: end;
 }
 
-.dimension-controls input[type="number"] {
-    width: 80px;
+.input-group {
+    margin-bottom: 1rem;
 }
 
+.input-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text-light);
+}
+
+.input-group input,
+.input-group select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-light);
+    font-family: inherit;
+    transition: var(--transition);
+}
+
+.input-group input:focus,
+.input-group select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1);
+}
+
+/* Range Input Styling */
+input[type="range"] {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    background: var(--primary-color);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+}
+
+/* Aspect Ratio Lock */
 .aspect-ratio-lock {
-    color: var(--accent-color);
+    background: none;
+    border: none;
+    color: var(--text-light);
+    font-size: 1.2rem;
     cursor: pointer;
-    transition: all 0.3s ease;
+    padding: 0.5rem;
+    opacity: 0.7;
+    transition: var(--transition);
+}
+
+.aspect-ratio-lock:hover {
+    opacity: 1;
 }
 
 .aspect-ratio-lock.locked {
-    color: var(--error-color);
+    color: var(--primary-color);
+    opacity: 1;
 }
 
-.format-controls {
+/* Action Buttons */
+.action-buttons {
     display: flex;
     gap: 1rem;
-    align-items: center;
     justify-content: center;
-    flex-wrap: wrap;
 }
 
-.quality-slider {
-    width: 100%;
-    margin: 1rem 0;
+.primary-button,
+.secondary-button {
+    padding: 0.75rem 1.5rem;
+    border-radius: 5px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: var(--transition);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-.preview-container {
-    position: relative;
-    width: 100%;
-    margin: 1rem 0;
+.primary-button {
+    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+    color: var(--text-dark);
+    border: none;
 }
 
-.preview-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
+.secondary-button {
+    background: none;
+    border: 1px solid var(--primary-color);
+    color: var(--primary-color);
 }
 
-.preview-container:hover .preview-overlay {
-    opacity: 1;
+.primary-button:hover,
+.secondary-button:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }
 
-.file-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    margin-top: 0.5rem;
-    font-size: 0.9rem;
-    color: var(--accent-color);
+.primary-button:disabled,
+.secondary-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
 }
 
-.drop-message {
-    font-size: 1.2rem;
-    color: var(--accent-color);
-    text-align: center;
-    margin: 1rem 0;
+/* Notification */
+.notification {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 1rem 2rem;
+    border-radius: 5px;
+    background: var(--card-bg);
+    color: var(--text-light);
+    display: none;
+    animation: slideIn 0.3s ease-out;
+    z-index: 1000;
+}
+
+.notification.success {
+    background: #28a745;
+}
+
+.notification.error {
+    background: #dc3545;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
 }
 
-@media (max-width: 480px) {
+/* Responsive Design */
+@media (max-width: 768px) {
     .dimension-controls {
-        flex-direction: column;
-        align-items: stretch;
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
     }
 
-    .dimension-controls input[type="number"] {
-        width: 100%;
+    .aspect-ratio-lock {
+        justify-self: center;
+    }
+
+    .action-buttons {
+        flex-direction: column;
     }
 
-    .format-controls {
+    .preview-header {
         flex-direction: column;
+        gap: 1rem;
+        text-align: center;
     }
 } 
\ No newline at end of file
diff --git a/css/components/qr-code.css b/css/components/qr-code.css
index 6ea1ad2..f4b5109 100644
--- a/css/components/qr-code.css
+++ b/css/components/qr-code.css
@@ -1,91 +1,133 @@
 .qr-controls {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
+    background: var(--card-bg);
+    border-radius: 10px;
+    padding: 2rem;
+    margin-top: 2rem;
+}
+
+.input-group {
+    margin-bottom: 1.5rem;
+}
+
+.input-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text-light);
+}
+
+.input-group input,
+.input-group select,
+.input-group textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-light);
+    font-family: inherit;
+    transition: var(--transition);
+}
+
+.input-group input:focus,
+.input-group select:focus,
+.input-group textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1);
+}
+
+.input-group input[type="color"] {
+    height: 40px;
+    padding: 0.25rem;
+    cursor: pointer;
 }
 
 .settings-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
+    margin-bottom: 1.5rem;
 }
 
-.qr-output {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 256px;
-    background-color: var(--input-bg);
-    border-radius: 10px;
-    padding: 1rem;
-    overflow: hidden;
-}
-
-.qr-output svg, .qr-output canvas {
-    max-width: 100%;
-    height: auto;
+.output-container {
+    margin-top: 2rem;
+    text-align: center;
 }
 
-.output-container {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: center;
+.qr-output {
+    background: white;
+    padding: 1rem;
+    border-radius: 10px;
+    display: inline-block;
+    margin-bottom: 1rem;
+    min-height: 256px;
+    min-width: 256px;
 }
 
 .output-actions {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
+    margin-top: 1rem;
 }
 
-/* Color input styling */
-input[type="color"] {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 40px;
+button {
+    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+    color: var(--text-dark);
     border: none;
+    padding: 0.75rem 1.5rem;
     border-radius: 5px;
-    padding: 0;
     cursor: pointer;
+    font-weight: bold;
+    transition: var(--transition);
 }
 
-input[type="color"]::-webkit-color-swatch-wrapper {
-    padding: 0;
+button:hover {
+    opacity: 0.9;
+    transform: translateY(-2px);
 }
 
-input[type="color"]::-webkit-color-swatch {
-    border: none;
-    border-radius: 5px;
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
 }
 
-input[type="color"]::-moz-color-swatch {
-    border: none;
+.notification {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 1rem 2rem;
     border-radius: 5px;
+    background: var(--card-bg);
+    color: var(--text-light);
+    display: none;
+    animation: slideIn 0.3s ease-out;
+    z-index: 1000;
 }
 
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .settings-grid {
-        grid-template-columns: 1fr;
+.notification.success {
+    background: #28a745;
+}
+
+.notification.error {
+    background: #dc3545;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
     }
-    
-    .output-actions {
-        flex-direction: column;
-    }
-    
-    .qr-output {
-        min-height: 200px;
+    to {
+        transform: translateX(0);
+        opacity: 1;
     }
 }
 
-@media (max-width: 480px) {
-    input[type="color"] {
-        height: 32px;
+@media (max-width: 768px) {
+    .settings-grid {
+        grid-template-columns: 1fr;
     }
-    
+
     .qr-output {
-        min-height: 150px;
-        padding: 0.5rem;
+        max-width: 100%;
     }
 } 
\ No newline at end of file
diff --git a/css/styles.css b/css/styles.css
index e2aeca9..15b7289 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,140 +1,290 @@
-/* Theme variables */
-@import 'themes/theme-variables.css';
-
-/* Components */
-@import 'components/buttons.css';
-@import 'components/inputs.css';
-@import 'components/progress.css';
-@import 'components/navigation.css';
-@import 'components/image-resizer.css';
-@import 'components/color-palette.css';
-@import 'components/ascii-art.css';
-@import 'components/qr-code.css';
-@import 'components/about.css';
-
-/* Utils */
-@import 'utils/animations.css';
-
-/* Base styles */
-body {
-    font-family: 'Roboto', sans-serif;
-    background-color: var(--bg-color);
-    color: var(--text-color);
+:root {
+    --primary-color: #00ffff;
+    --secondary-color: #ff00de;
+    --bg-dark: #0c0c0c;
+    --bg-light: #ffffff;
+    --text-dark: #1a1a1a;
+    --text-light: #ffffff;
+    --card-bg: #1a1a1a;
+    --card-hover: #2a2a2a;
+    --transition: all 0.3s ease;
+}
+
+/* Base Styles */
+* {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: var(--bg-dark);
+    color: var(--text-light);
+    line-height: 1.6;
+}
+
+h1, h2, h3, h4 {
+    font-family: 'Orbitron', sans-serif;
+    margin-bottom: 1rem;
+}
+
+a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: var(--transition);
+}
+
+a:hover {
+    color: var(--secondary-color);
+}
+
+/* Header & Navigation */
+.hero {
+    background: linear-gradient(135deg, var(--bg-dark), #1a1a1a);
+    padding: 2rem 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.nav-container {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-    min-height: 100vh;
-    transition: all 0.3s ease;
+    padding: 0 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.logo h1 {
+    font-size: 2rem;
+    margin: 0;
+    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.theme-toggle button {
+    background: none;
+    border: none;
+    color: var(--text-light);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0.5rem;
+    transition: var(--transition);
+}
+
+.theme-toggle button:hover {
+    color: var(--primary-color);
+}
+
+.hero-content {
+    padding: 4rem 2rem;
+    max-width: 800px;
+    margin: 0 auto;
 }
 
+.hero-title {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+}
+
+.hero-subtitle {
+    font-size: 1.5rem;
+    opacity: 0.9;
+}
+
+/* Main Content */
 .container {
-    background-color: var(--container-bg);
-    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 4rem 2rem;
+}
+
+/* Tools Grid */
+.tools-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    margin-bottom: 4rem;
+}
+
+.tool-card {
+    background: var(--card-bg);
     border-radius: 10px;
-    box-shadow: 0 0 20px var(--shadow-color);
-    max-width: 800px;
-    width: 100%;
-    margin: 1rem;
-    transition: all 0.3s ease;
+    padding: 2rem;
+    text-align: center;
+    transition: var(--transition);
+    cursor: pointer;
     position: relative;
+    overflow: hidden;
+}
+
+.tool-card:hover {
+    transform: translateY(-5px);
+    background: var(--card-hover);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.tool-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    opacity: 0;
+    transition: var(--transition);
+}
+
+.tool-card:hover::before {
+    opacity: 1;
+}
+
+.tool-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--primary-color);
+}
+
+.tool-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
 }
 
-.content {
+.tool-card p {
+    margin-bottom: 1.5rem;
+    opacity: 0.9;
+}
+
+.tool-features {
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     gap: 1rem;
 }
 
-/* Text-to-Speech specific layouts */
-.controls-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1rem;
-    margin: 1rem 0;
+.tool-features span {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 0.25rem 0.75rem;
+    border-radius: 15px;
+    font-size: 0.9rem;
 }
 
-.text-controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
+/* Features Section */
+.features {
+    text-align: center;
+    padding: 4rem 0;
 }
 
-.text-actions {
-    display: flex;
-    gap: 0.5rem;
+.features h2 {
+    margin-bottom: 3rem;
 }
 
-.history-section, .templates-section {
-    margin-top: 2rem;
-    padding-top: 1rem;
-    border-top: 1px solid var(--input-border);
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
 }
 
-.history-list {
-    max-height: 200px;
-    overflow-y: auto;
-    margin-top: 1rem;
+.feature {
+    padding: 2rem;
 }
 
-.history-item {
-    padding: 0.5rem;
-    margin-bottom: 0.5rem;
-    background-color: var(--input-bg);
-    border-radius: 5px;
-    cursor: pointer;
-    transition: all 0.3s ease;
+.feature i {
+    font-size: 2.5rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
 }
 
-.history-item:hover {
-    background-color: var(--accent-color);
-    color: var(--bg-color);
+/* Footer */
+.footer {
+    background: var(--card-bg);
+    padding: 4rem 2rem 2rem;
 }
 
-.template-buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-top: 1rem;
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 2rem;
+    margin-bottom: 2rem;
 }
 
-#language-detect {
-    margin-top: 0.5rem;
-    font-size: 0.9rem;
-    color: var(--accent-color);
+.footer-section h4 {
+    color: var(--primary-color);
+    margin-bottom: 1rem;
 }
 
-.theme-toggle {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
+.footer-section ul {
+    list-style: none;
 }
 
-/* Responsive adjustments */
+.footer-section ul li {
+    margin-bottom: 0.5rem;
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Responsive Design */
 @media (max-width: 768px) {
+    .hero-title {
+        font-size: 2rem;
+    }
+
+    .hero-subtitle {
+        font-size: 1.2rem;
+    }
+
     .container {
-        margin: 0.5rem;
-        padding: 1rem;
+        padding: 2rem 1rem;
+    }
+
+    .tools-grid {
+        gap: 1rem;
     }
-    
-    .controls-grid {
+
+    .footer-content {
         grid-template-columns: 1fr;
+        text-align: center;
     }
 }
 
-@media (max-width: 480px) {
-    .neon-text {
-        font-size: 1.5rem;
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
     }
-    
-    .text-controls {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .text-actions {
-        margin-top: 0.5rem;
+    to {
+        opacity: 1;
+        transform: translateY(0);
     }
 }
+
+.tool-card {
+    animation: fadeIn 0.5s ease-out forwards;
+}
+
+.tool-card:nth-child(2) {
+    animation-delay: 0.1s;
+}
+
+.tool-card:nth-child(3) {
+    animation-delay: 0.2s;
+}
+
+.tool-card:nth-child(4) {
+    animation-delay: 0.3s;
+}
+
+.tool-card:nth-child(5) {
+    animation-delay: 0.4s;
+}
diff --git a/index.html b/index.html
index 62ed25c..621f135 100644
--- a/index.html
+++ b/index.html
@@ -3,30 +3,146 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Digital Services Hub</title>
+    <title>Digital Services Hub - Web Tools for Digital Tasks</title>
+    <meta name="description" content="A collection of free web-based tools for everyday digital tasks including text-to-speech, image resizing, color palettes, ASCII art, and QR codes.">
     <link rel="stylesheet" href="css/styles.css">
-    <link rel="stylesheet" href="css/components/navigation.css">
-    <script type="module" src="js/common.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
 <body>
-    <header>
-        <h1>Digital Services Hub</h1>
-        <nav>
-            <ul>
-                <li><a href="pages/text-to-speech.html">Text to Speech</a></li>
-                <li><a href="pages/image-resizer.html">Image Resizer</a></li>
-                <li><a href="pages/color-palette.html">Color Palette</a></li>
-                <li><a href="pages/ascii-art.html">ASCII Art</a></li>
-                <li><a href="pages/qr-code.html">QR Code</a></li>
-                <li><a href="pages/about.html">About</a></li>
-            </ul>
+    <header class="hero">
+        <nav id="main-nav" class="nav-container">
+            <div class="logo">
+                <h1>Digital Services Hub</h1>
+            </div>
+            <div class="theme-toggle">
+                <button id="theme-button" aria-label="Toggle theme">
+                    <i class="fas fa-moon"></i>
+                </button>
+            </div>
         </nav>
+        <div class="hero-content">
+            <h2 class="hero-title">Welcome to Digital Services Hub</h2>
+            <p class="hero-subtitle">Free web-based tools for your digital tasks</p>
+        </div>
     </header>
-    <main>
-        <section class="welcome">
-            <h2>Welcome to Digital Services Hub</h2>
-            <p>A collection of useful web-based tools for everyday digital tasks.</p>
+
+    <main class="container">
+        <section class="tools-grid">
+            <article class="tool-card" onclick="window.location.href='pages/text-to-speech.html'">
+                <div class="tool-icon">
+                    <i class="fas fa-volume-up"></i>
+                </div>
+                <h3>Text to Speech</h3>
+                <p>Convert text to natural-sounding speech with multiple voices and languages.</p>
+                <div class="tool-features">
+                    <span>Multiple voices</span>
+                    <span>Download audio</span>
+                </div>
+            </article>
+
+            <article class="tool-card" onclick="window.location.href='pages/image-resizer.html'">
+                <div class="tool-icon">
+                    <i class="fas fa-image"></i>
+                </div>
+                <h3>Image Resizer</h3>
+                <p>Resize and optimize your images while maintaining quality.</p>
+                <div class="tool-features">
+                    <span>Preserve ratio</span>
+                    <span>Multiple formats</span>
+                </div>
+            </article>
+
+            <article class="tool-card" onclick="window.location.href='pages/color-palette.html'">
+                <div class="tool-icon">
+                    <i class="fas fa-palette"></i>
+                </div>
+                <h3>Color Palette</h3>
+                <p>Generate beautiful color harmonies for your designs.</p>
+                <div class="tool-features">
+                    <span>Color harmony</span>
+                    <span>Export options</span>
+                </div>
+            </article>
+
+            <article class="tool-card" onclick="window.location.href='pages/ascii-art.html'">
+                <div class="tool-icon">
+                    <i class="fas fa-font"></i>
+                </div>
+                <h3>ASCII Art</h3>
+                <p>Convert images into creative ASCII art with customization options.</p>
+                <div class="tool-features">
+                    <span>Custom styles</span>
+                    <span>Export text</span>
+                </div>
+            </article>
+
+            <article class="tool-card" onclick="window.location.href='pages/qr-code.html'">
+                <div class="tool-icon">
+                    <i class="fas fa-qrcode"></i>
+                </div>
+                <h3>QR Code</h3>
+                <p>Generate customizable QR codes for your links and data.</p>
+                <div class="tool-features">
+                    <span>Custom styles</span>
+                    <span>Download PNG</span>
+                </div>
+            </article>
+        </section>
+
+        <section class="features">
+            <h2>Why Choose Digital Services Hub?</h2>
+            <div class="features-grid">
+                <div class="feature">
+                    <i class="fas fa-bolt"></i>
+                    <h3>Fast & Efficient</h3>
+                    <p>All tools are optimized for speed and performance.</p>
+                </div>
+                <div class="feature">
+                    <i class="fas fa-lock"></i>
+                    <h3>Secure</h3>
+                    <p>Your data stays in your browser, no server uploads needed.</p>
+                </div>
+                <div class="feature">
+                    <i class="fas fa-universal-access"></i>
+                    <h3>Accessible</h3>
+                    <p>Built with accessibility in mind for all users.</p>
+                </div>
+                <div class="feature">
+                    <i class="fas fa-mobile-alt"></i>
+                    <h3>Responsive</h3>
+                    <p>Works seamlessly on desktop and mobile devices.</p>
+                </div>
+            </div>
         </section>
     </main>
+
+    <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-section">
+                <h4>Digital Services Hub</h4>
+                <p>Free web-based tools for everyday digital tasks.</p>
+            </div>
+            <div class="footer-section">
+                <h4>Quick Links</h4>
+                <ul>
+                    <li><a href="pages/about.html">About</a></li>
+                    <li><a href="https://github.com/yourusername/digital-services-hub">GitHub</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h4>Legal</h4>
+                <ul>
+                    <li><a href="#">Privacy Policy</a></li>
+                    <li><a href="#">Terms of Use</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>&copy; 2024 Digital Services Hub. All rights reserved.</p>
+        </div>
+    </footer>
+
+    <script src="js/common.js"></script>
 </body>
 </html>
diff --git a/js/features/image-resizer.js b/js/features/image-resizer.js
index cd487f1..7ddc51b 100644
--- a/js/features/image-resizer.js
+++ b/js/features/image-resizer.js
@@ -5,19 +5,30 @@ import { fileValidation } from '../utils/validation.js';
 import utils from '../utils/helpers.js';
 
 class ImageResizer extends BaseTool {
+    constructor() {
+        this.elements = this.initializeElements();
+        this.state = this.initializeState();
+        this.initialize();
+        this.bindEvents();
+    }
+
     initializeElements() {
         return {
-            container: document.querySelector('.image-container'),
-            preview: document.querySelector('.preview-container img'),
+            dropZone: document.getElementById('drop-zone'),
+            fileInput: document.getElementById('file-input'),
+            previewContainer: document.getElementById('preview-container'),
+            previewImage: document.getElementById('preview-image'),
+            settingsPanel: document.getElementById('settings-panel'),
             widthInput: document.getElementById('width'),
             heightInput: document.getElementById('height'),
+            aspectRatioLock: document.getElementById('aspect-ratio-lock'),
+            formatSelect: document.getElementById('format'),
             qualityInput: document.getElementById('quality'),
             qualityValue: document.getElementById('quality-value'),
-            formatSelect: document.getElementById('format'),
-            aspectRatioLock: document.querySelector('.aspect-ratio-lock'),
+            resizeButton: document.getElementById('resize-button'),
             downloadButton: document.getElementById('download-button'),
-            fileInfo: document.querySelector('.file-info'),
-            dropMessage: document.querySelector('.drop-message'),
+            changeImageButton: document.getElementById('change-image'),
+            fileInfo: document.getElementById('file-info'),
             themeButton: document.getElementById('theme-button'),
             notification: document.querySelector('.notification')
         };
@@ -25,78 +36,79 @@ class ImageResizer extends BaseTool {
 
     initializeState() {
         return {
-            currentImage: null,
-            originalDimensions: { width: 0, height: 0 },
-            aspectRatioLocked: true,
+            currentTheme: localStorage.getItem('theme') || 'dark',
+            originalImage: null,
             aspectRatio: 1,
-            currentTheme: utils.getStorageItem(STORAGE_KEYS.THEME) || 'dark',
-            supportedFormats: FILE_LIMITS.SUPPORTED_IMAGE_TYPES
+            isAspectRatioLocked: true,
+            resizedImage: null,
+            currentFile: null
         };
     }
 
-    updateFileInfo(file) {
-        const size = this.formatFileSize(file.size);
-        this.elements.fileInfo.textContent = `${file.name} - ${size}`;
+    initialize() {
+        document.documentElement.setAttribute('data-theme', this.state.currentTheme);
+        this.elements.aspectRatioLock.classList.add('locked');
+        this.elements.downloadButton.disabled = true;
     }
 
-    handleImageLoad(img) {
-        try {
-            // Validate image dimensions
-            if (img.naturalWidth > FILE_LIMITS.MAX_IMAGE_DIMENSION || 
-                img.naturalHeight > FILE_LIMITS.MAX_IMAGE_DIMENSION) {
-                throw new Error(`Image dimensions exceed the maximum limit of ${FILE_LIMITS.MAX_IMAGE_DIMENSION}px`);
-            }
-
-            this.state.originalDimensions = {
-                width: img.naturalWidth,
-                height: img.naturalHeight
-            };
-            this.state.aspectRatio = img.naturalWidth / img.naturalHeight;
-
-            this.elements.widthInput.value = img.naturalWidth;
-            this.elements.heightInput.value = img.naturalHeight;
-            this.elements.preview.src = img.src;
-            this.elements.container.classList.remove('drag-over');
-            this.elements.downloadButton.disabled = false;
+    showNotification(message, type = 'info') {
+        this.elements.notification.textContent = message;
+        this.elements.notification.className = `notification ${type}`;
+        this.elements.notification.style.display = 'block';
 
-            notifications.success('Image loaded successfully');
-        } catch (error) {
-            console.error('Error loading image:', error);
-            notifications.error(error.message || 'Failed to load image');
-            this.resetState();
-        }
+        setTimeout(() => {
+            this.elements.notification.style.display = 'none';
+        }, 3000);
     }
 
-    async loadImage(file) {
-        try {
-            // Validate file
-            await fileValidation.validateFileSize(file);
-            fileValidation.validateFileType(file, this.state.supportedFormats);
+    updateFileInfo(file) {
+        const size = this.formatFileSize(file.size);
+        this.elements.fileInfo.textContent = `${file.name} (${size})`;
+    }
 
-            this.state.currentImage = file;
-            this.updateFileInfo(file);
+    formatFileSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
 
-            const img = await utils.loadImage(URL.createObjectURL(file));
-            this.handleImageLoad(img);
-        } catch (error) {
-            console.error('Error loading image:', error);
-            notifications.error(error.message || 'Failed to load image');
-            this.resetState();
+    handleFile(file) {
+        if (!file.type.startsWith('image/')) {
+            this.showNotification('Please select an image file.', 'error');
+            return;
         }
-    }
 
-    resetState() {
-        this.state.currentImage = null;
-        this.state.originalDimensions = { width: 0, height: 0 };
-        this.state.aspectRatio = 1;
-        this.elements.preview.src = '';
-        this.elements.fileInfo.textContent = '';
-        this.elements.downloadButton.disabled = true;
-        this.elements.container.classList.remove('drag-over');
+        this.state.currentFile = file;
+        const reader = new FileReader();
+
+        reader.onload = (e) => {
+            const img = new Image();
+            img.onload = () => {
+                this.state.originalImage = img;
+                this.state.aspectRatio = img.width / img.height;
+                
+                // Update inputs with original dimensions
+                this.elements.widthInput.value = img.width;
+                this.elements.heightInput.value = img.height;
+                
+                // Show preview and settings
+                this.elements.previewImage.src = e.target.result;
+                this.elements.previewContainer.style.display = 'block';
+                this.elements.settingsPanel.style.display = 'block';
+                this.elements.dropZone.style.display = 'none';
+                
+                this.updateFileInfo(file);
+            };
+            img.src = e.target.result;
+        };
+
+        reader.readAsDataURL(file);
     }
 
     updateDimension(dimension, value) {
-        if (this.state.aspectRatioLocked) {
+        if (this.state.isAspectRatioLocked) {
             if (dimension === 'width') {
                 this.elements.heightInput.value = Math.round(value / this.state.aspectRatio);
             } else {
@@ -106,116 +118,134 @@ class ImageResizer extends BaseTool {
     }
 
     toggleAspectRatio() {
-        this.state.aspectRatioLocked = !this.state.aspectRatioLocked;
-        this.elements.aspectRatioLock.classList.toggle('locked', this.state.aspectRatioLocked);
-        this.elements.aspectRatioLock.textContent = 
-            this.state.aspectRatioLocked ? '🔒' : '🔓';
-        
-        notifications.info(
-            this.state.aspectRatioLocked ? 
-            'Aspect ratio locked' : 
-            'Aspect ratio unlocked'
-        );
+        this.state.isAspectRatioLocked = !this.state.isAspectRatioLocked;
+        this.elements.aspectRatioLock.classList.toggle('locked');
+        const icon = this.elements.aspectRatioLock.querySelector('i');
+        icon.className = this.state.isAspectRatioLocked ? 'fas fa-lock' : 'fas fa-lock-open';
     }
 
     async resizeImage() {
-        if (!this.state.currentImage) return null;
+        if (!this.state.originalImage) {
+            this.showNotification('Please select an image first.', 'error');
+            return;
+        }
 
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
         const width = parseInt(this.elements.widthInput.value);
         const height = parseInt(this.elements.heightInput.value);
-
-        canvas.width = width;
-        canvas.height = height;
-
-        const img = await utils.loadImage(this.elements.preview.src);
-        ctx.drawImage(img, 0, 0, width, height);
-
         const format = this.elements.formatSelect.value;
         const quality = parseInt(this.elements.qualityInput.value) / 100;
 
-        return new Promise((resolve) => {
-            canvas.toBlob(
-                (blob) => resolve(blob),
-                `image/${format}`,
-                format === 'jpeg' ? quality : undefined
-            );
-        });
-    }
-
-    async downloadImage() {
         try {
-            const blob = await this.resizeImage();
-            if (!blob) {
-                notifications.error('No image to download');
-                return;
+            // Create canvas for resizing
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+
+            // Enable image smoothing
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = 'high';
+
+            // Draw resized image
+            ctx.drawImage(this.state.originalImage, 0, 0, width, height);
+
+            // Convert to blob
+            const blob = await new Promise(resolve => {
+                canvas.toBlob(resolve, `image/${format}`, quality);
+            });
+
+            // Create object URL for preview and download
+            if (this.state.resizedImage) {
+                URL.revokeObjectURL(this.state.resizedImage);
             }
+            this.state.resizedImage = URL.createObjectURL(blob);
+            this.elements.previewImage.src = this.state.resizedImage;
+            this.elements.downloadButton.disabled = false;
 
-            const format = this.elements.formatSelect.value;
-            const filename = this.state.currentImage.name.replace(
-                /\.[^/.]+$/,
-                `.${format}`
-            );
-
-            this.downloadFile(blob, filename);
-            notifications.success('Image downloaded successfully');
+            this.showNotification('Image resized successfully!', 'success');
         } catch (error) {
-            console.error('Error downloading image:', error);
-            notifications.error('Failed to download image. Please try again.');
+            console.error('Error resizing image:', error);
+            this.showNotification('Error resizing image. Please try again.', 'error');
         }
     }
 
+    downloadImage() {
+        if (!this.state.resizedImage) {
+            this.showNotification('Please resize the image first.', 'error');
+            return;
+        }
+
+        const format = this.elements.formatSelect.value;
+        const link = document.createElement('a');
+        link.href = this.state.resizedImage;
+        link.download = `resized_${this.state.currentFile.name.replace(/\.[^/.]+$/, '')}.${format}`;
+        link.click();
+    }
+
+    resetUI() {
+        this.elements.previewContainer.style.display = 'none';
+        this.elements.settingsPanel.style.display = 'none';
+        this.elements.dropZone.style.display = 'block';
+        this.elements.downloadButton.disabled = true;
+        this.elements.fileInput.value = '';
+        if (this.state.resizedImage) {
+            URL.revokeObjectURL(this.state.resizedImage);
+        }
+    }
+
+    toggleTheme() {
+        const newTheme = this.state.currentTheme === 'dark' ? 'light' : 'dark';
+        this.state.currentTheme = newTheme;
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+    }
+
     bindEvents() {
-        // Drag and drop events
-        const dragOverHandler = this.debounce((e) => {
-            e.preventDefault();
-            this.elements.container.classList.add('drag-over');
-        }, UI_CONSTANTS.DEBOUNCE_DELAY);
+        // File input change
+        this.elements.fileInput.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) this.handleFile(file);
+        });
 
-        this.elements.container.addEventListener('dragover', dragOverHandler);
+        // Drag and drop
+        this.elements.dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            this.elements.dropZone.classList.add('drag-over');
+        });
 
-        this.elements.container.addEventListener('dragleave', () => {
-            this.elements.container.classList.remove('drag-over');
+        this.elements.dropZone.addEventListener('dragleave', () => {
+            this.elements.dropZone.classList.remove('drag-over');
         });
 
-        this.elements.container.addEventListener('drop', (e) => {
+        this.elements.dropZone.addEventListener('drop', (e) => {
             e.preventDefault();
+            this.elements.dropZone.classList.remove('drag-over');
             const file = e.dataTransfer.files[0];
-            if (file) this.loadImage(file);
+            if (file) this.handleFile(file);
         });
 
-        // File input event
-        this.elements.container.addEventListener('click', () => {
-            const input = document.createElement('input');
-            input.type = 'file';
-            input.accept = 'image/*';
-            input.onchange = (e) => {
-                const file = e.target.files[0];
-                if (file) this.loadImage(file);
-            };
-            input.click();
+        // Dimension inputs
+        this.elements.widthInput.addEventListener('input', (e) => {
+            this.updateDimension('width', parseInt(e.target.value));
         });
 
-        // Dimension inputs
-        this.elements.widthInput.addEventListener('input', 
-            this.debounce((e) => this.updateDimension('width', parseInt(e.target.value)), 
-            UI_CONSTANTS.DEBOUNCE_DELAY)
-        );
+        this.elements.heightInput.addEventListener('input', (e) => {
+            this.updateDimension('height', parseInt(e.target.value));
+        });
 
-        this.elements.heightInput.addEventListener('input',
-            this.debounce((e) => this.updateDimension('height', parseInt(e.target.value)),
-            UI_CONSTANTS.DEBOUNCE_DELAY)
-        );
+        // Aspect ratio lock
+        this.elements.aspectRatioLock.addEventListener('click', () => {
+            this.toggleAspectRatio();
+        });
 
         // Quality slider
         this.elements.qualityInput.addEventListener('input', (e) => {
             this.elements.qualityValue.textContent = `${e.target.value}%`;
         });
 
-        // Aspect ratio lock
-        this.elements.aspectRatioLock.addEventListener('click', () => {
-            this.toggleAspectRatio();
+        // Resize button
+        this.elements.resizeButton.addEventListener('click', () => {
+            this.resizeImage();
         });
 
         // Download button
@@ -223,20 +253,34 @@ class ImageResizer extends BaseTool {
             this.downloadImage();
         });
 
+        // Change image button
+        this.elements.changeImageButton.addEventListener('click', () => {
+            this.resetUI();
+        });
+
         // Theme toggle
         this.elements.themeButton.addEventListener('click', () => {
-            this.toggleTheme(STORAGE_KEYS.THEME);
+            this.toggleTheme();
         });
 
         // Keyboard shortcuts
-        this.addKeyboardShortcut('s', () => this.downloadImage(), { ctrl: true });
-        this.addKeyboardShortcut('l', () => this.toggleAspectRatio(), { ctrl: true });
-    }
-
-    initialize() {
-        document.documentElement.setAttribute('data-theme', this.state.currentTheme);
-        this.elements.aspectRatioLock.textContent = '🔒';
-        this.elements.downloadButton.disabled = true;
+        document.addEventListener('keydown', (e) => {
+            // Ctrl/Cmd + O to open file
+            if ((e.ctrlKey || e.metaKey) && e.key === 'o') {
+                e.preventDefault();
+                this.elements.fileInput.click();
+            }
+            // Ctrl/Cmd + R to resize
+            if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
+                e.preventDefault();
+                this.resizeImage();
+            }
+            // Ctrl/Cmd + S to save
+            if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+                e.preventDefault();
+                this.downloadImage();
+            }
+        });
     }
 }
 
diff --git a/js/features/qr-code.js b/js/features/qr-code.js
index 9e0ff08..6e97798 100644
--- a/js/features/qr-code.js
+++ b/js/features/qr-code.js
@@ -1,10 +1,11 @@
-import { BaseTool } from './base-tool.js';
-import { notifications } from '../utils/ui.js';
-import { STORAGE_KEYS, UI_CONSTANTS } from '../utils/constants.js';
-import { inputValidation } from '../utils/validation.js';
-import utils from '../utils/helpers.js';
+class QRCode {
+    constructor() {
+        this.elements = this.initializeElements();
+        this.state = this.initializeState();
+        this.initialize();
+        this.bindEvents();
+    }
 
-class QRCode extends BaseTool {
     initializeElements() {
         return {
             textInput: document.getElementById('text-input'),
@@ -22,7 +23,7 @@ class QRCode extends BaseTool {
 
     initializeState() {
         return {
-            currentTheme: utils.getStorageItem(STORAGE_KEYS.THEME) || 'dark',
+            currentTheme: localStorage.getItem('theme') || 'dark',
             qrInstance: null,
             defaultOptions: {
                 width: 256,
@@ -50,24 +51,40 @@ class QRCode extends BaseTool {
         };
     }
 
+    showNotification(message, type = 'info') {
+        this.elements.notification.textContent = message;
+        this.elements.notification.className = `notification ${type}`;
+        this.elements.notification.style.display = 'block';
+
+        setTimeout(() => {
+            this.elements.notification.style.display = 'none';
+        }, 3000);
+    }
+
     validateInput() {
-        try {
-            const text = this.elements.textInput.value.trim();
-            inputValidation.validateRequired(text, 'Text or URL');
+        const text = this.elements.textInput.value.trim();
+        if (!text) {
+            this.showNotification('Please enter text or URL', 'error');
+            return false;
+        }
 
-            // If it looks like a URL, validate it
-            if (text.includes('://') || text.includes('www.')) {
-                inputValidation.validateURL(text);
+        // If it looks like a URL, validate it
+        if (text.includes('://') || text.includes('www.')) {
+            try {
+                new URL(text.startsWith('http') ? text : `http://${text}`);
+            } catch {
+                this.showNotification('Please enter a valid URL', 'error');
+                return false;
             }
+        }
 
-            const size = parseInt(this.elements.sizeInput.value);
-            inputValidation.validateNumberRange(size, 128, 1024, 'QR Code size');
-
-            return true;
-        } catch (error) {
-            notifications.error(error.message);
+        const size = parseInt(this.elements.sizeInput.value);
+        if (isNaN(size) || size < 128 || size > 1024) {
+            this.showNotification('Size must be between 128 and 1024 pixels', 'error');
             return false;
         }
+
+        return true;
     }
 
     getQROptions() {
@@ -106,17 +123,16 @@ class QRCode extends BaseTool {
             this.elements.qrContainer.innerHTML = '';
             
             // Generate new QR code
-            const qrCode = await QRCodeStyling.create(options);
-            this.state.qrInstance = qrCode;
+            this.state.qrInstance = new QRCodeStyling(options);
             
             // Render QR code
-            await qrCode.append(this.elements.qrContainer);
+            await this.state.qrInstance.append(this.elements.qrContainer);
             
             this.elements.downloadButton.disabled = false;
-            notifications.success('QR code generated successfully!');
+            this.showNotification('QR code generated successfully!', 'success');
         } catch (error) {
             console.error('Error generating QR code:', error);
-            notifications.error('Error generating QR code. Please try again.');
+            this.showNotification('Error generating QR code. Please try again.', 'error');
             this.resetState();
         }
     }
@@ -129,7 +145,7 @@ class QRCode extends BaseTool {
 
     async downloadQRCode() {
         if (!this.state.qrInstance) {
-            notifications.error('Please generate a QR code first.');
+            this.showNotification('Please generate a QR code first.', 'error');
             return;
         }
 
@@ -143,17 +159,36 @@ class QRCode extends BaseTool {
                 name: fileName
             });
             
-            notifications.success('QR code downloaded successfully!');
+            this.showNotification('QR code downloaded successfully!', 'success');
         } catch (error) {
             console.error('Error downloading QR code:', error);
-            notifications.error('Error downloading QR code. Please try again.');
+            this.showNotification('Error downloading QR code. Please try again.', 'error');
         }
     }
 
+    debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+
+    toggleTheme() {
+        const newTheme = this.state.currentTheme === 'dark' ? 'light' : 'dark';
+        this.state.currentTheme = newTheme;
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+    }
+
     bindEvents() {
         // Generate QR code
         this.elements.generateButton.addEventListener('click', 
-            this.debounce(() => this.generateQRCode(), UI_CONSTANTS.DEBOUNCE_DELAY)
+            this.debounce(() => this.generateQRCode(), 300)
         );
 
         // Auto-generate on input change
@@ -171,7 +206,7 @@ class QRCode extends BaseTool {
                     if (this.elements.textInput.value.trim()) {
                         this.generateQRCode();
                     }
-                }, UI_CONSTANTS.DEBOUNCE_DELAY)
+                }, 300)
             );
         });
 
@@ -182,20 +217,30 @@ class QRCode extends BaseTool {
 
         // Theme toggle
         this.elements.themeButton.addEventListener('click', () => {
-            this.toggleTheme(STORAGE_KEYS.THEME);
+            this.toggleTheme();
         });
 
         // Enter key in text input
         this.elements.textInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
+            if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
                 this.generateQRCode();
             }
         });
 
         // Keyboard shortcuts
-        this.addKeyboardShortcut('g', () => this.generateQRCode(), { ctrl: true });
-        this.addKeyboardShortcut('s', () => this.downloadQRCode(), { ctrl: true });
+        document.addEventListener('keydown', (e) => {
+            // Ctrl/Cmd + G to generate
+            if ((e.ctrlKey || e.metaKey) && e.key === 'g') {
+                e.preventDefault();
+                this.generateQRCode();
+            }
+            // Ctrl/Cmd + S to save
+            if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+                e.preventDefault();
+                this.downloadQRCode();
+            }
+        });
     }
 
     initialize() {
diff --git a/pages/image-resizer.html b/pages/image-resizer.html
index 3c933db..2b7e343 100644
--- a/pages/image-resizer.html
+++ b/pages/image-resizer.html
@@ -4,68 +4,111 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Image Resizer - Digital Services Hub</title>
+    <meta name="description" content="Resize and optimize your images while maintaining quality. Support for multiple formats and aspect ratio preservation.">
     <link rel="stylesheet" href="../css/styles.css">
+    <link rel="stylesheet" href="../css/components/image-resizer.css">
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
 <body>
-    <div class="container">
-        <h1 class="neon-text">Image Resizer</h1>
-        
-        <nav id="main-nav"></nav>
-
-        <div class="content">
+    <header class="hero">
+        <nav id="main-nav" class="nav-container">
+            <div class="logo">
+                <a href="../index.html">
+                    <h1>Digital Services Hub</h1>
+                </a>
+            </div>
             <div class="theme-toggle">
-                <button id="theme-button" class="tech-button small">Toggle Theme</button>
+                <button id="theme-button" aria-label="Toggle theme">
+                    <i class="fas fa-moon"></i>
+                </button>
             </div>
+        </nav>
+        <div class="hero-content">
+            <h2 class="hero-title">Image Resizer</h2>
+            <p class="hero-subtitle">Resize and optimize your images with precision</p>
+        </div>
+    </header>
 
-            <div class="image-container">
-                <div class="drop-message">
-                    Drop image here or click to upload
+    <main class="container">
+        <div class="resizer-controls">
+            <!-- Drop Zone -->
+            <div class="drop-zone" id="drop-zone">
+                <input type="file" id="file-input" accept="image/*" class="file-input" aria-label="Choose an image file">
+                <div class="drop-zone-content">
+                    <i class="fas fa-cloud-upload-alt"></i>
+                    <p>Drop image here or click to upload</p>
+                    <p class="file-types">Supports: JPG, PNG, WebP, GIF</p>
                 </div>
-                <div class="preview-container">
-                    <img src="" alt="Preview" style="display: none;">
-                    <div class="preview-overlay">
-                        <button class="tech-button small">Change Image</button>
-                    </div>
+            </div>
+
+            <!-- Preview Area -->
+            <div class="preview-container" id="preview-container" style="display: none;">
+                <div class="preview-header">
+                    <span class="file-info" id="file-info"></span>
+                    <button class="change-image" id="change-image">
+                        <i class="fas fa-sync-alt"></i>
+                        Change Image
+                    </button>
+                </div>
+                <div class="preview-image-container">
+                    <img id="preview-image" src="" alt="Image preview">
                 </div>
-                <div class="file-info"></div>
             </div>
 
-            <div class="image-controls">
-                <div class="input-group">
+            <!-- Image Settings -->
+            <div class="settings-panel" id="settings-panel" style="display: none;">
+                <div class="settings-grid">
+                    <!-- Dimensions -->
                     <div class="dimension-controls">
-                        <div>
-                            <label for="width">Width:</label>
-                            <input type="number" id="width" min="1" step="1">
+                        <div class="input-group">
+                            <label for="width">Width (px):</label>
+                            <input type="number" id="width" min="1" step="1" aria-label="Width in pixels">
                         </div>
-                        <span class="aspect-ratio-lock" title="Lock aspect ratio">🔒</span>
-                        <div>
-                            <label for="height">Height:</label>
-                            <input type="number" id="height" min="1" step="1">
+                        <button class="aspect-ratio-lock" id="aspect-ratio-lock" aria-label="Lock aspect ratio">
+                            <i class="fas fa-lock"></i>
+                        </button>
+                        <div class="input-group">
+                            <label for="height">Height (px):</label>
+                            <input type="number" id="height" min="1" step="1" aria-label="Height in pixels">
                         </div>
                     </div>
-                </div>
 
-                <div class="input-group">
-                    <label for="format">Format:</label>
-                    <select id="format">
-                        <option value="jpeg">JPEG</option>
-                        <option value="png">PNG</option>
-                        <option value="webp">WebP</option>
-                        <option value="gif">GIF</option>
-                    </select>
+                    <!-- Format -->
+                    <div class="input-group">
+                        <label for="format">Output Format:</label>
+                        <select id="format" aria-label="Output format">
+                            <option value="jpeg">JPEG</option>
+                            <option value="png">PNG</option>
+                            <option value="webp">WebP</option>
+                            <option value="gif">GIF</option>
+                        </select>
+                    </div>
+
+                    <!-- Quality -->
+                    <div class="input-group">
+                        <label for="quality">Quality: <span id="quality-value">80%</span></label>
+                        <input type="range" id="quality" min="1" max="100" value="80" aria-label="Image quality">
+                    </div>
                 </div>
 
-                <div class="input-group">
-                    <label for="quality">Quality: <span id="quality-value">80%</span></label>
-                    <input type="range" id="quality" min="1" max="100" value="80">
+                <!-- Actions -->
+                <div class="action-buttons">
+                    <button id="resize-button" class="primary-button">
+                        <i class="fas fa-crop-alt"></i>
+                        Resize Image
+                    </button>
+                    <button id="download-button" class="secondary-button" disabled>
+                        <i class="fas fa-download"></i>
+                        Download
+                    </button>
                 </div>
             </div>
-
-            <button id="download-button" class="tech-button" disabled>Download Resized Image</button>
         </div>
-    </div>
-    <script src="../js/common.js"></script>
+    </main>
+
+    <div class="notification" role="alert" aria-live="polite"></div>
+
     <script src="../js/features/image-resizer.js"></script>
 </body>
 </html>
diff --git a/pages/qr-code.html b/pages/qr-code.html
index 36addd4..be824d9 100644
--- a/pages/qr-code.html
+++ b/pages/qr-code.html
@@ -4,96 +4,115 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>QR Code Generator - Digital Services Hub</title>
+    <meta name="description" content="Generate customizable QR codes with various styles and download options.">
     <link rel="stylesheet" href="../css/styles.css">
+    <link rel="stylesheet" href="../css/components/qr-code.css">
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
-    <script src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 </head>
 <body>
-    <div class="container">
-        <h1 class="neon-text">QR Code Generator</h1>
-        
-        <nav id="main-nav"></nav>
-
-        <div class="content">
+    <header class="hero">
+        <nav id="main-nav" class="nav-container">
+            <div class="logo">
+                <a href="../index.html">
+                    <h1>Digital Services Hub</h1>
+                </a>
+            </div>
             <div class="theme-toggle">
-                <button id="theme-button" class="tech-button small">Toggle Theme</button>
+                <button id="theme-button" aria-label="Toggle theme">
+                    <i class="fas fa-moon"></i>
+                </button>
             </div>
+        </nav>
+        <div class="hero-content">
+            <h2 class="hero-title">QR Code Generator</h2>
+            <p class="hero-subtitle">Create customizable QR codes for your links and data</p>
+        </div>
+    </header>
 
-            <div class="qr-controls">
+    <main class="container">
+        <div class="qr-controls">
+            <div class="input-group">
+                <label for="text-input">Text or URL:</label>
+                <textarea 
+                    id="text-input" 
+                    rows="3" 
+                    placeholder="Enter text or URL to generate QR code"
+                    aria-label="Enter text or URL to generate QR code"
+                ></textarea>
+            </div>
+
+            <div class="settings-grid">
                 <div class="input-group">
-                    <label for="text-input">Text or URL:</label>
-                    <textarea 
-                        id="text-input" 
-                        rows="3" 
-                        placeholder="Enter text or URL to generate QR code"
-                        aria-label="Enter text or URL to generate QR code"
-                    ></textarea>
+                    <label for="size-input">Size (px):</label>
+                    <input 
+                        type="number" 
+                        id="size-input" 
+                        value="256" 
+                        min="128" 
+                        max="1024" 
+                        step="32"
+                        aria-label="QR code size in pixels"
+                    >
                 </div>
 
-                <div class="settings-grid">
-                    <div class="input-group">
-                        <label for="size-input">Size (px):</label>
-                        <input 
-                            type="number" 
-                            id="size-input" 
-                            value="256" 
-                            min="128" 
-                            max="1024" 
-                            step="32"
-                            aria-label="QR code size in pixels"
-                        >
-                    </div>
-
-                    <div class="input-group">
-                        <label for="error-correction-select">Error Correction:</label>
-                        <select 
-                            id="error-correction-select"
-                            aria-label="Error correction level"
-                        >
-                            <option value="L">Low (7%)</option>
-                            <option value="M">Medium (15%)</option>
-                            <option value="Q">Quartile (25%)</option>
-                            <option value="H" selected>High (30%)</option>
-                        </select>
-                    </div>
+                <div class="input-group">
+                    <label for="error-correction-select">Error Correction:</label>
+                    <select 
+                        id="error-correction-select"
+                        aria-label="Error correction level"
+                    >
+                        <option value="L">Low (7%)</option>
+                        <option value="M">Medium (15%)</option>
+                        <option value="Q">Quartile (25%)</option>
+                        <option value="H" selected>High (30%)</option>
+                    </select>
+                </div>
 
-                    <div class="input-group">
-                        <label for="dark-color-input">Dark Color:</label>
-                        <input 
-                            type="color" 
-                            id="dark-color-input" 
-                            value="#000000"
-                            aria-label="QR code dark color"
-                        >
-                    </div>
+                <div class="input-group">
+                    <label for="dark-color-input">Dark Color:</label>
+                    <input 
+                        type="color" 
+                        id="dark-color-input" 
+                        value="#000000"
+                        aria-label="QR code dark color"
+                    >
+                </div>
 
-                    <div class="input-group">
-                        <label for="light-color-input">Light Color:</label>
-                        <input 
-                            type="color" 
-                            id="light-color-input" 
-                            value="#ffffff"
-                            aria-label="QR code light color"
-                        >
-                    </div>
+                <div class="input-group">
+                    <label for="light-color-input">Light Color:</label>
+                    <input 
+                        type="color" 
+                        id="light-color-input" 
+                        value="#ffffff"
+                        aria-label="QR code light color"
+                    >
                 </div>
+            </div>
 
-                <button id="generate-button" class="tech-button">Generate QR Code</button>
+            <button id="generate-button">
+                <i class="fas fa-qrcode"></i>
+                Generate QR Code
+            </button>
 
-                <div class="output-container">
-                    <div id="qr-container" class="qr-output" role="img" aria-label="Generated QR code"></div>
-                    
-                    <div class="output-actions">
-                        <button id="download-button" class="tech-button small" disabled>Download QR Code</button>
-                    </div>
+            <div class="output-container">
+                <div id="qr-container" class="qr-output" role="img" aria-label="Generated QR code"></div>
+                
+                <div class="output-actions">
+                    <button id="download-button" disabled>
+                        <i class="fas fa-download"></i>
+                        Download QR Code
+                    </button>
                 </div>
             </div>
         </div>
-    </div>
+    </main>
 
     <div class="notification" role="alert" aria-live="polite"></div>
 
-    <script src="../js/common.js"></script>
+    <!-- Load QR Code library first -->
+    <script src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
+    <!-- Then load our scripts -->
     <script src="../js/features/qr-code.js"></script>
 </body>
 </html> 
\ No newline at end of file