Hugging Face's logo

Spaces:
Ramohlabi
/
scribblesync-digital-note-haven
Running

App Files Community
scribblesync-digital-note-haven / index.html
Ramohlabi's picture
Ramohlabi
create a video of someone singing i love you baby
3e3797c verified
Raw
History Blame Contribute Delete
16.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ScribbleSync - Notes App</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 <style>
 .note-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
 .sidebar-item:hover {
 background-color: rgba(79, 70, 229, 0.1);
 }
 .markdown-content h1 {
 font-size: 1.5rem;
 font-weight: bold;
 margin: 1rem 0;
 }
 .markdown-content p {
 margin: 0.5rem 0;
 }
 </style>
</head>
<body class="bg-gray-50 min-h-screen">
 <div class="flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div class="hidden md:flex md:flex-shrink-0">
 <div class="flex flex-col w-64 bg-indigo-600 text-white">
 <div class="flex items-center justify-center h-16 px-4 bg-indigo-700">
 <div class="flex items-center">
 <i data-feather="edit-3" class="mr-2"></i>
 <span class="text-xl font-bold">ScribbleSync</span>
 </div>
 </div>
 <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
 <nav class="flex-1 space-y-2">
 <a href="#" id="notes-tab" class="flex items-center px-4 py-3 text-sm font-medium rounded-md bg-indigo-700 text-white sidebar-item">
 <i data-feather="file-text" class="mr-3"></i>
 My Notes
 </a>
 <a href="#" id="history-tab" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white sidebar-item">
 <i data-feather="clock" class="mr-3"></i>
 History
 </a>
 <a href="#" id="trash-tab" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white sidebar-item">
 <i data-feather="trash-2" class="mr-3"></i>
 Trash
 </a>
 <a href="video-notes.html" class="flex items-center px-4 py-3 text-sm font-medium rounded-md text-indigo-200 hover:text-white sidebar-item">
 <i data-feather="video" class="mr-3"></i>
 Video Notes
 </a>
</nav>
 <div class="mt-auto">
 <div class="p-4 bg-indigo-700 rounded-md mb-4">
 <div class="flex items-center">
 <div class="bg-indigo-500 p-2 rounded-full">
 <i data-feather="zap" class="w-4 h-4"></i>
 </div>
 <div class="ml-3">
 <p class="text-xs font-medium text-indigo-200">Storage</p>
 <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
 <div class="bg-white h-1.5 rounded-full" style="width: 25%"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Mobile sidebar -->
 <div class="md:hidden fixed bottom-0 w-full bg-white border-t border-gray-200 z-10">
 <div class="flex justify-around">
 <a href="#" id="mobile-notes-tab" class="flex flex-col items-center justify-center p-3 text-indigo-600">
 <i data-feather="file-text"></i>
 <span class="text-xs mt-1">Notes</span>
 </a>
 <a href="#" id="mobile-history-tab" class="flex flex-col items-center justify-center p-3 text-gray-500">
 <i data-feather="clock"></i>
 <span class="text-xs mt-1">History</span>
 </a>
 <a href="#" id="mobile-trash-tab" class="flex flex-col items-center justify-center p-3 text-gray-500">
 <i data-feather="trash-2"></i>
 <span class="text-xs mt-1">Trash</span>
 </a>
 <a href="video-notes.html" class="flex flex-col items-center justify-center p-3 text-gray-500">
 <i data-feather="video"></i>
 <span class="text-xs mt-1">Videos</span>
 </a>
</div>
 </div>
<!-- Main content -->
 <div class="flex flex-col flex-1 overflow-hidden">
 <!-- Header -->
 <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
 <div class="flex items-center">
 <button class="md:hidden text-gray-500 mr-2">
 <i data-feather="menu"></i>
 </button>
 <h1 class="text-lg font-medium text-gray-900">My Notes</h1>
 </div>
 <div class="flex items-center space-x-4">
 <button class="p-2 text-gray-500 hover:text-indigo-600">
 <i data-feather="search"></i>
 </button>
 <button id="new-note-btn" class="flex items-center px-3 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700">
 <i data-feather="plus" class="mr-1"></i>
 New Note
 </button>
 <div class="relative">
 <button class="p-2 text-gray-500 hover:text-indigo-600">
 <i data-feather="user"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Notes Content -->
 <div id="notes-content" class="flex-1 overflow-y-auto p-4">
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <!-- Note cards will be added here dynamically -->
 <div class="note-card bg-white rounded-lg shadow-md p-4 border border-gray-200 transition-all duration-200 cursor-pointer">
 <div class="flex justify-between items-start">
 <h3 class="font-medium text-gray-900 mb-2">Welcome to ScribbleSync!</h3>
 <button class="text-gray-400 hover:text-indigo-600">
 <i data-feather="more-vertical"></i>
 </button>
 </div>
 <div class="markdown-content text-gray-600 text-sm mb-3">
 <p>This is your first note. Click to edit or create new notes using the button above.</p>
 </div>
 <div class="flex justify-between items-center text-xs text-gray-400">
 <span>Just now</span>
 <span>1.2k words</span>
 </div>
 </div>
 </div>
 </div>
<!-- History Content (Hidden by default) -->
 <div id="history-content" class="hidden flex-1 overflow-y-auto p-4">
 <div class="bg-white rounded-lg shadow-md p-4">
 <h2 class="text-lg font-medium text-gray-900 mb-4">Note History</h2>
 <div class="space-y-4">
 <div class="border-b border-gray-200 pb-4">
 <div class="flex justify-between items-center mb-2">
 <h3 class="font-medium text-gray-900">Welcome to ScribbleSync!</h3>
 <span class="text-xs text-gray-400">Today, 10:15 AM</span>
 </div>
 <p class="text-sm text-gray-600">You created this note</p>
 </div>
 </div>
 </div>
 </div>
