Spaces:
Running
Running
| <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> |