wichitabitcoiners/public/index.html

330 lines
No EOL
10 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Hugo 0.152.2"><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wichita Bitcoiners</title>
<meta name="description" content="Wichita Bitcoiners meetup group - Bitcoin education and community in Wichita, Kansas">
<link rel="icon" href="/favicon.ico">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #fff;
background-color: #000;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background: #111;
box-shadow: 0 2px 5px rgba(255,255,255,0.1);
padding: 1rem 0;
}
.header-content {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.logo {
max-width: 60px;
height: auto;
}
h1 {
color: #f7931a;
font-size: 2.5rem;
font-weight: 700;
}
.hero {
background: linear-gradient(135deg, #f7931a 0%, #ff9500 100%);
color: white;
padding: 4rem 0;
text-align: center;
}
.hero h2 {
font-size: 3rem;
margin-bottom: 1rem;
font-weight: 700;
}
.hero p {
font-size: 1.25rem;
max-width: 600px;
margin: 0 auto 2rem;
opacity: 0.95;
}
.btn {
display: inline-block;
background: white;
color: #f7931a;
padding: 1rem 2rem;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.content {
padding: 4rem 0;
}
.section {
margin-bottom: 3rem;
}
.section h3 {
color: #f7931a;
font-size: 2rem;
margin-bottom: 1rem;
text-align: center;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.card {
background: #111;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(255,255,255,0.1);
text-align: center;
}
.card h4 {
color: #f7931a;
margin-bottom: 1rem;
font-size: 1.25rem;
}
footer {
background: #111;
color: white;
text-align: center;
padding: 2rem 0;
}
@media (max-width: 768px) {
.hero h2 {
font-size: 2rem;
}
h1 {
font-size: 2rem;
}
.header-content {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<img src="/Wichita_Bitcoiners_Flag.png" alt="Wichita Bitcoiners Flag" class="logo">
<h1>Wichita Bitcoiners</h1>
<img src="/Wichita_Bitcoiners_Flag.png" alt="Wichita Bitcoiners Flag" class="logo">
</div>
</div>
</header>
<section class="hero">
<div class="container">
<h2>Building Bitcoin Community in Wichita</h2>
</div>
</section>
<main class="content">
<div class="container">
<div class="content-wrapper">
<p>We&rsquo;re a grassroots group dedicated to Bitcoin education, adoption, and community building in south-central Kansas. Whether you&rsquo;re an OG or just starting to learn about Bitcoin, you&rsquo;re more than welcome to join us. We love to talk about Bitcoin!</p>
<h2 id="meetup-info">What We Do</h2>
<h3 id="-educational-sessions">📚 Educational Sessions</h3>
<p>Learn about Bitcoin technology, wallet security, mining, and best practices from experienced community members.</p>
<h3 id="-meetups">🤝 Meetups</h3>
<p>Join us for informal gatherings to discuss Bitcoin news, share experiences, and network with local enthusiasts.</p>
<h3 id="-bitcoin-adoption">🎯 Bitcoin Adoption</h3>
<p>Help promote Bitcoin awareness and adoption in Wichita through community outreach and merchant education.</p>
<h2 id="get-involved">Get Involved</h2>
<h3 id="-meetups-1">📅 Meetups</h3>
<p><strong>Location:</strong> Various locations around Wichita
<strong>Date/Time:</strong> TBD
Sign up for our mailing list for notifications about our next event!</p>
<h3 id="-learn-more">🎓 Learn More</h3>
<p>Resources for beginners and advanced users alike. No prior Bitcoin knowledge required - curiosity is enough!</p>
<h2 id="we-want-to-hear-from-you">We Want To Hear From You!</h2>
<h3 id="-questionnaire">📋 Questionnaire</h3>
<p>We&rsquo;re building out a schedule of events and would love to get your input. You can join our mailing list here as well.</p>
<p><a href="https://docs.google.com/forms/d/e/1FAIpQLSdgbyNePv_2NM_m4fjeWYATqLNyDgz5hRhmlzXTrUhWvR-oQw/viewform?usp=header">Take Questionnaire</a></p>
</div>
<style>
.content-wrapper h2 {
color: #f7931a;
font-size: 2rem;
margin: 2rem 0 1rem;
text-align: center;
}
.content-wrapper .card h3 {
color: #f7931a;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.content-wrapper .card p {
font-size: 1.1rem;
color: #ccc;
text-align: center;
margin-bottom: 0;
}
.content-wrapper .card strong {
color: #fff;
}
.content-wrapper .card {
background: #111;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(255,255,255,0.1);
text-align: center;
margin: 1rem;
}
.content-wrapper .card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.content-wrapper .card-grid .card {
margin: 0;
}
.content-wrapper .card.about {
max-width: 800px;
margin: 2rem auto;
}
.content-wrapper .btn {
display: inline-block;
background: white;
color: #f7931a;
padding: 1rem 2rem;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
margin-top: 1rem;
}
.content-wrapper .btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const content = document.querySelector('.content-wrapper');
const html = content.innerHTML;
let newHtml = '';
const firstP = html.match(/<p[^>]*>(.*?)<\/p>/);
if (firstP) {
newHtml += '<div class="card about">' + firstP[0] + '</div>';
}
const meetupInfo = html.match(/<h2[^>]*id="meetup-info"[^>]*>.*?<\/h2>(.*?)(?=<h2|$)/s);
if (meetupInfo) {
newHtml += '<h2 id="meetup-info">What We Do</h2>';
newHtml += '<div class="card-grid">';
const cards = meetupInfo[1].match(/<h3[^>]*>.*?<\/h3>\s*<p[^>]*>.*?<\/p>/gs);
if (cards) {
cards.forEach(card => {
newHtml += '<div class="card">' + card + '</div>';
});
}
newHtml += '</div>';
}
const getInvolved = html.match(/<h2[^>]*id="get-involved"[^>]*>.*?<\/h2>(.*?)(?=<h2|$)/s);
if (getInvolved) {
newHtml += '<h2 id="get-involved">Get Involved</h2>';
newHtml += '<div class="card-grid">';
const cards = getInvolved[1].match(/<h3[^>]*>.*?<\/h3>\s*<p[^>]*>.*?<\/p>/gs);
if (cards) {
cards.forEach(card => {
newHtml += '<div class="card">' + card + '</div>';
});
}
newHtml += '</div>';
}
const questionnaire = html.match(/<h2[^>]*id="we-want-to-hear-from-you"[^>]*>.*?<\/h2>(.*?)(?=<\/div>|$)/s);
if (questionnaire) {
newHtml += '<h2 id="we-want-to-hear-from-you">We Want To Hear From You!</h2>';
const card = questionnaire[1].match(/<h3[^>]*>.*?<\/h3>\s*<p[^>]*>.*?<\/p>(\s*<p[^>]*>.*?<\/p>)?/s);
if (card) {
let cardHtml = card[0];
cardHtml = cardHtml.replace(/<a[^>]*href="([^"]*)"[^>]*>([^<]*)<\/a>/g, '<a href="$1" class="btn">$2</a>');
newHtml += '<div class="card">' + cardHtml + '</div>';
}
}
content.innerHTML = newHtml;
});
</script>
</div>
</main>
<footer>
<div class="container">
<p style="margin-top: 1rem; opacity: 0.8;">Questions? Contact us at info@wichitabitcoiners.com</p>
</div>
</footer>
</body>
</html>