<!-- Trash Content (Hidden by default) -->
 <div id="trash-content" class="hidden flex-1 overflow-y-auto p-4">
 <div class="bg-white rounded-lg shadow-md p-4">
 <h2 class="text-lg font-medium text-gray-900 mb-4">Trash</h2>
 <p class="text-sm text-gray-600">No items in trash</p>
 </div>
 </div>
<!-- Note Editor Modal -->
 <div id="editor-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
 <div class="absolute top-0 right-0 bottom-0 left-0 md:left-64 flex items-center justify-center">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl h-screen md:h-auto md:max-h-[90vh] flex flex-col overflow-hidden">
 <div class="flex items-center justify-between p-4 border-b border-gray-200">
 <input type="text" id="note-title" class="text-lg font-medium text-gray-900 border-none focus:ring-0 w-full" placeholder="Note title">
 <div class="flex space-x-2">
 <button class="p-2 text-gray-500 hover:text-indigo-600">
 <i data-feather="save"></i>
 </button>
 <button class="p-2 text-gray-500 hover:text-indigo-600">
 <i data-feather="share-2"></i>
 </button>
 <button id="close-editor" class="p-2 text-gray-500 hover:text-red-600">
 <i data-feather="x"></i>
 </button>
 </div>
 </div>
 <div class="flex-1 overflow-y-auto p-4">
 <textarea id="note-content" class="w-full h-full border-none focus:ring-0 resize-none" placeholder="Start writing here... Markdown is supported!"></textarea>
 <div id="preview-content" class="markdown-content hidden"></div>
 </div>
 <div class="p-4 border-t border-gray-200 bg-gray-50 flex justify-between">
 <div class="flex space-x-2">
 <button class="p-2 text-gray-500 hover:text-indigo-600">
 <i data-feather="bold"></i>
 </button>
 <button class="p-2 text-gray-500 hover:text-indigo-600">
 <i data-feather="italic"></i>
 </button>
 <button class="p-2 text-gray-500 hover:text-indigo-600">
 <i data-feather="list"></i>
 </button>
 <button id="toggle-preview" class="p-2 text-gray-500 hover:text-indigo-600">
 <i data-feather="eye"></i>
 </button>
 </div>
 <div>
 <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700">
 Save Changes
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 document.addEventListener('DOMContentLoaded', function() {
 feather.replace();
// Tab switching logic
 const tabs = {
 'notes-tab': 'notes-content',
 'history-tab': 'history-content',
 'trash-tab': 'trash-content',
 'mobile-notes-tab': 'notes-content',
 'mobile-history-tab': 'history-content',
 'mobile-trash-tab': 'trash-content'
 };
 Object.keys(tabs).forEach(tabId => {
 document.getElementById(tabId)?.addEventListener('click', function(e) {
 e.preventDefault();
// Hide all content sections
 document.getElementById('notes-content').classList.add('hidden');
 document.getElementById('history-content').classList.add('hidden');
 document.getElementById('trash-content').classList.add('hidden');
// Show selected content
 document.getElementById(tabs[tabId]).classList.remove('hidden');
// Update active tab styles
 document.querySelectorAll('.sidebar-item').forEach(item => {
 item.classList.remove('bg-indigo-700', 'text-white');
 item.classList.add('text-indigo-200', 'hover:text-white');
 });
document.querySelectorAll('#mobile-sidebar a').forEach(item => {
 item.classList.remove('text-indigo-600');
 item.classList.add('text-gray-500');
 });
if (tabId.includes('mobile')) {
 document.getElementById(tabId).classList.add('text-indigo-600');
 document.getElementById(tabId).classList.remove('text-gray-500');
 } else {
 document.getElementById(tabId).classList.add('bg-indigo-700', 'text-white');
 document.getElementById(tabId).classList.remove('text-indigo-200', 'hover:text-white');
 }
 });
 });
 // Note editor modal
 const editorModal = document.getElementById('editor-modal');
 const closeEditor = document.getElementById('close-editor');
 const newNoteBtn = document.getElementById('new-note-btn');
 const togglePreview = document.getElementById('toggle-preview');
 const noteContent = document.getElementById('note-content');
 const previewContent = document.getElementById('preview-content');
 newNoteBtn.addEventListener('click', function() {
 editorModal.classList.remove('hidden');
 document.getElementById('note-title').value = '';
 document.getElementById('note-content').value = '';
 });
 closeEditor.addEventListener('click', function() {
 editorModal.classList.add('hidden');
 });
 togglePreview.addEventListener('click', function() {
 if (previewContent.classList.contains('hidden')) {
 // Simple markdown rendering (in a real app, use a proper library)
 const content = noteContent.value
 .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
 .replace(/\*(.*?)\*/g, '<em>$1</em>')
 .replace(/\n/g, '<br>');
previewContent.innerHTML = content;
 previewContent.classList.remove('hidden');
 noteContent.classList.add('hidden');
 togglePreview.classList.add('text-indigo-600');
 } else {
 previewContent.classList.add('hidden');
 noteContent.classList.remove('hidden');
 togglePreview.classList.remove('text-indigo-600');
 }
 });
 // Click on note card to open editor
 document.querySelectorAll('.note-card').forEach(card => {
 card.addEventListener('click', function() {
 editorModal.classList.remove('hidden');
 // In a real app, you would load the note content here
 });
 });
 });
 </script>
</body>
</html>