Skip to content

Commit 8c5eead

Browse files
darjeelingdarjeeling
committed
init for testing
1 parent 1827ba6 commit 8c5eead

File tree

1 file changed

+385
-0
lines changed

1 file changed

+385
-0
lines changed

‎index.html‎

Lines changed: 385 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,385 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Python Asia</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
9+
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.14.7/cdn.min.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.4/marked.min.js"></script>
12+
<style>
13+
/* Add styles for markdown content */
14+
.conduct-content {
15+
line-height: 1.6;
16+
}
17+
18+
.conduct-content h1,
19+
.conduct-content h2,
20+
.conduct-content h3 {
21+
margin-top: 1.5rem;
22+
margin-bottom: 1rem;
23+
}
24+
25+
.conduct-content p {
26+
margin-bottom: 1rem;
27+
}
28+
29+
.conduct-content ul,
30+
.conduct-content ol {
31+
margin-bottom: 1rem;
32+
padding-left: 2rem;
33+
}
34+
35+
.conduct-content li {
36+
margin-bottom: 0.5rem;
37+
}
38+
39+
.conduct-content a {
40+
color: var(--python-blue);
41+
text-decoration: none;
42+
}
43+
44+
.conduct-content a:hover {
45+
text-decoration: underline;
46+
}
47+
</style>
48+
<style>
49+
:root {
50+
--python-blue: #306998;
51+
--python-yellow: #FFD43B;
52+
}
53+
54+
.nav-link {
55+
color: var(--python-blue) !important;
56+
transition: all 0.3s ease;
57+
position: relative;
58+
}
59+
60+
.nav-link:hover {
61+
color: var(--python-yellow) !important;
62+
transform: translateY(-2px);
63+
}
64+
65+
.nav-link.active {
66+
color: var(--python-yellow) !important;
67+
font-weight: bold;
68+
}
69+
70+
.card {
71+
transition: all 0.3s ease;
72+
}
73+
74+
.card:hover {
75+
transform: translateY(-5px);
76+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
77+
}
78+
79+
.toggle-button {
80+
background-color: var(--python-blue);
81+
color: white;
82+
border: none;
83+
padding: 0.5rem 1rem;
84+
border-radius: 4px;
85+
transition: all 0.3s ease;
86+
}
87+
88+
.toggle-button:hover {
89+
background-color: var(--python-yellow);
90+
color: var(--python-blue);
91+
}
92+
93+
.conduct-item:hover {
94+
background-color: rgba(48, 105, 152, 0.1);
95+
border-radius: 4px;
96+
}
97+
98+
.sponsor-footer {
99+
background-color: rgba(48, 105, 152, 0.05);
100+
padding: 2rem 0;
101+
}
102+
103+
@media (max-width: 768px) {
104+
.navbar-brand img {
105+
height: 40px;
106+
}
107+
}
108+
</style>
109+
</head>
110+
111+
<body x-data="setupData()">
112+
<!-- Navigation -->
113+
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
114+
<div class="container">
115+
<a class="navbar-brand" href="#">
116+
<img src="https://pycon.asia/images/logo.png" , alt="Pycon APAC Logo" height="50">
117+
</a>
118+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
119+
<span class="navbar-toggler-icon"></span>
120+
</button>
121+
<div class="collapse navbar-collapse" id="navbarNav">
122+
<ul class="navbar-nav ms-auto">
123+
<template x-for="section in ['about', 'community', 'sponsors', 'people', 'conduct', 'contact']">
124+
<li class="nav-item">
125+
<a class="nav-link px-3" :class="{ 'active': activeSection === section }" href="#"
126+
@click.prevent="activeSection = section"
127+
x-text="section.charAt(0).toUpperCase() + section.slice(1)"></a>
128+
</li>
129+
</template>
130+
</ul>
131+
</div>
132+
</div>
133+
</nav>
134+
135+
<!-- Main Content -->
136+
<main class="container mt-5 pt-5">
137+
<!-- About Section -->
138+
<section x-show="activeSection === 'about'" x-cloak>
139+
<h2 class="mb-4" x-text="content.about.title"></h2>
140+
<p class="lead" x-text="content.about.text"></p>
141+
</section>
142+
143+
<!-- Community Section -->
144+
<section x-show="activeSection === 'community'" x-cloak>
145+
<h2 class="mb-4">Python Communities in Asia</h2>
146+
<div class="row">
147+
<template x-for="community in content.community.current">
148+
<div class="col-md-4 mb-4">
149+
<div class="card">
150+
<div class="card-body">
151+
<h5 class="card-title" x-text="community.name"></h5>
152+
<a :href="community.url" class="btn btn-primary" x-text="'Visit Website'"></a>
153+
</div>
154+
</div>
155+
</div>
156+
</template>
157+
</div>
158+
<button class="toggle-button mt-4" @click="showPastEvents = !showPastEvents">
159+
<span x-text="showPastEvents ? 'Hide Past Events' : 'Show Past Events'"></span>
160+
</button>
161+
<div x-show="showPastEvents" class="mt-4">
162+
<h3>Past Events</h3>
163+
<div class="row">
164+
<template x-for="event in content.community.past">
165+
<div class="col-md-4 mb-4">
166+
<div class="card">
167+
<div class="card-body">
168+
<h5 class="card-title" x-text="event.name"></h5>
169+
<p class="card-text" x-text="'Year: ' + event.year"></p>
170+
<a :href="event.url" class="btn btn-secondary">View Archive</a>
171+
</div>
172+
</div>
173+
</div>
174+
</template>
175+
</div>
176+
</div>
177+
</section>
178+
<!-- Sponsors Section -->
179+
<section x-show="activeSection === 'sponsors'" x-cloak>
180+
<h2 class="mb-4">Current Sponsors</h2>
181+
<div class="row">
182+
<template x-for="sponsor in content.sponsors.current">
183+
<div class="col-md-4 mb-4">
184+
<div class="card">
185+
<img :src="sponsor.logo" :alt="sponsor.name" class="card-img-top">
186+
<div class="card-body">
187+
<h5 class="card-title" x-text="sponsor.name"></h5>
188+
</div>
189+
</div>
190+
</div>
191+
</template>
192+
</div>
193+
<template x-if="content.sponsors.past.length > 0">
194+
<button class="toggle-button mt-4" @click="showPastSponsors = !showPastSponsors">
195+
<span x-text="showPastSponsors ? 'Hide Past Sponsors' : 'Show Past Sponsors'"></span>
196+
</button>
197+
</template>
198+
<div x-show="showPastSponsors" class="mt-4">
199+
<h3>Past Sponsors</h3>
200+
<div class="row">
201+
<template x-for="sponsor in content.sponsors.past">
202+
<div class="col-md-4 mb-4">
203+
<div class="card">
204+
<img :src="sponsor.logo" :alt="sponsor.name" class="card-img-top">
205+
<div class="card-body">
206+
<h5 class="card-title" x-text="sponsor.name"></h5>
207+
<p class="card-text" x-text="'Year: ' + sponsor.year"></p>
208+
</div>
209+
</div>
210+
</div>
211+
</template>
212+
</div>
213+
</div>
214+
</section>
215+
216+
<!-- people Section -->
217+
<section x-show="activeSection === 'people'" x-cloak>
218+
<h2 class="mb-4">Board of Directors</h2>
219+
<div class="row">
220+
<template x-for="director in content.directors.current">
221+
<div class="col-md-4 mb-4">
222+
<div class="card">
223+
<div class="card-body">
224+
<h5 class="card-title" x-text="director.name"></h5>
225+
<p class="card-text" x-text="director.role"></p>
226+
<p class="card-text"><small class="text-muted" x-text="director.country"></small></p>
227+
</div>
228+
</div>
229+
</div>
230+
</template>
231+
</div>
232+
<template x-if="content.directors.past.length > 0">
233+
<button class="toggle-button mt-4" @click="showPastMembers = !showPastMembers">
234+
<span x-text="showPastMembers ? 'Hide Past Members' : 'Show Past Members'"></span>
235+
</button>
236+
</template>
237+
<div x-show="showPastMembers" class="mt-4">
238+
<h3>Past Members</h3>
239+
<div class="row">
240+
<template x-for="director in content.directors.past">
241+
<div class="col-md-4 mb-4">
242+
<div class="card">
243+
<div class="card-body">
244+
<h5 class="card-title" x-text="director.name"></h5>
245+
<p class="card-text" x-text="director.role"></p>
246+
<p class="card-text"><small class="text-muted" x-text="director.country"></small>
247+
</p>
248+
</div>
249+
</div>
250+
</div>
251+
</template>
252+
</div>
253+
</div>
254+
</section>
255+
256+
<!-- Code of Conduct Section -->
257+
<section x-show="activeSection === 'conduct'" x-cloak x-init="async function() {
258+
if (!content.conduct.content) {
259+
try {
260+
const response = await fetch(content.conduct.url);
261+
if (!response.ok) throw new Error('Failed to fetch');
262+
content.conduct.content = await response.text();
263+
} catch (error) {
264+
console.error('Error loading Code of Conduct:', error);
265+
content.conduct.content = 'Failed to load Code of Conduct. Please try again later.';
266+
}
267+
}
268+
}">
269+
<h2 class="mb-4">Code of Conduct</h2>
270+
<div class="card">
271+
<div class="card-body conduct-content"
272+
x-html="content.conduct.content ? marked.parse(content.conduct.content) : 'Loading...'">
273+
</div>
274+
</div>
275+
</section>
276+
277+
<!-- Contact Section -->
278+
<section x-show="activeSection === 'contact'" x-cloak>
279+
<h2 class="mb-4">Contact Us</h2>
280+
<div class="card">
281+
<div class="card-body">
282+
<p class="lead">Please contact us via email:</p>
283+
<a :href="'mailto:' + content.contact.email" class="btn btn-primary">
284+
<span x-text="content.contact.email"></span>
285+
</a>
286+
</div>
287+
</div>
288+
</section>
289+
</main>
290+
291+
292+
293+
</main>
294+
295+
<!-- Sponsors Footer -->
296+
<footer class="sponsor-footer mt-5" x-show="activeSection !== 'sponsors'">
297+
<div class="container">
298+
<h4 class="text-center mb-4">Our Sponsors</h4>
299+
<div class="row justify-content-center">
300+
<template x-for="sponsor in content.sponsors.current">
301+
<div class="col-md-3 col-6 text-center mb-4">
302+
<p class="fw-bold mb-2" x-text="sponsor.name"></p>
303+
<template x-if="sponsor.url">
304+
<a :href="sponsor.url" target="_blank" class="text-decoration-none">
305+
<img :src="sponsor.logo" :alt="sponsor.name" class="img-fluid"
306+
style="max-height: 60px; transition: transform 0.3s ease;"
307+
onmouseover="this.style.transform='scale(1.05)'"
308+
onmouseout="this.style.transform='scale(1)'">
309+
</a>
310+
</template>
311+
<template x-if="!sponsor.url">
312+
<img :src="sponsor.logo" :alt="sponsor.name" class="img-fluid" style="max-height: 60px;">
313+
</template>
314+
</div>
315+
</template>
316+
</div>
317+
<h4 class="text-center mb-4">looking for sponsors!</h4>
318+
</div>
319+
</footer>
320+
321+
<!-- Setup Data Function -->
322+
<script>
323+
function setupData() {
324+
return {
325+
activeSection: 'about',
326+
showPastEvents: false,
327+
showPastSponsors: false,
328+
showPastMembers: false,
329+
content: {
330+
about: {
331+
title: 'About Python Asia',
332+
text: `Python Asia is a community-driven organization that promotes Python programming language across Asia.
333+
We organize conferences, workshops, and other events to foster the growth of Python communities in the region.`
334+
},
335+
community: {
336+
current: [
337+
{ name: 'PyCon APAC', url: 'https://pycon.asia' },
338+
{ name: 'PyCon Korea', url: 'https://pycon.kr' },
339+
{ name: 'PyCon Japan', url: 'https://pycon.jp' }
340+
],
341+
past: [
342+
{ year: '2023', name: 'PyCon APAC 2023', url: 'https://2023.pycon.asia' },
343+
{ year: '2022', name: 'PyCon APAC 2022', url: 'https://2022.pycon.asia' }
344+
]
345+
},
346+
sponsors: {
347+
current: [
348+
{
349+
name: 'Sponsor 1',
350+
logo: 'logo 1',
351+
url: '',
352+
},
353+
{
354+
name: 'sponsor 2',
355+
logo: 'logo 2',
356+
url: '',
357+
}
358+
],
359+
past: [
360+
{ year: '2023', name: 'Example Corp', logo: '/api/placeholder/200/100' }
361+
]
362+
},
363+
directors: {
364+
current: [
365+
{ name: 'Jane Doe', role: 'Chair', country: 'Singapore' },
366+
{ name: 'John Smith', role: 'Vice Chair', country: 'Korea' }
367+
],
368+
past: [
369+
{ name: 'Alice Johnson', role: 'Chair 2022-2023', country: 'Japan' }
370+
]
371+
},
372+
conduct: {
373+
url: "https://raw.githubusercontent.com/PythonAsiaOrganization/public-docs/refs/heads/main/CODE_OF_CONDUCT.md",
374+
content: null,
375+
},
376+
contact: {
377+
email: '[email protected]'
378+
}
379+
}
380+
};
381+
}
382+
</script>
383+
</body>
384+
385+
</html>

0 commit comments

Comments
 (0)