Spaces:
Running
Running
| <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">×</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> |