Spaces:

AhBoh
/

agenda-test

Running

App Files Files Community

AhBoh commited on May 1

Commit

78a8eb1

verified ·

1 Parent(s): fab4f39

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +305 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Agenda Test
-emoji: 🌖
-colorFrom: yellow
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: agenda-test
+emoji: 🐳
+colorFrom: pink
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,305 @@
-<!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>Italian Diary</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>
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;500&display=swap');
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #f9f5f0;
+        }
+        .title-font {
+            font-family: 'Playfair Display', serif;
+        }
+        .entry-text {
+            font-family: 'Montserrat', sans-serif;
+            line-height: 1.8;
+        }
+        .paper-texture {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .stamp {
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIj48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHI9Ijk1IiBmaWxsPSJub25lIiBzdHJva2U9IiNkYzRiNGIiIHN0cm9rZS13aWR0aD0iMiIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iJ1BsYXlmYWlyIERpc3BsYXknLCBzZXJpZiIgZm9udC1zaXplPSIxNiIgZmlsbD0iI2RjNGI0YiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSI+RElBUklPPC90ZXh0Pjwvc3ZnPg==');
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            opacity: 0.7;
+        }
+    </style>
+</head>
+<body class="min-h-screen bg-amber-50">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <!-- Header -->
+        <header class="mb-8 text-center fade-in">
+            <h1 class="title-font text-4xl md:text-5xl font-bold text-amber-900 mb-2">Italian Diary</h1>
+            <p class="text-amber-700 italic">Il mio diario personale</p>
+            <div class="w-24 h-1 bg-amber-300 mx-auto mt-4"></div>
+        </header>
+        <!-- Date Selector -->
+        <div class="mb-8 bg-white rounded-lg shadow-md p-4 fade-in">
+            <div class="flex items-center justify-between">
+                <button id="prev-day" class="p-2 rounded-full hover:bg-amber-100 text-amber-700">
+                    <i class="fas fa-chevron-left"></i>
+                </button>
+                <div class="text-center">
+                    <h2 id="current-date" class="title-font text-2xl text-amber-900">Lunedì, 1 Gennaio 2023</h2>
+                    <p id="italian-date" class="text-sm text-amber-600">1 gennaio 2023</p>
+                </div>
+                <button id="next-day" class="p-2 rounded-full hover:bg-amber-100 text-amber-700">
+                    <i class="fas fa-chevron-right"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Diary Entry -->
+        <div class="mb-8 bg-white rounded-lg shadow-md overflow-hidden fade-in">
+            <div class="paper-texture p-6 md:p-8">
+                <div class="flex justify-between items-start mb-6">
+                    <h3 class="title-font text-xl text-amber-900">Le mie riflessioni</h3>
+                    <div class="stamp w-16 h-16"></div>
+                </div>
+                <textarea id="diary-entry" class="w-full h-64 p-4 entry-text text-amber-900 bg-transparent border border-amber-200 rounded focus:outline-none focus:ring-2 focus:ring-amber-300 focus:border-transparent" placeholder="Scrivi qui i tuoi pensieri..."></textarea>
+            </div>
+            <div class="bg-amber-50 px-6 py-4 flex justify-between items-center">
+                <div class="flex space-x-2">
+                    <button id="mood-happy" class="mood-btn p-2 rounded-full hover:bg-amber-200 text-amber-700" data-mood="happy">
+                        <i class="fas fa-smile text-xl"></i>
+                    </button>
+                    <button id="mood-neutral" class="mood-btn p-2 rounded-full hover:bg-amber-200 text-amber-700" data-mood="neutral">
+                        <i class="fas fa-meh text-xl"></i>
+                    </button>
+                    <button id="mood-sad" class="mood-btn p-2 rounded-full hover:bg-amber-200 text-amber-700" data-mood="sad">
+                        <i class="fas fa-frown text-xl"></i>
+                    </button>
+                </div>
+                <button id="save-entry" class="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-full flex items-center">
+                    <i class="fas fa-save mr-2"></i> Salva
+                </button>
+            </div>
+        </div>
+        <!-- Previous Entries -->
+        <div class="mb-8 fade-in">
+            <h3 class="title-font text-2xl text-amber-900 mb-4">Archivio</h3>
+            <div id="entries-container" class="space-y-4">
+                <!-- Entries will be added here dynamically -->
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize date
+            const today = new Date();
+            let currentDate = new Date(today);
+            // Italian day and month names
+            const days = ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'];
+            const months = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'];
+            // Load saved entries from localStorage
+            let entries = JSON.parse(localStorage.getItem('italianDiaryEntries')) || [];
+            // DOM elements
+            const currentDateEl = document.getElementById('current-date');
+            const italianDateEl = document.getElementById('italian-date');
+            const diaryEntryEl = document.getElementById('diary-entry');
+            const saveEntryBtn = document.getElementById('save-entry');
+            const prevDayBtn = document.getElementById('prev-day');
+            const nextDayBtn = document.getElementById('next-day');
+            const entriesContainer = document.getElementById('entries-container');
+            const moodBtns = document.querySelectorAll('.mood-btn');
+            let currentMood = null;
+            // Update date display
+            function updateDateDisplay() {
+                const dayName = days[currentDate.getDay()];
+                const day = currentDate.getDate();
+                const month = months[currentDate.getMonth()];
+                const year = currentDate.getFullYear();
+                currentDateEl.textContent = `${dayName}, ${day} ${month} ${year}`;
+                italianDateEl.textContent = `${day} ${month.toLowerCase()} ${year}`;
+                // Check if there's an entry for this date
+                const entry = entries.find(e => e.date === formatDate(currentDate));
+                if (entry) {
+                    diaryEntryEl.value = entry.text;
+                    currentMood = entry.mood;
+                    updateMoodButtons();
+                } else {
+                    diaryEntryEl.value = '';
+                    currentMood = null;
+                    resetMoodButtons();
+                }
+            }
+            // Format date as YYYY-MM-DD for storage
+            function formatDate(date) {
+                const d = new Date(date);
+                let month = '' + (d.getMonth() + 1);
+                let day = '' + d.getDate();
+                const year = d.getFullYear();
+                if (month.length < 2) month = '0' + month;
+                if (day.length < 2) day = '0' + day;
+                return [year, month, day].join('-');
+            }
+            // Update mood buttons appearance
+            function updateMoodButtons() {
+                moodBtns.forEach(btn => {
+                    btn.classList.remove('bg-amber-300', 'text-amber-900');
+                    if (btn.dataset.mood === currentMood) {
+                        btn.classList.add('bg-amber-300', 'text-amber-900');
+                    }
+                });
+            }
+            // Reset mood buttons
+            function resetMoodButtons() {
+                moodBtns.forEach(btn => {
+                    btn.classList.remove('bg-amber-300', 'text-amber-900');
+                });
+            }
+            // Load previous entries
+            function loadPreviousEntries() {
+                entriesContainer.innerHTML = '';
+                if (entries.length === 0) {
+                    entriesContainer.innerHTML = '<p class="text-amber-700 italic">Nessuna voce ancora salvata</p>';
+                    return;
+                }
+                // Sort entries by date (newest first)
+                const sortedEntries = [...entries].sort((a, b) => new Date(b.date) - new Date(a.date));
+                sortedEntries.forEach(entry => {
+                    const entryDate = new Date(entry.date);
+                    const dayName = days[entryDate.getDay()];
+                    const day = entryDate.getDate();
+                    const month = months[entryDate.getMonth()];
+                    const year = entryDate.getFullYear();
+                    const moodIcon = entry.mood === 'happy' ? 'fa-smile text-amber-500' :
+                                    entry.mood === 'neutral' ? 'fa-meh text-amber-600' : 'fa-frown text-amber-700';
+                    const entryEl = document.createElement('div');
+                    entryEl.className = 'bg-white rounded-lg shadow-md overflow-hidden fade-in';
+                    entryEl.innerHTML = `
+                        <div class="paper-texture p-6">
+                            <div class="flex justify-between items-start mb-4">
+                                <h4 class="title-font text-lg text-amber-900">${dayName}, ${day} ${month} ${year}</h4>
+                                <i class="fas ${moodIcon} text-xl"></i>
+                            </div>
+                            <p class="entry-text text-amber-800 whitespace-pre-line">${entry.text}</p>
+                        </div>
+                        <div class="bg-amber-50 px-6 py-3 flex justify-end">
+                            <button class="delete-entry text-amber-600 hover:text-amber-800 text-sm" data-date="${entry.date}">
+                                <i class="fas fa-trash-alt mr-1"></i> Elimina
+                            </button>
+                        </div>
+                    `;
+                    entriesContainer.appendChild(entryEl);
+                });
+                // Add event listeners to delete buttons
+                document.querySelectorAll('.delete-entry').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const dateToDelete = this.dataset.date;
+                        entries = entries.filter(e => e.date !== dateToDelete);
+                        localStorage.setItem('italianDiaryEntries', JSON.stringify(entries));
+                        loadPreviousEntries();
+                        // If we're currently viewing the deleted entry, clear the editor
+                        if (formatDate(currentDate) === dateToDelete) {
+                            diaryEntryEl.value = '';
+                            currentMood = null;
+                            resetMoodButtons();
+                        }
+                    });
+                });
+            }
+            // Event listeners
+            prevDayBtn.addEventListener('click', function() {
+                currentDate.setDate(currentDate.getDate() - 1);
+                updateDateDisplay();
+            });
+            nextDayBtn.addEventListener('click', function() {
+                currentDate.setDate(currentDate.getDate() + 1);
+                // Don't allow future dates
+                if (currentDate > today) {
+                    currentDate = new Date(today);
+                }
+                updateDateDisplay();
+            });
+            saveEntryBtn.addEventListener('click', function() {
+                const text = diaryEntryEl.value.trim();
+                const date = formatDate(currentDate);
+                if (text === '' || !currentMood) {
+                    alert('Per favore, scrivi qualcosa e seleziona il tuo umore prima di salvare.');
+                    return;
+                }
+                // Remove existing entry for this date if it exists
+                entries = entries.filter(e => e.date !== date);
+                // Add new entry
+                entries.push({
+                    date: date,
+                    text: text,
+                    mood: currentMood
+                });
+                // Save to localStorage
+                localStorage.setItem('italianDiaryEntries', JSON.stringify(entries));
+                // Reload previous entries
+                loadPreviousEntries();
+                // Show success message
+                alert('Voce salvata con successo!');
+            });
+            // Mood button event listeners
+            moodBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    currentMood = this.dataset.mood;
+                    updateMoodButtons();
+                });
+            });
+            // Initialize
+            updateDateDisplay();
+            loadPreviousEntries();
+        });
+    </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=AhBoh/agenda-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Italian Diary