| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SimpleCMS - A Lightweight CMS</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| .editor-toolbar { |
| transition: all 0.3s ease; |
| } |
| .sidebar { |
| transition: transform 0.3s ease; |
| } |
| .sidebar.collapsed { |
| transform: translateX(-100%); |
| } |
| .content-area { |
| transition: margin-left 0.3s ease; |
| } |
| .content-area.expanded { |
| margin-left: 0; |
| } |
| .page-item.active { |
| background-color: #3b82f6; |
| color: white; |
| } |
| .draggable-handle { |
| cursor: move; |
| } |
| #editor { |
| min-height: 300px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| |
| <div class="bg-blue-600 text-white p-3 flex justify-between items-center shadow-md"> |
| <div class="flex items-center space-x-4"> |
| <button id="toggle-sidebar" class="text-white hover:text-blue-200"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| <h1 class="text-xl font-bold">SimpleCMS</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative group"> |
| <button class="flex items-center space-x-2 hover:text-blue-200"> |
| <span>Admin</span> |
| <i class="fas fa-chevron-down text-sm"></i> |
| </button> |
| <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden group-hover:block"> |
| <div class="py-1"> |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Profile</a> |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Settings</a> |
| <div class="border-t border-gray-200"></div> |
| <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Logout</a> |
| </div> |
| </div> |
| </div> |
| <button id="view-site" class="bg-blue-700 hover:bg-blue-800 px-4 py-1 rounded"> |
| View Site |
| </button> |
| </div> |
| </div> |
|
|
| <div class="flex"> |
| |
| <div id="sidebar" class="sidebar bg-gray-800 text-white w-64 min-h-screen p-4 fixed h-full"> |
| <div class="mb-8"> |
| <h2 class="text-lg font-semibold mb-4 flex justify-between items-center"> |
| <span>Navigation</span> |
| <button id="collapse-sidebar" class="text-gray-400 hover:text-white"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| </h2> |
| <ul class="space-y-2"> |
| <li> |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700 active"> |
| <i class="fas fa-home"></i> |
| <span>Dashboard</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700"> |
| <i class="fas fa-file-alt"></i> |
| <span>Pages</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700"> |
| <i class="fas fa-paint-brush"></i> |
| <span>Themes</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700"> |
| <i class="fas fa-puzzle-piece"></i> |
| <span>Plugins</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-gray-700"> |
| <i class="fas fa-cog"></i> |
| <span>Settings</span> |
| </a> |
| </li> |
| </ul> |
| </div> |
|
|
| <div class="mb-8"> |
| <h2 class="text-lg font-semibold mb-4">Quick Actions</h2> |
| <div class="grid grid-cols-2 gap-2"> |
| <button class="bg-blue-600 hover:bg-blue-700 p-2 rounded text-sm"> |
| <i class="fas fa-plus mr-1"></i> New Page |
| </button> |
| <button class="bg-green-600 hover:bg-green-700 p-2 rounded text-sm"> |
| <i class="fas fa-upload mr-1"></i> Upload |
| </button> |
| <button class="bg-purple-600 hover:bg-purple-700 p-2 rounded text-sm"> |
| <i class="fas fa-palette mr-1"></i> Theme |
| </button> |
| <button class="bg-yellow-600 hover:bg-yellow-700 p-2 rounded text-sm"> |
| <i class="fas fa-plug mr-1"></i> Plugin |
| </button> |
| </div> |
| </div> |
|
|
| <div> |
| <h2 class="text-lg font-semibold mb-4">Recent Pages</h2> |
| <ul class="space-y-2"> |
| <li class="flex items-center justify-between p-2 rounded hover:bg-gray-700"> |
| <a href="#" class="flex-1">Home</a> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </li> |
| <li class="flex items-center justify-between p-2 rounded hover:bg-gray-700"> |
| <a href="#" class="flex-1">About Us</a> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </li> |
| <li class="flex items-center justify-between p-2 rounded hover:bg-gray-700"> |
| <a href="#" class="flex-1">Contact</a> |
| <button class="text-gray-400 hover:text-white"> |
| <i class="fas fa-ellipsis-v"></i> |
| </button> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div id="content-area" class="content-area ml-64 p-6 flex-1 transition-all duration-300"> |
| <div class="bg-white rounded-lg shadow-md p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Edit Page: Home</h2> |
| <div class="flex space-x-2"> |
| <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded"> |
| <i class="fas fa-eye mr-2"></i> Preview |
| </button> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"> |
| <i class="fas fa-save mr-2"></i> Save |
| </button> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2" for="page-title">Page Title</label> |
| <input type="text" id="page-title" value="Welcome to SimpleCMS" |
| class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
|
|
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2">Page Content</label> |
| <div class="editor-toolbar bg-gray-100 border border-gray-300 rounded-t-lg p-2 flex flex-wrap gap-1"> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Bold"><i class="fas fa-bold"></i></button> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Italic"><i class="fas fa-italic"></i></button> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Underline"><i class="fas fa-underline"></i></button> |
| <div class="border-l border-gray-400 mx-1 h-6"></div> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Heading 1"><i class="fas fa-heading"></i> 1</button> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Heading 2"><i class="fas fa-heading"></i> 2</button> |
| <div class="border-l border-gray-400 mx-1 h-6"></div> |
| <button class="p-2 hover:bg-gray-200 rounded" title="List"><i class="fas fa-list-ul"></i></button> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Numbered List"><i class="fas fa-list-ol"></i></button> |
| <div class="border-l border-gray-400 mx-1 h-6"></div> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Link"><i class="fas fa-link"></i></button> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Image"><i class="fas fa-image"></i></button> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Table"><i class="fas fa-table"></i></button> |
| <div class="border-l border-gray-400 mx-1 h-6"></div> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Code"><i class="fas fa-code"></i></button> |
| <button class="p-2 hover:bg-gray-200 rounded" title="Quote"><i class="fas fa-quote-right"></i></button> |
| </div> |
| <div id="editor" class="border border-gray-300 rounded-b-lg p-4 min-h-64 focus:outline-none focus:ring-2 focus:ring-blue-500" contenteditable="true"> |
| <h2>Welcome to SimpleCMS</h2> |
| <p>This is a lightweight content management system inspired by WonderCMS. You can edit this content directly in the editor.</p> |
| <p>Try adding your own content or formatting text using the toolbar above.</p> |
| <ul> |
| <li>Easy to use</li> |
| <li>No database required</li> |
| <li>Simple and intuitive interface</li> |
| </ul> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <label class="block text-gray-700 font-medium mb-2" for="page-url">Page URL</label> |
| <div class="flex"> |
| <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500"> |
| https://example.com/ |
| </span> |
| <input type="text" id="page-url" value="home" |
| class="flex-1 rounded-r-md border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| </div> |
| <div> |
| <label class="block text-gray-700 font-medium mb-2" for="page-status">Status</label> |
| <select id="page-status" class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="published">Published</option> |
| <option value="draft">Draft</option> |
| <option value="archived">Archived</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2">SEO Settings</label> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-gray-600 mb-1" for="meta-title">Meta Title</label> |
| <input type="text" id="meta-title" value="Welcome to SimpleCMS - A Lightweight CMS" |
| class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div> |
| <label class="block text-gray-600 mb-1" for="meta-description">Meta Description</label> |
| <textarea id="meta-description" rows="2" |
| class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">SimpleCMS is a lightweight content management system that makes website creation easy and straightforward.</textarea> |
| </div> |
| <div> |
| <label class="block text-gray-600 mb-1" for="meta-keywords">Keywords (comma separated)</label> |
| <input type="text" id="meta-keywords" value="CMS, simple, lightweight, website" |
| class="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex justify-end space-x-3 pt-4 border-t border-gray-200"> |
| <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded"> |
| Cancel |
| </button> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"> |
| <i class="fas fa-save mr-2"></i> Save Changes |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('toggle-sidebar').addEventListener('click', function() { |
| const sidebar = document.getElementById('sidebar'); |
| const contentArea = document.getElementById('content-area'); |
| |
| sidebar.classList.toggle('collapsed'); |
| contentArea.classList.toggle('expanded'); |
| contentArea.classList.toggle('ml-64'); |
| }); |
| |
| |
| document.getElementById('collapse-sidebar').addEventListener('click', function() { |
| const sidebar = document.getElementById('sidebar'); |
| const contentArea = document.getElementById('content-area'); |
| |
| sidebar.classList.add('collapsed'); |
| contentArea.classList.add('expanded'); |
| contentArea.classList.remove('ml-64'); |
| }); |
| |
| |
| document.getElementById('view-site').addEventListener('click', function() { |
| alert('Viewing the live site (this would normally redirect to the frontend)'); |
| }); |
| |
| |
| const editorButtons = document.querySelectorAll('.editor-toolbar button'); |
| editorButtons.forEach(button => { |
| button.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const command = this.getAttribute('title').toLowerCase(); |
| document.execCommand(command, false, null); |
| document.getElementById('editor').focus(); |
| }); |
| }); |
| |
| |
| const saveButtons = document.querySelectorAll('button:contains("Save")'); |
| saveButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| const content = document.getElementById('editor').innerHTML; |
| const title = document.getElementById('page-title').value; |
| |
| |
| console.log('Saving page:', { |
| title: title, |
| content: content, |
| url: document.getElementById('page-url').value, |
| status: document.getElementById('page-status').value, |
| meta: { |
| title: document.getElementById('meta-title').value, |
| description: document.getElementById('meta-description').value, |
| keywords: document.getElementById('meta-keywords').value |
| } |
| }); |
| |
| |
| alert('Page saved successfully!'); |
| }); |
| }); |
| |
| |
| function handleResize() { |
| const sidebar = document.getElementById('sidebar'); |
| const contentArea = document.getElementById('content-area'); |
| |
| if (window.innerWidth < 768) { |
| sidebar.classList.add('collapsed'); |
| contentArea.classList.add('expanded'); |
| contentArea.classList.remove('ml-64'); |
| } else { |
| sidebar.classList.remove('collapsed'); |
| contentArea.classList.remove('expanded'); |
| contentArea.classList.add('ml-64'); |
| } |
| } |
| |
| |
| handleResize(); |
| window.addEventListener('resize', handleResize); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=waddou/jini" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
