Upload folder using huggingface_hub

README.md

@@ -1,12 +1,49 @@
----
-title: Stellar Verse
-emoji: 📊
-colorFrom: gray
-colorTo: pink
-sdk: static
-pinned: false
-tags:
-- anycoder
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Stellar Verse - Romantic Poetry Generator
+
+A beautiful, responsive web application that generates romantic poems with dynamic backgrounds.
+
+## Features
+
+- Generate romantic poems based on keywords or themes
+- Dynamic background images that change with each poem generation
+- Manual background selection from romantic themes
+- Responsive design for all screen sizes
+- Keyboard shortcuts for better accessibility
+- Elegant typography and warm color scheme
+
+## How to Use
+
+1. Enter keywords or themes in the input field (e.g., "moon", "love", "autumn")
+2. Click "Generate Poem" or press Enter
+3. Enjoy your romantic poem with a beautiful background
+4. Use the background controls to change the visual theme
+
+## Technical Details
+
+- Built with semantic HTML5, CSS3, and vanilla JavaScript
+- Mobile-first responsive design
+- Accessible with proper ARIA labels and keyboard navigation
+- SVG-based backgrounds for crisp display at any resolution
+
+## Future Enhancements
+
+- Add more poems and background options
+- Implement actual AI-based poem generation
+- Add user accounts to save favorite poems
+- Include sharing options for social media
+
+## Running the Application
+
+Simply open the `index.html` file in your web browser. No server required!
+
+## License
+
+This project is licensed under the MIT License.
+
+## Credits
+
+- Fonts from Google Fonts
+- Background designs created with SVG
+- Built with love and poetry in mind
+
+Enjoy expressing your romantic feelings through Stellar Verse!

assets/css/styles.css

