Upload 9 files

README.md

@@ -1,11 +1,12 @@
----
-title: Unfiltered
-emoji: 🏢
-colorFrom: yellow
-colorTo: purple
-sdk: static
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Mubashra Portfolio
+emoji: 🚀
+colorFrom: green
+colorTo: blue
+sdk: static
+pinned: false
+---
+
+# Mubashra Portfolio
+
+This is a static portfolio website built with HTML, CSS (Tailwind), and JavaScript.

admin.css

@@ -0,0 +1,1493 @@
+/* ===== Mubashra Studio - Premium Admin Editor ===== */
+
+:root {
+    --primary: #2D6A4F;
+    --primary-light: #40916C;
+    --primary-dark: #1B4332;
+    --accent: #52B788;
+
+    /* Pastel Theme */
+    --bg-main: #F7FAF9;
+    --bg-canvas: #FFFFFF;
+    --bg-sidebar: #FFFFFF;
+    --bg-header: rgba(255, 255, 255, 0.95);
+
+    /* Pastel accents */
+    --pastel-green: #D8E9E1;
+    --pastel-green-light: #E8F3EE;
+    --pastel-mint: #E2EFDE;
+
+    /* Text Colors */
+    --text-primary: #111418;
+    --text-secondary: #4A5568;
+    --text-muted: #718096;
+
+    /* Borders */
+    --border-light: #E2E8F0;
+    --border-medium: #CBD5E0;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
+    --shadow-primary: 0 4px 20px rgba(45, 106, 79, 0.25);
+
+    /* Sizing */
+    --header-height: 60px;
+    --sidebar-width: 260px;
+    --mobile-toolbar-height: 56px;
+
+    /* Transitions */
+    --transition-fast: 0.15s ease;
+    --transition-normal: 0.25s ease;
+    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg-main);
+    color: var(--text-primary);
+    overflow: hidden;
+    -webkit-tap-highlight-color: transparent;
+}
+
+/* ===== Auth Overlay ===== */
+.auth-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-main);
+    padding: 1rem;
+}
+
+.auth-overlay.hidden {
+    display: none;
+}
+
+.auth-background {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+}
+
+.blob {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(100px);
+    animation: float 15s infinite ease-in-out;
+}
+
+.blob-1 {
+    top: -10%;
+    left: 10%;
+    width: 45%;
+    height: 45%;
+    background: var(--pastel-green);
+}
+
+.blob-2 {
+    bottom: -5%;
+    right: 5%;
+    width: 50%;
+    height: 50%;
+    background: var(--pastel-mint);
+    animation-delay: 2s;
+}
+
+.blob-3 {
+    top: 20%;
+    right: 15%;
+    width: 30%;
+    height: 30%;
+    background: var(--pastel-green-light);
+    animation-delay: 4s;
+}
+
+@keyframes float {
+    0% {
+        transform: translate(0, 0) scale(1);
+    }
+
+    33% {
+        transform: translate(30px, -50px) scale(1.1);
+    }
+
+    66% {
+        transform: translate(-20px, 20px) scale(0.9);
+    }
+
+    100% {
+        transform: translate(0, 0) scale(1);
+    }
+}
+
+.auth-card {
+    position: relative;
+    z-index: 1;
+    background: var(--bg-canvas);
+    padding: 2rem;
+    border-radius: 24px;
+    border: 1px solid var(--border-light);
+    box-shadow: var(--shadow-lg);
+    text-align: center;
+    width: 100%;
+    max-width: 420px;
+}
+
+@media (min-width: 768px) {
+    .auth-card {
+        padding: 3rem;
+    }
+}
+
+.auth-logo {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 1.5rem;
+    color: var(--primary);
+}
+
+.auth-logo svg {
+    width: 100%;
+    height: 100%;
+}
+
+.auth-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+}
+
+@media (min-width: 768px) {
+    .auth-title {
+        font-size: 1.75rem;
+    }
+}
+
+.auth-subtitle {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    margin-bottom: 1.5rem;
+}
+
+@media (min-width: 768px) {
+    .auth-subtitle {
+        font-size: 0.95rem;
+        margin-bottom: 2rem;
+    }
+}
+
+.auth-input-group {
+    position: relative;
+    margin-bottom: 1.5rem;
+}
+
+.auth-input-group .material-symbols-outlined {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    font-size: 1.25rem;
+}
+
+.auth-input-group input {
+    width: 100%;
+    padding: 1rem 1rem 1rem 3rem;
+    font-size: 1rem;
+    font-family: inherit;
+    border: 1px solid var(--border-light);
+    border-radius: 12px;
+    background: var(--pastel-green-light);
+    color: var(--text-primary);
+    transition: var(--transition-fast);
+}
+
+.auth-input-group input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
+}
+
+.auth-btn {
+    width: 100%;
+    padding: 1rem 2rem;
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: inherit;
+    background: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    transition: var(--transition-normal);
+}
+
+.auth-btn:hover {
+    background: var(--primary-light);
+    box-shadow: var(--shadow-primary);
+}
+
+.auth-btn:active {
+    transform: scale(0.98);
+}
+
+.error-msg {
+    color: #E53E3E;
+    font-size: 0.875rem;
+    margin-top: 1rem;
+    min-height: 1.25rem;
+}
+
+/* ===== Admin Workspace ===== */
+.admin-workspace {
+    width: 100%;
+    height: 100vh;
+    height: 100dvh;
+    display: flex;
+    flex-direction: column;
+}
+
+.admin-workspace.hidden {
+    display: none;
+}
+
+/* ===== Studio Header ===== */
+.studio-header {
+    height: var(--header-height);
+    background: var(--bg-header);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border-light);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.75rem;
+    position: relative;
+    z-index: 100;
+    flex-shrink: 0;
+}
+
+@media (min-width: 768px) {
+    .studio-header {
+        padding: 0 1.25rem;
+    }
+}
+
+.header-left,
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+@media (min-width: 768px) {
+
+    .header-left,
+    .header-right {
+        gap: 0.75rem;
+    }
+}
+
+.menu-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--text-secondary);
+}
+
+.menu-toggle:hover {
+    background: var(--pastel-green-light);
+}
+
+@media (min-width: 992px) {
+    .menu-toggle {
+        display: none;
+    }
+}
+
+.header-center {
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .header-center {
+        display: block;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--primary);
+    font-weight: 700;
+    font-size: 1rem;
+}
+
+@media (min-width: 768px) {
+    .logo {
+        font-size: 1.1rem;
+    }
+}
+
+.logo svg {
+    width: 24px;
+    height: 24px;
+}
+
+@media (min-width: 768px) {
+    .logo svg {
+        width: 28px;
+        height: 28px;
+    }
+}
+
+.logo-text {
+    display: none;
+}
+
+@media (min-width: 640px) {
+    .logo-text {
+        display: inline;
+    }
+}
+
+.title-input {
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: inherit;
+    background: transparent;
+    border: 1px solid transparent;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    text-align: center;
+    color: var(--text-primary);
+    min-width: 200px;
+    transition: var(--transition-fast);
+}
+
+.title-input:hover {
+    background: var(--pastel-green-light);
+}
+
+.title-input:focus {
+    outline: none;
+    background: var(--pastel-green-light);
+    border-color: var(--primary);
+}
+
+/* Zoom Controls */
+.zoom-controls {
+    display: none;
+    align-items: center;
+    gap: 0.25rem;
+    background: var(--pastel-green-light);
+    border-radius: 8px;
+    padding: 0.25rem;
+    margin-right: 0.5rem;
+}
+
+@media (min-width: 768px) {
+    .zoom-controls {
+        display: flex;
+    }
+}
+
+.zoom-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: var(--transition-fast);
+}
+
+.zoom-btn:hover {
+    background: var(--pastel-green);
+    color: var(--primary);
+}
+
+.zoom-btn .material-symbols-outlined {
+    font-size: 1.1rem;
+}
+
+.zoom-level {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    min-width: 40px;
+    text-align: center;
+}
+
+.header-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    font-family: inherit;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: var(--transition-fast);
+    text-decoration: none;
+    min-width: 40px;
+    min-height: 40px;
+}
+
+@media (min-width: 768px) {
+    .header-btn {
+        padding: 0.5rem 1rem;
+    }
+}
+
+.btn-text {
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .btn-text {
+        display: inline;
+    }
+}
+
+.header-btn.primary {
+    background: var(--primary);
+    color: white;
+    border: none;
+}
+
+.header-btn.primary:hover {
+    background: var(--primary-light);
+    box-shadow: var(--shadow-primary);
+}
+
+.header-btn.secondary {
+    background: var(--pastel-green-light);
+    color: var(--primary);
+    border: 1px solid var(--pastel-green);
+}
+
+.header-btn.secondary:hover {
+    background: var(--pastel-green);
+}
+
+.header-btn.ghost {
+    background: transparent;
+    color: var(--text-muted);
+    border: none;
+}
+
+.header-btn.ghost:hover {
+    background: var(--pastel-green-light);
+    color: var(--text-primary);
+}
+
+.header-btn .material-symbols-outlined {
+    font-size: 1.25rem;
+}
+
+/* ===== Mobile Toolbar ===== */
+.mobile-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: var(--mobile-toolbar-height);
+    background: var(--bg-sidebar);
+    border-bottom: 1px solid var(--border-light);
+    padding: 0 0.5rem;
+    flex-shrink: 0;
+}
+
+@media (min-width: 992px) {
+    .mobile-toolbar {
+        display: none;
+    }
+}
+
+.mobile-tool-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    background: var(--pastel-green-light);
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    color: var(--primary);
+    transition: var(--transition-fast);
+}
+
+.mobile-tool-btn:hover,
+.mobile-tool-btn:active {
+    background: var(--pastel-green);
+}
+
+.mobile-tool-btn .material-symbols-outlined {
+    font-size: 1.5rem;
+}
+
+/* ===== Studio Layout ===== */
+.studio-layout {
+    display: flex;
+    height: calc(100vh - var(--header-height) - var(--mobile-toolbar-height));
+    height: calc(100dvh - var(--header-height) - var(--mobile-toolbar-height));
+    overflow: hidden;
+    position: relative;
+}
+
+@media (min-width: 992px) {
+    .studio-layout {
+        height: calc(100vh - var(--header-height));
+        height: calc(100dvh - var(--header-height));
+    }
+}
+
+/* ===== Sidebars ===== */
+.sidebar {
+    width: var(--sidebar-width);
+    background: var(--bg-sidebar);
+    overflow-y: auto;
+    flex-shrink: 0;
+    position: fixed;
+    top: var(--header-height);
+    height: calc(100vh - var(--header-height));
+    height: calc(100dvh - var(--header-height));
+    z-index: 200;
+    transition: var(--transition-normal);
+}
+
+.sidebar-left {
+    left: 0;
+    border-right: 1px solid var(--border-light);
+    transform: translateX(-100%);
+}
+
+.sidebar-left.open {
+    transform: translateX(0);
+}
+
+.sidebar-right {
+    right: 0;
+    border-left: 1px solid var(--border-light);
+    transform: translateX(100%);
+}
+
+.sidebar-right.open {
+    transform: translateX(0);
+}
+
+@media (min-width: 992px) {
+    .sidebar {
+        position: relative;
+        top: auto;
+        height: auto;
+        transform: none !important;
+    }
+}
+
+.sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--border-light);
+}
+
+@media (min-width: 992px) {
+    .sidebar-header {
+        display: none;
+    }
+}
+
+.sidebar-header h3 {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.close-sidebar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--text-muted);
+}
+
+.close-sidebar:hover {
+    background: var(--pastel-green-light);
+}
+
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 150;
+}
+
+.sidebar-overlay.visible {
+    display: block;
+}
+
+@media (min-width: 992px) {
+    .sidebar-overlay {
+        display: none !important;
+    }
+}
+
+.sidebar-section {
+    padding: 1.25rem;
+    border-bottom: 1px solid var(--border-light);
+}
+
+.sidebar-section:last-child {
+    border-bottom: none;
+}
+
+.sidebar-title {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+}
+
+/* ===== Element Grid ===== */
+.element-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+}
+
+.element-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 0.5rem;
+    background: var(--pastel-green-light);
+    border: 1px solid transparent;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: var(--transition-fast);
+    font-family: inherit;
+}
+
+.element-btn:hover,
+.element-btn:active {
+    background: var(--pastel-green);
+    border-color: var(--primary);
+}
+
+.element-btn .material-symbols-outlined {
+    font-size: 1.5rem;
+    color: var(--primary);
+}
+
+.element-btn span:last-child {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+/* ===== Layers List ===== */
+.layers-list {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.empty-layers,
+.empty-properties {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    text-align: center;
+    padding: 1rem;
+}
+
+.layer-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: var(--pastel-green-light);
+    border-radius: 8px;
+    margin-bottom: 0.5rem;
+    cursor: pointer;
+    transition: var(--transition-fast);
+    font-size: 0.85rem;
+}
+
+.layer-item:hover {
+    background: var(--pastel-green);
+}
+
+.layer-item.active {
+    background: var(--primary);
+    color: white;
+}
+
+/* ===== Properties Panel ===== */
+.property-group {
+    margin-bottom: 1rem;
+}
+
+.property-group label {
+    display: block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+}
+
+.property-row {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.property-group.half {
+    flex: 1;
+}
+
+.property-select {
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    font-size: 0.875rem;
+    font-family: inherit;
+    border: 1px solid var(--border-light);
+    border-radius: 8px;
+    background: var(--pastel-green-light);
+    color: var(--text-primary);
+    cursor: pointer;
+}
+
+.property-select:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.input-with-unit {
+    display: flex;
+    align-items: center;
+    background: var(--pastel-green-light);
+    border: 1px solid var(--border-light);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.input-with-unit input {
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    font-size: 0.875rem;
+    font-family: inherit;
+    border: none;
+    background: transparent;
+    color: var(--text-primary);
+}
+
+.input-with-unit input:focus {
+    outline: none;
+}
+
+.input-with-unit span {
+    padding-right: 0.75rem;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.color-picker-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.color-picker-row input[type="color"] {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    background: none;
+}
+
+.color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+.color-picker-row input[type="color"]::-webkit-color-swatch {
+    border: 2px solid var(--border-light);
+    border-radius: 8px;
+}
+
+.color-hex-input {
+    flex: 1;
+    padding: 0.625rem 0.75rem;
+    font-size: 0.875rem;
+    font-family: inherit;
+    border: 1px solid var(--border-light);
+    border-radius: 8px;
+    background: var(--pastel-green-light);
+    color: var(--text-primary);
+    text-transform: uppercase;
+}
+
+.slider-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.slider-row input[type="range"] {
+    flex: 1;
+    -webkit-appearance: none;
+    height: 6px;
+    background: var(--pastel-green);
+    border-radius: 3px;
+    outline: none;
+}
+
+.slider-row input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--primary);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.slider-row span {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--text-muted);
+    min-width: 40px;
+    text-align: right;
+}
+
+.button-group {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.icon-btn {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--pastel-green-light);
+    border: 1px solid transparent;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+
+.icon-btn:hover {
+    background: var(--pastel-green);
+}
+
+.icon-btn.active {
+    background: var(--primary);
+    color: white;
+}
+
+.property-divider {
+    height: 1px;
+    background: var(--border-light);
+    margin: 1rem 0;
+}
+
+.upload-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: var(--pastel-green-light);
+    border: 2px dashed var(--pastel-green);
+    border-radius: 12px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.upload-btn:hover {
+    background: var(--pastel-green);
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+.delete-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    background: #FED7D7;
+    color: #C53030;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+}
+
+.delete-btn:hover {
+    background: #FEB2B2;
+}
+
+/* ===== Canvas Area ===== */
+.canvas-area {
+    flex: 1;
+    overflow: auto;
+    background:
+        linear-gradient(90deg, var(--border-light) 1px, transparent 1px),
+        linear-gradient(var(--border-light) 1px, transparent 1px);
+    background-size: 20px 20px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1rem;
+    min-width: 0;
+}
+
+@media (min-width: 768px) {
+    .canvas-area {
+        padding: 2rem;
+    }
+}
+
+.canvas-wrapper {
+    position: relative;
+    transform-origin: center top;
+    transition: transform 0.2s ease;
+}
+
+.blog-canvas {
+    width: 100%;
+    max-width: 900px;
+    min-width: 320px;
+    min-height: 600px;
+    background: var(--bg-canvas);
+    box-shadow: var(--shadow-lg);
+    border-radius: 8px;
+    position: relative;
+    overflow: visible;
+    touch-action: none;
+}
+
+@media (min-width: 768px) {
+    .blog-canvas {
+        width: 900px;
+        min-height: 1200px;
+    }
+}
+
+.canvas-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    pointer-events: none;
+    padding: 2rem;
+    text-align: center;
+}
+
+.canvas-placeholder .material-symbols-outlined {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    color: var(--pastel-green);
+}
+
+@media (min-width: 768px) {
+    .canvas-placeholder .material-symbols-outlined {
+        font-size: 4rem;
+    }
+}
+
+.canvas-placeholder p {
+    font-size: 0.9rem;
+    line-height: 1.6;
+}
+
+@media (min-width: 768px) {
+    .canvas-placeholder p {
+        font-size: 1rem;
+    }
+}
+
+.canvas-placeholder.hidden {
+    display: none;
+}
+
+/* ===== Draggable Elements ===== */
+.draggable-element {
+    position: absolute;
+    cursor: move;
+    user-select: none;
+    min-width: 50px;
+    min-height: 30px;
+    touch-action: none;
+}
+
+.draggable-element:hover {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+}
+
+.draggable-element.selected {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+
+.draggable-element.dragging {
+    opacity: 0.8;
+    cursor: grabbing;
+    z-index: 1000;
+}
+
+/* Resize Handles */
+.resize-handle {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: var(--primary);
+    border: 2px solid white;
+    border-radius: 4px;
+    z-index: 10;
+    opacity: 0;
+    pointer-events: none;
+    transition: var(--transition-fast);
+}
+
+.draggable-element.selected .resize-handle {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.resize-handle.nw {
+    top: -8px;
+    left: -8px;
+    cursor: nwse-resize;
+}
+
+.resize-handle.ne {
+    top: -8px;
+    right: -8px;
+    cursor: nesw-resize;
+}
+
+.resize-handle.sw {
+    bottom: -8px;
+    left: -8px;
+    cursor: nesw-resize;
+}
+
+.resize-handle.se {
+    bottom: -8px;
+    right: -8px;
+    cursor: nwse-resize;
+}
+
+.resize-handle.n {
+    top: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    cursor: ns-resize;
+}
+
+.resize-handle.s {
+    bottom: -8px;
+    left: 50%;
+    transform: translateX(-50%);
+    cursor: ns-resize;
+}
+
+.resize-handle.e {
+    right: -8px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: ew-resize;
+}
+
+.resize-handle.w {
+    left: -8px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: ew-resize;
+}
+
+/* Element Content Styles */
+.draggable-element .element-content {
+    width: 100%;
+    height: 100%;
+    padding: 0.5rem;
+}
+
+.draggable-element h1,
+.draggable-element h2,
+.draggable-element h3,
+.draggable-element p {
+    margin: 0;
+    outline: none;
+    cursor: text;
+}
+
+.draggable-element h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    font-family: 'Playfair Display', serif;
+}
+
+@media (min-width: 768px) {
+    .draggable-element h1 {
+        font-size: 2.5rem;
+    }
+}
+
+.draggable-element h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+@media (min-width: 768px) {
+    .draggable-element h2 {
+        font-size: 2rem;
+    }
+}
+
+.draggable-element h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+@media (min-width: 768px) {
+    .draggable-element h3 {
+        font-size: 1.5rem;
+    }
+}
+
+.draggable-element p {
+    font-size: 1rem;
+    line-height: 1.7;
+}
+
+.draggable-element blockquote {
+    margin: 0;
+    padding: 1rem 1.5rem;
+    border-left: 4px solid var(--primary);
+    background: var(--pastel-green-light);
+    font-style: italic;
+    font-size: 1.1rem;
+}
+
+.draggable-element img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    pointer-events: none;
+}
+
+.draggable-element .element-divider {
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--primary), transparent);
+    margin: 1rem 0;
+}
+
+.draggable-element .element-button {
+    display: inline-block;
+    padding: 0.75rem 1.5rem;
+    background: var(--primary);
+    color: white;
+    font-weight: 600;
+    border-radius: 8px;
+    cursor: pointer;
+    outline: none;
+}
+
+/* Image element specific */
+.draggable-element[data-type="image"] {
+    cursor: move;
+    overflow: hidden;
+}
+
+.draggable-element[data-type="image"] .element-content {
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* ===== Modal ===== */
+.modal {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.modal.hidden {
+    display: none;
+}
+
+.modal-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    position: relative;
+    background: white;
+    border-radius: 20px;
+    width: 100%;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: var(--shadow-lg);
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--border-light);
+}
+
+.modal-header h2 {
+    font-size: 1.25rem;
+    font-weight: 700;
+}
+
+.modal-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    color: var(--text-muted);
+}
+
+.modal-close:hover {
+    background: var(--pastel-green-light);
+}
+
+.modal-body {
+    padding: 1.5rem;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+}
+
+.form-group input[type="text"] {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-family: inherit;
+    border: 1px solid var(--border-light);
+    border-radius: 10px;
+    background: var(--pastel-green-light);
+    color: var(--text-primary);
+}
+
+.form-group input[type="text"]:focus {
+    outline: none;
+    border-color: var(--primary);
+}
+
+.cover-upload-area {
+    width: 100%;
+    min-height: 200px;
+    border: 2px dashed var(--pastel-green);
+    border-radius: 12px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+
+.cover-upload-area:hover {
+    border-color: var(--primary);
+    background: var(--pastel-green-light);
+}
+
+.upload-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    color: var(--text-muted);
+}
+
+.upload-placeholder .material-symbols-outlined {
+    font-size: 3rem;
+    color: var(--primary);
+    margin-bottom: 0.5rem;
+}
+
+.upload-placeholder p {
+    font-weight: 500;
+}
+
+.upload-hint {
+    font-size: 0.75rem;
+    margin-top: 0.25rem;
+}
+
+.upload-preview {
+    position: relative;
+    width: 100%;
+}
+
+.upload-preview img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+}
+
+.remove-cover {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.remove-cover:hover {
+    background: rgba(0, 0, 0, 0.7);
+}
+
+.modal-footer {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem 1.5rem;
+    border-top: 1px solid var(--border-light);
+}
+
+.modal-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.875rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: inherit;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+
+.modal-btn.primary {
+    background: var(--primary);
+    color: white;
+    border: none;
+}
+
+.modal-btn.primary:hover {
+    background: var(--primary-light);
+}
+
+.modal-btn.secondary {
+    background: transparent;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-light);
+}
+
+.modal-btn.secondary:hover {
+    background: var(--pastel-green-light);
+}
+
+/* Hidden class */
+.hidden {
+    display: none !important;
+}
+
+/* ===== Scrollbar ===== */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--pastel-green-light);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--pastel-green);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-light);
+}

admin.html

@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Studio Editor | Mubashra</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap"
+        rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="admin.css">
+</head>
+
+<body>
+    <!-- Auth Overlay -->
+    <div id="authOverlay" class="auth-overlay">
+        <div class="auth-background">
+            <div class="blob blob-1"></div>
+            <div class="blob blob-2"></div>
+            <div class="blob blob-3"></div>
+        </div>
+        <div class="auth-card">
+            <div class="auth-logo">
+                <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z"
+                        fill="currentColor"></path>
+                </svg>
+            </div>
+            <h1 class="auth-title">Welcome Back</h1>
+            <p class="auth-subtitle">Enter your password to access the Studio</p>
+            <div class="auth-input-group">
+                <span class="material-symbols-outlined">lock</span>
+                <input type="password" id="passwordInput" placeholder="Enter password">
+            </div>
+            <button id="loginBtn" class="auth-btn">
+                <span>Continue to Studio</span>
+                <span class="material-symbols-outlined">arrow_forward</span>
+            </button>
+            <p id="errorMsg" class="error-msg"></p>
+        </div>
+    </div>
+
+    <!-- Admin Workspace -->
+    <div id="adminWorkspace" class="admin-workspace hidden">
+        <!-- Top Header -->
+        <header class="studio-header">
+            <div class="header-left">
+                <button id="menuToggle" class="menu-toggle">
+                    <span class="material-symbols-outlined">menu</span>
+                </button>
+                <div class="logo">
+                    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z"
+                            fill="currentColor"></path>
+                    </svg>
+                    <span class="logo-text">Mubashra Studio</span>
+                </div>
+            </div>
+            <div class="header-center">
+                <input type="text" id="blogTitle" placeholder="Untitled Blog" class="title-input">
+            </div>
+            <div class="header-right">
+                <!-- Zoom Controls -->
+                <div class="zoom-controls">
+                    <button id="zoomOut" class="zoom-btn" title="Zoom Out">
+                        <span class="material-symbols-outlined">remove</span>
+                    </button>
+                    <span id="zoomLevel" class="zoom-level">100%</span>
+                    <button id="zoomIn" class="zoom-btn" title="Zoom In">
+                        <span class="material-symbols-outlined">add</span>
+                    </button>
+                    <button id="zoomReset" class="zoom-btn" title="Reset Zoom">
+                        <span class="material-symbols-outlined">fit_screen</span>
+                    </button>
+                </div>
+                <button id="previewBtn" class="header-btn secondary">
+                    <span class="material-symbols-outlined">visibility</span>
+                    <span class="btn-text">Preview</span>
+                </button>
+                <button id="postBtn" class="header-btn primary">
+                    <span class="material-symbols-outlined">publish</span>
+                    <span class="btn-text">Publish</span>
+                </button>
+                <a href="index.html" class="header-btn ghost">
+                    <span class="material-symbols-outlined">close</span>
+                </a>
+            </div>
+        </header>
+
+        <!-- Mobile Toolbar -->
+        <div class="mobile-toolbar" id="mobileToolbar">
+            <button class="mobile-tool-btn" data-type="h1">
+                <span class="material-symbols-outlined">title</span>
+            </button>
+            <button class="mobile-tool-btn" data-type="p">
+                <span class="material-symbols-outlined">notes</span>
+            </button>
+            <button class="mobile-tool-btn" data-type="image">
+                <span class="material-symbols-outlined">image</span>
+            </button>
+            <button class="mobile-tool-btn" data-type="quote">
+                <span class="material-symbols-outlined">format_quote</span>
+            </button>
+            <button class="mobile-tool-btn" id="mobilePropsBtn">
+                <span class="material-symbols-outlined">tune</span>
+            </button>
+        </div>
+
+        <!-- Main Layout -->
+        <div class="studio-layout">
+            <!-- Left Sidebar - Add Elements -->
+            <aside class="sidebar sidebar-left" id="sidebarLeft">
+                <div class="sidebar-header">
+                    <h3>Elements</h3>
+                    <button class="close-sidebar" id="closeSidebarLeft">
+                        <span class="material-symbols-outlined">close</span>
+                    </button>
+                </div>
+                <div class="sidebar-section">
+                    <h3 class="sidebar-title">Add Elements</h3>
+                    <div class="element-grid">
+                        <button class="element-btn" data-type="h1">
+                            <span class="material-symbols-outlined">title</span>
+                            <span>Heading 1</span>
+                        </button>
+                        <button class="element-btn" data-type="h2">
+                            <span class="material-symbols-outlined">format_h2</span>
+                            <span>Heading 2</span>
+                        </button>
+                        <button class="element-btn" data-type="h3">
+                            <span class="material-symbols-outlined">format_h3</span>
+                            <span>Heading 3</span>
+                        </button>
+                        <button class="element-btn" data-type="p">
+                            <span class="material-symbols-outlined">notes</span>
+                            <span>Paragraph</span>
+                        </button>
+                        <button class="element-btn" data-type="image">
+                            <span class="material-symbols-outlined">image</span>
+                            <span>Image</span>
+                        </button>
+                        <button class="element-btn" data-type="quote">
+                            <span class="material-symbols-outlined">format_quote</span>
+                            <span>Quote</span>
+                        </button>
+                        <button class="element-btn" data-type="divider">
+                            <span class="material-symbols-outlined">horizontal_rule</span>
+                            <span>Divider</span>
+                        </button>
+                        <button class="element-btn" data-type="button">
+                            <span class="material-symbols-outlined">smart_button</span>
+                            <span>Button</span>
+                        </button>
+                    </div>
+                </div>
+                <div class="sidebar-section">
+                    <h3 class="sidebar-title">Layers</h3>
+                    <div id="layersList" class="layers-list">
+                        <p class="empty-layers">No elements yet</p>
+                    </div>
+                </div>
+            </aside>
+
+            <!-- Sidebar Overlay -->
+            <div class="sidebar-overlay" id="sidebarOverlay"></div>
+
+            <!-- Canvas Area -->
+            <main class="canvas-area" id="canvasArea">
+                <div class="canvas-wrapper" id="canvasWrapper">
+                    <div id="blogCanvas" class="blog-canvas">
+                        <div class="canvas-placeholder" id="canvasPlaceholder">
+                            <span class="material-symbols-outlined">add_circle</span>
+                            <p>Click an element from the left sidebar<br>or drag elements here</p>
+                        </div>
+                    </div>
+                </div>
+            </main>
+
+            <!-- Right Sidebar - Properties -->
+            <aside class="sidebar sidebar-right" id="sidebarRight">
+                <div class="sidebar-header">
+                    <h3>Properties</h3>
+                    <button class="close-sidebar" id="closeSidebarRight">
+                        <span class="material-symbols-outlined">close</span>
+                    </button>
+                </div>
+                <div class="sidebar-section">
+                    <h3 class="sidebar-title">Properties</h3>
+                    <div id="propertiesPanel" class="properties-panel">
+                        <p class="empty-properties">Select an element to edit its properties</p>
+                    </div>
+                </div>
+
+                <!-- Text Properties -->
+                <div id="textProperties" class="sidebar-section hidden">
+                    <h3 class="sidebar-title">Typography</h3>
+
+                    <div class="property-group">
+                        <label>Font Family</label>
+                        <select id="fontFamily" class="property-select">
+                            <option value="'Inter', sans-serif">Inter</option>
+                            <option value="'Playfair Display', serif">Playfair Display</option>
+                            <option value="Georgia, serif">Georgia</option>
+                            <option value="monospace">Monospace</option>
+                        </select>
+                    </div>
+
+                    <div class="property-row">
+                        <div class="property-group half">
+                            <label>Size</label>
+                            <div class="input-with-unit">
+                                <input type="number" id="fontSize" min="8" max="200" value="16">
+                                <span>px</span>
+                            </div>
+                        </div>
+                        <div class="property-group half">
+                            <label>Weight</label>
+                            <select id="fontWeight" class="property-select">
+                                <option value="300">Light</option>
+                                <option value="400">Regular</option>
+                                <option value="500">Medium</option>
+                                <option value="600">Semibold</option>
+                                <option value="700">Bold</option>
+                                <option value="800">Extra Bold</option>
+                                <option value="900">Black</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="property-group">
+                        <label>Color</label>
+                        <div class="color-picker-row">
+                            <input type="color" id="textColor" value="#111418">
+                            <input type="text" id="textColorHex" value="#111418" class="color-hex-input">
+                        </div>
+                    </div>
+
+                    <div class="property-row">
+                        <div class="property-group half">
+                            <label>Letter Spacing</label>
+                            <div class="input-with-unit">
+                                <input type="number" id="letterSpacing" min="-10" max="50" value="0" step="0.5">
+                                <span>px</span>
+                            </div>
+                        </div>
+                        <div class="property-group half">
+                            <label>Line Height</label>
+                            <div class="input-with-unit">
+                                <input type="number" id="lineHeight" min="0.5" max="5" value="1.5" step="0.1">
+                                <span>em</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="property-group">
+                        <label>Text Align</label>
+                        <div class="button-group">
+                            <button class="icon-btn" data-align="left" title="Align Left">
+                                <span class="material-symbols-outlined">format_align_left</span>
+                            </button>
+                            <button class="icon-btn" data-align="center" title="Align Center">
+                                <span class="material-symbols-outlined">format_align_center</span>
+                            </button>
+                            <button class="icon-btn" data-align="right" title="Align Right">
+                                <span class="material-symbols-outlined">format_align_right</span>
+                            </button>
+                            <button class="icon-btn" data-align="justify" title="Justify">
+                                <span class="material-symbols-outlined">format_align_justify</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Image Properties -->
+                <div id="imageProperties" class="sidebar-section hidden">
+                    <h3 class="sidebar-title">Image Settings</h3>
+
+                    <div class="property-group">
+                        <label>Replace Image</label>
+                        <label class="upload-btn">
+                            <span class="material-symbols-outlined">upload</span>
+                            <span>Upload New Image</span>
+                            <input type="file" id="replaceImage" accept="image/*" hidden>
+                        </label>
+                    </div>
+
+                    <div class="property-group">
+                        <label>Border Radius</label>
+                        <div class="slider-row">
+                            <input type="range" id="imageBorderRadius" min="0" max="50" value="0">
+                            <span id="borderRadiusValue">0px</span>
+                        </div>
+                    </div>
+
+                    <div class="property-group">
+                        <label>Opacity</label>
+                        <div class="slider-row">
+                            <input type="range" id="imageOpacity" min="0" max="100" value="100">
+                            <span id="opacityValue">100%</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Position & Size -->
+                <div id="positionProperties" class="sidebar-section hidden">
+                    <h3 class="sidebar-title">Position & Size</h3>
+
+                    <div class="property-row">
+                        <div class="property-group half">
+                            <label>X Position</label>
+                            <div class="input-with-unit">
+                                <input type="number" id="posX" value="0">
+                                <span>px</span>
+                            </div>
+                        </div>
+                        <div class="property-group half">
+                            <label>Y Position</label>
+                            <div class="input-with-unit">
+                                <input type="number" id="posY" value="0">
+                                <span>px</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="property-row">
+                        <div class="property-group half">
+                            <label>Width</label>
+                            <div class="input-with-unit">
+                                <input type="number" id="elWidth" min="20">
+                                <span>px</span>
+                            </div>
+                        </div>
+                        <div class="property-group half">
+                            <label>Height</label>
+                            <div class="input-with-unit">
+                                <input type="number" id="elHeight" min="20">
+                                <span>px</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="property-group">
+                        <label>Rotation</label>
+                        <div class="slider-row">
+                            <input type="range" id="elRotation" min="0" max="360" value="0">
+                            <span id="rotationValue">0°</span>
+                        </div>
+                    </div>
+
+                    <div class="property-divider"></div>
+
+                    <button id="deleteElement" class="delete-btn">
+                        <span class="material-symbols-outlined">delete</span>
+                        <span>Delete Element</span>
+                    </button>
+                </div>
+            </aside>
+        </div>
+    </div>
+
+    <!-- Publish Modal -->
+    <div id="publishModal" class="modal hidden">
+        <div class="modal-backdrop"></div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Publish Your Blog</h2>
+                <button class="modal-close" id="closeModal">
+                    <span class="material-symbols-outlined">close</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label>Blog Title</label>
+                    <input type="text" id="modalBlogTitle" placeholder="Enter blog title">
+                </div>
+                <div class="form-group">
+                    <label>Cover Image (Optional)</label>
+                    <div class="cover-upload-area" id="coverUploadArea">
+                        <input type="file" id="coverImageInput" accept="image/*" hidden>
+                        <div class="upload-placeholder" id="uploadPlaceholder">
+                            <span class="material-symbols-outlined">add_photo_alternate</span>
+                            <p>Click to upload cover image</p>
+                            <span class="upload-hint">Recommended: 1200x630px</span>
+                        </div>
+                        <div class="upload-preview hidden" id="uploadPreview">
+                            <img id="coverPreviewImg" src="" alt="Cover Preview">
+                            <button class="remove-cover" id="removeCover">
+                                <span class="material-symbols-outlined">close</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="modal-btn secondary" id="cancelPublish">Cancel</button>
+                <button class="modal-btn primary" id="confirmPublish">
+                    <span class="material-symbols-outlined">publish</span>
+                    Publish Now
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Hidden file input -->
+    <input type="file" id="imageUpload" accept="image/*" hidden>
+
+    <script src="admin.js"></script>
+</body>
+
+</html>

