Spaces:

brata
/

quillscrawl-chronicles

Running

App Files Files Community

brata commited on Oct 2, 2025

Commit

3d81e2a

verified ·

1 Parent(s): 12f6e67

Create a Notes App, with a notes section, and a history section.

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +342 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Quillscrawl Chronicles
-emoji: 🏢
-colorFrom: gray
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: QuillScrawl Chronicles ✍️
+colorFrom: green
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,343 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QuillScrawl Chronicles - Notes App</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        .note-card {
+            transition: all 0.3s ease;
+        }
+        .note-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .vanta-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .glass-effect {
+            backdrop-filter: blur(16px) saturate(180%);
+            -webkit-backdrop-filter: blur(16px) saturate(180%);
+            background-color: rgba(255, 255, 255, 0.75);
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    </style>
+</head>
+<body class="min-h-screen bg-gray-50">
+    <div id="vanta-bg" class="vanta-bg"></div>
+    <!-- Navigation -->
+    <nav class="glass-effect border-b border-gray-200 sticky top-0 z-10">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <i data-feather="edit-3" class="h-8 w-8 text-purple-600"></i>
+                        <span class="ml-2 text-xl font-bold gradient-text">QuillScrawl Chronicles</span>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button id="notes-tab" class="px-4 py-2 rounded-lg bg-purple-600 text-white font-medium transition-colors duration-200 hover:bg-purple-700">
+                        <i data-feather="file-text" class="w-4 h-4 inline mr-2"></i>
+                        Notes
+                    </button>
+                    <button id="history-tab" class="px-4 py-2 rounded-lg text-gray-600 font-medium transition-colors duration-200 hover:bg-gray-100">
+                        <i data-feather="clock" class="w-4 h-4 inline mr-2"></i>
+                        History
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <!-- Notes Section -->
+        <section id="notes-section" class="space-y-6">
+            <!-- Note Input -->
+            <div class="glass-effect rounded-2xl p-6 shadow-lg border border-gray-100">
+                <h2 class="text-2xl font-bold text-gray-800 mb-4">Create New Note</h2>
+                <form id="note-form" class="space-y-4">
+                    <input type="text" id="note-title" placeholder="Note Title" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200">
+                    <textarea id="note-content" placeholder="Start writing your note here..." rows="6" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200 resize-none"></textarea>
+                    <div class="flex justify-between items-center">
+                        <button type="submit" class="px-6 py-3 bg-purple-600 text-white rounded-xl font-medium hover:bg-purple-700 transition-colors duration-200 flex items-center">
+                            <i data-feather="save" class="w-4 h-4 mr-2"></i>
+                            Save Note
+                        </button>
+                        <div class="flex items-center space-x-2 text-sm text-gray-500">
+                            <i data-feather="clock" class="w-4 h-4"></i>
+                            <span id="char-count">0 characters</span>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            <!-- Notes Grid -->
+            <div id="notes-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Notes will be dynamically added here -->
+            </div>
+        </section>
+        <!-- History Section -->
+        <section id="history-section" class="hidden space-y-6">
+            <div class="glass-effect rounded-2xl p-6 shadow-lg border border-gray-100">
+                <h2 class="text-2xl font-bold text-gray-800 mb-6">Note History</h2>
+                <div id="history-list" class="space-y-4">
+                    <!-- History items will be dynamically added here -->
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- Edit Note Modal -->
+    <div id="edit-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-20">
+        <div class="glass-effect rounded-2xl p-6 w-full max-w-2xl mx-4 shadow-2xl">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold text-gray-800">Edit Note</h3>
+                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
+                    <i data-feather="x" class="w-6 h-6"></i>
+                </button>
+            </div>
+            <form id="edit-form" class="space-y-4">
+                <input type="hidden" id="edit-id">
+                <input type="text" id="edit-title" placeholder="Note Title" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+                <textarea id="edit-content" placeholder="Note Content" rows="6" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none"></textarea>
+                <div class="flex justify-end space-x-3">
+                    <button type="button" id="cancel-edit" class="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors duration-200">
+                        Cancel
+                    </button>
+                    <button type="submit" class="px-6 py-2 bg-purple-600 text-white rounded-xl hover:bg-purple-700 transition-colors duration-200">
+                        Update Note
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script>
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x764ba2,
+            backgroundColor: 0xf8fafc
+        });
+        // Sample data
+        let notes = JSON.parse(localStorage.getItem('notes')) || [];
+        let history = JSON.parse(localStorage.getItem('history')) || [];
+        // DOM Elements
+        const notesSection = document.getElementById('notes-section');
+        const historySection = document.getElementById('history-section');
+        const notesTab = document.getElementById('notes-tab');
+        const historyTab = document.getElementById('history-tab');
+        const noteForm = document.getElementById('note-form');
+        const editForm = document.getElementById('edit-form');
+        const editModal = document.getElementById('edit-modal');
+        const notesGrid = document.getElementById('notes-grid');
+        const historyList = document.getElementById('history-list');
+        const charCount = document.getElementById('char-count');
+        const noteContent = document.getElementById('note-content');
+        // Tab switching
+        notesTab.addEventListener('click', () => {
+            notesSection.classList.remove('hidden');
+            historySection.classList.add('hidden');
+            notesTab.classList.add('bg-purple-600', 'text-white');
+            notesTab.classList.remove('text-gray-600', 'hover:bg-gray-100');
+            historyTab.classList.remove('bg-purple-600', 'text-white');
+            historyTab.classList.add('text-gray-600', 'hover:bg-gray-100');
+        });
+        historyTab.addEventListener('click', () => {
+            historySection.classList.remove('hidden');
+            notesSection.classList.add('hidden');
+            historyTab.classList.add('bg-purple-600', 'text-white');
+            historyTab.classList.remove('text-gray-600', 'hover:bg-gray-100');
+            notesTab.classList.remove('bg-purple-600', 'text-white');
+            notesTab.classList.add('text-gray-600', 'hover:bg-gray-100');
+            renderHistory();
+        });
+        // Character count
+        noteContent.addEventListener('input', () => {
+            charCount.textContent = `${noteContent.value.length} characters`;
+        });
+        // Save new note
+        noteForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const title = document.getElementById('note-title').value;
+            const content = document.getElementById('note-content').value;
+            if (title.trim() && content.trim()) {
+                const newNote = {
+                    id: Date.now(),
+                    title: title.trim(),
+                    content: content.trim(),
+                    createdAt: new Date().toISOString(),
+                    updatedAt: new Date().toISOString()
+                };
+                notes.unshift(newNote);
+                saveNotes();
+                addHistory('created', `Created note: "${title}"`);
+                renderNotes();
+                noteForm.reset();
+                charCount.textContent = '0 characters';
+            }
+        });
+        // Edit note
+        editForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const id = parseInt(document.getElementById('edit-id').value);
+            const title = document.getElementById('edit-title').value;
+            const content = document.getElementById('edit-content').value;
+            if (title.trim() && content.trim()) {
+                const noteIndex = notes.findIndex(note => note.id === id);
+                if (noteIndex !== -1) {
+                    const oldTitle = notes[noteIndex].title;
+                    notes[noteIndex].title = title.trim();
+                    notes[noteIndex].content = content.trim();
+                    notes[noteIndex].updatedAt = new Date().toISOString();
+                    saveNotes();
+                    addHistory('updated', `Updated note: "${oldTitle}" to "${title}"`);
+                    renderNotes();
+                    closeModal();
+                }
+            }
+        });
+        // Modal controls
+        document.getElementById('close-modal').addEventListener('click', closeModal);
+        document.getElementById('cancel-edit').addEventListener('click', closeModal);
+        function openEditModal(note) {
+            document.getElementById('edit-id').value = note.id;
+            document.getElementById('edit-title').value = note.title;
+            document.getElementById('edit-content').value = note.content;
+            editModal.classList.remove('hidden');
+        }
+        function closeModal() {
+            editModal.classList.add('hidden');
+        }
+        // Delete note
+        function deleteNote(id) {
+            const note = notes.find(n => n.id === id);
+            if (note) {
+                notes = notes.filter(note => note.id !== id);
+                saveNotes();
+                addHistory('deleted', `Deleted note: "${note.title}"`);
+                renderNotes();
+            }
+        }
+        // Add history entry
+        function addHistory(action, description) {
+            const historyEntry = {
+                id: Date.now(),
+                action,
+                description,
+                timestamp: new Date().toISOString()
+            };
+            history.unshift(historyEntry);
+            localStorage.setItem('history', JSON.stringify(history));
+        }
+        // Save notes to localStorage
+        function saveNotes() {
+            localStorage.setItem('notes', JSON.stringify(notes));
+        }
+        // Render notes
+        function renderNotes() {
+            notesGrid.innerHTML = '';
+            notes.forEach(note => {
+                const noteElement = document.createElement('div');
+                noteElement.className = 'note-card glass-effect rounded-2xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300';
+                noteElement.innerHTML = `
+                    <div class="flex justify-between items-start mb-3">
+                        <h3 class="text-lg font-semibold text-gray-800 truncate">${note.title}</h3>
+                        <div class="flex space-x-2">
+                            <button onclick="openEditModal(${JSON.stringify(note).replace(/"/g, '&quot;')})" class="text-blue-600 hover:text-blue-800 transition-colors">
+                                <i data-feather="edit-2" class="w-4 h-4"></i>
+                            </button>
+                            <button onclick="deleteNote(${note.id})" class="text-red-600 hover:text-red-800 transition-colors">
+                                <i data-feather="trash-2" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 text-sm mb-4 line-clamp-4">${note.content}</p>
+                    <div class="text-xs text-gray-500 flex justify-between items-center">
+                        <span>Created: ${new Date(note.createdAt).toLocaleDateString()}</span>
+                        <span>Updated: ${new Date(note.updatedAt).toLocaleDateString()}</span>
+                    </div>
+                `;
+                notesGrid.appendChild(noteElement);
+            });
+            feather.replace();
+        }
+        // Render history
+        function renderHistory() {
+            historyList.innerHTML = '';
+            history.forEach(entry => {
+                const historyElement = document.createElement('div');
+                historyElement.className = 'flex items-center space-x-4 p-4 bg-white rounded-xl shadow-sm border border-gray-100';
+                let icon = 'edit';
+                let color = 'text-blue-600';
+                if (entry.action === 'created') {
+                    icon = 'plus';
+                    color = 'text-green-600';
+                } else if (entry.action === 'deleted') {
+                    icon = 'trash-2';
+                    color = 'text-red-600';
+                }
+                historyElement.innerHTML = `
+                    <div class="flex-shrink-0">
+                        <i data-feather="${icon}" class="w-5 h-5 ${color}"></i>
+                    </div>
+                    <div class="flex-1">
+                        <p class="text-gray-800">${entry.description}</p>
+                        <p class="text-xs text-gray-500 mt-1">${new Date(entry.timestamp).toLocaleString()}</p>
+                    </div>
+                `;
+                historyList.appendChild(historyElement);
+            });
+            feather.replace();
+        }
+        // Initialize
+        renderNotes();
+        feather.replace();
+    </script>
+</body>
 </html>