diff --git a/assets/html_files/respwebsites.html b/assets/html_files/respwebsites.html
index 86378fa..a8522a6 100644
--- a/assets/html_files/respwebsites.html
+++ b/assets/html_files/respwebsites.html
@@ -56,6 +56,18 @@ <h3>Shopify</h3>
     <!-- Shopping Ends here -->
 
     <!-- Add more project cards -->
+     <div class="category-card">
+      <h3>Pixel Art Generator</h3>
+      <a href ="../../website/Responsive_Websites/Pixel_art_generator/index.html" class="play-button">View Project</a>
+      <a href="#" class="play-button" onclick="copyLocalCode('../../website/Responsive_Websites/Pixel_art_generator/index.html')"> Copy Code <i class="fab fa-github"></i></a>
+      
+     </div>
+    <!-- Add more project cards -->
+     <div class="category-card">
+      <h3>My Diary</h3>
+      <a href ="../../website/Responsive_Websites/my_diary/index.html" class="play-button">View Project</a>
+      <a href="#" class="play-button" onclick="copyLocalCode('../../website/Responsive_Websites/my_diary/index.html')"> Copy Code <i class="fab fa-github"></i></a>
+      </div>
   </main>
   <script>
   fetch("/footer.html")
diff --git a/website/Responsive_Websites/Pixel_art_generator/index.html b/website/Responsive_Websites/Pixel_art_generator/index.html
new file mode 100644
index 0000000..cd7a3a3
--- /dev/null
+++ b/website/Responsive_Websites/Pixel_art_generator/index.html
@@ -0,0 +1,969 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pixel Art Generator</title>
+    <meta name="description" content="Create stunning pixel art with modern tools" />
+<style>
+    * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    /* Color System */
+    --background: hsl(240, 10%, 3.9%);
+    --foreground: hsl(0, 0%, 98%);
+    --card: hsl(240, 10%, 3.9%);
+    --card-foreground: hsl(0, 0%, 98%);
+    --primary: hsl(263, 70%, 50%);
+    --primary-foreground: hsl(0, 0%, 98%);
+    --secondary: hsl(240, 3.7%, 15.9%);
+    --secondary-foreground: hsl(0, 0%, 98%);
+    --muted: hsl(240, 3.7%, 15.9%);
+    --muted-foreground: hsl(240, 5%, 64.9%);
+    --accent: hsl(142, 71%, 45%);
+    --accent-foreground: hsl(240, 10%, 3.9%);
+    --destructive: hsl(0, 72%, 51%);
+    --destructive-foreground: hsl(0, 0%, 98%);
+    --border: hsl(240, 3.7%, 15.9%);
+    --input: hsl(240, 3.7%, 15.9%);
+    --ring: hsl(263, 70%, 50%);
+    
+    /* Pixel Art Specific */
+    --pixel-grid: hsl(240, 5%, 26%);
+    --pixel-canvas: hsl(0, 0%, 98%);
+    --canvas-border: hsl(240, 3.7%, 15.9%);
+    --tool-active: hsl(263, 70%, 50%);
+    --tool-hover: hsl(263, 70%, 60%);
+    
+    /* Spacing */
+    --radius: 0.75rem;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    background-color: var(--background);
+    color: var(--foreground);
+    line-height: 1.5;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+/* Header */
+.header {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    background: linear-gradient(135deg, var(--primary), var(--accent));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+}
+
+.subtitle {
+    color: var(--muted-foreground);
+    font-size: 1.125rem;
+}
+
+/* Main Content Layout */
+.main-content {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    gap: 2rem;
+    margin-bottom: 3rem;
+}
+
+@media (max-width: 1024px) {
+    .main-content {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Panel Styling */
+.panel-card {
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 2rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.panel-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--foreground);
+    margin-bottom: 1.5rem;
+}
+
+.section {
+    margin-bottom: 2rem;
+}
+
+.section:last-child {
+    margin-bottom: 0;
+}
+
+.section-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--foreground);
+    margin-bottom: 0.75rem;
+}
+
+/* Tools */
+.tools-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+}
+
+.tool-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem;
+    border: 2px solid var(--border);
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--foreground);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.tool-btn:hover {
+    border-color: var(--tool-hover);
+    background-color: hsla(142, 71%, 45%, 0.1);
+    transform: scale(1.05);
+}
+
+.tool-btn.active {
+    border-color: var(--tool-active);
+    background-color: hsla(263, 70%, 50%, 0.1);
+    color: var(--tool-active);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Grid Size */
+.size-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+}
+
+.size-btn {
+    padding: 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--foreground);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.size-btn:hover {
+    border-color: var(--tool-hover);
+    background-color: hsla(142, 71%, 45%, 0.1);
+}
+
+.size-btn.active {
+    border-color: var(--tool-active);
+    background-color: hsla(263, 70%, 50%, 0.1);
+    color: var(--tool-active);
+}
+
+/* File Operations */
+.file-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 1rem;
+    border: none;
+    border-radius: var(--radius);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-bottom: 0.75rem;
+    text-decoration: none;
+    font-size: 0.875rem;
+}
+
+.save-btn {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.save-btn:hover {
+    background-color: hsla(142, 71%, 45%, 0.9);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transform: scale(1.05);
+}
+
+.load-btn {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.load-btn:hover {
+    background-color: hsla(240, 3.7%, 15.9%, 0.9);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transform: scale(1.05);
+}
+
+/* Canvas */
+.canvas-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.pixel-grid {
+    border: 2px solid var(--canvas-border);
+    border-radius: var(--radius);
+    background-color: var(--pixel-canvas);
+    cursor: crosshair;
+    user-select: none;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.pixel {
+    border: 1px solid hsla(240, 5%, 26%, 0.2);
+    transition: background-color 0.075s ease;
+}
+
+.clear-btn {
+    padding: 1rem 2rem;
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+    border: none;
+    border-radius: var(--radius);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.clear-btn:hover {
+    background-color: hsla(0, 72%, 51%, 0.9);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transform: scale(1.05);
+}
+
+/* Color Palette */
+.current-color {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.color-display {
+    width: 3rem;
+    height: 3rem;
+    border-radius: var(--radius);
+    border: 2px solid var(--border);
+    background-color: #000000;
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+}
+
+.color-text {
+    font-family: 'Courier New', monospace;
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+}
+
+.custom-color {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+#colorPicker {
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    background: none;
+}
+
+#colorInput {
+    flex: 1;
+    padding: 0.75rem;
+    background-color: var(--input);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--foreground);
+    font-family: 'Courier New', monospace;
+    font-size: 0.875rem;
+}
+
+#colorInput:focus {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 2px hsla(263, 70%, 50%, 0.5);
+}
+
+.color-grid {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 0.5rem;
+}
+
+.color-btn {
+    width: 2rem;
+    height: 2rem;
+    border: 2px solid var(--border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.color-btn:hover {
+    border-color: var(--tool-hover);
+    transform: scale(1.1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.color-btn.active {
+    border-color: var(--tool-active);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 0 2px hsla(263, 70%, 50%, 0.5);
+}
+
+/* Instructions */
+.instructions {
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 2rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.instructions-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--foreground);
+    margin-bottom: 1.5rem;
+}
+
+.instructions-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+
+.instructions-column {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.instructions-column p {
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+}
+
+.instruction-label {
+    font-weight: 500;
+    color: var(--foreground);
+}
+
+/* Toast Notifications */
+.toast-container {
+    position: fixed;
+    top: 2rem;
+    right: 2rem;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.toast {
+    padding: 1rem 1.5rem;
+    border-radius: var(--radius);
+    color: white;
+    font-weight: 500;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+    max-width: 300px;
+}
+
+.toast.show {
+    transform: translateX(0);
+}
+
+.toast.success {
+    background-color: var(--accent);
+}
+
+.toast.error {
+    background-color: var(--destructive);
+}
+
+.toast.info {
+    background-color: var(--primary);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+    }
+    
+    .title {
+        font-size: 2rem;
+    }
+    
+    .tools-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .color-grid {
+        grid-template-columns: repeat(6, 1fr);
+    }
+    
+    .instructions-grid {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <div class="header">
+            <h1 class="title">Pixel Art Generator</h1>
+            <p class="subtitle">Create stunning pixel art with modern tools and intuitive controls</p>
+        </div>
+
+        <!-- Main Content -->
+        <div class="main-content">
+            <!-- Tools Panel -->
+            <div class="panel">
+                <div class="panel-card">
+                    <h3 class="panel-title">Tools & Settings</h3>
+                    
+                    <!-- Tools -->
+                    <div class="section">
+                        <label class="section-label">Tools</label>
+                        <div class="tools-grid">
+                            <button class="tool-btn active" data-tool="draw">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"/>
+                                    <path d="m7.07 14.94-1.13 1.13a3 3 0 0 1-4.24 0l-1.06-1.06a3 3 0 0 1 0-4.24l1.13-1.13"/>
+                                </svg>
+                                <span>Draw</span>
+                            </button>
+                            <button class="tool-btn" data-tool="erase">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/>
+                                    <path d="M22 21H7"/>
+                                    <path d="m5 11 9 9"/>
+                                </svg>
+                                <span>Erase</span>
+                            </button>
+                            <button class="tool-btn" data-tool="fill">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M10 2v20"/>
+                                    <path d="M12 2v20"/>
+                                    <path d="M14 2v20"/>
+                                    <path d="M4 7h16"/>
+                                    <path d="M4 17h16"/>
+                                </svg>
+                                <span>Fill</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Grid Size -->
+                    <div class="section">
+                        <label class="section-label">Canvas Size</label>
+                        <div class="size-grid">
+                            <button class="size-btn" data-size="16">16×16</button>
+                            <button class="size-btn active" data-size="32">32×32</button>
+                            <button class="size-btn" data-size="48">48×48</button>
+                            <button class="size-btn" data-size="64">64×64</button>
+                        </div>
+                    </div>
+
+                    <!-- File Operations -->
+                    <div class="section">
+                        <label class="section-label">File Operations</label>
+                        <button class="file-btn save-btn" id="saveBtn">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                                <polyline points="7,10 12,15 17,10"/>
+                                <line x1="12" x2="12" y1="15" y2="3"/>
+                            </svg>
+                            Save as PNG
+                        </button>
+                        <label class="file-btn load-btn" for="loadInput">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                                <polyline points="17,8 12,3 7,8"/>
+                                <line x1="12" x2="12" y1="3" y2="15"/>
+                            </svg>
+                            Load Image
+                        </label>
+                        <input type="file" id="loadInput" accept="image/*" style="display: none;">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Canvas -->
+            <div class="canvas-container">
+                <div id="pixelGrid" class="pixel-grid"></div>
+                <button id="clearBtn" class="clear-btn">Clear Canvas</button>
+            </div>
+
+            <!-- Color Palette -->
+            <div class="panel">
+                <div class="panel-card">
+                    <h3 class="panel-title">Color Palette</h3>
+                    
+                    <!-- Current Color -->
+                    <div class="current-color">
+                        <div id="currentColorDisplay" class="color-display"></div>
+                        <span id="currentColorText" class="color-text">#000000</span>
+                    </div>
+
+                    <!-- Custom Color -->
+                    <div class="section">
+                        <label class="section-label">Custom Color</label>
+                        <div class="custom-color">
+                            <input type="color" id="colorPicker" value="#000000">
+                            <input type="text" id="colorInput" value="#000000" placeholder="#000000">
+                        </div>
+                    </div>
+
+                    <!-- Preset Colors -->
+                    <div class="section">
+                        <label class="section-label">Preset Colors</label>
+                        <div class="color-grid" id="colorGrid"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Instructions -->
+        <div class="instructions">
+            <h3 class="instructions-title">How to Use</h3>
+            <div class="instructions-grid">
+                <div class="instructions-column">
+                    <p><span class="instruction-label">Draw:</span> Click and drag to paint pixels</p>
+                    <p><span class="instruction-label">Erase:</span> Remove pixels by clicking/dragging</p>
+                    <p><span class="instruction-label">Fill:</span> Click to fill connected areas</p>
+                </div>
+                <div class="instructions-column">
+                    <p><span class="instruction-label">Colors:</span> Use presets or create custom colors</p>
+                    <p><span class="instruction-label">Canvas:</span> Choose from 16×16 to 64×64 grids</p>
+                    <p><span class="instruction-label">Save/Load:</span> Export as PNG or import images</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast Notifications -->
+    <div id="toastContainer" class="toast-container"></div>
+
+    <script>
+        class PixelArtGenerator {
+    constructor() {
+        this.currentColor = '#000000';
+        this.currentTool = 'draw';
+        this.gridSize = 32;
+        this.pixelSize = 20;
+        this.pixels = [];
+        this.isDrawing = false;
+        
+        this.defaultColors = [
+            '#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF',
+            '#800000', '#008000', '#000080', '#808000', '#800080', '#008080', '#C0C0C0', '#808080',
+            '#FF8080', '#80FF80', '#8080FF', '#FFFF80', '#FF80FF', '#80FFFF', '#FFC080', '#C080FF',
+            '#FF4040', '#40FF40', '#4040FF', '#FFFF40', '#FF40FF', '#40FFFF', '#FF8040', '#8040FF'
+        ];
+        
+        this.init();
+    }
+
+    init() {
+        this.setupEventListeners();
+        this.createColorPalette();
+        this.createPixelGrid();
+        this.updateCurrentColorDisplay();
+    }
+
+    setupEventListeners() {
+        // Tool selection
+        document.querySelectorAll('.tool-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                this.setTool(e.currentTarget.dataset.tool);
+            });
+        });
+
+        // Grid size selection
+        document.querySelectorAll('.size-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                this.setGridSize(parseInt(e.currentTarget.dataset.size));
+            });
+        });
+
+        // Color picker
+        document.getElementById('colorPicker').addEventListener('input', (e) => {
+            this.setColor(e.target.value);
+        });
+
+        document.getElementById('colorInput').addEventListener('input', (e) => {
+            if (this.isValidHex(e.target.value)) {
+                this.setColor(e.target.value);
+            }
+        });
+
+        // File operations
+        document.getElementById('saveBtn').addEventListener('click', () => {
+            this.saveAsImage();
+        });
+
+        document.getElementById('loadInput').addEventListener('change', (e) => {
+            this.loadImage(e);
+        });
+
+        // Clear button
+        document.getElementById('clearBtn').addEventListener('click', () => {
+            this.clearCanvas();
+        });
+    }
+
+    createColorPalette() {
+        const colorGrid = document.getElementById('colorGrid');
+        colorGrid.innerHTML = '';
+        
+        this.defaultColors.forEach(color => {
+            const colorBtn = document.createElement('button');
+            colorBtn.className = 'color-btn';
+            colorBtn.style.backgroundColor = color;
+            colorBtn.title = color;
+            colorBtn.addEventListener('click', () => {
+                this.setColor(color);
+            });
+            colorGrid.appendChild(colorBtn);
+        });
+    }
+
+    createPixelGrid() {
+        this.pixels = Array(this.gridSize).fill(null).map(() => Array(this.gridSize).fill('#ffffff'));
+        this.pixelSize = Math.min(600 / this.gridSize, 20);
+        
+        const grid = document.getElementById('pixelGrid');
+        grid.innerHTML = '';
+        grid.style.width = `${this.gridSize * this.pixelSize}px`;
+        grid.style.height = `${this.gridSize * this.pixelSize}px`;
+        grid.style.display = 'grid';
+        grid.style.gridTemplateColumns = `repeat(${this.gridSize}, ${this.pixelSize}px)`;
+        grid.style.gridTemplateRows = `repeat(${this.gridSize}, ${this.pixelSize}px)`;
+
+        for (let y = 0; y < this.gridSize; y++) {
+            for (let x = 0; x < this.gridSize; x++) {
+                const pixel = document.createElement('div');
+                pixel.className = 'pixel';
+                pixel.style.width = `${this.pixelSize}px`;
+                pixel.style.height = `${this.pixelSize}px`;
+                pixel.style.backgroundColor = '#ffffff';
+                pixel.dataset.x = x;
+                pixel.dataset.y = y;
+                
+                pixel.addEventListener('mousedown', (e) => {
+                    this.startDrawing(e);
+                });
+                
+                pixel.addEventListener('mouseenter', (e) => {
+                    this.continueDrawing(e);
+                });
+                
+                pixel.addEventListener('mouseup', () => {
+                    this.stopDrawing();
+                });
+                
+                grid.appendChild(pixel);
+            }
+        }
+
+        // Prevent context menu and handle mouse leave
+        grid.addEventListener('contextmenu', (e) => e.preventDefault());
+        grid.addEventListener('mouseleave', () => {
+            this.stopDrawing();
+        });
+    }
+
+    getPixelPosition(e) {
+        const x = parseInt(e.target.dataset.x);
+        const y = parseInt(e.target.dataset.y);
+        return { x, y };
+    }
+
+    startDrawing(e) {
+        this.isDrawing = true;
+        const pos = this.getPixelPosition(e);
+        if (pos.x !== undefined && pos.y !== undefined) {
+            this.updatePixel(pos.x, pos.y, e.target);
+        }
+    }
+
+    continueDrawing(e) {
+        if (!this.isDrawing || this.currentTool === 'fill') return;
+        
+        const pos = this.getPixelPosition(e);
+        if (pos.x !== undefined && pos.y !== undefined) {
+            this.updatePixel(pos.x, pos.y, e.target);
+        }
+    }
+
+    stopDrawing() {
+        this.isDrawing = false;
+    }
+
+    updatePixel(x, y, element) {
+        if (this.currentTool === 'draw') {
+            this.pixels[y][x] = this.currentColor;
+            element.style.backgroundColor = this.currentColor;
+        } else if (this.currentTool === 'erase') {
+            this.pixels[y][x] = '#ffffff';
+            element.style.backgroundColor = '#ffffff';
+        } else if (this.currentTool === 'fill') {
+            this.floodFill(x, y);
+        }
+    }
+
+    floodFill(startX, startY) {
+        const targetColor = this.pixels[startY][startX];
+        const fillColor = this.currentColor;
+        
+        if (targetColor === fillColor) return;
+
+        const newPixels = this.pixels.map(row => [...row]);
+        const stack = [[startX, startY]];
+
+        while (stack.length > 0) {
+            const [x, y] = stack.pop();
+            
+            if (x < 0 || x >= this.gridSize || y < 0 || y >= this.gridSize) continue;
+            if (newPixels[y][x] !== targetColor) continue;
+
+            newPixels[y][x] = fillColor;
+
+            stack.push([x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1]);
+        }
+
+        this.pixels = newPixels;
+        this.updateGridDisplay();
+    }
+
+    updateGridDisplay() {
+        const grid = document.getElementById('pixelGrid');
+        const pixelElements = grid.children;
+        
+        for (let y = 0; y < this.gridSize; y++) {
+            for (let x = 0; x < this.gridSize; x++) {
+                const index = y * this.gridSize + x;
+                pixelElements[index].style.backgroundColor = this.pixels[y][x];
+            }
+        }
+    }
+
+    setTool(tool) {
+        this.currentTool = tool;
+        
+        // Update UI
+        document.querySelectorAll('.tool-btn').forEach(btn => {
+            btn.classList.remove('active');
+        });
+        document.querySelector(`[data-tool="${tool}"]`).classList.add('active');
+    }
+
+    setGridSize(size) {
+        this.gridSize = size;
+        
+        // Update UI
+        document.querySelectorAll('.size-btn').forEach(btn => {
+            btn.classList.remove('active');
+        });
+        document.querySelector(`[data-size="${size}"]`).classList.add('active');
+        
+        this.createPixelGrid();
+        this.showToast(`Canvas size changed to ${size}×${size}`, 'info');
+    }
+
+    setColor(color) {
+        this.currentColor = color;
+        
+        // Update color picker and input
+        document.getElementById('colorPicker').value = color;
+        document.getElementById('colorInput').value = color;
+        
+        this.updateCurrentColorDisplay();
+        this.updateColorPaletteSelection();
+    }
+
+    updateCurrentColorDisplay() {
+        document.getElementById('currentColorDisplay').style.backgroundColor = this.currentColor;
+        document.getElementById('currentColorText').textContent = this.currentColor;
+    }
+
+    updateColorPaletteSelection() {
+        document.querySelectorAll('.color-btn').forEach(btn => {
+            btn.classList.remove('active');
+            if (btn.style.backgroundColor === this.rgbToHex(this.currentColor) || 
+                btn.title === this.currentColor) {
+                btn.classList.add('active');
+            }
+        });
+    }
+
+    clearCanvas() {
+        this.pixels = Array(this.gridSize).fill(null).map(() => Array(this.gridSize).fill('#ffffff'));
+        this.updateGridDisplay();
+        this.showToast('Canvas cleared!', 'success');
+    }
+
+    saveAsImage() {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        if (this.pixels.length === 0) {
+            this.showToast('No pixel art to save!', 'error');
+            return;
+        }
+
+        canvas.width = this.gridSize;
+        canvas.height = this.gridSize;
+        
+        // Draw pixels
+        this.pixels.forEach((row, y) => {
+            row.forEach((color, x) => {
+                ctx.fillStyle = color;
+                ctx.fillRect(x, y, 1, 1);
+            });
+        });
+
+        // Create download link
+        const link = document.createElement('a');
+        link.download = `pixel-art-${Date.now()}.png`;
+        link.href = canvas.toDataURL();
+        link.click();
+        
+        this.showToast('Pixel art saved successfully!', 'success');
+    }
+
+    loadImage(event) {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        const img = new Image();
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        img.onload = () => {
+            canvas.width = this.gridSize;
+            canvas.height = this.gridSize;
+            
+            // Draw and scale image to grid size
+            ctx.drawImage(img, 0, 0, this.gridSize, this.gridSize);
+            const imageData = ctx.getImageData(0, 0, this.gridSize, this.gridSize);
+            
+            const newPixels = [];
+            for (let y = 0; y < this.gridSize; y++) {
+                const row = [];
+                for (let x = 0; x < this.gridSize; x++) {
+                    const index = (y * this.gridSize + x) * 4;
+                    const r = imageData.data[index];
+                    const g = imageData.data[index + 1];
+                    const b = imageData.data[index + 2];
+                    const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+                    row.push(hex);
+                }
+                newPixels.push(row);
+            }
+            
+            this.pixels = newPixels;
+            this.updateGridDisplay();
+            this.showToast('Image loaded successfully!', 'success');
+        };
+
+        img.src = URL.createObjectURL(file);
+        event.target.value = ''; // Reset input
+    }
+
+    showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        toast.textContent = message;
+        
+        document.getElementById('toastContainer').appendChild(toast);
+        
+        // Trigger animation
+        setTimeout(() => {
+            toast.classList.add('show');
+        }, 100);
+        
+        // Remove toast after delay
+        setTimeout(() => {
+            toast.classList.remove('show');
+            setTimeout(() => {
+                if (toast.parentNode) {
+                    toast.parentNode.removeChild(toast);
+                }
+            }, 300);
+        }, 3000);
+    }
+
+    isValidHex(hex) {
+        return /^#[0-9A-F]{6}$/i.test(hex);
+    }
+
+    rgbToHex(rgb) {
+        // Handle both hex and rgb formats
+        if (rgb.startsWith('#')) return rgb;
+        
+        const result = rgb.match(/\d+/g);
+        if (!result || result.length < 3) return rgb;
+        
+        const r = parseInt(result[0]);
+        const g = parseInt(result[1]);
+        const b = parseInt(result[2]);
+        
+        return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+    }
+}
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new PixelArtGenerator();
+});
+    </script>
+</body>
+</html>
diff --git a/website/Responsive_Websites/my_diary/index.html b/website/Responsive_Websites/my_diary/index.html
new file mode 100644
index 0000000..5a8fb3c
--- /dev/null
+++ b/website/Responsive_Websites/my_diary/index.html
@@ -0,0 +1,640 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="https://public-frontend-cos.metadl.com/mgx/img/favicon.png"
+        type="image/png">
+    <title>My Personal Diary</title>
+ 
+    <style>
+        :root {
+    --primary-color: #4a6fa5;
+    --primary-dark: #3a5982;
+    --secondary-color: #e8eef7;
+    --text-color: #333;
+    --text-light: #666;
+    --danger-color: #e74c3c;
+    --success-color: #27ae60;
+    --border-color: #ddd;
+    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    --transition: all 0.3s ease;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: #f9f9f9;
+    margin: 0;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 30px;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
+h1 {
+    color: var(--primary-color);
+    font-size: 2.5rem;
+}
+
+.tagline {
+    color: var(--text-light);
+    font-style: italic;
+}
+
+main {
+    flex: 1;
+}
+
+/* Diary Layout */
+.diary-container {
+    display: flex;
+    background-color: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    height: calc(100vh - 200px);
+    min-height: 500px;
+}
+
+.sidebar {
+    width: 300px;
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    background-color: var(--secondary-color);
+}
+
+.sidebar-header {
+    padding: 20px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.entry-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+}
+
+.entry-item {
+    padding: 15px;
+    border-bottom: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.entry-item:hover {
+    background-color: #f0f5ff;
+}
+
+.entry-item.active {
+    background-color: #e0ebff;
+    border-left: 4px solid var(--primary-color);
+}
+
+.entry-item h3 {
+    color: var(--primary-color);
+    margin-bottom: 5px;
+    font-size: 1rem;
+}
+
+.entry-item .date {
+    color: var(--text-light);
+    font-size: 0.8rem;
+}
+
+#no-entries-message {
+    color: var(--text-light);
+    text-align: center;
+    padding: 20px;
+    font-style: italic;
+}
+
+.entry-view {
+    flex: 1;
+    padding: 30px;
+    overflow-y: auto;
+}
+
+/* Entry Form */
+.form-group {
+    margin-bottom: 20px;
+}
+
+input[type="text"], textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 1rem;
+    font-family: inherit;
+    transition: var(--transition);
+}
+
+input[type="text"]:focus, textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
+}
+
+textarea {
+    min-height: 300px;
+    resize: vertical;
+}
+
+.form-actions {
+    display: flex;
+    gap: 10px;
+}
+
+/* Entry Display */
+.entry-header {
+    margin-bottom: 20px;
+}
+
+#display-title {
+    color: var(--primary-color);
+    margin-bottom: 5px;
+}
+
+.entry-date {
+    color: var(--text-light);
+    font-style: italic;
+}
+
+.entry-body {
+    margin-bottom: 30px;
+    line-height: 1.8;
+    white-space: pre-wrap;
+}
+
+.entry-actions {
+    margin-top: 20px;
+    display: flex;
+    gap: 10px;
+}
+
+/* Buttons */
+button {
+    cursor: pointer;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    transition: var(--transition);
+}
+
+.primary-btn {
+    background-color: var(--primary-color);
+    color: #fff;
+}
+
+.primary-btn:hover {
+    background-color: var(--primary-dark);
+}
+
+.secondary-btn {
+    background-color: #f1f1f1;
+    color: var(--text-color);
+}
+
+.secondary-btn:hover {
+    background-color: #e3e3e3;
+}
+
+.danger-btn {
+    background-color: var(--danger-color);
+    color: white;
+}
+
+.danger-btn:hover {
+    background-color: #c0392b;
+}
+
+/* Welcome message */
+.welcome-message {
+    text-align: center;
+    color: var(--text-light);
+    padding: 50px 0;
+}
+
+.welcome-message h2 {
+    color: var(--primary-color);
+    margin-bottom: 15px;
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 20px 0;
+    margin-top: 20px;
+    color: var(--text-light);
+    border-top: 1px solid var(--border-color);
+}
+
+/* Modal */
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    max-width: 400px;
+    width: 90%;
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+}
+
+.modal h3 {
+    margin-bottom: 15px;
+    color: var(--text-color);
+}
+
+.modal p {
+    margin-bottom: 20px;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+/* Utility Classes */
+.hidden {
+    display: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .diary-container {
+        flex-direction: column;
+        height: auto;
+    }
+    
+    .sidebar {
+        width: 100%;
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+        max-height: 300px;
+    }
+    
+    .entry-view {
+        padding: 20px;
+    }
+}
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <header>
+            <h1>My Personal Diary</h1>
+            <p class="tagline">Record your thoughts and memories</p>
+        </header>
+        
+        <main>
+            <div class="diary-container">
+                <div class="sidebar">
+                    <div class="sidebar-header">
+                        <h2>Entries</h2>
+                        <button id="new-entry-btn" class="primary-btn">New Entry</button>
+                    </div>
+                    <div class="entry-list" id="entry-list">
+                        <!-- Entries will be added here dynamically -->
+                        <p id="no-entries-message">No entries yet. Click "New Entry" to create one!</p>
+                    </div>
+                </div>
+                
+                <div class="entry-view">
+                    <div id="welcome-message" class="welcome-message">
+                        <h2>Welcome to your Diary!</h2>
+                        <p>Select an entry to view or create a new one.</p>
+                    </div>
+                    
+                    <div id="entry-form" class="hidden">
+                        <div class="form-group">
+                            <input type="text" id="entry-title" placeholder="Entry Title" required>
+                        </div>
+                        <div class="form-group">
+                            <textarea id="entry-content" placeholder="Write your thoughts here..." required></textarea>
+                        </div>
+                        <div class="form-actions">
+                            <button id="save-entry-btn" class="primary-btn">Save Entry</button>
+                            <button id="cancel-entry-btn" class="secondary-btn">Cancel</button>
+                        </div>
+                    </div>
+                    
+                    <div id="entry-display" class="hidden">
+                        <div class="entry-header">
+                            <h2 id="display-title"></h2>
+                            <p id="display-date" class="entry-date"></p>
+                        </div>
+                        <div class="entry-body">
+                            <p id="display-content"></p>
+                        </div>
+                        <div class="entry-actions">
+                            <button id="edit-entry-btn" class="secondary-btn">Edit</button>
+                            <button id="delete-entry-btn" class="danger-btn">Delete</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        
+        <div id="confirmation-modal" class="modal hidden">
+            <div class="modal-content">
+                <h3>Confirm Delete</h3>
+                <p>Are you sure you want to delete this entry? This action cannot be undone.</p>
+                <div class="modal-actions">
+                    <button id="confirm-delete-btn" class="danger-btn">Delete</button>
+                    <button id="cancel-delete-btn" class="secondary-btn">Cancel</button>
+                </div>
+            </div>
+        </div>
+        
+        <div id="modal-overlay" class="modal-overlay hidden"></div>
+        
+        <footer>
+            <p>&copy; 2025 My Personal Diary - Your private space to reflect</p>
+        </footer>
+    </div>
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+    console.log('Diary App initialized!');
+    
+    // DOM Elements
+    const entryList = document.getElementById('entry-list');
+    const noEntriesMessage = document.getElementById('no-entries-message');
+    const newEntryBtn = document.getElementById('new-entry-btn');
+    const welcomeMessage = document.getElementById('welcome-message');
+    const entryForm = document.getElementById('entry-form');
+    const entryDisplay = document.getElementById('entry-display');
+    const entryTitleInput = document.getElementById('entry-title');
+    const entryContentInput = document.getElementById('entry-content');
+    const saveEntryBtn = document.getElementById('save-entry-btn');
+    const cancelEntryBtn = document.getElementById('cancel-entry-btn');
+    const displayTitle = document.getElementById('display-title');
+    const displayDate = document.getElementById('display-date');
+    const displayContent = document.getElementById('display-content');
+    const editEntryBtn = document.getElementById('edit-entry-btn');
+    const deleteEntryBtn = document.getElementById('delete-entry-btn');
+    const confirmationModal = document.getElementById('confirmation-modal');
+    const modalOverlay = document.getElementById('modal-overlay');
+    const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
+    const cancelDeleteBtn = document.getElementById('cancel-delete-btn');
+    
+    // State
+    let diaryEntries = [];
+    let currentEntryId = null;
+    let isEditMode = false;
+    
+    // Initialize app
+    initApp();
+    
+    // Event Listeners
+    newEntryBtn.addEventListener('click', createNewEntry);
+    saveEntryBtn.addEventListener('click', saveEntry);
+    cancelEntryBtn.addEventListener('click', cancelEntry);
+    editEntryBtn.addEventListener('click', editEntry);
+    deleteEntryBtn.addEventListener('click', showDeleteConfirmation);
+    confirmDeleteBtn.addEventListener('click', deleteEntry);
+    cancelDeleteBtn.addEventListener('click', hideDeleteConfirmation);
+    modalOverlay.addEventListener('click', hideDeleteConfirmation);
+    
+    // Functions
+    function initApp() {
+        loadEntriesFromLocalStorage();
+        renderEntryList();
+    }
+    
+    function loadEntriesFromLocalStorage() {
+        const storedEntries = localStorage.getItem('diaryEntries');
+        if (storedEntries) {
+            diaryEntries = JSON.parse(storedEntries);
+        }
+    }
+    
+    function saveEntriesToLocalStorage() {
+        localStorage.setItem('diaryEntries', JSON.stringify(diaryEntries));
+    }
+    
+    function renderEntryList() {
+        // Clear previous entries except the no entries message
+        const listItems = entryList.querySelectorAll('.entry-item');
+        listItems.forEach(item => item.remove());
+        
+        // Show/hide no entries message
+        if (diaryEntries.length === 0) {
+            noEntriesMessage.classList.remove('hidden');
+        } else {
+            noEntriesMessage.classList.add('hidden');
+            
+            // Sort entries by date (newest first)
+            diaryEntries.sort((a, b) => new Date(b.date) - new Date(a.date));
+            
+            // Render each entry
+            diaryEntries.forEach(entry => {
+                const entryItem = document.createElement('div');
+                entryItem.className = 'entry-item';
+                if (currentEntryId === entry.id) {
+                    entryItem.classList.add('active');
+                }
+                
+                const date = new Date(entry.date);
+                const formattedDate = formatDate(date);
+                
+                entryItem.innerHTML = `
+                    <h3>${entry.title}</h3>
+                    <p class="date">${formattedDate}</p>
+                `;
+                
+                entryItem.addEventListener('click', () => selectEntry(entry.id));
+                
+                entryList.appendChild(entryItem);
+            });
+        }
+    }
+    
+    function formatDate(date) {
+        const options = { 
+            year: 'numeric', 
+            month: 'long', 
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        };
+        return date.toLocaleDateString('en-US', options);
+    }
+    
+    function selectEntry(id) {
+        currentEntryId = id;
+        const entry = diaryEntries.find(entry => entry.id === id);
+        
+        if (entry) {
+            displayTitle.textContent = entry.title;
+            displayDate.textContent = formatDate(new Date(entry.date));
+            displayContent.textContent = entry.content;
+            
+            hideAllViews();
+            entryDisplay.classList.remove('hidden');
+            
+            // Update active state in list
+            renderEntryList();
+        }
+    }
+    
+    function createNewEntry() {
+        hideAllViews();
+        entryForm.classList.remove('hidden');
+        
+        // Clear form
+        entryTitleInput.value = '';
+        entryContentInput.value = '';
+        
+        isEditMode = false;
+        currentEntryId = null;
+        
+        entryTitleInput.focus();
+    }
+    
+    function saveEntry() {
+        const title = entryTitleInput.value.trim();
+        const content = entryContentInput.value.trim();
+        
+        if (!title || !content) {
+            alert('Please fill in both title and content fields.');
+            return;
+        }
+        
+        if (isEditMode && currentEntryId) {
+            // Update existing entry
+            const index = diaryEntries.findIndex(entry => entry.id === currentEntryId);
+            if (index !== -1) {
+                diaryEntries[index].title = title;
+                diaryEntries[index].content = content;
+                diaryEntries[index].lastEdited = new Date().toISOString();
+            }
+        } else {
+            // Create new entry
+            const newEntry = {
+                id: generateId(),
+                title: title,
+                content: content,
+                date: new Date().toISOString(),
+                lastEdited: null
+            };
+            
+            diaryEntries.push(newEntry);
+            currentEntryId = newEntry.id;
+        }
+        
+        saveEntriesToLocalStorage();
+        renderEntryList();
+        selectEntry(currentEntryId);
+    }
+    
+    function cancelEntry() {
+        hideAllViews();
+        
+        if (currentEntryId) {
+            selectEntry(currentEntryId);
+        } else {
+            welcomeMessage.classList.remove('hidden');
+        }
+    }
+    
+    function editEntry() {
+        const entry = diaryEntries.find(entry => entry.id === currentEntryId);
+        
+        if (entry) {
+            entryTitleInput.value = entry.title;
+            entryContentInput.value = entry.content;
+            
+            hideAllViews();
+            entryForm.classList.remove('hidden');
+            
+            isEditMode = true;
+            entryTitleInput.focus();
+        }
+    }
+    
+    function showDeleteConfirmation() {
+        confirmationModal.classList.remove('hidden');
+        modalOverlay.classList.remove('hidden');
+    }
+    
+    function hideDeleteConfirmation() {
+        confirmationModal.classList.add('hidden');
+        modalOverlay.classList.add('hidden');
+    }
+    
+    function deleteEntry() {
+        if (currentEntryId) {
+            diaryEntries = diaryEntries.filter(entry => entry.id !== currentEntryId);
+            saveEntriesToLocalStorage();
+            
+            hideDeleteConfirmation();
+            hideAllViews();
+            
+            currentEntryId = null;
+            
+            renderEntryList();
+            
+            if (diaryEntries.length > 0) {
+                // Select the newest entry
+                selectEntry(diaryEntries[0].id);
+            } else {
+                welcomeMessage.classList.remove('hidden');
+            }
+        }
+    }
+    
+    function hideAllViews() {
+        welcomeMessage.classList.add('hidden');
+        entryForm.classList.add('hidden');
+        entryDisplay.classList.add('hidden');
+    }
+    
+    function generateId() {
+        return Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
+    }
+});</script>
+</body>
+
+</html>
\ No newline at end of file