admin.js

@@ -0,0 +1,1055 @@
+// ===== Mubashra Studio - Advanced Drag & Drop Editor =====
+
+const CORRECT_PASSWORD = "inshaaAllah";
+
+// DOM Elements
+const authOverlay = document.getElementById('authOverlay');
+const adminWorkspace = document.getElementById('adminWorkspace');
+const passwordInput = document.getElementById('passwordInput');
+const loginBtn = document.getElementById('loginBtn');
+const errorMsg = document.getElementById('errorMsg');
+const blogCanvas = document.getElementById('blogCanvas');
+const canvasWrapper = document.getElementById('canvasWrapper');
+const canvasArea = document.getElementById('canvasArea');
+const canvasPlaceholder = document.getElementById('canvasPlaceholder');
+const blogTitleInput = document.getElementById('blogTitle');
+const postBtn = document.getElementById('postBtn');
+const previewBtn = document.getElementById('previewBtn');
+
+// Sidebars
+const sidebarLeft = document.getElementById('sidebarLeft');
+const sidebarRight = document.getElementById('sidebarRight');
+const sidebarOverlay = document.getElementById('sidebarOverlay');
+const menuToggle = document.getElementById('menuToggle');
+const closeSidebarLeft = document.getElementById('closeSidebarLeft');
+const closeSidebarRight = document.getElementById('closeSidebarRight');
+const mobilePropsBtn = document.getElementById('mobilePropsBtn');
+
+// Zoom Controls
+const zoomIn = document.getElementById('zoomIn');
+const zoomOut = document.getElementById('zoomOut');
+const zoomReset = document.getElementById('zoomReset');
+const zoomLevelDisplay = document.getElementById('zoomLevel');
+
+// Modal Elements
+const publishModal = document.getElementById('publishModal');
+const closeModal = document.getElementById('closeModal');
+const cancelPublish = document.getElementById('cancelPublish');
+const confirmPublish = document.getElementById('confirmPublish');
+const modalBlogTitle = document.getElementById('modalBlogTitle');
+const coverUploadArea = document.getElementById('coverUploadArea');
+const coverImageInput = document.getElementById('coverImageInput');
+const uploadPlaceholder = document.getElementById('uploadPlaceholder');
+const uploadPreview = document.getElementById('uploadPreview');
+const coverPreviewImg = document.getElementById('coverPreviewImg');
+const removeCover = document.getElementById('removeCover');
+
+// Element buttons (both sidebar and mobile)
+const elementBtns = document.querySelectorAll('.element-btn');
+const mobileToolBtns = document.querySelectorAll('.mobile-tool-btn[data-type]');
+const layersList = document.getElementById('layersList');
+const propertiesPanel = document.getElementById('propertiesPanel');
+
+// Property Panels
+const textProperties = document.getElementById('textProperties');
+const imageProperties = document.getElementById('imageProperties');
+const positionProperties = document.getElementById('positionProperties');
+
+// Property Inputs
+const fontFamily = document.getElementById('fontFamily');
+const fontSize = document.getElementById('fontSize');
+const fontWeight = document.getElementById('fontWeight');
+const textColor = document.getElementById('textColor');
+const textColorHex = document.getElementById('textColorHex');
+const letterSpacing = document.getElementById('letterSpacing');
+const lineHeight = document.getElementById('lineHeight');
+const posX = document.getElementById('posX');
+const posY = document.getElementById('posY');
+const elWidth = document.getElementById('elWidth');
+const elHeight = document.getElementById('elHeight');
+const elRotation = document.getElementById('elRotation');
+const rotationValue = document.getElementById('rotationValue');
+const deleteElement = document.getElementById('deleteElement');
+
+// Image Properties
+const replaceImage = document.getElementById('replaceImage');
+const imageBorderRadius = document.getElementById('imageBorderRadius');
+const borderRadiusValue = document.getElementById('borderRadiusValue');
+const imageOpacity = document.getElementById('imageOpacity');
+const opacityValue = document.getElementById('opacityValue');
+
+// Image Upload Input
+const imageUpload = document.getElementById('imageUpload');
+
+// State
+let selectedElement = null;
+let isDragging = false;
+let isResizing = false;
+let resizeDirection = '';
+let dragStartX = 0;
+let dragStartY = 0;
+let initialX = 0;
+let initialY = 0;
+let initialWidth = 0;
+let initialHeight = 0;
+let elementCounter = 0;
+let currentZoom = 1;
+let coverImageData = null;
+const ZOOM_STEP = 0.1;
+const MIN_ZOOM = 0.25;
+const MAX_ZOOM = 2;
+
+// ===== Authentication =====
+loginBtn.addEventListener('click', checkPassword);
+passwordInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') checkPassword();
+});
+
+function checkPassword() {
+    if (passwordInput.value === CORRECT_PASSWORD) {
+        authOverlay.classList.add('hidden');
+        adminWorkspace.classList.remove('hidden');
+    } else {
+        errorMsg.textContent = "Incorrect password. Please try again.";
+        passwordInput.value = "";
+        passwordInput.focus();
+    }
+}
+
+// ===== Mobile Sidebar Controls =====
+menuToggle?.addEventListener('click', () => {
+    sidebarLeft.classList.add('open');
+    sidebarOverlay.classList.add('visible');
+});
+
+closeSidebarLeft?.addEventListener('click', closeSidebars);
+closeSidebarRight?.addEventListener('click', closeSidebars);
+sidebarOverlay?.addEventListener('click', closeSidebars);
+
+mobilePropsBtn?.addEventListener('click', () => {
+    sidebarRight.classList.add('open');
+    sidebarOverlay.classList.add('visible');
+});
+
+function closeSidebars() {
+    sidebarLeft.classList.remove('open');
+    sidebarRight.classList.remove('open');
+    sidebarOverlay.classList.remove('visible');
+}
+
+// ===== Zoom Controls =====
+zoomIn?.addEventListener('click', () => {
+    if (currentZoom < MAX_ZOOM) {
+        currentZoom = Math.min(currentZoom + ZOOM_STEP, MAX_ZOOM);
+        applyZoom();
+    }
+});
+
+zoomOut?.addEventListener('click', () => {
+    if (currentZoom > MIN_ZOOM) {
+        currentZoom = Math.max(currentZoom - ZOOM_STEP, MIN_ZOOM);
+        applyZoom();
+    }
+});
+
+zoomReset?.addEventListener('click', () => {
+    currentZoom = 1;
+    applyZoom();
+});
+
+function applyZoom() {
+    canvasWrapper.style.transform = `scale(${currentZoom})`;
+    if (zoomLevelDisplay) {
+        zoomLevelDisplay.textContent = `${Math.round(currentZoom * 100)}%`;
+    }
+}
+
+// Mouse wheel zoom
+canvasArea?.addEventListener('wheel', (e) => {
+    if (e.ctrlKey) {
+        e.preventDefault();
+        if (e.deltaY < 0 && currentZoom < MAX_ZOOM) {
+            currentZoom = Math.min(currentZoom + ZOOM_STEP, MAX_ZOOM);
+        } else if (e.deltaY > 0 && currentZoom > MIN_ZOOM) {
+            currentZoom = Math.max(currentZoom - ZOOM_STEP, MIN_ZOOM);
+        }
+        applyZoom();
+    }
+}, { passive: false });
+
+// ===== Element Creation =====
+elementBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        const type = btn.dataset.type;
+        createElement(type);
+        closeSidebars();
+    });
+});
+
+mobileToolBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        const type = btn.dataset.type;
+        if (type) createElement(type);
+    });
+});
+
+function createElement(type, x = 50, y = 50) {
+    elementCounter++;
+
+    const element = document.createElement('div');
+    element.classList.add('draggable-element');
+    element.id = `element-${elementCounter}`;
+    element.dataset.type = type;
+    element.style.left = `${x}px`;
+    element.style.top = `${y}px`;
+
+    // Create resize handles
+    const handles = ['nw', 'ne', 'sw', 'se', 'n', 's', 'e', 'w'];
+    handles.forEach(dir => {
+        const handle = document.createElement('div');
+        handle.classList.add('resize-handle', dir);
+        handle.dataset.direction = dir;
+        element.appendChild(handle);
+    });
+
+    // Create content based on type
+    const content = document.createElement('div');
+    content.classList.add('element-content');
+
+    switch (type) {
+        case 'h1':
+            content.innerHTML = '<h1 contenteditable="true">Heading 1</h1>';
+            element.style.width = '300px';
+            element.style.minHeight = '60px';
+            break;
+        case 'h2':
+            content.innerHTML = '<h2 contenteditable="true">Heading 2</h2>';
+            element.style.width = '280px';
+            element.style.minHeight = '50px';
+            break;
+        case 'h3':
+            content.innerHTML = '<h3 contenteditable="true">Heading 3</h3>';
+            element.style.width = '250px';
+            element.style.minHeight = '40px';
+            break;
+        case 'p':
+            content.innerHTML = '<p contenteditable="true">Enter your paragraph text here. You can type anything you want.</p>';
+            element.style.width = '350px';
+            element.style.minHeight = '80px';
+            break;
+        case 'image':
+            // Trigger file upload
+            const uploadHandler = (e) => {
+                const file = e.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = (event) => {
+                        content.innerHTML = `<img src="${event.target.result}" alt="Uploaded Image" draggable="false">`;
+                        element.style.width = '300px';
+                        element.style.height = '200px';
+                        element.appendChild(content);
+                        blogCanvas.appendChild(element);
+                        setupElementEvents(element);
+                        selectElement(element);
+                        updateLayersList();
+                        hidePlaceholder();
+                    };
+                    reader.readAsDataURL(file);
+                }
+                imageUpload.value = '';
+                imageUpload.removeEventListener('change', uploadHandler);
+            };
+            imageUpload.addEventListener('change', uploadHandler);
+            imageUpload.click();
+            return;
+        case 'quote':
+            content.innerHTML = '<blockquote contenteditable="true">"Add your inspiring quote here." - Author</blockquote>';
+            element.style.width = '350px';
+            element.style.minHeight = '100px';
+            break;
+        case 'divider':
+            content.innerHTML = '<div class="element-divider"></div>';
+            element.style.width = '300px';
+            element.style.height = '30px';
+            break;
+        case 'button':
+            content.innerHTML = '<span class="element-button" contenteditable="true">Click Me</span>';
+            element.style.width = '120px';
+            element.style.height = '50px';
+            break;
+    }
+
+    element.appendChild(content);
+    blogCanvas.appendChild(element);
+
+    setupElementEvents(element);
+    selectElement(element);
+    updateLayersList();
+    hidePlaceholder();
+}
+
+function setupElementEvents(element) {
+    const type = element.dataset.type;
+
+    // Helper function to get pointer position
+    const getPointerPos = (e) => {
+        if (e.touches && e.touches.length > 0) {
+            return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+        }
+        return { x: e.clientX, y: e.clientY };
+    };
+
+    // Mouse/Touch down for dragging
+    const handlePointerDown = (e) => {
+        // Check if it's a resize handle
+        if (e.target.classList.contains('resize-handle')) {
+            startResize(e);
+            return;
+        }
+
+        selectElement(element);
+
+        // For text elements, check if we should allow editing
+        const editableEl = e.target.closest('[contenteditable="true"]');
+        if (editableEl && document.activeElement === editableEl) {
+            return; // Allow text editing
+        }
+
+        // Start dragging
+        startDrag(e, element);
+    };
+
+    element.addEventListener('mousedown', handlePointerDown);
+    element.addEventListener('touchstart', handlePointerDown, { passive: false });
+
+    // Double click/tap to edit text
+    element.addEventListener('dblclick', () => {
+        const editable = element.querySelector('[contenteditable="true"]');
+        if (editable) {
+            editable.focus();
+            const selection = window.getSelection();
+            const range = document.createRange();
+            range.selectNodeContents(editable);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+    });
+
+    // Resize handles - both mouse and touch
+    const handles = element.querySelectorAll('.resize-handle');
+    handles.forEach(handle => {
+        handle.addEventListener('mousedown', startResize);
+        handle.addEventListener('touchstart', startResize, { passive: false });
+    });
+
+    // Update layers on text input
+    const editables = element.querySelectorAll('[contenteditable="true"]');
+    editables.forEach(ed => {
+        ed.addEventListener('input', () => {
+            updateLayersList();
+        });
+    });
+}
+
+// ===== Drag Functionality =====
+function startDrag(e, element) {
+    if (isResizing) return;
+
+    e.preventDefault();
+    isDragging = true;
+    selectedElement = element;
+    element.classList.add('dragging');
+
+    const pos = getEventPos(e);
+    dragStartX = pos.x;
+    dragStartY = pos.y;
+    initialX = element.offsetLeft;
+    initialY = element.offsetTop;
+
+    document.addEventListener('mousemove', drag);
+    document.addEventListener('mouseup', stopDrag);
+    document.addEventListener('touchmove', drag, { passive: false });
+    document.addEventListener('touchend', stopDrag);
+}
+
+function drag(e) {
+    if (!isDragging || !selectedElement) return;
+    e.preventDefault();
+
+    const pos = getEventPos(e);
+    const dx = (pos.x - dragStartX) / currentZoom;
+    const dy = (pos.y - dragStartY) / currentZoom;
+
+    let newX = initialX + dx;
+    let newY = initialY + dy;
+
+    // Keep element within canvas bounds
+    newX = Math.max(0, newX);
+    newY = Math.max(0, newY);
+
+    selectedElement.style.left = `${newX}px`;
+    selectedElement.style.top = `${newY}px`;
+
+    // Update position inputs
+    if (posX) posX.value = Math.round(newX);
+    if (posY) posY.value = Math.round(newY);
+}
+
+function stopDrag() {
+    if (selectedElement) {
+        selectedElement.classList.remove('dragging');
+    }
+    isDragging = false;
+    document.removeEventListener('mousemove', drag);
+    document.removeEventListener('mouseup', stopDrag);
+    document.removeEventListener('touchmove', drag);
+    document.removeEventListener('touchend', stopDrag);
+}
+
+// ===== Resize Functionality =====
+function startResize(e) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    isResizing = true;
+    resizeDirection = e.target.dataset.direction;
+
+    const element = e.target.closest('.draggable-element');
+    selectedElement = element;
+
+    const pos = getEventPos(e);
+    dragStartX = pos.x;
+    dragStartY = pos.y;
+    initialX = element.offsetLeft;
+    initialY = element.offsetTop;
+    initialWidth = element.offsetWidth;
+    initialHeight = element.offsetHeight;
+
+    document.addEventListener('mousemove', resize);
+    document.addEventListener('mouseup', stopResize);
+    document.addEventListener('touchmove', resize, { passive: false });
+    document.addEventListener('touchend', stopResize);
+}
+
+function resize(e) {
+    if (!isResizing || !selectedElement) return;
+    e.preventDefault();
+
+    const pos = getEventPos(e);
+    const dx = (pos.x - dragStartX) / currentZoom;
+    const dy = (pos.y - dragStartY) / currentZoom;
+
+    let newWidth = initialWidth;
+    let newHeight = initialHeight;
+    let newX = initialX;
+    let newY = initialY;
+
+    if (resizeDirection.includes('e')) {
+        newWidth = Math.max(50, initialWidth + dx);
+    }
+    if (resizeDirection.includes('w')) {
+        newWidth = Math.max(50, initialWidth - dx);
+        newX = initialX + (initialWidth - newWidth);
+    }
+    if (resizeDirection.includes('s')) {
+        newHeight = Math.max(30, initialHeight + dy);
+    }
+    if (resizeDirection.includes('n')) {
+        newHeight = Math.max(30, initialHeight - dy);
+        newY = initialY + (initialHeight - newHeight);
+    }
+
+    selectedElement.style.width = `${newWidth}px`;
+    selectedElement.style.height = `${newHeight}px`;
+    selectedElement.style.left = `${newX}px`;
+    selectedElement.style.top = `${newY}px`;
+
+    if (elWidth) elWidth.value = Math.round(newWidth);
+    if (elHeight) elHeight.value = Math.round(newHeight);
+    if (posX) posX.value = Math.round(newX);
+    if (posY) posY.value = Math.round(newY);
+}
+
+function stopResize() {
+    isResizing = false;
+    resizeDirection = '';
+    document.removeEventListener('mousemove', resize);
+    document.removeEventListener('mouseup', stopResize);
+    document.removeEventListener('touchmove', resize);
+    document.removeEventListener('touchend', stopResize);
+}
+
+// Helper to get event position for both mouse and touch
+function getEventPos(e) {
+    if (e.touches && e.touches.length > 0) {
+        return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+    }
+    return { x: e.clientX, y: e.clientY };
+}
+
+// ===== Selection =====
+function selectElement(element) {
+    if (selectedElement && selectedElement !== element) {
+        selectedElement.classList.remove('selected');
+    }
+
+    selectedElement = element;
+    element.classList.add('selected');
+    showPropertiesFor(element);
+    updateLayersList();
+}
+
+function deselectAll() {
+    if (selectedElement) {
+        selectedElement.classList.remove('selected');
+        selectedElement = null;
+    }
+    hideAllPropertyPanels();
+}
+
+blogCanvas.addEventListener('click', (e) => {
+    if (e.target === blogCanvas || e.target === canvasPlaceholder) {
+        deselectAll();
+    }
+});
+
+// ===== Properties Panel =====
+function showPropertiesFor(element) {
+    const type = element.dataset.type;
+
+    hideAllPropertyPanels();
+
+    if (positionProperties) positionProperties.classList.remove('hidden');
+
+    if (posX) posX.value = Math.round(element.offsetLeft);
+    if (posY) posY.value = Math.round(element.offsetTop);
+    if (elWidth) elWidth.value = Math.round(element.offsetWidth);
+    if (elHeight) elHeight.value = Math.round(element.offsetHeight);
+
+    const transform = element.style.transform;
+    const rotateMatch = transform.match(/rotate\((\d+)deg\)/);
+    if (elRotation) elRotation.value = rotateMatch ? parseInt(rotateMatch[1]) : 0;
+    if (rotationValue) rotationValue.textContent = `${elRotation?.value || 0}°`;
+
+    if (['h1', 'h2', 'h3', 'p', 'quote', 'button'].includes(type)) {
+        if (textProperties) textProperties.classList.remove('hidden');
+
+        const editable = element.querySelector('[contenteditable="true"]') ||
+            element.querySelector('.element-button');
+
+        if (editable) {
+            const style = window.getComputedStyle(editable);
+
+            if (fontSize) fontSize.value = parseInt(style.fontSize);
+            if (fontWeight) fontWeight.value = style.fontWeight;
+
+            const color = rgbToHex(style.color);
+            if (textColor) textColor.value = color;
+            if (textColorHex) textColorHex.value = color;
+
+            const ls = parseFloat(style.letterSpacing);
+            if (letterSpacing) letterSpacing.value = isNaN(ls) ? 0 : ls;
+
+            const lh = parseFloat(style.lineHeight) / parseFloat(style.fontSize);
+            if (lineHeight) lineHeight.value = isNaN(lh) ? 1.5 : lh.toFixed(1);
+        }
+    } else if (type === 'image') {
+        if (imageProperties) imageProperties.classList.remove('hidden');
+
+        const br = parseInt(element.style.borderRadius) || 0;
+        if (imageBorderRadius) imageBorderRadius.value = br;
+        if (borderRadiusValue) borderRadiusValue.textContent = `${br}px`;
+
+        const op = parseFloat(element.style.opacity);
+        const opacityPercent = isNaN(op) ? 100 : op * 100;
+        if (imageOpacity) imageOpacity.value = opacityPercent;
+        if (opacityValue) opacityValue.textContent = `${Math.round(opacityPercent)}%`;
+    }
+
+    if (propertiesPanel) {
+        const emptyMsg = propertiesPanel.querySelector('.empty-properties');
+        if (emptyMsg) emptyMsg.style.display = 'none';
+    }
+}
+
+function hideAllPropertyPanels() {
+    if (textProperties) textProperties.classList.add('hidden');
+    if (imageProperties) imageProperties.classList.add('hidden');
+    if (positionProperties) positionProperties.classList.add('hidden');
+    if (propertiesPanel) {
+        const emptyMsg = propertiesPanel.querySelector('.empty-properties');
+        if (emptyMsg) emptyMsg.style.display = 'block';
+    }
+}
+
+// ===== Property Change Handlers =====
+fontFamily?.addEventListener('change', () => {
+    if (!selectedElement) return;
+    const editable = getEditableElement();
+    if (editable) editable.style.fontFamily = fontFamily.value;
+});
+
+fontSize?.addEventListener('input', () => {
+    if (!selectedElement) return;
+    const editable = getEditableElement();
+    if (editable) editable.style.fontSize = `${fontSize.value}px`;
+});
+
+fontWeight?.addEventListener('change', () => {
+    if (!selectedElement) return;
+    const editable = getEditableElement();
+    if (editable) editable.style.fontWeight = fontWeight.value;
+});
+
+textColor?.addEventListener('input', () => {
+    if (!selectedElement) return;
+    const editable = getEditableElement();
+    if (editable) editable.style.color = textColor.value;
+    if (textColorHex) textColorHex.value = textColor.value;
+});
+
+textColorHex?.addEventListener('input', () => {
+    if (!selectedElement) return;
+    const hex = textColorHex.value;
+    if (/^#[0-9A-Fa-f]{6}$/.test(hex)) {
+        if (textColor) textColor.value = hex;
+        const editable = getEditableElement();
+        if (editable) editable.style.color = hex;
+    }
+});
+
+letterSpacing?.addEventListener('input', () => {
+    if (!selectedElement) return;
+    const editable = getEditableElement();
+    if (editable) editable.style.letterSpacing = `${letterSpacing.value}px`;
+});
+
+lineHeight?.addEventListener('input', () => {
+    if (!selectedElement) return;
+    const editable = getEditableElement();
+    if (editable) editable.style.lineHeight = lineHeight.value;
+});
+
+document.querySelectorAll('[data-align]').forEach(btn => {
+    btn.addEventListener('click', () => {
+        if (!selectedElement) return;
+        const editable = getEditableElement();
+        if (editable) editable.style.textAlign = btn.dataset.align;
+
+        document.querySelectorAll('[data-align]').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+    });
+});
+
+posX?.addEventListener('input', () => {
+    if (selectedElement) selectedElement.style.left = `${posX.value}px`;
+});
+
+posY?.addEventListener('input', () => {
+    if (selectedElement) selectedElement.style.top = `${posY.value}px`;
+});
+
+elWidth?.addEventListener('input', () => {
+    if (selectedElement) selectedElement.style.width = `${elWidth.value}px`;
+});
+
+elHeight?.addEventListener('input', () => {
+    if (selectedElement) selectedElement.style.height = `${elHeight.value}px`;
+});
+
+elRotation?.addEventListener('input', () => {
+    if (selectedElement) {
+        selectedElement.style.transform = `rotate(${elRotation.value}deg)`;
+        if (rotationValue) rotationValue.textContent = `${elRotation.value}°`;
+    }
+});
+
+imageBorderRadius?.addEventListener('input', () => {
+    if (selectedElement) {
+        selectedElement.style.borderRadius = `${imageBorderRadius.value}px`;
+        selectedElement.style.overflow = 'hidden';
+        if (borderRadiusValue) borderRadiusValue.textContent = `${imageBorderRadius.value}px`;
+    }
+});
+
+imageOpacity?.addEventListener('input', () => {
+    if (selectedElement) {
+        selectedElement.style.opacity = imageOpacity.value / 100;
+        if (opacityValue) opacityValue.textContent = `${imageOpacity.value}%`;
+    }
+});
+
+replaceImage?.addEventListener('change', (e) => {
+    if (!selectedElement || selectedElement.dataset.type !== 'image') return;
+
+    const file = e.target.files[0];
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            const img = selectedElement.querySelector('img');
+            if (img) img.src = event.target.result;
+        };
+        reader.readAsDataURL(file);
+    }
+    replaceImage.value = '';
+});
+
+deleteElement?.addEventListener('click', () => {
+    if (selectedElement) {
+        selectedElement.remove();
+        selectedElement = null;
+        hideAllPropertyPanels();
+        updateLayersList();
+        checkPlaceholder();
+    }
+});
+
+// ===== Layers List =====
+function updateLayersList() {
+    const elements = blogCanvas.querySelectorAll('.draggable-element');
+
+    if (elements.length === 0) {
+        layersList.innerHTML = '<p class="empty-layers">No elements yet</p>';
+        return;
+    }
+
+    layersList.innerHTML = '';
+
+    elements.forEach((el) => {
+        const type = el.dataset.type;
+        const icon = getIconForType(type);
+        const label = getLabelForElement(el, type);
+
+        const layerItem = document.createElement('div');
+        layerItem.classList.add('layer-item');
+        if (el === selectedElement) {
+            layerItem.classList.add('active');
+        }
+
+        layerItem.innerHTML = `
+            <span class="material-symbols-outlined">${icon}</span>
+            <span>${label}</span>
+        `;
+
+        layerItem.addEventListener('click', () => {
+            selectElement(el);
+            closeSidebars();
+        });
+
+        layersList.appendChild(layerItem);
+    });
+}
+
+function getIconForType(type) {
+    const icons = {
+        'h1': 'title', 'h2': 'format_h2', 'h3': 'format_h3',
+        'p': 'notes', 'image': 'image', 'quote': 'format_quote',
+        'divider': 'horizontal_rule', 'button': 'smart_button'
+    };
+    return icons[type] || 'crop_square';
+}
+
+function getLabelForElement(el, type) {
+    const labels = {
+        'h1': 'Heading 1', 'h2': 'Heading 2', 'h3': 'Heading 3',
+        'p': 'Paragraph', 'image': 'Image', 'quote': 'Quote',
+        'divider': 'Divider', 'button': 'Button'
+    };
+
+    const editable = el.querySelector('[contenteditable="true"]');
+    if (editable) {
+        const text = editable.textContent.trim();
+        if (text.length > 15) return text.substring(0, 15) + '...';
+        return text || labels[type];
+    }
+
+    return labels[type] || 'Element';
+}
+
+// ===== Helper Functions =====
+function getEditableElement() {
+    if (!selectedElement) return null;
+    return selectedElement.querySelector('[contenteditable="true"]') ||
+        selectedElement.querySelector('.element-button') ||
+        selectedElement.querySelector('blockquote');
+}
+
+function rgbToHex(rgb) {
+    if (!rgb) return '#000000';
+    if (rgb.startsWith('#')) return rgb;
+
+    const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (!match) return '#000000';
+
+    const r = parseInt(match[1]).toString(16).padStart(2, '0');
+    const g = parseInt(match[2]).toString(16).padStart(2, '0');
+    const b = parseInt(match[3]).toString(16).padStart(2, '0');
+
+    return `#${r}${g}${b}`;
+}
+
+function hidePlaceholder() {
+    if (canvasPlaceholder) canvasPlaceholder.classList.add('hidden');
+}
+
+function checkPlaceholder() {
+    const elements = blogCanvas.querySelectorAll('.draggable-element');
+    if (canvasPlaceholder) {
+        canvasPlaceholder.classList.toggle('hidden', elements.length > 0);
+    }
+}
+
+// ===== Keyboard Shortcuts =====
+document.addEventListener('keydown', (e) => {
+    if (!selectedElement) return;
+
+    const isEditing = document.activeElement.getAttribute('contenteditable') === 'true' ||
+        document.activeElement.tagName === 'INPUT';
+
+    if ((e.key === 'Delete' || e.key === 'Backspace') && !isEditing) {
+        selectedElement.remove();
+        selectedElement = null;
+        hideAllPropertyPanels();
+        updateLayersList();
+        checkPlaceholder();
+        e.preventDefault();
+    }
+
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key) && !isEditing) {
+        const step = e.shiftKey ? 10 : 1;
+
+        switch (e.key) {
+            case 'ArrowUp':
+                selectedElement.style.top = `${selectedElement.offsetTop - step}px`;
+                break;
+            case 'ArrowDown':
+                selectedElement.style.top = `${selectedElement.offsetTop + step}px`;
+                break;
+            case 'ArrowLeft':
+                selectedElement.style.left = `${selectedElement.offsetLeft - step}px`;
+                break;
+            case 'ArrowRight':
+                selectedElement.style.left = `${selectedElement.offsetLeft + step}px`;
+                break;
+        }
+
+        if (posX) posX.value = Math.round(selectedElement.offsetLeft);
+        if (posY) posY.value = Math.round(selectedElement.offsetTop);
+        e.preventDefault();
+    }
+});
+
+// ===== Publish Modal =====
+postBtn?.addEventListener('click', () => {
+    const elements = blogCanvas.querySelectorAll('.draggable-element');
+
+    if (elements.length === 0) {
+        alert('Canvas is empty! Add some elements before publishing.');
+        return;
+    }
+
+    // Show modal
+    if (modalBlogTitle) modalBlogTitle.value = blogTitleInput?.value || '';
+    publishModal.classList.remove('hidden');
+});
+
+closeModal?.addEventListener('click', closePublishModal);
+cancelPublish?.addEventListener('click', closePublishModal);
+
+publishModal?.querySelector('.modal-backdrop')?.addEventListener('click', closePublishModal);
+
+function closePublishModal() {
+    publishModal.classList.add('hidden');
+    coverImageData = null;
+    if (uploadPlaceholder) uploadPlaceholder.classList.remove('hidden');
+    if (uploadPreview) uploadPreview.classList.add('hidden');
+}
+
+// Cover Image Upload
+coverUploadArea?.addEventListener('click', () => {
+    coverImageInput?.click();
+});
+
+coverImageInput?.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            coverImageData = event.target.result;
+            if (coverPreviewImg) coverPreviewImg.src = coverImageData;
+            if (uploadPlaceholder) uploadPlaceholder.classList.add('hidden');
+            if (uploadPreview) uploadPreview.classList.remove('hidden');
+        };
+        reader.readAsDataURL(file);
+    }
+});
+
+removeCover?.addEventListener('click', (e) => {
+    e.stopPropagation();
+    coverImageData = null;
+    if (coverImageInput) coverImageInput.value = '';
+    if (uploadPlaceholder) uploadPlaceholder.classList.remove('hidden');
+    if (uploadPreview) uploadPreview.classList.add('hidden');
+});
+
+// Confirm Publish
+confirmPublish?.addEventListener('click', () => {
+    const title = modalBlogTitle?.value || blogTitleInput?.value || 'Untitled Blog';
+
+    // Clone canvas for saving
+    const clone = blogCanvas.cloneNode(true);
+
+    // Clean up cloned elements
+    clone.querySelectorAll('.draggable-element').forEach(el => {
+        el.classList.remove('selected', 'dragging');
+        el.querySelectorAll('.resize-handle').forEach(h => h.remove());
+        el.querySelectorAll('[contenteditable]').forEach(c => {
+            c.removeAttribute('contenteditable');
+        });
+        el.style.cursor = 'default';
+    });
+
+    const placeholder = clone.querySelector('.canvas-placeholder');
+    if (placeholder) placeholder.remove();
+
+    // Create blog data
+    const blogData = {
+        id: Date.now(),
+        title: title,
+        date: new Date().toISOString(),
+        content: clone.innerHTML,
+        coverImage: coverImageData || null,
+        backgroundColor: '#FFFFFF'
+    };
+
+    // Save to localStorage
+    // Save to localStorage
+    const blogs = JSON.parse(localStorage.getItem('mubashra_blogs_v2')) || [];
+    blogs.unshift(blogData);
+    localStorage.setItem('mubashra_blogs_v2', JSON.stringify(blogs));
+
+    alert('Blog published successfully!');
+
+    // Clear canvas
+    blogCanvas.querySelectorAll('.draggable-element').forEach(el => el.remove());
+    if (blogTitleInput) blogTitleInput.value = '';
+    selectedElement = null;
+    hideAllPropertyPanels();
+    updateLayersList();
+    checkPlaceholder();
+    closePublishModal();
+});
+
+// Preview
+previewBtn?.addEventListener('click', () => {
+    const elements = blogCanvas.querySelectorAll('.draggable-element');
+
+    if (elements.length === 0) {
+        alert('Canvas is empty! Add some elements to preview.');
+        return;
+    }
+
+    const clone = blogCanvas.cloneNode(true);
+
+    clone.querySelectorAll('.draggable-element').forEach(el => {
+        el.classList.remove('selected', 'dragging');
+        el.querySelectorAll('.resize-handle').forEach(h => h.remove());
+        el.querySelectorAll('[contenteditable]').forEach(c => {
+            c.removeAttribute('contenteditable');
+        });
+        el.style.cursor = 'default';
+    });
+
+    const placeholder = clone.querySelector('.canvas-placeholder');
+    if (placeholder) placeholder.remove();
+
+    const previewWindow = window.open('', '_blank');
+    previewWindow.document.write(`
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Preview - ${blogTitleInput?.value || 'Untitled Blog'}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { 
+            font-family: 'Inter', sans-serif; 
+            background: #F7FAF9; 
+            min-height: 100vh; 
+            padding: 1rem;
+        }
+        @media (min-width: 768px) {
+            body { padding: 2rem; display: flex; justify-content: center; }
+        }
+        .blog-content {
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 1.5rem;
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.12);
+        }
+        @media (min-width: 768px) {
+            .blog-content { padding: 2rem; }
+        }
+        .draggable-element {
+            position: relative !important;
+            left: auto !important;
+            top: auto !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            height: auto !important;
+            min-height: auto !important;
+            margin-bottom: 1.5rem;
+        }
+        .element-content { padding: 0; }
+        h1, h2, h3, p { margin: 0; word-wrap: break-word; }
+        h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 700; font-family: 'Playfair Display', serif; margin-bottom: 1rem; line-height: 1.2; }
+        h2 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 600; margin-bottom: 0.75rem; line-height: 1.3; }
+        h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 600; margin-bottom: 0.5rem; line-height: 1.4; }
+        p { font-size: clamp(0.95rem, 2.5vw, 1.1rem); line-height: 1.8; margin-bottom: 1rem; color: #4A5568; }
+        blockquote { 
+            margin: 1.5rem 0; 
+            padding: 1rem 1.5rem; 
+            border-left: 4px solid #2D6A4F; 
+            background: #E8F3EE; 
+            font-style: italic;
+            border-radius: 0 8px 8px 0;
+        }
+        img { 
+            width: 100%; 
+            max-width: 100%; 
+            height: auto !important; 
+            object-fit: cover; 
+            display: block; 
+            border-radius: 12px; 
+            margin: 1rem 0; 
+        }
+        .element-divider { 
+            width: 100%; 
+            height: 2px; 
+            background: linear-gradient(90deg, transparent, #2D6A4F, transparent); 
+            margin: 2rem 0; 
+        }
+        .element-button { 
+            display: inline-block; 
+            padding: 0.75rem 1.5rem; 
+            background: #2D6A4F; 
+            color: white; 
+            font-weight: 600; 
+            border-radius: 8px; 
+        }
+    </style>
+</head>
+<body>
+    <div class="blog-content">${clone.innerHTML}</div>
+</body>
+</html>
+    `);
+    previewWindow.document.close();
+});
+
+// Initialize
+updateLayersList();