@@ -0,0 +1,245 @@
+:root {
+    --primary-color: #d4a373;
+    --secondary-color: #e67e22;
+    --dark-color: #2c3e50;
+    --light-color: #ecf0f1;
+    --accent-color: #e74c3c;
+    --text-color: #333;
+    --text-light: #fff;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Raleway', sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: var(--light-color);
+    transition: background-image 1s ease-in-out;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    background-color: var(--primary-color);
+    color: var(--text-light);
+    padding: 1rem;
+    text-align: center;
+    position: relative;
+}
+
+.header-link {
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+    font-size: 0.8rem;
+}
+
+.header-link a {
+    color: var(--text-light);
+    text-decoration: none;
+}
+
+.header-link a:hover {
+    text-decoration: underline;
+}
+
+.main-content {
+    flex: 1;
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+h1, h2 {
+    font-family: 'Playfair Display', serif;
+    margin-bottom: 1rem;
+}
+
+h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0;
+}
+
+h2 {
+    font-size: 1.8rem;
+    color: var(--dark-color);
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.poem-generator {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+}
+
+.input-group {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+input[type="text"] {
+    flex: 1;
+    padding: 0.8rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+    min-width: 200px;
+}
+
+button {
+    background-color: var(--secondary-color);
+    color: white;
+    border: none;
+    padding: 0.8rem 1.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: var(--accent-color);
+}
+
+.background-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+.background-controls button {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+select {
+    padding: 0.5rem;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+}
+
+.poem-display {
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.poem-container {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 4px;
+    border-left: 4px solid var(--primary-color);
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.poem-text {
+    font-family: 'Playfair Display', serif;
+    font-size: 1.3rem;
+    line-height: 1.8;
+    margin-bottom: 1rem;
+    color: var(--dark-color);
+}
+
+.poem-author {
+    text-align: right;
+    font-style: italic;
+    color: var(--secondary-color);
+}
+
+.footer {
+    background-color: var(--dark-color);
+    color: var(--text-light);
+    text-align: center;
+    padding: 1rem;
+    margin-top: 2rem;
+}
+
+/* Background images */
+.bg-autumn {
+    background-image: url('assets/images/bg-autumn.svg');
+    background-size: cover;
+    background-position: center;
+}
+
+.bg-stars {
+    background-image: url('assets/images/bg-stars.svg');
+    background-size: cover;
+    background-position: center;
+}
+
+.bg-hearts {
+    background-image: url('assets/images/bg-hearts.svg');
+    background-size: cover;
+    background-position: center;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .input-group {
+        flex-direction: column;
+    }
+
+    input[type="text"] {
+        min-width: auto;
+    }
+
+    .background-controls {
+        flex-wrap: wrap;
+    }
+
+    .poem-text {
+        font-size: 1.1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .header {
+        padding: 0.8rem;
+    }
+
+    .header-link {
+        position: static;
+        margin-top: 0.5rem;
+    }
+
+    .main-content {
+        padding: 1rem;
+    }
+
+    h1 {
+        font-size: 2rem;
+    }
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}

assets/js/script.js

@@ -0,0 +1,116 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Poem data
+    const poems = [
+        {
+            text: "In the quiet of the evening, under skies so wide, I find my heart beating close to yours, my love. The stars above whisper secrets of our bond, eternal as the night, deep as the ocean's song.",
+            keywords: ["evening", "love", "stars"]
+        },
+        {
+            text: "Autumn leaves dance in crimson and gold, mirroring the fire that burns within my soul. Each leaf that falls is a promise made, that in your arms is where I'll fade.",
+            keywords: ["autumn", "leaves", "fire"]
+        },
+        {
+            text: "Your eyes are the moonlight that guides me through the dark, your touch the spark that ignites the fire in my heart. In this vast universe, you are my constant star, my love, my life, no matter near or far.",
+            keywords: ["moon", "eyes", "universe"]
+        },
+        {
+            text: "Like the river finds the sea, my heart has found its way to thee. Through storm and sunshine, come what may, in your love I'll always stay.",
+            keywords: ["river", "sea", "love"]
+        },
+        {
+            text: "In the garden of your heart, I plant my love so true. With every beat it grows, a flower just for you. The petals soft as whispers, the scent so sweet and light, blooming in the sunshine of your love so bright.",
+            keywords: ["garden", "heart", "flower"]
+        }
+    ];
+
+    // DOM elements
+    const poemPrompt = document.getElementById('poem-prompt');
+    const generateBtn = document.getElementById('generate-btn');
+    const poemText = document.getElementById('poem-text');
+    const poemContainer = document.getElementById('poem-container');
+    const prevBgBtn = document.getElementById('prev-bg');
+    const nextBgBtn = document.getElementById('next-bg');
+    const bgSelect = document.getElementById('bg-select');
+
+    // Background images
+    const backgrounds = [
+        { id: 'autumn', path: 'assets/images/bg-autumn.svg' },
+        { id: 'stars', path: 'assets/images/bg-stars.svg' },
+        { id: 'hearts', path: 'assets/images/bg-hearts.svg' }
+    ];
+
+    let currentBgIndex = 0;
+
+    // Set initial background
+    updateBackground();
+
+    // Event listeners
+    generateBtn.addEventListener('click', generatePoem);
+    poemPrompt.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+            generatePoem();
+        }
+    });
+
+    prevBgBtn.addEventListener('click', showPreviousBackground);
+    nextBgBtn.addEventListener('click', showNextBackground);
+    bgSelect.addEventListener('change', function() {
+        const selectedId = this.value;
+        const index = backgrounds.findIndex(bg => bg.id === selectedId);
+        if (index !== -1) {
+            currentBgIndex = index;
+            updateBackground();
+        }
+    });
+
+    // Functions
+    function generatePoem() {
+        const input = poemPrompt.value.toLowerCase();
+
+        // Simple filtering based on input keywords
+        let filteredPoems = poems;
+        if (input.trim()) {
+            const keywords = input.split(/\s+/);
+            filteredPoems = poems.filter(poem => {
+                return keywords.some(keyword =>
+                    poem.keywords.some(kw => kw.includes(keyword))
+                );
+            });
+        }
+
+        // If no matching poems, use all poems
+        if (filteredPoems.length === 0) {
+            filteredPoems = poems;
+        }
+
+        // Select random poem
+        const randomIndex = Math.floor(Math.random() * filteredPoems.length);
+        const selectedPoem = filteredPoems[randomIndex];
+
+        // Display poem with animation
+        poemText.style.opacity = 0;
+        setTimeout(() => {
+            poemText.textContent = selectedPoem.text;
+            poemText.style.opacity = 1;
+
+            // Change background
+            showNextBackground();
+        }, 300);
+    }
+
+    function updateBackground() {
+        const currentBg = backgrounds[currentBgIndex];
+        document.body.style.backgroundImage = `url('${currentBg.path}')`;
+        bgSelect.value = currentBg.id;
+    }
+
+    function showNextBackground() {
+        currentBgIndex = (currentBgIndex + 1) % backgrounds.length;
+        updateBackground();
+    }
+
+    function showPreviousBackground() {
+        currentBgIndex = (currentBgIndex - 1 + backgrounds.length) % backgrounds.length;
+        updateBackground();
+    }
+});

index.html

@@ -1,19 +1,52 @@
-<!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">
+    <meta name="description" content="Stellar Verse: Generate romantic poems with beautiful dynamic backgrounds. Express your feelings through poetry.">
+    <title>Stellar Verse - Romantic Poetry Generator</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;600&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header class="header">
+        <h1>Stellar Verse</h1>
+        <div class="header-link">
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer">Built with anycoder</a>
+        </div>
+    </header>
+
+    <main class="main-content">
+        <section class="poem-generator">
+            <h2>Generate Your Romantic Poem</h2>
+            <div class="input-group">
+                <label for="poem-prompt" class="visually-hidden">Enter themes or keywords for your poem</label>
+                <input type="text" id="poem-prompt" placeholder="Enter themes (love, moon, heart...)">
+                <button id="generate-btn" aria-label="Generate poem">Generate Poem</button>
+            </div>
+            <div class="background-controls">
+                <button id="prev-bg" aria-label="Previous background">≺</button>
+                <button id="next-bg" aria-label="Next background">≻</button>
+                <select id="bg-select" aria-label="Select background">
+                    <option value="autumn">Autumn Leaves</option>
+                    <option value="stars">Starry Night</option>
+                    <option value="hearts">Romantic Hearts</option>
+                </select>
+            </div>
+        </section>
+
+        <section class="poem-display">
+            <div class="poem-container" id="poem-container">
+                <p class="poem-text" id="poem-text">Your romantic poem will appear here...</p>
+                <div class="poem-author">— Stellar Verse</div>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer">
+        <p>&copy; 2023 Stellar Verse. All rights reserved.</p>
+    </footer>
+
+    <script src="assets/js/script.js"></script>
+</body>
+</html>