https://sabbathsl.com/rounds

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Rounds - Sabbath Event</title>
8    <link rel="icon" type="image/png" href="img/logopage.png">
9    <link rel="stylesheet" href="style.css">
10    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
11</head>
12
13<body>
14    <!-- Banner Section -->
15    <section class="banner-section">
16        <video class="banner-video" autoplay loop muted playsinline>
17            <source src="img/sabbathcropped (online-video-cutter.com)-2.mp4" type="video/mp4">
18        </video>
19        <img src="img/sabbath_logo.png" alt="Sabbath Banner" class="banner-logo">
20    </section>
21
22    <nav class="navbar">
23        <div class="nav-brand">
24            <img src="img/sabbath_logo.png" alt="Sabbath Logo" class="logo">
25        </div>
26        <div class="nav-links">
27            <a href='/'>HOME</a>
28            <a href='/apply'>APPLY</a>
29            <a href='/rounds'>ROUNDS</a>
30            <a href='/giveaway'>GIVEAWAY</a>
31            <a class='admin-link' href='/admin/login'><i class="fas fa-user-shield"></i></a>
32        </div>
33        <div class="hamburger">
34            <span></span>
35            <span></span>
36            <span></span>
37        </div>
38    </nav>
39
40    <section class="rounds">
41        <div class="container">
42            <h2>Rounds</h2>
43            <div id="rounds-container" class="rounds-container">
44                <!-- Rounds will be loaded here dynamically -->
45                <div class="loading-spinner" style="text-align: center; color: white;">Loading rounds...</div>
46            </div>
47
48            <!-- Template for a round card (hidden) -->
49            <template id="round-card-template">
50                <a href="#" class="round-card">
51                    <div class="round-image">
52                        <img src="" alt="Round Image">
53                    </div>
54                    <div class="round-content">
55                        <h3></h3>
56                        <p class="participants"></p>
57                        <div class="round-dates">
58                            <span></span>
59                        </div>
60                    </div>
61                </a>
62            </template>
63        </div>
64    </section>
65
66    <footer class="footer">
67        <div class="container">
68            <div class="footer-content">
69                <div class="social-links">
70                    <a href="https://www.flickr.com/photos/192849221@N06/" target="_blank" class="social-link">
71                        <i class="fab fa-flickr"></i>
72                        <span>Flickr</span>
73                    </a>
74                    <a href="https://www.instagram.com/sabbathevent.sl/" target="_blank" class="social-link">
75                        <i class="fab fa-instagram"></i>
76                        <span>Instagram</span>
77                    </a>
78                    <a href="https://www.facebook.com/groups/3425981114290586" target="_blank" class="social-link">
79                        <i class="fab fa-facebook"></i>
80                        <span>Facebook</span>
81                    </a>
82                </div>
83                <div class="footer-bottom">
84                    <p>&copy; 2024 Sabbath Events. All rights reserved.</p>
85                </div>
86            </div>
87        </div>
88    </footer>
89
90    

90<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>

90
91    

91<script type="module">
92        import { SUPABASE_URL, SUPABASE_KEY } from './js/config.js';
93
94        const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
95        const roundsContainer = document.getElementById('rounds-container');
96        const template = document.getElementById('round-card-template');
97
98        async function loadRounds() {
99            try {
100                const { data: rounds, error } = await supabase
101                    .from('rounds')
102                    .select('*')
103                    .order('created_at', { ascending: false });
104
105                if (error) throw error;
106
107                roundsContainer.innerHTML = ''; // Clear loading spinner
108
109                if (rounds.length === 0) {
110                    roundsContainer.innerHTML = '<p style="color: white; text-align: center;">No rounds found.</p>';
111                    return;
112                }
113
114                rounds.forEach(round => {
115                    const clone = template.content.cloneNode(true);
116                    const card = clone.querySelector('.round-card');
117
118                    // Link to a generic round page or specific one if we had it. 
119                    // For now, linking to # or a detail page we might create later.
120                    // User said: "configuraremos otro apartado en el que podremos entrar en cada Round"
121                    // I'll link to a detail page passing the ID, e.g., round-detail.html?id=...
122                    // But for now, let's keep it simple or link to the existing round1.html as placeholder?
123                    // User said "replicating what each section has".
124                    // I'll link to `round-detail.html?id=${round.id}` (which I haven't created yet, but is good practice)
125                    // Or just `#` for now.
126                    card.href = `round-detail.html?id=${round.id}`;
127
128                    const img = clone.querySelector('img');
129                    img.src = round.image_url || 'img/eventest.jpg'; // Fallback image
130                    img.alt = round.name;
131
132                    clone.querySelector('h3').textContent = round.name;
133                    clone.querySelector('.participants').textContent = round.participants;
134                    clone.querySelector('.round-dates span').textContent = round.dates;
135
136                    roundsContainer.appendChild(clone);
137                });
138            } catch (error) {
139                console.error('Error loading rounds:', error);
140                roundsContainer.innerHTML = '<p style="color: red; text-align: center;">Error loading rounds.</p>';
141            }
142        }
143
144        loadRounds();
145    </script>

145
146    

146<script src="app.js"></script>

146
147</body>
148
149</html>