blog.html

@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html class="light" lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>Blog Post - Mubashra</title>
+
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+        rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Playfair+Display:wght@700&display=swap"
+        rel="stylesheet" />
+
+    <script>
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "primary": "#2D6A4F",
+                        "pastel-green-light": "#F0F7F4",
+                        "pastel-green-accent": "#D8E9E1",
+                        "background-light": "#f5f7f8",
+                        "background-dark": "#101922",
+                    },
+                    fontFamily: {
+                        "display": ["Inter", "sans-serif"],
+                        "serif": ["Playfair Display", "serif"]
+                    },
+                },
+            },
+        }
+    </script>
+    <style>
+        /* Responsive Blog Content Styles */
+        .blog-content {
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem 1.5rem;
+        }
+
+        /* Convert absolute positioning to normal flow */
+        .blog-content .draggable-element {
+            position: relative !important;
+            left: auto !important;
+            top: auto !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            height: auto !important;
+            min-height: auto !important;
+            margin-bottom: 1.5rem;
+            cursor: default !important;
+        }
+
+        .blog-content .element-content {
+            padding: 0;
+        }
+
+        .blog-content h1 {
+            font-size: clamp(1.75rem, 5vw, 2.5rem);
+            font-weight: 700;
+            font-family: 'Playfair Display', serif;
+            margin: 0 0 1rem 0;
+            line-height: 1.2;
+            word-wrap: break-word;
+        }
+
+        .blog-content h2 {
+            font-size: clamp(1.5rem, 4vw, 2rem);
+            font-weight: 600;
+            margin: 0 0 0.75rem 0;
+            line-height: 1.3;
+            word-wrap: break-word;
+        }
+
+        .blog-content h3 {
+            font-size: clamp(1.25rem, 3vw, 1.5rem);
+            font-weight: 600;
+            margin: 0 0 0.5rem 0;
+            line-height: 1.4;
+            word-wrap: break-word;
+        }
+
+        .blog-content p {
+            font-size: clamp(0.95rem, 2.5vw, 1.1rem);
+            line-height: 1.8;
+            margin: 0 0 1rem 0;
+            word-wrap: break-word;
+            color: #4A5568;
+        }
+
+        .blog-content blockquote {
+            margin: 1.5rem 0;
+            padding: 1rem 1.5rem;
+            border-left: 4px solid #2D6A4F;
+            background: #E8F3EE;
+            font-style: italic;
+            font-size: clamp(1rem, 2.5vw, 1.1rem);
+            border-radius: 0 8px 8px 0;
+        }
+
+        .blog-content img {
+            width: 100%;
+            max-width: 100%;
+            height: auto !important;
+            object-fit: cover;
+            display: block;
+            border-radius: 12px;
+            margin: 1rem 0;
+        }
+
+        .blog-content .element-divider {
+            width: 100%;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #2D6A4F, transparent);
+            margin: 2rem 0;
+        }
+
+        .blog-content .element-button {
+            display: inline-block;
+            padding: 0.75rem 1.5rem;
+            background: #2D6A4F;
+            color: white;
+            font-weight: 600;
+            border-radius: 8px;
+            text-decoration: none;
+        }
+
+        /* Cover Image */
+        .cover-image {
+            width: 100%;
+            max-height: 400px;
+            object-fit: cover;
+            border-radius: 16px;
+            margin-bottom: 2rem;
+        }
+    </style>
+</head>
+
+<body class="font-display bg-background-light dark:bg-background-dark text-[#111418] dark:text-white">
+
+    <!-- Header -->
+    <header
+        class="sticky top-0 z-50 w-full border-b border-solid border-[#f0f2f5] dark:border-[#2a343f] bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-4 md:px-20 py-3">
+        <div class="max-w-[1200px] mx-auto flex items-center justify-between">
+            <a href="index.html" class="flex items-center gap-2 md:gap-4 text-primary">
+                <div class="size-6">
+                    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z"
+                            fill="currentColor"></path>
+                    </svg>
+                </div>
+                <h2
+                    class="text-[#111418] dark:text-white text-lg md:text-xl font-bold leading-tight tracking-[-0.015em]">
+                    Mubashra</h2>
+            </a>
+            <div class="flex items-center gap-4">
+                <nav class="hidden md:flex items-center gap-9">
+                    <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors"
+                        href="index.html">Home</a>
+                    <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors"
+                        href="blogs.html">Blogs</a>
+                    <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors"
+                        href="portfolio.html">Portfolio</a>
+                </nav>
+                <a href="blogs.html"
+                    class="flex items-center gap-1 md:gap-2 text-primary font-medium hover:underline text-sm">
+                    <span class="material-symbols-outlined text-lg">arrow_back</span>
+                    <span class="hidden sm:inline">Back</span>
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <main class="min-h-screen">
+        <!-- Blog Header -->
+        <section class="bg-[#F7FAF9] dark:bg-[#0D1510] py-10 md:py-16 px-4 md:px-6">
+            <div class="max-w-[800px] mx-auto">
+                <div class="flex items-center gap-3 text-[#60758a] dark:text-gray-400 text-sm font-medium mb-4">
+                    <span id="blogDate">Loading...</span>
+                    <span class="size-1 rounded-full bg-gray-300"></span>
+                    <span id="blogReadTime">5 min read</span>
+                </div>
+                <h1 id="blogTitle"
+                    class="text-[#111418] dark:text-white text-3xl md:text-4xl lg:text-5xl font-serif mb-6 leading-tight">
+                    Loading...
+                </h1>
+                <div class="flex items-center gap-4">
+                    <div
+                        class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">
+                        M
+                    </div>
+                    <div>
+                        <p class="font-semibold text-[#111418] dark:text-white text-sm md:text-base">Mubashra</p>
+                        <p class="text-xs md:text-sm text-gray-500 dark:text-gray-400">Creative Developer & Writer</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Cover Image -->
+        <section id="coverImageSection" class="hidden px-4 md:px-6 -mt-4">
+            <div class="max-w-[800px] mx-auto">
+                <img id="coverImage" class="cover-image" src="" alt="Cover Image">
+            </div>
+        </section>
+
+        <!-- Blog Content -->
+        <section class="py-8 md:py-12 px-4 md:px-6">
+            <div id="blogContent" class="blog-content bg-white dark:bg-[#1a2332] shadow-lg rounded-2xl overflow-hidden">
+                <!-- Blog content will be loaded here -->
+            </div>
+        </section>
+
+        <!-- Back to Blogs -->
+        <section class="py-8 md:py-12 px-4 md:px-6">
+            <div class="max-w-[800px] mx-auto text-center">
+                <a href="blogs.html"
+                    class="inline-flex items-center gap-2 px-6 md:px-8 py-3 md:py-4 bg-primary text-white font-bold rounded-full hover:shadow-xl hover:shadow-primary/20 transition-all transform hover:-translate-y-1 text-sm md:text-base">
+                    <span class="material-symbols-outlined">arrow_back</span>
+                    View All Blogs
+                </a>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="border-t border-gray-100 dark:border-gray-800 py-8 md:py-12 px-4 md:px-20">
+        <div class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-center gap-4 md:gap-6">
+            <div class="flex items-center gap-2">
+                <div class="size-5 text-primary">
+                    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z"
+                            fill="currentColor"></path>
+                    </svg>
+                </div>
+                <span class="font-bold">Mubashra</span>
+            </div>
+            <p class="text-xs md:text-sm text-gray-500 dark:text-gray-400">© 2024 Mubashra Portfolio. Built with
+                passion.</p>
+        </div>
+    </footer>
+
+    <script>
+        // Get blog ID from URL
+        function getBlogId() {
+            const params = new URLSearchParams(window.location.search);
+            return params.get('id');
+        }
+
+        // Load blog content
+        function loadBlog() {
+            const blogId = getBlogId();
+            const blogs = JSON.parse(localStorage.getItem('mubashra_blogs_v2')) || [];
+
+            const blog = blogs.find(b => b.id == blogId);
+
+            if (!blog) {
+                document.getElementById('blogTitle').textContent = 'Blog Not Found';
+                document.getElementById('blogContent').innerHTML = `
+                    <div class="flex flex-col items-center justify-center py-20 px-4">
+                        <span class="material-symbols-outlined text-6xl text-gray-300 mb-4">error</span>
+                        <p class="text-gray-500 text-lg text-center">The blog post you're looking for doesn't exist.</p>
+                        <a href="blogs.html" class="mt-6 text-primary font-bold hover:underline">Go back to blogs</a>
+                    </div>
+                `;
+                return;
+            }
+
+            // Update page title
+            document.title = `${blog.title} - Mubashra`;
+
+            // Update header info
+            const date = new Date(blog.date);
+            document.getElementById('blogDate').textContent = date.toLocaleDateString('en-US', {
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric'
+            });
+
+            // Get title from content or use blog title
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = blog.content;
+            const headingEl = tempDiv.querySelector('h1, h2, h3');
+            const title = headingEl ? headingEl.textContent : blog.title;
+            document.getElementById('blogTitle').textContent = title;
+
+            // Show cover image if exists
+            if (blog.coverImage) {
+                document.getElementById('coverImageSection').classList.remove('hidden');
+                document.getElementById('coverImage').src = blog.coverImage;
+            }
+
+            // Load the actual content
+            document.getElementById('blogContent').innerHTML = blog.content;
+        }
+
+        // Load on page ready
+        document.addEventListener('DOMContentLoaded', loadBlog);
+    </script>
+</body>
+
+</html>

