Spaces:

Mubin01
/

anycoder-bcb8048c

Running

App Files Files Community

Mubin01 commited on 8 days ago

Commit

d4403f9

verified ·

1 Parent(s): 1f75600

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +475 -19

index.html CHANGED Viewed

@@ -1,19 +1,475 @@
-<!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>Sylhet District Matchmaking | Find Your Partner</title>
+    <!-- Google Fonts -->
+    <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=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <!-- FontAwesome Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            /* Sylhet Tea Garden Theme */
+            --primary-green: #2E7D32;
+            --dark-green: #1B5E20;
+            --light-green: #E8F5E9;
+            --accent-gold: #FFC107;
+            --text-dark: #333333;
+            --text-light: #666666;
+            --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: #f9fcf9;
+            color: var(--text-dark);
+            line-height: 1.6;
+        }
+        h1, h2, h3 {
+            font-family: 'Playfair Display', serif;
+            color: var(--dark-green);
+        }
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+        /* --- Utility Classes --- */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        .btn {
+            display: inline-block;
+            padding: 12px 30px;
+            border-radius: 50px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: none;
+            font-size: 1rem;
+        }
+        .btn-primary {
+            background-color: var(--primary-green);
+            color: var(--white);
+            box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
+        }
+        .btn-primary:hover {
+            background-color: var(--dark-green);
+            transform: translateY(-2px);
+        }
+        .btn-outline {
+            border: 2px solid var(--primary-green);
+            color: var(--primary-green);
+            background: transparent;
+        }
+        .btn-outline:hover {
+            background-color: var(--primary-green);
+            color: var(--white);
+        }
+        /* --- Header --- */
+        header {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            box-shadow: 0 2px 20px rgba(0,0,0,0.05);
+        }
+        .nav-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 80px;
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary-green);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .anycoder-link {
+            font-size: 0.85rem;
+            color: var(--text-light);
+            border: 1px solid #eee;
+            padding: 5px 12px;
+            border-radius: 20px;
+            transition: 0.3s;
+        }
+        .anycoder-link:hover {
+            border-color: var(--primary-green);
+            color: var(--primary-green);
+        }
+        /* --- Hero Section --- */
+        .hero {
+            padding: 100px 0;
+            background: linear-gradient(135deg, var(--light-green) 0%, #fff 100%);
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+        .hero::before {
+            content: '\f06c'; /* FontAwesome leaf icon */
+            font-family: "Font Awesome 6 Free";
+            font-weight: 900;
+            position: absolute;
+            top: -20px;
+            left: -20px;
+            font-size: 200px;
+            color: rgba(46, 125, 50, 0.05);
+            z-index: 0;
+        }
+        .hero-content {
+            position: relative;
+            z-index: 1;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .hero h1 {
+            font-size: 3.5rem;
+            margin-bottom: 20px;
+            line-height: 1.2;
+        }
+        .hero p {
+            font-size: 1.2rem;
+            color: var(--text-light);
+            margin-bottom: 40px;
+        }
+        .hero-btns {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+        }
+        /* --- Features Section --- */
+        .features {
+            padding: 80px 0;
+            background: var(--white);
+        }
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 30px;
+            text-align: center;
+        }
+        .feature-card {
+            padding: 30px;
+            border-radius: var(--radius);
+            background: var(--white);
+            border: 1px solid #eee;
+            transition: 0.3s;
+        }
+        .feature-card:hover {
+            box-shadow: var(--shadow);
+            transform: translateY(-5px);
+            border-color: var(--primary-green);
+        }
+        .icon-box {
+            width: 60px;
+            height: 60px;
+            background: var(--light-green);
+            color: var(--primary-green);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            margin: 0 auto 20px;
+        }
+        /* --- Prompt Switcher Section (Interactive) --- */
+        .prompt-showcase {
+            padding: 80px 0;
+            background-color: #f4f4f4;
+        }
+        .section-title {
+            text-align: center;
+            margin-bottom: 50px;
+        }
+        .prompt-tabs {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-bottom: 30px;
+            flex-wrap: wrap;
+        }
+        .tab-btn {
+            padding: 10px 20px;
+            background: #ddd;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: 0.3s;
+        }
+        .tab-btn.active {
+            background: var(--primary-green);
+            color: white;
+        }
+        .prompt-display-card {
+            background: var(--white);
+            max-width: 700px;
+            margin: 0 auto;
+            padding: 50px;
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            text-align: center;
+            min-height: 300px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            border-top: 5px solid var(--primary-green);
+        }
+        .prompt-display-card h2 {
+            margin-bottom: 15px;
+            font-size: 2rem;
+        }
+        .prompt-display-card p {
+            margin-bottom: 30px;
+            color: var(--text-light);
+            font-size: 1.1rem;
+        }
+        /* --- CTA / Footer --- */
+        .cta-section {
+            background: var(--dark-green);
+            color: white;
+            padding: 60px 0;
+            text-align: center;
+        }
+        footer {
+            background: #111;
+            color: #777;
+            padding: 20px 0;
+            text-align: center;
+            font-size: 0.9rem;
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .hero h1 {
+                font-size: 2.5rem;
+            }
+            .hero-btns {
+                flex-direction: column;
+            }
+            .btn {
+                width: 100%;
+                text-align: center;
+            }
+            .prompt-display-card {
+                padding: 30px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <header>
+        <div class="container nav-container">
+            <div class="logo">
+                <i class="fa-solid fa-leaf"></i> SylhetMatch
+            </div>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+                Built with <strong>anycoder</strong>
+            </a>
+        </div>
+    </header>
+    <!-- Main Hero Section (Using Main Prompt) -->
+    <section class="hero">
+        <div class="container hero-content">
+            <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-btns">
+                <button class="btn btn-primary" onclick="alert('Profile Creation Started!')">Create Profile</button>
+                <button class="btn btn-outline" onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">Find Match</button>
+            </div>
+            <div style="margin-top: 30px; font-size: 0.9rem; color: var(--primary-green);">
+                <i class="fa-solid fa-check-circle"></i> Only Sylhet District profiles &nbsp;|&nbsp;
+                <i class="fa-solid fa-check-circle"></i> Verified & serious matches
+            </div>
+        </div>
+    </section>
+    <!-- Features Grid -->
+    <section id="features" class="features">
+        <div class="container">
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="icon-box"><i class="fa-solid fa-map-location-dot"></i></div>
+                    <h3>Local Focus</h3>
+                    <p>Exclusively for Sylhet District. We understand the tea garden culture and city life balance.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="icon-box"><i class="fa-solid fa-shield-heart"></i></div>
+                    <h3>Verified Profiles</h3>
+                    <p>Every profile is manually verified to ensure safety and serious marriage intentions.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="icon-box"><i class="fa-solid fa-hands-holding-child"></i></div>
+                    <h3>Family Oriented</h3>
+                    <p>Built for long-term commitment and family values, respecting traditions.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Interactive Prompt Switcher Section -->
+    <section class="prompt-showcase">
+        <div class="container">
+            <div class="section-title">
+                <h2>Choose Your Tone</h2>
+                <p>This application adapts to different marketing styles. Switch the tabs below to see how the main prompt changes.</p>
+            </div>
+            <div class="prompt-tabs">
+                <button class="tab-btn active" onclick="switchPrompt('main')">Main Version</button>
+                <button class="tab-btn" onclick="switchPrompt('short')">Short & Catchy</button>
+                <button class="tab-btn" onclick="switchPrompt('emotional')">Emotional</button>
+                <button class="tab-btn" onclick="switchPrompt('simple')">Simple English</button>
+            </div>
+            <div id="prompt-card" class="prompt-display-card">
+                <!-- Content injected via JS -->
+            </div>
+        </div>
+    </section>
+    <!-- Bottom CTA -->
+    <section class="cta-section">
+        <div class="container">
+            <h2>Your perfect match from Sylhet is waiting.</h2>
+            <p style="margin: 20px 0 30px; opacity: 0.9;">Join thousands of verified profiles today.</p>
+            <button class="btn" style="background: var(--accent-gold); color: var(--dark-green);">Join Now</button>
+        </div>
+    </section>
+    <footer>
+        <div class="container">
+            <p>&copy; 2023 Sylhet District Matchmaking. All Rights Reserved.</p>
+            <p style="margin-top: 5px; font-size: 0.8rem;">
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Powered by anycoder</a>
+            </p>
+        </div>
+    </footer>
+    <!-- JavaScript for Interactive Prompt Switching -->
+    <script>
+        const prompts = {
+            main: {
+                title: "Find Your Life Partner in Sylhet District",
+                text: "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. Only Sylhet profiles. Verified & serious matches.",
+                cta: "Create Profile",
+                cta2: "Find Match"
+            },
+            short: {
+                title: "Sylhet District Matchmaking — Where True Connections Begin",
+                text: "Meet your life partner from Sylhet, built on trust, culture, and compatibility. Join a community that understands your roots.",
+                cta: "Join Now",
+                cta2: "Learn More"
+            },
+            emotional: {
+                title: "Looking for a Life Partner from Sylhet?",
+                text: "You’re in the right place. Real people. Real intentions. Real matches — only from Sylhet District. Let us help you find your happiness.",
+                cta: "Get Started",
+                cta2: "View Stories"
+            },
+            simple: {
+                title: "Find a Life Partner from Sylhet District",
+                text: "This platform is only for people living in or connected to Sylhet District. Create your profile and find a serious marriage match.",
+                cta: "Join Today",
+                cta2: "How it Works"
+            }
+        };
+        function switchPrompt(type) {
+            const card = document.getElementById('prompt-card');
+            const data = prompts[type];
+            const buttons = document.querySelectorAll('.tab-btn');
+            // Update Buttons Active State
+            buttons.forEach(btn => btn.classList.remove('active'));
+            event.target.classList.add('active');
+            // Fade out effect
+            card.style.opacity = 0;
+            setTimeout(() => {
+                card.innerHTML = `
+                    <h2>${data.title}</h2>
+                    <p>${data.text}</p>
+                    <div style="display:flex; gap:10px; justify-content:center;">
+                        <button class="btn btn-primary">${data.cta}</button>
+                    </div>
+                `;
+                // Fade in effect
+                card.style.transition = "opacity 0.5s ease";
+                card.style.opacity = 1;
+            }, 200);
+        }
+        // Initialize with Main prompt
+        window.onload = function() {
+            const card = document.getElementById('prompt-card');
+            card.innerHTML = `
+                <h2>${prompts.main.title}</h2>
+                <p>${prompts.main.text}</p>
+                <div style="display:flex; gap:10px; justify-content:center;">
+                    <button class="btn btn-primary">${prompts.main.cta}</button>
+                </div>
+            `;
+        };
+    </script>
+</body>
+</html>