Hugging Face's logo

Spaces:
Mubin01
/
anycoder-bcb8048c
Running

App Files Community
anycoder-bcb8048c / index.html
Mubin01's picture
Mubin01
Upload folder using huggingface_hub
d4403f9 verified
raw
history blame contribute delete
15.5 kB
 <!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>