Spaces:

jblast94
/

site-builder

Running

App Files Files Community

jblast94 commited on May 16

Commit

beafd9b

verified ·

1 Parent(s): 52720fb

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +639 -19
prompts.txt +0 -0

README.md CHANGED Viewed

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

 ---
+title: site-builder
+emoji: 🐳
 colorFrom: pink
+colorTo: pink
 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,639 @@
-<!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>What I Can Do For You</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>
+        :root {
+            --primary: #4361ee;
+            --secondary: #3f37c9;
+            --accent: #4895ef;
+            --light: #f8f9fa;
+            --dark: #212529;
+            --success: #4cc9f0;
+            --warning: #f72585;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 2rem;
+            color: var(--dark);
+        }
+        header {
+            text-align: center;
+            margin-bottom: 3rem;
+            animation: fadeIn 1s ease;
+        }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            color: var(--secondary);
+            position: relative;
+            display: inline-block;
+        }
+        h1::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 50%;
+            height: 4px;
+            background: var(--warning);
+            border-radius: 2px;
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            color: var(--dark);
+            max-width: 700px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+        .cards-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            width: 100%;
+            max-width: 1200px;
+        }
+        .card {
+            perspective: 1000px;
+            height: 400px;
+        }
+        .card-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            transition: transform 0.8s;
+            transform-style: preserve-3d;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            border-radius: 15px;
+            cursor: pointer;
+        }
+        .card:hover .card-inner {
+            transform: rotateY(180deg);
+        }
+        .card-front, .card-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            border-radius: 15px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+            text-align: center;
+        }
+        .card-front {
+            background: white;
+            color: var(--dark);
+        }
+        .card-back {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            color: white;
+            transform: rotateY(180deg);
+        }
+        .icon {
+            font-size: 3rem;
+            margin-bottom: 1.5rem;
+            color: var(--primary);
+        }
+        .card-back .icon {
+            color: white;
+        }
+        .card-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            font-weight: 600;
+        }
+        .card-desc {
+            font-size: 1rem;
+            line-height: 1.6;
+            color: #666;
+        }
+        .card-back .card-desc {
+            color: rgba(255, 255, 255, 0.9);
+        }
+        .card:nth-child(1) .card-front {
+            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
+        }
+        .card:nth-child(2) .card-front {
+            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
+        }
+        .card:nth-child(3) .card-front {
+            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+        }
+        .card:nth-child(4) .card-front {
+            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
+        }
+        .card:nth-child(5) .card-front {
+            background: linear-gradient(135deg, #a6c1ee 0%, #fbc2eb 100%);
+        }
+        .card:nth-child(6) .card-front {
+            background: linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%);
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-content {
+            background-color: white;
+            padding: 2rem;
+            border-radius: 10px;
+            width: 90%;
+            max-width: 500px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+            animation: modalFadeIn 0.3s ease;
+        }
+        @keyframes modalFadeIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+        }
+        .form-group input,
+        .form-group textarea,
+        .form-group select {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 1rem;
+        }
+        .form-group textarea {
+            min-height: 120px;
+        }
+        .btn {
+            display: inline-block;
+            padding: 0.75rem 1.5rem;
+            background-color: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: background-color 0.3s;
+        }
+        .btn:hover {
+            background-color: var(--secondary);
+        }
+        .btn-warning {
+            background-color: var(--warning);
+        }
+        .btn-warning:hover {
+            background-color: #d61f6e;
+        }
+        .close-btn {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: #666;
+        }
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: var(--success);
+            color: white;
+            padding: 1rem 2rem;
+            border-radius: 5px;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+            display: none;
+            z-index: 1001;
+        }
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255,255,255,.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        @media (max-width: 768px) {
+            .cards-container {
+                grid-template-columns: 1fr;
+            }
+            h1 {
+                font-size: 2rem;
+            }
+            .subtitle {
+                font-size: 1rem;
+            }
+        }
+        .floating-btn {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            width: 60px;
+            height: 60px;
+            background: var(--warning);
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            box-shadow: 0 5px 20px rgba(247, 37, 133, 0.4);
+            cursor: pointer;
+            transition: all 0.3s;
+            z-index: 100;
+        }
+        .floating-btn:hover {
+            transform: scale(1.1);
+            box-shadow: 0 8px 25px rgba(247, 37, 133, 0.6);
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>What I Can Do For You</h1>
+        <p class="subtitle">
+            I specialize in creating beautiful, functional, and responsive web interfaces using only HTML, CSS, and JavaScript.
+            Here's a showcase of my capabilities - hover over each card to discover more!
+        </p>
+    </header>
+    <div class="cards-container" id="services-container">
+        <!-- Services will be loaded dynamically from the backend -->
+    </div>
+    <!-- Contact Modal -->
+    <div class="modal" id="contactModal">
+        <div class="modal-content relative">
+            <span class="close-btn" id="closeModal">&times;</span>
+            <h2 class="text-2xl font-bold mb-4">Get In Touch</h2>
+            <form id="contactForm">
+                <div class="form-group">
+                    <label for="name">Your Name</label>
+                    <input type="text" id="name" name="name" required>
+                </div>
+                <div class="form-group">
+                    <label for="email">Email Address</label>
+                    <input type="email" id="email" name="email" required>
+                </div>
+                <div class="form-group">
+                    <label for="service">Service Interested In</label>
+                    <select id="service" name="service">
+                        <option value="">Select a service</option>
+                        <!-- Options will be populated dynamically -->
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="message">Your Message</label>
+                    <textarea id="message" name="message" required></textarea>
+                </div>
+                <button type="submit" class="btn" id="submitBtn">
+                    <span id="btnText">Send Message</span>
+                    <span class="loading hidden"></span>
+                </button>
+            </form>
+        </div>
+    </div>
+    <!-- Toast Notification -->
+    <div class="toast" id="toast"></div>
+    <div class="floating-btn" id="contactBtn">
+        <i class="fas fa-rocket"></i>
+    </div>
+    <script>
+        // API Endpoints (Replace with your actual backend URLs)
+        const API = {
+            services: 'https://api.example.com/services', // Mock endpoint
+            contact: 'https://api.example.com/contact'   // Mock endpoint
+        };
+        // DOM Elements
+        const servicesContainer = document.getElementById('services-container');
+        const contactModal = document.getElementById('contactModal');
+        const closeModal = document.getElementById('closeModal');
+        const contactBtn = document.getElementById('contactBtn');
+        const contactForm = document.getElementById('contactForm');
+        const serviceSelect = document.getElementById('service');
+        const submitBtn = document.getElementById('submitBtn');
+        const btnText = document.getElementById('btnText');
+        const loadingSpinner = document.querySelector('.loading');
+        const toast = document.getElementById('toast');
+        // State
+        let services = [];
+        // Initialize the app
+        document.addEventListener('DOMContentLoaded', function() {
+            // Load services from backend
+            loadServices();
+            // Set up event listeners
+            contactBtn.addEventListener('click', openModal);
+            closeModal.addEventListener('click', closeModalFunc);
+            contactForm.addEventListener('submit', handleSubmit);
+            // Close modal when clicking outside
+            window.addEventListener('click', function(event) {
+                if (event.target === contactModal) {
+                    closeModalFunc();
+                }
+            });
+        });
+        // Load services from backend
+        async function loadServices() {
+            try {
+                // Show loading state
+                servicesContainer.innerHTML = '<div class="col-span-full text-center py-8">Loading services...</div>';
+                // In a real app, you would fetch from your actual backend
+                // const response = await fetch(API.services);
+                // services = await response.json();
+                // Mock data for demonstration
+                services = [
+                    {
+                        id: 1,
+                        title: "Responsive Web Design",
+                        description: "Create websites that look perfect on any device",
+                        icon: "fas fa-laptop-code",
+                        backTitle: "Mobile-First Approach",
+                        backDescription: "I build with mobile users in mind first, then scale up to larger screens using flexible grids, media queries, and responsive images.",
+                        backIcon: "fas fa-mobile-alt",
+                        color: "linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%)"
+                    },
+                    {
+                        id: 2,
+                        title: "UI/UX Design",
+                        description: "Crafting intuitive and beautiful user interfaces",
+                        icon: "fas fa-paint-brush",
+                        backTitle: "User-Centered Design",
+                        backDescription: "I focus on creating interfaces that are not just visually appealing but also intuitive and accessible to all users, with thoughtful information architecture and smooth interactions.",
+                        backIcon: "fas fa-user-friends",
+                        color: "linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)"
+                    },
+                    {
+                        id: 3,
+                        title: "Interactive Elements",
+                        description: "Engaging animations and micro-interactions",
+                        icon: "fas fa-bolt",
+                        backTitle: "Dynamic Experiences",
+                        backDescription: "From subtle hover effects to complex animations, I can bring your website to life with JavaScript and CSS animations that enhance user engagement without compromising performance.",
+                        backIcon: "fas fa-magic",
+                        color: "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)"
+                    },
+                    {
+                        id: 4,
+                        title: "E-Commerce Features",
+                        description: "Build online stores with cart functionality",
+                        icon: "fas fa-shopping-cart",
+                        backTitle: "Shopping Experiences",
+                        backDescription: "I can implement product galleries, shopping carts, checkout flows, and inventory management systems using pure JavaScript, creating seamless shopping experiences.",
+                        backIcon: "fas fa-credit-card",
+                        color: "linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)"
+                    },
+                    {
+                        id: 5,
+                        title: "Data Visualization",
+                        description: "Present data in beautiful, interactive charts",
+                        icon: "fas fa-chart-line",
+                        backTitle: "Interactive Charts",
+                        backDescription: "Using JavaScript libraries or custom SVG solutions, I can create dynamic charts, graphs, and data visualizations that make complex information easily digestible and interactive.",
+                        backIcon: "fas fa-chart-pie",
+                        color: "linear-gradient(135deg, #a6c1ee 0%, #fbc2eb 100%)"
+                    },
+                    {
+                        id: 6,
+                        title: "Browser Games",
+                        description: "Create fun, interactive games for the web",
+                        icon: "fas fa-gamepad",
+                        backTitle: "Interactive Games",
+                        backDescription: "From simple puzzle games to more complex interactive experiences, I can build engaging browser-based games using HTML5 Canvas and JavaScript game loops.",
+                        backIcon: "fas fa-dice",
+                        color: "linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%)"
+                    }
+                ];
+                // Render services
+                renderServices();
+                // Populate service dropdown in contact form
+                populateServiceDropdown();
+            } catch (error) {
+                console.error('Error loading services:', error);
+                servicesContainer.innerHTML = '<div class="col-span-full text-center py-8 text-red-500">Failed to load services. Please try again later.</div>';
+            }
+        }
+        // Render services to the DOM
+        function renderServices() {
+            servicesContainer.innerHTML = services.map(service => `
+                <div class="card">
+                    <div class="card-inner">
+                        <div class="card-front" style="background: ${service.color}">
+                            <div class="icon">
+                                <i class="${service.icon}"></i>
+                            </div>
+                            <h3 class="card-title">${service.title}</h3>
+                            <p class="card-desc">${service.description}</p>
+                        </div>
+                        <div class="card-back">
+                            <div class="icon">
+                                <i class="${service.backIcon}"></i>
+                            </div>
+                            <h3 class="card-title">${service.backTitle}</h3>
+                            <p class="card-desc">${service.backDescription}</p>
+                        </div>
+                    </div>
+                </div>
+            `).join('');
+            // Add click event for mobile users
+            document.querySelectorAll('.card').forEach(card => {
+                card.addEventListener('click', function() {
+                    this.querySelector('.card-inner').classList.toggle('flipped');
+                });
+            });
+        }
+        // Populate service dropdown in contact form
+        function populateServiceDropdown() {
+            serviceSelect.innerHTML = `
+                <option value="">Select a service</option>
+                ${services.map(service => `
+                    <option value="${service.id}">${service.title}</option>
+                `).join('')}
+            `;
+        }
+        // Open contact modal
+        function openModal() {
+            contactModal.style.display = 'flex';
+            document.body.style.overflow = 'hidden';
+        }
+        // Close contact modal
+        function closeModalFunc() {
+            contactModal.style.display = 'none';
+            document.body.style.overflow = 'auto';
+        }
+        // Handle form submission
+        async function handleSubmit(e) {
+            e.preventDefault();
+            // Get form data
+            const formData = {
+                name: document.getElementById('name').value,
+                email: document.getElementById('email').value,
+                service: document.getElementById('service').value,
+                message: document.getElementById('message').value
+            };
+            // Validate form
+            if (!formData.name || !formData.email || !formData.message) {
+                showToast('Please fill in all required fields', 'error');
+                return;
+            }
+            // Show loading state
+            btnText.textContent = 'Sending...';
+            loadingSpinner.classList.remove('hidden');
+            submitBtn.disabled = true;
+            try {
+                // In a real app, you would send to your actual backend
+                // const response = await fetch(API.contact, {
+                //     method: 'POST',
+                //     headers: {
+                //         'Content-Type': 'application/json',
+                //     },
+                //     body: JSON.stringify(formData)
+                // });
+                // const data = await response.json();
+                // Mock response for demonstration
+                await new Promise(resolve => setTimeout(resolve, 1500));
+                const data = { success: true, message: 'Message sent successfully!' };
+                if (data.success) {
+                    showToast(data.message, 'success');
+                    contactForm.reset();
+                    closeModalFunc();
+                } else {
+                    showToast(data.message || 'Failed to send message', 'error');
+                }
+            } catch (error) {
+                console.error('Error submitting form:', error);
+                showToast('An error occurred. Please try again.', 'error');
+            } finally {
+                // Reset button state
+                btnText.textContent = 'Send Message';
+                loadingSpinner.classList.add('hidden');
+                submitBtn.disabled = false;
+            }
+        }
+        // Show toast notification
+        function showToast(message, type = 'success') {
+            toast.textContent = message;
+            toast.style.backgroundColor = type === 'success' ? 'var(--success)' : 'var(--warning)';
+            toast.style.display = 'block';
+            setTimeout(() => {
+                toast.style.display = 'none';
+            }, 3000);
+        }
+        // Parallax effect on scroll
+        window.addEventListener('scroll', function() {
+            const scrollPosition = window.scrollY;
+            contactBtn.style.transform = `translateY(${scrollPosition * 0.1}px)`;
+        });
+    </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p><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=jblast94/site-builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes