Spaces:

Mubin01
/

anycoder-816ec577

Running

App Files Files Community

Mubin01 commited on 9 days ago

Commit

63e7b7d

verified ·

1 Parent(s): 83f9929

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +16 -697

index.html CHANGED Viewed

@@ -1,703 +1,22 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sylhet Match | Find Your Life Partner</title>
-    <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=Poppins:wght@300;400;600;700&family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary: #2E7D32; /* Sylhet Green */
-            --primary-dark: #1B5E20;
-            --accent: #FFD700; /* Gold */
-            --bg-light: #F1F8E9;
-            --text-dark: #1a1a1a;
-            --text-light: #555;
-            --white: #ffffff;
-            --shadow: 0 10px 30px rgba(0,0,0,0.1);
-            --radius: 12px;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Poppins', sans-serif;
-            background-color: var(--bg-light);
-            color: var(--text-dark);
-            line-height: 1.6;
-            overflow-x: hidden;
-        }
-        h1, h2, h3 {
-            font-family: 'Playfair Display', serif;
-        }
-        /* Utilities */
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
-        .btn {
-            display: inline-block;
-            padding: 12px 30px;
-            border-radius: 50px;
-            text-decoration: none;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border: none;
-        }
-        .btn-primary {
-            background-color: var(--primary);
-            color: var(--white);
-            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
-        }
-        .btn-primary:hover {
-            background-color: var(--primary-dark);
-            transform: translateY(-2px);
-        }
-        .btn-outline {
-            border: 2px solid var(--primary);
-            color: var(--primary);
-            background: transparent;
-        }
-        .btn-outline:hover {
-            background-color: var(--primary);
-            color: var(--white);
-        }
-        /* Header */
-        header {
-            background-color: var(--white);
-            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-        .nav-wrapper {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            height: 80px;
-        }
-        .logo {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--primary);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .logo i {
-            color: var(--accent);
-        }
-        .anycoder-link {
-            font-size: 0.9rem;
-            color: var(--text-light);
-            text-decoration: none;
-            font-weight: 500;
-            transition: color 0.3s;
-        }
-        .anycoder-link:hover {
-            color: var(--primary);
-        }
-        /* Hero Section (Main Version) */
-        .hero {
-            background: linear-gradient(135deg, #e8f5e9 0%, #ffffff 100%);
-            padding: 80px 0;
-            position: relative;
-            overflow: hidden;
-        }
-        .hero::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            right: -10%;
-            width: 600px;
-            height: 600px;
-            background: radial-gradient(circle, rgba(46, 125, 50, 0.1) 0%, rgba(255,255,255,0) 70%);
-            border-radius: 50%;
-        }
-        .hero-content {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 50px;
-            align-items: center;
-        }
-        .hero-text h1 {
-            font-size: 3.5rem;
-            color: var(--text-dark);
-            margin-bottom: 20px;
-            line-height: 1.2;
-        }
-        .hero-text p {
-            font-size: 1.1rem;
-            color: var(--text-light);
-            margin-bottom: 30px;
-            max-width: 500px;
-        }
-        .hero-badges {
-            display: flex;
-            gap: 15px;
-            margin-bottom: 30px;
-            flex-wrap: wrap;
-        }
-        .badge {
-            background: rgba(46, 125, 50, 0.1);
-            color: var(--primary-dark);
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-size: 0.9rem;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .hero-buttons {
-            display: flex;
-            gap: 15px;
-        }
-        .hero-image {
-            position: relative;
-            display: flex;
-            justify-content: center;
-        }
-        .image-card {
-            background: var(--white);
-            padding: 20px;
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
-            transform: rotate(-3deg);
-            transition: transform 0.5s ease;
-        }
-        .image-card:hover {
-            transform: rotate(0deg);
-        }
-        .image-card img {
-            width: 100%;
-            max-width: 400px;
-            border-radius: 8px;
-            object-fit: cover;
-        }
-        /* Placeholder visual for the hero image */
-        .visual-placeholder {
-            width: 350px;
-            height: 400px;
-            background: linear-gradient(45deg, var(--primary), var(--primary-dark));
-            border-radius: var(--radius);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 5rem;
-            box-shadow: var(--shadow);
-            flex-direction: column;
-            text-align: center;
-            padding: 20px;
-        }
-        .visual-placeholder i {
-            margin-bottom: 20px;
-            color: var(--accent);
-        }
-        .visual-placeholder span {
-            font-family: 'Playfair Display', serif;
-            font-size: 2rem;
-        }
-        /* Features Section */
-        .features {
-            padding: 80px 0;
-            background-color: var(--white);
-        }
-        .section-title {
-            text-align: center;
-            margin-bottom: 60px;
-        }
-        .section-title h2 {
-            font-size: 2.5rem;
-            color: var(--text-dark);
-            margin-bottom: 15px;
-        }
-        .section-title p {
-            color: var(--text-light);
-        }
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
-        }
-        .feature-card {
-            padding: 30px;
-            border-radius: var(--radius);
-            background-color: var(--bg-light);
-            transition: all 0.3s ease;
-            border: 1px solid transparent;
-        }
-        .feature-card:hover {
-            transform: translateY(-10px);
-            box-shadow: var(--shadow);
-            border-color: var(--primary);
-            background-color: var(--white);
-        }
-        .feature-icon {
-            width: 60px;
-            height: 60px;
-            background-color: rgba(46, 125, 50, 0.1);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--primary);
-            font-size: 1.5rem;
-            margin-bottom: 20px;
-        }
-        .feature-card h3 {
-            font-size: 1.3rem;
-            margin-bottom: 10px;
-        }
-        /* Short Versions Section */
-        .variations {
-            padding: 80px 0;
-            background-color: #fafafa;
-        }
-        .variation-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-            gap: 30px;
-        }
-        .variation-card {
-            background: var(--white);
-            padding: 40px;
-            border-radius: var(--radius);
-            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
-            position: relative;
-            overflow: hidden;
-            transition: all 0.3s ease;
-        }
-        .variation-card:hover {
-            transform: translateY(-5px);
-            box-shadow: var(--shadow);
-        }
-        /* Style variations for different tones */
-        .var-catchy {
-            border-top: 5px solid #E91E63;
-        }
-        .var-emotional {
-            border-top: 5px solid #FF5252;
-        }
-        .var-simple {
-            border-top: 5px solid #2196F3;
-        }
-        .variation-card h3 {
-            font-size: 1.5rem;
-            margin-bottom: 15px;
-        }
-        .variation-card p {
-            color: var(--text-light);
-            margin-bottom: 25px;
-        }
-        .tag {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            font-size: 0.8rem;
-            padding: 4px 10px;
-            border-radius: 4px;
-            background: #eee;
-            color: #777;
-        }
-        /* Footer */
-        footer {
-            background-color: var(--text-dark);
-            color: var(--white);
-            padding: 60px 0 20px;
-        }
-        .footer-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 40px;
-            margin-bottom: 40px;
-        }
-        .footer-col h4 {
-            font-size: 1.2rem;
-            margin-bottom: 20px;
-            color: var(--accent);
-        }
-        .footer-col ul {
-            list-style: none;
-        }
-        .footer-col ul li {
-            margin-bottom: 10px;
-        }
-        .footer-col ul li a {
-            color: #bbb;
-            text-decoration: none;
-            transition: color 0.3s;
-        }
-        .footer-col ul li a:hover {
-            color: var(--white);
-        }
-        .footer-bottom {
-            text-align: center;
-            padding-top: 20px;
-            border-top: 1px solid rgba(255,255,255,0.1);
-            font-size: 0.9rem;
-            color: #bbb;
-        }
-        .anycoder-footer {
-            margin-top: 10px;
-            display: inline-block;
-        }
-        .anycoder-footer a {
-            color: var(--accent);
-            text-decoration: none;
-        }
-        /* Modal */
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.5);
-            z-index: 2000;
-            align-items: center;
-            justify-content: center;
-        }
-        .modal-content {
-            background: var(--white);
-            padding: 40px;
-            border-radius: var(--radius);
-            max-width: 500px;
-            width: 90%;
-            text-align: center;
-            animation: slideIn 0.3s ease;
-        }
-        @keyframes slideIn {
-            from { transform: translateY(-50px); opacity: 0; }
-            to { transform: translateY(0); opacity: 1; }
-        }
-        .close-modal {
-            float: right;
-            cursor: pointer;
-            font-size: 1.5rem;
-            color: #aaa;
-        }
-        /* Responsive */
-        @media (max-width: 768px) {
-            .hero-content {
-                grid-template-columns: 1fr;
-                text-align: center;
-            }
-            .hero-text h1 {
-                font-size: 2.5rem;
-            }
-            .hero-badges {
-                justify-content: center;
-            }
-            .hero-buttons {
-                justify-content: center;
-            }
-            .visual-placeholder {
-                width: 100%;
-                height: 300px;
-                margin-top: 30px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- Header -->
-    <header>
-        <div class="container">
-            <div class="nav-wrapper">
-                <div class="logo">
-                    <i class="fas fa-heart"></i>
-                    Sylhet Match
-                </div>
-                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
-                    Built with <span style="font-weight:700;">anycoder</span>
-                </a>
-            </div>
-        </div>
-    </header>
-    <!-- Main Hero Section -->
-    <section class="hero">
-        <div class="container">
-            <div class="hero-content">
-                <div class="hero-text">
-                    <h1>Find Your Life Partner in Sylhet District</h1>
-                    <p>Welcome to a trusted matchmaking platform created exclusively for people from Sylhet District. Connect with genuine profiles, shared cultural values, and people who truly understand your background.</p>
-                    <div class="hero-badges">
-                        <div class="badge"><i class="fas fa-map-marker-alt"></i> Only Sylhet District</div>
-                        <div class="badge"><i class="fas fa-check-circle"></i> Verified Profiles</div>
-                        <div class="badge"><i class="fas fa-ring"></i> Serious Marriage</div>
-                    </div>
-                    <div class="hero-buttons">
-                        <button class="btn btn-primary" onclick="openModal('Create Profile')">Create Profile</button>
-                        <button class="btn btn-outline" onclick="openModal('Find Match')">Find Match</button>
-                    </div>
-                </div>
-                <div class="hero-image">
-                    <!-- Abstract representation of connection -->
-                    <div class="visual-placeholder">
-                        <i class="fas fa-tea-leaf"></i>
-                        <span>Sylhet<br>Ties</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Why Choose Us / Features -->
-    <section class="features">
-        <div class="container">
-            <div class="section-title">
-                <h2>Why Choose Sylhet Match?</h2>
-                <p>Building bridges between hearts in the land of tea gardens.</p>
-            </div>
-            <div class="features-grid">
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <i class="fas fa-shield-alt"></i>
-                    </div>
-                    <h3>Verified & Trustworthy</h3>
-                    <p>We verify every profile manually to ensure safety and authenticity for our community members.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <i class="fas fa-users"></i>
-                    </div>
-                    <h3>Local Community</h3>
-                    <p>Connect with people who share your specific Sylheti dialect, customs, and family values.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <i class="fas fa-heart"></i>
-                    </div>
-                    <h3>Marriage Focused</h3>
-                    <p>Our platform is dedicated to finding serious, long-term commitments leading to marriage.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Alternative Versions Showcase -->
-    <section class="variations">
-        <div class="container">
-            <div class="section-title">
-                <h2>Our Philosophy</h2>
-                <p>We speak your language and understand your needs.</p>
-            </div>
-            <div class="variation-grid">
-                <!-- Version 1: Catchy -->
-                <div class="variation-card var-catchy">
-                    <span class="tag">Catchy</span>
-                    <h3>🌸 Sylhet District Matchmaking</h3>
-                    <p>Where True Connections Begin. Meet your life partner from Sylhet, built on trust, culture, and compatibility.</p>
-                    <button class="btn btn-primary" onclick="openModal('Join Now')">Join Now</button>
-                </div>
-                <!-- Version 2: Emotional -->
-                <div class="variation-card var-emotional">
-                    <span class="tag">Emotional</span>
-                    <h3>❤️ Looking for a Life Partner?</h3>
-                    <p>You’re in the right place. Real people. Real intentions. Real matches — only from Sylhet District.</p>
-                    <button class="btn btn-primary" style="background-color: #FF5252;" onclick="openModal('Get Started')">Get Started</button>
-                </div>
-                <!-- Version 3: Simple -->
-                <div class="variation-card var-simple">
-                    <span class="tag">Simple</span>
-                    <h3>✨ Find a Life Partner</h3>
-                    <p>This platform is only for people living in or connected to Sylhet District. Create your profile and find a serious marriage match.</p>
-                    <button class="btn btn-primary" style="background-color: #2196F3;" onclick="openModal('Join Today')">Join Today</button>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Final CTA -->
-    <section style="padding: 80px 0; background: var(--primary); text-align: center; color: white;">
-        <div class="container">
-            <h2 style="font-size: 2.5rem; margin-bottom: 20px;">Your perfect match from Sylhet is waiting.</h2>
-            <p style="margin-bottom: 30px; font-size: 1.1rem; opacity: 0.9;">Join thousands of verified profiles today.</p>
-            <button class="btn" style="background-color: white; color: var(--primary); font-weight: bold;" onclick="openModal('Create Free Profile')">Create Free Profile</button>
-        </div>
-    </section>
-    <!-- Footer -->
-    <footer>
-        <div class="container">
-            <div class="footer-grid">
-                <div class="footer-col">
-                    <h4>Sylhet Match</h4>
-                    <p style="color: #bbb; font-size: 0.9rem;">Connecting hearts in the Sylhet region with respect, privacy, and cultural understanding.</p>
-                </div>
-                <div class="footer-col">
-                    <h4>Company</h4>
-                    <ul>
-                        <li><a href="#">About Us</a></li>
-                        <li><a href="#">Success Stories</a></li>
-                        <li><a href="#">Contact</a></li>
-                    </ul>
-                </div>
-                <div class="footer-col">
-                    <h4>Support</h4>
-                    <ul>
-                        <li><a href="#">Help Center</a></li>
-                        <li><a href="#">Safety Guidelines</a></li>
-                        <li><a href="#">Privacy Policy</a></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="footer-bottom">
-                <p>&copy; 2023 Sylhet Match. All rights reserved.</p>
-                <div class="anycoder-footer">
-                    Powered by <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
-                </div>
-            </div>
-        </div>
-    </footer>
-    <!-- Interactive Modal -->
-    <div id="actionModal" class="modal">
-        <div class="modal-content">
-            <span class="close-modal" onclick="closeModal()">&times;</span>
-            <div style="font-size: 3rem; color: var(--primary); margin-bottom: 20px;">
-                <i class="fas fa-user-plus"></i>
-            </div>
-            <h2 id="modalTitle" style="margin-bottom: 15px;">Join Now</h2>
-            <p style="margin-bottom: 30px; color: var(--text-light);">
-                Thank you for your interest in <strong>Sylhet Match</strong>. <br>
-                This is a demo UI. In a real application, you would be redirected to the registration form for the action: <br>
-                <span id="modalActionText" style="font-weight: bold; color: var(--primary);"></span>.
-            </p>
-            <button class="btn btn-primary" onclick="closeModal()">Close</button>
-        </div>
-    </div>
-    <script>
-        // Modal Logic
-        const modal = document.getElementById('actionModal');
-        const modalTitle = document.getElementById('modalTitle');
-        const modalActionText = document.getElementById('modalActionText');
-        function openModal(actionName) {
-            modal.style.display = 'flex';
-            modalTitle.innerText = actionName;
-            modalActionText.innerText = actionName;
-        }
-        function closeModal() {
-            modal.style.display = 'none';
-        }
-        // Close modal if clicking outside content
-        window.onclick = function(event) {
-            if (event.target == modal) {
-                closeModal();
-            }
-        }
-        // Add a simple animation to badges on scroll
-        const badges = document.querySelectorAll('.badge');
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if(entry.isIntersecting) {
-                    entry.target.style.opacity = '1';
-                    entry.target.style.transform = 'translateY(0)';
-                }
-            });
-        }, { threshold: 0.1 });
-        badges.forEach(badge => {
-            badge.style.opacity = '0';
-            badge.style.transform = 'translateY(20px)';
-            badge.style.transition = 'all 0.5s ease';
-            observer.observe(badge);
-        });
-    </script>
-</body>
-</html>

+I can see you've shared the HTML code for your "Sylhet Match" website. The code looks **complete and functional**! Here's a quick review:
+## ✅ What's Working Well:
+1. **Valid HTML Structure** - The document is properly structured with semantic tags
+2. **Modern CSS** - Uses CSS variables, flexbox, grid, and responsive design
+3. **Interactive Elements** - Modal functionality works properly
+4. **Responsive Design** - Media queries handle mobile devices
+5. **Clean Styling** - Professional color scheme (green/gold with white)
+## 📋 However, your request "can you chek" appears incomplete.
+Could you please clarify what you'd like me to **check** or **modify**? For example:
+- 🔍 **Debug** - Check for errors or bugs?
+- ✨ **Enhance** - Add new features or improvements?
+- 🎨 **Style** - Modify the design/colors?
+- 📱 **Responsiveness** - Improve mobile view?
+- 🔧 **Functionality** - Add new interactive features?
+- 🐛 **Fix** - Is something not working as expected?
+**Please let me know what specific changes you'd like, and I'll be happy to help modify the code accordingly!**