blogs.html

@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html class="light" lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>All Blogs - Mubashra</title>
+
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+        rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Playfair+Display:wght@700&display=swap"
+        rel="stylesheet" />
+
+    <script>
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "primary": "#2D6A4F",
+                        "pastel-green-light": "#F0F7F4",
+                        "pastel-green-accent": "#D8E9E1",
+                        "background-light": "#f5f7f8",
+                        "background-dark": "#101922",
+                    },
+                    fontFamily: {
+                        "display": ["Inter", "sans-serif"],
+                        "serif": ["Playfair Display", "serif"]
+                    },
+                },
+            },
+        }
+    </script>
+    <style>
+        .line-clamp-2 {
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        @keyframes float {
+            0% {
+                transform: translate(0, 0) scale(1);
+            }
+
+            33% {
+                transform: translate(30px, -50px) scale(1.1);
+            }
+
+            66% {
+                transform: translate(-20px, 20px) scale(0.9);
+            }
+
+            100% {
+                transform: translate(0, 0) scale(1);
+            }
+        }
+
+        .animate-blob {
+            animation: float 15s infinite ease-in-out;
+        }
+
+        .animation-delay-2000 {
+            animation-delay: 2s;
+        }
+    </style>
+</head>
+
+<body class="font-display bg-background-light dark:bg-background-dark text-[#111418] dark:text-white">
+
+    <!-- Header -->
+    <header
+        class="sticky top-0 z-50 w-full border-b border-solid border-[#f0f2f5] dark:border-[#2a343f] bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-20 py-3">
+        <div class="max-w-[1200px] mx-auto flex items-center justify-between">
+            <a href="index.html" class="flex items-center gap-4 text-primary">
+                <div class="size-6">
+                    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z"
+                            fill="currentColor"></path>
+                    </svg>
+                </div>
+                <h2 class="text-[#111418] dark:text-white text-xl font-bold leading-tight tracking-[-0.015em]">Mubashra
+                </h2>
+            </a>
+            <div class="flex flex-1 justify-end gap-8 items-center">
+                <nav class="hidden md:flex items-center gap-9">
+                    <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors"
+                        href="index.html">Home</a>
+                    <a class="text-primary text-sm font-medium" href="blogs.html">Blogs</a>
+                    <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors"
+                        href="portfolio.html">Portfolio</a>
+                </nav>
+                <a href="admin.html"
+                    class="flex min-w-[84px] cursor-pointer items-center justify-center rounded-lg h-10 px-5 bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-all shadow-sm">
+                    <span class="truncate">Login</span>
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <main class="min-h-screen">
+        <!-- Hero Section -->
+        <section class="relative py-20 overflow-hidden bg-[#F7FAF9] dark:bg-[#0D1510]">
+            <div class="absolute inset-0 z-0">
+                <div
+                    class="absolute top-[-10%] left-[10%] w-[35%] h-[35%] rounded-full bg-[#D1E7DD] dark:bg-[#1A3328] blur-[100px] animate-blob">
+                </div>
+                <div
+                    class="absolute bottom-[-5%] right-[5%] w-[40%] h-[40%] rounded-full bg-[#E2EFDE] dark:bg-[#142A1F] blur-[120px] animate-blob animation-delay-2000">
+                </div>
+            </div>
+            <div class="relative z-10 max-w-[1200px] mx-auto px-6 md:px-20 text-center">
+                <h1 class="text-[#111418] dark:text-white text-5xl md:text-6xl font-serif mb-6 leading-tight">
+                    All <span class="text-primary italic">Stories</span>
+                </h1>
+                <p class="text-[#4A5568] dark:text-gray-300 text-lg max-w-2xl mx-auto leading-relaxed">
+                    Explore my thoughts on design, development, and the creative process.
+                </p>
+            </div>
+        </section>
+
+        <!-- All Blogs Grid -->
+        <section class="max-w-[1200px] mx-auto px-6 md:px-20 py-16">
+            <div id="blogGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Blog posts will be loaded here dynamically -->
+            </div>
+            <div id="noBlogsMessage" class="hidden text-center py-20">
+                <span class="material-symbols-outlined text-8xl text-gray-300 dark:text-gray-600 mb-6">article</span>
+                <h2 class="text-2xl font-bold text-gray-400 mb-2">No Blog Posts Yet</h2>
+                <p class="text-gray-500 dark:text-gray-400 text-lg mb-8">Check back soon for new stories and insights!
+                </p>
+                <a href="admin.html"
+                    class="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-all">
+                    <span class="material-symbols-outlined">add</span>
+                    Create First Blog
+                </a>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="border-t border-gray-100 dark:border-gray-800 py-12 px-6 md:px-20">
+        <div class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
+            <div class="flex items-center gap-2">
+                <div class="size-5 text-primary">
+                    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z"
+                            fill="currentColor"></path>
+                    </svg>
+                </div>
+                <span class="font-bold">Mubashra</span>
+            </div>
+            <p class="text-sm text-gray-500 dark:text-gray-400">© 2024 Mubashra Portfolio. Built with passion.</p>
+            <div class="flex gap-6">
+                <a class="text-gray-400 hover:text-primary transition-colors" href="#">
+                    <span class="material-symbols-outlined">alternate_email</span>
+                </a>
+                <a class="text-gray-400 hover:text-primary transition-colors" href="#">
+                    <span class="material-symbols-outlined">person</span>
+                </a>
+                <a class="text-gray-400 hover:text-primary transition-colors" href="#">
+                    <span class="material-symbols-outlined">share</span>
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Load and display all blog posts
+        function loadBlogs() {
+            const blogs = JSON.parse(localStorage.getItem('mubashra_blogs_v2')) || [];
+            const blogGrid = document.getElementById('blogGrid');
+            const noBlogsMessage = document.getElementById('noBlogsMessage');
+
+            if (blogs.length === 0) {
+                blogGrid.classList.add('hidden');
+                noBlogsMessage.classList.remove('hidden');
+                return;
+            }
+
+            blogGrid.classList.remove('hidden');
+            noBlogsMessage.classList.add('hidden');
+
+            blogGrid.innerHTML = blogs.map((blog, index) => {
+                const date = new Date(blog.date);
+                const formattedDate = date.toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric'
+                });
+
+                // Extract first text content for preview
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = blog.content;
+                const textContent = tempDiv.textContent || tempDiv.innerText || '';
+                const preview = textContent.substring(0, 120) + (textContent.length > 120 ? '...' : '');
+
+                // Get first heading for title
+                const headingEl = tempDiv.querySelector('h1, h2, h3');
+                const title = headingEl ? headingEl.textContent : blog.title;
+
+                // Categories
+                const categories = ['Design', 'Development', 'Minimalism', 'Technology', 'Lifestyle'];
+                const category = categories[index % categories.length];
+
+                // Placeholder images
+                const images = [
+                    'https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=600&h=400&fit=crop',
+                    'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=600&h=400&fit=crop',
+                    'https://images.unsplash.com/photo-1493119508027-2b584f234d6c?w=600&h=400&fit=crop',
+                    'https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=600&h=400&fit=crop',
+                    'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=600&h=400&fit=crop',
+                    'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600&h=400&fit=crop'
+                ];
+                const image = images[index % images.length];
+
+                return `
+                    <article class="group flex flex-col gap-4 cursor-pointer" onclick="viewBlog(${blog.id})">
+                        <div class="relative w-full aspect-[16/10] overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
+                            <div class="absolute inset-0 bg-center bg-cover transition-transform duration-500 group-hover:scale-110" 
+                                 style="background-image: url('${image}');">
+                            </div>
+                            <div class="absolute top-4 left-4">
+                                <span class="px-3 py-1 rounded-full bg-white/90 dark:bg-background-dark/90 text-primary text-xs font-bold shadow-sm">${category}</span>
+                            </div>
+                        </div>
+                        <div class="flex flex-col gap-2">
+                            <div class="flex items-center gap-3 text-[#60758a] dark:text-gray-400 text-xs font-medium">
+                                <span>${formattedDate}</span>
+                                <span class="size-1 rounded-full bg-gray-300"></span>
+                                <span>5 min read</span>
+                            </div>
+                            <h3 class="text-[#111418] dark:text-white text-xl font-bold leading-snug group-hover:text-primary transition-colors">
+                                ${title}
+                            </h3>
+                            <p class="text-[#60758a] dark:text-gray-400 text-sm leading-relaxed line-clamp-2">
+                                ${preview}
+                            </p>
+                        </div>
+                    </article>
+                `;
+            }).join('');
+        }
+
+        // Navigate to blog view page
+        function viewBlog(blogId) {
+            window.location.href = `blog.html?id=${blogId}`;
+        }
+
+        // Load blogs on page load
+        document.addEventListener('DOMContentLoaded', loadBlogs);
+    </script>
+</body>
+
+</html>

index.html

@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html class="light" lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+    <title>Mubashra Portfolio - Creative Developer & Writer</title>
+    <meta name="description"
+        content="Mubashra - Creative Developer & Writer specializing in building sophisticated digital experiences and sharing insights on the future of technology.">
+
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+        rel="stylesheet" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Playfair+Display:wght@700&display=swap"
+        rel="stylesheet" />
+
+    <script>
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "primary": "#2D6A4F",
+                        "pastel-green-light": "#F0F7F4",
+                        "pastel-green-accent": "#D8E9E1",
+                        "background-light": "#f5f7f8",
+                        "background-dark": "#101922",
+                    },
+                    fontFamily: {
+                        "display": ["Inter", "sans-serif"],
+                        "serif": ["Playfair Display", "serif"]
+                    },
+                    borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
+                },
+            },
+        }
+    </script>
+    <style>
+        @keyframes float {
+            0% {
+                transform: translate(0, 0) scale(1);
+            }
+
+            33% {
+                transform: translate(30px, -50px) scale(1.1);
+            }
+
+            66% {
+                transform: translate(-20px, 20px) scale(0.9);
+            }
+
+            100% {
+                transform: translate(0, 0) scale(1);
+            }
+        }
+
+        .animate-blob {
+            animation: float 15s infinite ease-in-out;
+        }
+
+        .animation-delay-2000 {
+            animation-delay: 2s;
+        }
+
+        .animation-delay-4000 {
+            animation-delay: 4s;
+        }
+
+        .line-clamp-2 {
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body
+    class="font-display bg-background-light dark:bg-background-dark text-[#111418] dark:text-white transition-colors duration-300">
+
+    <!-- Header -->
+    <header
+        class="sticky top-0 z-50 w-full border-b border-solid border-[#f0f2f5] dark:border-[#2a343f] bg-white/80 dark:bg-background-dark/80 backdrop-blur-md px-6 md:px-20 py-3">
+        <div class="max-w-[1200px] mx-auto flex items-center justify-between">
+            <div class="flex items-center gap-4 text-primary">
+                <div class="size-6">
+                    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z"
+                            fill="currentColor"></path>
+                    </svg>
+                </div>
+                <h2 class="text-[#111418] dark:text-white text-xl font-bold leading-tight tracking-[-0.015em]">Mubashra
+                </h2>
+            </div>
+            <div class="flex flex-1 justify-end gap-8 items-center">
+                <nav class="hidden md:flex items-center gap-9">
+                    <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors"
+                        href="index.html">Home</a>
+                    <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors"
+                        href="blogs.html">Blogs</a>
+                    <a class="text-[#111418] dark:text-white text-sm font-medium hover:text-primary transition-colors"
+                        href="portfolio.html">Portfolio</a>
+                </nav>
+                <a href="admin.html"
+                    class="flex min-w-[84px] cursor-pointer items-center justify-center rounded-lg h-10 px-5 bg-primary text-white text-sm font-bold hover:bg-primary/90 transition-all shadow-sm">
+                    <span class="truncate">Login</span>
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <main>
+        <!-- Hero Section -->
+        <section
+            class="relative h-[85vh] min-h-[650px] w-full flex items-center justify-center overflow-hidden bg-[#F7FAF9] dark:bg-[#0D1510]">
+            <div class="absolute inset-0 z-0">
+                <div
+                    class="absolute top-[-10%] left-[10%] w-[45%] h-[45%] rounded-full bg-[#D1E7DD] dark:bg-[#1A3328] blur-[100px] animate-blob">
+                </div>
+                <div
+                    class="absolute bottom-[-5%] right-[5%] w-[50%] h-[50%] rounded-full bg-[#E2EFDE] dark:bg-[#142A1F] blur-[120px] animate-blob animation-delay-2000">
+                </div>
+                <div
+                    class="absolute top-[20%] right-[15%] w-[30%] h-[30%] rounded-full bg-[#ECF3F0] dark:bg-[#0D1F16] blur-[80px] animate-blob animation-delay-4000">
+                </div>
+            </div>
+            <div class="relative z-10 max-w-[960px] px-6 text-center">
+                <div
+                    class="mb-8 inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-[0.15em]">
+                    <span class="relative flex h-2 w-2">
+                        <span
+                            class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                        <span class="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                    </span>
+                    Available for projects
+                </div>
+                <h1
+                    class="text-[#111418] dark:text-white text-6xl md:text-8xl font-serif mb-8 leading-[1.1] tracking-tight">
+                    Hello, I am <span class="text-primary italic">Mubashra</span>
+                </h1>
+                <p
+                    class="text-[#4A5568] dark:text-gray-300 text-lg md:text-2xl font-normal mb-12 max-w-2xl mx-auto leading-relaxed">
+                    Creative Developer & Writer specializing in building sophisticated digital experiences and sharing
+                    insights on the future of technology.
+                </p>
+                <div class="flex flex-col sm:flex-row items-center justify-center gap-5">
+                    <a href="portfolio.html"
+                        class="w-full sm:w-auto flex items-center justify-center rounded-full h-16 px-10 bg-primary text-white text-base font-bold tracking-wide hover:shadow-xl hover:shadow-primary/20 transition-all transform hover:-translate-y-1">
+                        Explore My Work
+                    </a>
+                    <a href="blogs.html"
+                        class="w-full sm:w-auto flex items-center justify-center rounded-full h-16 px-10 bg-white/40 dark:bg-white/5 border border-[#E2E8F0] dark:border-white/10 text-[#111418] dark:text-white text-base font-bold backdrop-blur-sm hover:bg-white/60 dark:hover:bg-white/10 transition-all">
+                        Read My Blog
+                    </a>
+                </div>
+            </div>
+            <div class="absolute bottom-10 left-1/2 -translate-x-1/2 text-primary/40 flex flex-col items-center gap-2">
+                <span class="text-[10px] font-bold uppercase tracking-[0.3em]">Scroll</span>
+                <span class="material-symbols-outlined text-xl animate-bounce">keyboard_double_arrow_down</span>
+            </div>
+        </section>
+
+        <!-- Latest Blog Posts Section -->
+        <section class="max-w-[1200px] mx-auto px-6 md:px-20 pt-20">
+            <div class="flex items-end justify-between border-b border-gray-200 dark:border-gray-800 pb-6">
+                <div>
+                    <h2 class="text-[#111418] dark:text-white text-3xl font-bold tracking-tight">Latest Insights &
+                        Stories</h2>
+                    <p class="text-gray-500 dark:text-gray-400 mt-2">Thoughts on design, code, and everything in
+                        between.</p>
+                </div>
+                <a class="text-primary font-bold text-sm flex items-center gap-1 hover:underline" href="blogs.html">
+                    View All Posts <span class="material-symbols-outlined text-sm">arrow_forward</span>
+                </a>
+            </div>
+        </section>
+
+        <section class="max-w-[1200px] mx-auto px-6 md:px-20 py-10">
+            <div id="blogGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Blog posts will be loaded here dynamically -->
+            </div>
+            <div id="noBlogsMessage" class="hidden text-center py-16">
+                <span class="material-symbols-outlined text-6xl text-gray-300 dark:text-gray-600 mb-4">article</span>
+                <p class="text-gray-500 dark:text-gray-400 text-lg">No blog posts yet. Check back soon!</p>
+            </div>
+        </section>
+
+        <!-- CTA Section -->
+        <section class="bg-white dark:bg-[#151f2b] py-24 px-6 md:px-20 mt-10">
+            <div
+                class="max-w-[1200px] mx-auto bg-primary/5 dark:bg-primary/10 rounded-3xl p-10 md:p-20 border border-primary/10 flex flex-col items-center text-center">
+                <div class="size-16 rounded-2xl bg-primary/20 flex items-center justify-center text-primary mb-8">
+                    <span class="material-symbols-outlined text-4xl">dashboard_customize</span>
+                </div>
+                <h2
+                    class="text-[#111418] dark:text-white text-3xl md:text-5xl font-black mb-6 max-w-[720px] leading-tight">
+                    Build your own vision
+                </h2>
+                <p class="text-[#111418] dark:text-gray-300 text-lg mb-10 max-w-[600px] opacity-80">
+                    Ready to take control? Manage your content with our powerful drag-and-drop admin builder. Simple,
+                    fast, and completely customizable.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 w-full justify-center">
+                    <a href="admin.html"
+                        class="flex min-w-[200px] cursor-pointer items-center justify-center rounded-xl h-14 px-8 bg-primary text-white text-base font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] transition-transform">
+                        Open Admin Editor
+                    </a>
+                    <button
+                        class="flex min-w-[200px] cursor-pointer items-center justify-center rounded-xl h-14 px-8 border-2 border-primary/20 text-primary text-base font-bold hover:bg-primary/5 transition-colors">
+                        Documentation
+                    </button>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="border-t border-gray-100 dark:border-gray-800 py-12 px-6 md:px-20">
+        <div class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
+            <div class="flex items-center gap-2">
+                <div class="size-5 text-primary">
+                    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M42.4379 44C42.4379 44 36.0744 33.9038 41.1692 24C46.8624 12.9336 42.2078 4 42.2078 4L7.01134 4C7.01134 4 11.6577 12.932 5.96912 23.9969C0.876273 33.9029 7.27094 44 7.27094 44L42.4379 44Z"
+                            fill="currentColor"></path>
+                    </svg>
+                </div>
+                <span class="font-bold">Mubashra</span>
+            </div>
+            <p class="text-sm text-gray-500 dark:text-gray-400">© 2024 Mubashra Portfolio. Built with passion.</p>
+            <div class="flex gap-6">
+                <a class="text-gray-400 hover:text-primary transition-colors" href="#">
+                    <span class="material-symbols-outlined">alternate_email</span>
+                </a>
+                <a class="text-gray-400 hover:text-primary transition-colors" href="#">
+                    <span class="material-symbols-outlined">person</span>
+                </a>
+                <a class="text-gray-400 hover:text-primary transition-colors" href="#">
+                    <span class="material-symbols-outlined">share</span>
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Load and display blog posts
+        function loadBlogs() {
+            const blogs = JSON.parse(localStorage.getItem('mubashra_blogs_v2')) || [];
+            const blogGrid = document.getElementById('blogGrid');
+            const noBlogsMessage = document.getElementById('noBlogsMessage');
+
+            if (blogs.length === 0) {
+                blogGrid.classList.add('hidden');
+                noBlogsMessage.classList.remove('hidden');
+                return;
+            }
+
+            blogGrid.classList.remove('hidden');
+            noBlogsMessage.classList.add('hidden');
+
+            // Show only latest 3 blogs on homepage
+            const latestBlogs = blogs.slice(0, 3);
+
+            blogGrid.innerHTML = latestBlogs.map((blog, index) => {
+                const date = new Date(blog.date);
+                const formattedDate = date.toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric'
+                });
+
+                // Extract first text content for preview
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = blog.content;
+                const textContent = tempDiv.textContent || tempDiv.innerText || '';
+                const preview = textContent.substring(0, 120) + (textContent.length > 120 ? '...' : '');
+
+                // Get first heading for title
+                const headingEl = tempDiv.querySelector('h1, h2, h3');
+                const title = headingEl ? headingEl.textContent : blog.title;
+
+                // Categories based on content
+                const categories = ['Design', 'Development', 'Minimalism', 'Technology', 'Lifestyle'];
+                const category = categories[index % categories.length];
+
+                // Image HTML - Only show if coverImage exists
+                let imageHtml = '';
+                if (blog.coverImage) {
+                    imageHtml = `
+                        <div class="relative w-full aspect-[16/10] overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
+                            <div class="absolute inset-0 bg-center bg-cover transition-transform duration-500 group-hover:scale-110" 
+                                 style="background-image: url('${blog.coverImage}');">
+                            </div>
+                            <div class="absolute top-4 left-4">
+                                <span class="px-3 py-1 rounded-full bg-white/90 dark:bg-background-dark/90 text-primary text-xs font-bold shadow-sm">${category}</span>
+                            </div>
+                        </div>
+                    `;
+                }
+
+                return `
+                    <article class="group flex flex-col gap-4 cursor-pointer" onclick="viewBlog(${blog.id})">
+                        ${imageHtml}
+                        <div class="flex flex-col gap-2">
+                            <div class="flex items-center gap-3 text-[#60758a] dark:text-gray-400 text-xs font-medium">
+                                <span>${formattedDate}</span>
+                                <span class="size-1 rounded-full bg-gray-300"></span>
+                                <span>5 min read</span>
+                            </div>
+                            <h3 class="text-[#111418] dark:text-white text-xl font-bold leading-snug group-hover:text-primary transition-colors">
+                                ${title}
+                            </h3>
+                            <p class="text-[#60758a] dark:text-gray-400 text-sm leading-relaxed line-clamp-2">
+                                ${preview}
+                            </p>
+                        </div>
+                    </article>
+                `;
+            }).join('');
+        }
+
+        // Navigate to blog view page
+        function viewBlog(blogId) {
+            window.location.href = `blog.html?id=${blogId}`;
+        }
+
+        // Load blogs on page load
+        document.addEventListener('DOMContentLoaded', loadBlogs);
+    </script>
+</body>
+
+</html>

