Spaces:

jrman28
/

inkspire

Running

App Files Files Community

jrman28 commited on Apr 9, 2025

Commit

33b240a

verified ·

1 Parent(s): 63e0ebb

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: inkspire
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 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,236 @@
-<!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>InkSpire - Quote Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Cormorant+Upright:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+            color: #e2e8f0;
+            transition: background 0.5s ease;
+        }
+        .quote-container {
+            transition: all 0.5s ease;
+            background: rgba(26, 32, 44, 0.8);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .fade-in {
+            animation: fadeIn 0.8s;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* Loading animation */
+        .loader {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 120px;
+        }
+        .loader-dot {
+            width: 12px;
+            height: 12px;
+            margin: 0 5px;
+            border-radius: 50%;
+            background-color: #3b82f6;
+            animation: bounce 1.5s infinite ease-in-out;
+        }
+        .loader-dot:nth-child(1) {
+            animation-delay: 0s;
+        }
+        .loader-dot:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .loader-dot:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes bounce {
+            0%, 100% {
+                transform: translateY(0);
+                background-color: #3b82f6;
+            }
+            50% {
+                transform: translateY(-20px);
+                background-color: #60a5fa;
+            }
+        }
+        /* Neon glow effect */
+        .neon-text {
+            text-shadow: 0 0 5px rgba(59, 130, 246, 0.5),
+                         0 0 10px rgba(59, 130, 246, 0.3);
+        }
+        /* Button hover effect */
+        .vibrant-btn {
+            background: linear-gradient(45deg, #1d4ed8, #3b82f6);
+            background-size: 200% 200%;
+            animation: gradient 3s ease infinite;
+        }
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .vibrant-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.4);
+        }
+        /* Cormorant Upright font for quotes and title */
+        .cormorant-font {
+            font-family: 'Cormorant Upright', serif;
+        }
+    </style>
+</head>
+<body class="flex items-center justify-center p-4">
+    <div class="max-w-3xl w-full">
+        <div class="quote-container rounded-xl shadow-2xl p-8 md:p-12">
+            <div class="text-center mb-8">
+                <h1 class="text-4xl font-semibold text-blue-300 neon-text mb-2 cormorant-font">InkSpire</h1>
+                <div class="w-20 h-1 bg-gradient-to-r from-blue-500 to-blue-400 mx-auto rounded-full"></div>
+            </div>
+            <div id="quote-content" class="fade-in min-h-[180px] flex flex-col justify-center">
+                <p id="quote-text" class="text-2xl md:text-3xl font-light text-gray-100 leading-relaxed mb-6 cormorant-font">
+                    "The greatest glory in living lies not in never falling, but in rising every time we fall."
+                </p>
+                <p id="quote-author" class="text-lg text-blue-300 font-medium italic cormorant-font">
+                    — Nelson Mandela
+                </p>
+            </div>
+            <div id="loading-state" class="hidden loader">
+                <div class="loader-dot"></div>
+                <div class="loader-dot"></div>
+                <div class="loader-dot"></div>
+            </div>
+            <div class="mt-12 text-center">
+                <button id="new-quote-btn" class="vibrant-btn px-8 py-3 text-white rounded-full font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
+                    Generate New Quote
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+        <div class="text-center mt-8 text-gray-400 text-sm">
+            <p>Click the button to get inspired</p>
+        </div>
+    </div>
+    <script>
+        const quotes = [
+            {
+                text: "The way to get started is to quit talking and begin doing.",
+                author: "Walt Disney"
+            },
+            {
+                text: "Your time is limited, so don't waste it living someone else's life.",
+                author: "Steve Jobs"
+            },
+            {
+                text: "If life were predictable it would cease to be life, and be without flavor.",
+                author: "Eleanor Roosevelt"
+            },
+            {
+                text: "Life is what happens when you're busy making other plans.",
+                author: "John Lennon"
+            },
+            {
+                text: "Spread love everywhere you go. Let no one ever come to you without leaving happier.",
+                author: "Mother Teresa"
+            },
+            {
+                text: "When you reach the end of your rope, tie a knot in it and hang on.",
+                author: "Franklin D. Roosevelt"
+            },
+            {
+                text: "Always remember that you are absolutely unique. Just like everyone else.",
+                author: "Margaret Mead"
+            },
+            {
+                text: "Don't judge each day by the harvest you reap but by the seeds that you plant.",
+                author: "Robert Louis Stevenson"
+            },
+            {
+                text: "The future belongs to those who believe in the beauty of their dreams.",
+                author: "Eleanor Roosevelt"
+            },
+            {
+                text: "Tell me and I forget. Teach me and I remember. Involve me and I learn.",
+                author: "Benjamin Franklin"
+            },
+            {
+                text: "The only limit to our realization of tomorrow is our doubts of today.",
+                author: "Franklin D. Roosevelt"
+            },
+            {
+                text: "It is during our darkest moments that we must focus to see the light.",
+                author: "Aristotle"
+            },
+            {
+                text: "Do not go where the path may lead, go instead where there is no path and leave a trail.",
+                author: "Ralph Waldo Emerson"
+            }
+        ];
+        const quoteText = document.getElementById('quote-text');
+        const quoteAuthor = document.getElementById('quote-author');
+        const newQuoteBtn = document.getElementById('new-quote-btn');
+        const quoteContent = document.getElementById('quote-content');
+        const loadingState = document.getElementById('loading-state');
+        function getRandomQuote() {
+            // Show loading animation
+            quoteContent.classList.add('hidden');
+            loadingState.classList.remove('hidden');
+            // Disable button during transition
+            newQuoteBtn.disabled = true;
+            // Get random quote after a delay (so users can see the loading animation)
+            setTimeout(() => {
+                const randomIndex = Math.floor(Math.random() * quotes.length);
+                const randomQuote = quotes[randomIndex];
+                // Hide loading and show new quote
+                loadingState.classList.add('hidden');
+                quoteContent.classList.remove('hidden');
+                // Apply the new quote with animation
+                quoteText.textContent = randomQuote.text;
+                quoteAuthor.textContent = `— ${randomQuote.author}`;
+                // Re-add fade-in class for animation
+                quoteContent.classList.remove('fade-in');
+                void quoteContent.offsetWidth; // Trigger reflow
+                quoteContent.classList.add('fade-in');
+                // Re-enable button
+                newQuoteBtn.disabled = false;
+            }, 1500); // 1.5 second delay to see the loading animation
+        }
+        // Initial random quote on load with slight delay
+        setTimeout(() => {
+            getRandomQuote();
+        }, 500);
+        // New quote on button click
+        newQuoteBtn.addEventListener('click', getRandomQuote);
+    </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=jrman28/inkspire" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>