137 lines
No EOL
4.6 KiB
HTML
137 lines
No EOL
4.6 KiB
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: 1.5rem;
|
|
}
|
|
|
|
.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 }} |