script.js

@@ -0,0 +1,83 @@
+document.addEventListener('DOMContentLoaded', () => {
+    loadBlogs();
+});
+
+function loadBlogs() {
+    const blogsContainer = document.getElementById('blogsContainer');
+    const blogs = JSON.parse(localStorage.getItem('mubashra_blogs_v2')) || [];
+
+    if (blogs.length > 0) {
+        blogsContainer.innerHTML = ''; // Clear empty state
+
+        blogs.forEach((blog, index) => {
+            const card = document.createElement('div');
+            card.classList.add('blog-card');
+
+            // For this version, since the admin creates a free-form "canvas", 
+            // the safest way to "preview" it is to render the HTML structure.
+            // However, to prevent styles from breaking the card, we might scale it or similar.
+            // A simple approach: specific card layout.
+            // But the user said "place it like canva".
+            // So the blog is likely absolute positioned elements on a fixed size canvas.
+            // We will render a mini version of that canvas.
+
+            const previewScale = 0.3; // Scale down for card
+
+            card.innerHTML = `
+                <div class="blog-preview-wrapper" style="position: relative; width: 100%; padding-top: 75%; overflow: hidden; background: ${blog.backgroundColor || 'transparent'};">
+                    <div class="blog-content-scaler" style="
+                        position: absolute; 
+                        top: 0; 
+                        left: 0; 
+                        width: 100%; 
+                        transform-origin: top left; 
+                        transform: scale(${previewScale}); 
+                        width: ${100 / previewScale}%; 
+                        height: ${100 / previewScale}%;
+                        pointer-events: none; /* Make it non-interactive in preview */
+                    ">
+                        ${blog.content}
+                    </div>
+                </div>
+                <div style="padding: 1rem; background: rgba(0,0,0,0.2);">
+                    <h3 style="margin-bottom: 0.5rem; font-family: var(--font-heading);">${blog.title || 'Untitled Blog'}</h3>
+                    <p style="font-size: 0.8rem; opacity: 0.7;">${new Date(blog.date).toLocaleDateString()}</p>
+                </div>
+            `;
+
+            // Optional: Click to view full blog (Modal or separate page). 
+            // For now, let's just create a simple 'View' modal logic or leave as cards.
+            // The user didn't explicitly ask for a 'View' page, just 'show all blogs'. 
+            // But 'show' usually implies readability.
+
+            card.addEventListener('click', () => openBlogModal(blog));
+
+            blogsContainer.appendChild(card);
+        });
+    }
+}
+
+function openBlogModal(blog) {
+    // fast modal implementation
+    const modal = document.createElement('div');
+    modal.style.cssText = `
+        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+        background: rgba(0,0,0,0.9); z-index: 2000; display: flex;
+        justify-content: center; align-items: center; overflow: auto;
+        padding: 2rem;
+    `;
+
+    // The "Canvas" logic from Admin will likely use a fixed width container. 
+    // We need to match that. Assuming standard web 1000px or similar.
+
+    modal.innerHTML = `
+        <div style="position: relative; width: 100%; max-width: 1000px; min-height: 80vh; background: ${blog.backgroundColor || '#1a1a2e'}; border-radius: 10px; box-shadow: 0 0 50px rgba(0,0,0,0.5); padding: 2rem; overflow: hidden;">
+            <button onclick="this.parentElement.parentElement.remove()" style="position: absolute; top: 1rem; right: 1rem; background: red; border: none; color: white; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; z-index: 100;">X</button>
+            <div style="position: relative; width: 100%; height: 100%;">
+                ${blog.content}
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(modal);
+}

style.css

@@ -0,0 +1,269 @@
+:root {
+    --bg-color: #0f0c29;
+    --text-color: #ffffff;
+    --accent-color: #ff00cc;
+    --accent-secondary: #333399;
+    --glass-bg: rgba(255, 255, 255, 0.05);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --font-heading: 'Playfair Display', serif;
+    --font-body: 'Outfit', sans-serif;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    font-family: var(--font-body);
+    overflow-x: hidden;
+    min-height: 100vh;
+}
+
+/* Animated Background */
+.background-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.6;
+    animation: float 20s infinite ease-in-out;
+}
+
+.orb-1 {
+    width: 400px;
+    height: 400px;
+    background: var(--accent-color);
+    top: -100px;
+    left: -100px;
+    animation-delay: 0s;
+}
+
+.orb-2 {
+    width: 500px;
+    height: 500px;
+    background: var(--accent-secondary);
+    bottom: -150px;
+    right: -150px;
+    animation-delay: -5s;
+}
+
+.orb-3 {
+    width: 300px;
+    height: 300px;
+    background: #00d4ff;
+    top: 40%;
+    left: 40%;
+    animation-delay: -10s;
+}
+
+@keyframes float {
+    0% { transform: translate(0, 0) scale(1); }
+    33% { transform: translate(30px, -50px) scale(1.1); }
+    66% { transform: translate(-20px, 20px) scale(0.9); }
+    100% { transform: translate(0, 0) scale(1); }
+}
+
+/* Navigation */
+.glass-nav {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    padding: 1.5rem 5%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(15, 12, 41, 0.6);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--glass-border);
+    z-index: 1000;
+}
+
+.logo {
+    font-family: var(--font-heading);
+    font-size: 1.8rem;
+    font-weight: 700;
+    letter-spacing: 1px;
+    background: linear-gradient(45deg, #fff, var(--accent-color));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.nav-links {
+    list-style: none;
+    display: flex;
+    gap: 2rem;
+}
+
+.nav-links a {
+    text-decoration: none;
+    color: var(--text-color);
+    font-weight: 600;
+    transition: color 0.3s;
+    font-size: 1rem;
+}
+
+.nav-links a:hover, .nav-links a.admin-link:hover {
+    color: var(--accent-color);
+}
+
+/* Hero Section */
+.hero-section {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 0 1rem;
+}
+
+.hero-content h2 {
+    font-size: 2rem;
+    font-weight: 300;
+    margin-bottom: 1rem;
+    opacity: 0.9;
+}
+
+.hero-content h1 {
+    font-family: var(--font-heading);
+    font-size: 5rem;
+    margin-bottom: 1rem;
+    line-height: 1.1;
+}
+
+.gradient-text {
+    background: linear-gradient(90deg, #fff, var(--accent-color), #00d4ff);
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: gradientText 5s linear infinite;
+}
+
+@keyframes gradientText {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.hero-content p {
+    font-size: 1.2rem;
+    color: #ccc;
+    margin-bottom: 2.5rem;
+}
+
+.cta-button {
+    display: inline-block;
+    padding: 1rem 2.5rem;
+    background: var(--accent-color);
+    color: white;
+    text-decoration: none;
+    border-radius: 50px;
+    font-weight: 600;
+    box-shadow: 0 10px 20px rgba(255, 0, 204, 0.3);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.cta-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 30px rgba(255, 0, 204, 0.5);
+}
+
+/* Entry Animations */
+.fade-in {
+    opacity: 0;
+    animation: fadeIn 1s ease-out forwards;
+}
+
+.slide-up {
+    opacity: 0;
+    transform: translateY(30px);
+    animation: slideUp 1s ease-out 0.3s forwards;
+}
+
+.slide-up-delay {
+    opacity: 0;
+    transform: translateY(30px);
+    animation: slideUp 1s ease-out 0.6s forwards;
+}
+
+@keyframes fadeIn { to { opacity: 1; } }
+@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
+
+/* Blogs Section */
+.blogs-section {
+    padding: 5rem 5%;
+    min-height: 80vh;
+}
+
+.section-title {
+    font-family: var(--font-heading);
+    font-size: 3rem;
+    margin-bottom: 3rem;
+    text-align: center;
+}
+
+.blogs-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 2rem;
+}
+
+/* Blog Card Styles (Dynamic) */
+.blog-card {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+    overflow: hidden;
+    transition: transform 0.3s;
+    position: relative;
+    min-height: 300px; /* Placeholder Aspect Ratio */
+    display: flex;
+    flex-direction: column;
+}
+
+.blog-card:hover {
+    transform: translateY(-10px);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.blog-preview {
+    padding: 1rem;
+    color: #eee;
+    /* Since the blog content is free-form canvas, we might just scale it down or grab a screenshot/thumbnail representation. 
+       For now, we'll try to just show a preview container. */
+    flex-grow: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+.empty-state {
+    grid-column: 1 / -1;
+    text-align: center;
+    padding: 3rem;
+    color: rgba(255,255,255,0.5);
+    font-size: 1.2rem;
+    border: 2px dashed rgba(255,255,255,0.1);
+    border-radius: 16px;
+}
+
+footer {
+    padding: 2rem;
+    text-align: center;
+    background: rgba(0,0,0,0.3);
+    color: rgba(255,255,255,0.5);
+    margin-top: auto;
+}