Spaces:

CHBINHAYDDE
/

duigitale

Running

App Files Files Community

CHBINHAYDDE commited on 19 days ago

Commit

6a84253

verified ·

1 Parent(s): 0fa39a3

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +426 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Duigitale
-emoji: 🐢
-colorFrom: purple
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: duigitale
+emoji: 🐳
+colorFrom: yellow
+colorTo: purple
 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,426 @@
-<!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="he" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>כלים נפוצים | פלטפורמת כלים תורניים</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">
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&family=Noto+Sans+Hebrew:wght@400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #6C63FF;
+            --secondary-color: #00BFA6;
+            --text-primary: #2D3748;
+            --text-secondary: #4A5568;
+            --bg-primary: #FFFFFF;
+            --bg-secondary: #F8F9FC;
+            --bg-tertiary: #F0F2F8;
+        }
+        body {
+            font-family: 'Rubik', 'Noto Sans Hebrew', sans-serif;
+            direction: rtl;
+            background-color: var(--bg-secondary);
+            color: var(--text-primary);
+            line-height: 1.8;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 8px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .glass-card:hover {
+            transform: scale(1.02);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+        .tool-icon {
+            font-size: 2.5rem;
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+        }
+        .tool-card {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+        .tool-card .btn {
+            margin-top: auto;
+            align-self: flex-start;
+        }
+        .balloon-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        .balloon-animation.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .balloon {
+            position: absolute;
+            width: 100px;
+            height: 120px;
+            background-color: var(--primary-color);
+            border-radius: 50%;
+            animation: float 6s ease-in-out infinite;
+        }
+        .balloon::before {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 0;
+            height: 0;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-top: 20px solid var(--primary-color);
+        }
+        .balloon:nth-child(2) {
+            background-color: var(--secondary-color);
+            left: 20%;
+            top: 20%;
+            animation-delay: 0.5s;
+        }
+        .balloon:nth-child(2)::before {
+            border-top-color: var(--secondary-color);
+        }
+        .balloon:nth-child(3) {
+            background-color: #FF6B6B;
+            left: 70%;
+            top: 30%;
+            animation-delay: 1s;
+        }
+        .balloon:nth-child(3)::before {
+            border-top-color: #FF6B6B;
+        }
+        .balloon:nth-child(4) {
+            background-color: #FFD166;
+            left: 40%;
+            top: 10%;
+            animation-delay: 1.5s;
+        }
+        .balloon:nth-child(4)::before {
+            border-top-color: #FFD166;
+        }
+        .balloon:nth-child(5) {
+            background-color: #06D6A0;
+            left: 60%;
+            top: 25%;
+            animation-delay: 2s;
+        }
+        .balloon:nth-child(5)::before {
+            border-top-color: #06D6A0;
+        }
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-50px);
+            }
+        }
+        .success-message {
+            position: relative;
+            z-index: 2;
+            background-color: white;
+            padding: 2rem;
+            border-radius: 8px;
+            text-align: center;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+        }
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --primary-color: #8A7CFF;
+                --secondary-color: #00DFC0;
+                --text-primary: #F7FAFC;
+                --text-secondary: #E2E8F0;
+                --bg-primary: #1A202C;
+                --bg-secondary: #2D3748;
+                --bg-tertiary: #4A5568;
+            }
+            .glass-card {
+                background: rgba(26, 32, 44, 0.5);
+            }
+            .success-message {
+                background-color: var(--bg-tertiary);
+                color: var(--text-primary);
+            }
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Navigation -->
+    <nav class="bg-white dark:bg-gray-900 sticky top-0 z-50 shadow-sm">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <a href="#" class="text-2xl font-bold text-primary dark:text-white">
+                <span class="text-purple-600">כלים</span>
+                <span class="text-teal-500">תורניים</span>
+            </a>
+            <div class="hidden md:flex space-x-6 space-x-reverse">
+                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400">בית</a>
+                <a href="#" class="text-purple-600 dark:text-purple-400 font-medium">כלים נפוצים</a>
+                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400">אודות</a>
+                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400">צור קשר</a>
+            </div>
+            <button class="md:hidden text-gray-700 dark:text-gray-300">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-4">כלים נפוצים לשימוש יומיומי</h1>
+            <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+                אוסף הכלים המועילים ביותר לשימוש יומיומי בחיי התורה והמצוות. בחרו את הכלי המתאים לצרכים שלכם.
+            </p>
+        </div>
+        <!-- Tools Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Tool 1: Shabbat Prep List -->
+            <div class="glass-card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md tool-card">
+                <div class="text-center mb-4">
+                    <i class="fas fa-calendar-check tool-icon"></i>
+                    <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">רשימת הכנות לשבת</h3>
+                    <p class="text-gray-600 dark:text-gray-300">
+                        פלטפורמה נוחה לרישום ההכנות הדרושות לפני שבת, עם אפשרות לסימון משימות שהושלמו.
+                    </p>
+                </div>
+                <button onclick="showBalloons()" class="mt-4 px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition duration-300">
+                    לפתיחת הכלי
+                </button>
+            </div>
+            <!-- Tool 2: Prayer Quiz -->
+            <div class="glass-card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md tool-card">
+                <div class="text-center mb-4">
+                    <i class="fas fa-praying-hands tool-icon"></i>
+                    <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">בוחן תפילה</h3>
+                    <p class="text-gray-600 dark:text-gray-300">
+                        בדיקת דיוק התפילה באמצעות AI, עם תיקון טעויות והשלמת קטעים שדילגתם עליהם.
+                    </p>
+                </div>
+                <button class="mt-4 px-6 py-2 bg-teal-500 hover:bg-teal-600 text-white rounded-lg transition duration-300">
+                    לפתיחת הכלי
+                </button>
+            </div>
+            <!-- Tool 3: Torah Measurements -->
+            <div class="glass-card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md tool-card">
+                <div class="text-center mb-4">
+                    <i class="fas fa-ruler-combined tool-icon"></i>
+                    <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">חישוב מידות ושיעורי תורה</h3>
+                    <p class="text-gray-600 dark:text-gray-300">
+                        המרת מידות תורניות כמו כזית, כביצה, אמה ופרסה למידות מודרניות.
+                    </p>
+                </div>
+                <button class="mt-4 px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition duration-300">
+                    לפתיחת הכלי
+                </button>
+            </div>
+            <!-- Tool 4: Maaser Calculator -->
+            <div class="glass-card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md tool-card">
+                <div class="text-center mb-4">
+                    <i class="fas fa-calculator tool-icon"></i>
+                    <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">מחשבון מעשרות</h3>
+                    <p class="text-gray-600 dark:text-gray-300">
+                        חישוב סכום המעשרות מההכנסות שלכם, עם המלצות על מקומות ראויים לתרומה.
+                    </p>
+                </div>
+                <button class="mt-4 px-6 py-2 bg-green-500 hover:bg-green-600 text-white rounded-lg transition duration-300">
+                    לפתיחת הכלי
+                </button>
+            </div>
+            <!-- Tool 5: Gmach Recommender -->
+            <div class="glass-card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md tool-card">
+                <div class="text-center mb-4">
+                    <i class="fas fa-hands-helping tool-icon"></i>
+                    <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">ממליץ גמחי"ם</h3>
+                    <p class="text-gray-600 dark:text-gray-300">
+                        המלצות מותאמות אישית לאלו המעוניינים להקים גמ"ח לפי מיקומם ויכולותיהם.
+                    </p>
+                </div>
+                <button class="mt-4 px-6 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition duration-300">
+                    לפתיחת הכלי
+                </button>
+            </div>
+            <!-- Tool 6: Yichud Guide -->
+            <div class="glass-card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md tool-card">
+                <div class="text-center mb-4">
+                    <i class="fas fa-user-friends tool-icon"></i>
+                    <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">מחשבון ייחוד</h3>
+                    <p class="text-gray-600 dark:text-gray-300">
+                        מדריך הלכתי אינטראקטיבי לדיני ייחוד לפי סיטואציות שונות.
+                    </p>
+                </div>
+                <button class="mt-4 px-6 py-2 bg-pink-500 hover:bg-pink-600 text-white rounded-lg transition duration-300">
+                    לפתיחת הכלי
+                </button>
+            </div>
+            <!-- Tool 7: Educational Assistant -->
+            <div class="glass-card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md tool-card">
+                <div class="text-center mb-4">
+                    <i class="fas fa-child tool-icon"></i>
+                    <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">מסייע חינוכי</h3>
+                    <p class="text-gray-600 dark:text-gray-300">
+                        המלצות חינוכיות מותאמות גיל לילדים, לפיתוח וקידום אישי ורוחני.
+                    </p>
+                </div>
+                <button class="mt-4 px-6 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg transition duration-300">
+                    לפתיחת הכלי
+                </button>
+            </div>
+            <!-- Tool 8: Coming Soon -->
+            <div class="glass-card bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md tool-card">
+                <div class="text-center mb-4">
+                    <i class="fas fa-lightbulb tool-icon"></i>
+                    <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">כלים נוספים בקרוב</h3>
+                    <p class="text-gray-600 dark:text-gray-300">
+                        אנו מפתחים כלים נוספים שיסייעו לכם בחיי היום יום. הציעו לנו רעיונות!
+                    </p>
+                </div>
+                <button class="mt-4 px-6 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition duration-300">
+                    הציעו כלי
+                </button>
+            </div>
+        </div>
+    </main>
+    <!-- Balloon Animation -->
+    <div id="balloonAnimation" class="balloon-animation">
+        <div class="balloon"></div>
+        <div class="balloon"></div>
+        <div class="balloon"></div>
+        <div class="balloon"></div>
+        <div class="balloon"></div>
+        <div class="success-message">
+            <h2 class="text-3xl font-bold text-purple-600 mb-4">כל הכבוד!</h2>
+            <p class="text-xl mb-6">השלמת את כל המשימות בהכ��ות לשבת!</p>
+            <div class="flex justify-center space-x-4 space-x-reverse">
+                <button onclick="hideBalloons()" class="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition duration-300">
+                    סגור
+                </button>
+                <button class="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg transition duration-300">
+                    שתף
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer class="bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 py-8 mt-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div>
+                    <h3 class="text-xl font-bold mb-4">כלים תורניים</h3>
+                    <p>פלטפורמה דיגיטלית המספקת כלים שימושיים לחיי תורה ומצוות בעידן המודרני.</p>
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold mb-4">קישורים מהירים</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-400">בית</a></li>
+                        <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-400">כלים נפוצים</a></li>
+                        <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-400">אודות הפרויקט</a></li>
+                        <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-400">צור קשר</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-xl font-bold mb-4">יצירת קשר</h3>
+                    <p><i class="fas fa-envelope mr-2"></i> [email protected]</p>
+                    <p class="mt-2"><i class="fas fa-phone mr-2"></i> 050-1234567</p>
+                    <div class="flex space-x-4 space-x-reverse mt-4">
+                        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400"><i class="fab fa-whatsapp"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-gray-200 dark:border-gray-700 mt-8 pt-6 text-center">
+                <p>© 2023 כלים תורניים. כל הזכויות שמורות.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Balloon animation functions
+        function showBalloons() {
+            const animation = document.getElementById('balloonAnimation');
+            animation.classList.add('show');
+            document.body.style.overflow = 'hidden';
+        }
+        function hideBalloons() {
+            const animation = document.getElementById('balloonAnimation');
+            animation.classList.remove('show');
+            document.body.style.overflow = 'auto';
+        }
+        // Close animation when clicking outside
+        document.getElementById('balloonAnimation').addEventListener('click', function(e) {
+            if (e.target === this) {
+                hideBalloons();
+            }
+        });
+        // Dark mode toggle (example - could be implemented with a button)
+        // This is just a placeholder - actual implementation would need a toggle button
+        function toggleDarkMode() {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
+        }
+        // Check for saved dark mode preference
+        if (localStorage.getItem('darkMode') === 'true') {
+            document.documentElement.classList.add('dark');
+        } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        }
+    </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=CHBINHAYDDE/duigitale" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>