wichitabitcoiners/layouts/index.html

{{ define "main" }}
    <div class="content-wrapper">
        {{ .Content }}
    </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;
        }
        
        /* Card grid layout for sections */
        .content-wrapper .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }
        
        /* Individual card in grid */
        .content-wrapper .card-grid .card {
            margin: 0;
        }
        
        /* About card - full width */
        .content-wrapper .card.about {
            max-width: 800px;
            margin: 2rem auto;
        }
        
        /* Next Meetup card - same size as What We Do cards */
        .content-wrapper .card#next-meetup,
        .content-wrapper h2[id="next-meetup"] + .card {
            max-width: 700px;
            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;
        
        // Transform markdown-rendered content into card structure
        let newHtml = '';
        
        // Get first paragraph as About card
        const firstP = html.match(/<p[^>]*>(.*?)<\/p>/);
        if (firstP) {
            newHtml += '<div class="card about">' + firstP[0] + '</div>';
        }
        
        // Process What We Do section
        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>';
        }
        
        // Process Next Meetup section
        const nextMeetup = html.match(/<h2[^>]*id="-next-meetup"[^>]*>.*?<\/h2>(.*?)(?=<hr|<h3|$)/s);
        if (nextMeetup) {
            newHtml += '<h2 id="next-meetup">📅 Next Meetup!</h2>';
            let meetupContent = nextMeetup[1].trim();
            // Convert links to buttons with new tab behavior
            meetupContent = meetupContent.replace(/<a[^>]*href="([^"]*)"[^>]*>([^<]*)<\/a>/g, '<a href="$1" class="btn" target="_blank" rel="noopener noreferrer">$2</a>');
            newHtml += '<div class="card">' + meetupContent + '</div>';
        }
        
        // Process Questionnaire section  
        const questionnaire = html.match(/<h3[^>]*id="-questionnaire"[^>]*>.*?<\/h3>(.*?)(?=<\/div>|$)/s);
        if (questionnaire) {
            newHtml += '<div class="card">';
            newHtml += '<h3 id="questionnaire">📋 Questionnaire</h3>';
            let questionnaireContent = questionnaire[1].trim();
            // Convert questionnaire link to button with new tab behavior
            questionnaireContent = questionnaireContent.replace(/<a[^>]*href="([^"]*)"[^>]*>([^<]*)<\/a>/g, '<a href="$1" class="btn" target="_blank" rel="noopener noreferrer">$2</a>');
            newHtml += questionnaireContent;
            newHtml += '</div>';
        }
        
        content.innerHTML = newHtml;
    });
    </script>
{{ end }}