Hugging Face's logo

Spaces:
web3district
/
sbcxweb3dstrict
Running

App Files Community
web3district commited on
Commit
931e634
·
verified ·
1 Parent(s): 9c16cc7

make the typography same colours then GOALSS for 2025. And just leave the text :Bridging Web3, AI and Gaming - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +58 -92
index.html CHANGED
@@ -175,70 +175,6 @@
175
  </style>
176
  </head>
177
  <body class="min-h-screen">
178
- <!-- Navigation Menu -->
179
- <nav class="sticky top-0 z-50 bg-gray-900/90 backdrop-blur-sm border-b border-purple-900/50 shadow-lg">
180
- <div class="container mx-auto px-4">
181
- <!-- Mobile Menu Button -->
182
- <div class="md:hidden flex justify-between items-center py-3">
183
- <button id="mobileMenuButton" class="text-white focus:outline-none">
184
- <i class="ph ph-list text-2xl"></i>
185
- </button>
186
- </div>
187
-
188
- <!-- Desktop Menu -->
189
- <div class="hidden md:flex justify-center overflow-x-auto scrollbar-hidden py-3 space-x-4">
190
- <button onclick="scrollToSection('speakers')" class="whitespace-nowrap px-4 py-2 rounded-full bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
191
- Speakers
192
- </button>
193
- <button onclick="scrollToSection('academy')" class="whitespace-nowrap px-4 py-2 rounded-full bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
194
- Academy Topics
195
- </button>
196
- <button onclick="scrollToSection('deliverables')" class="whitespace-nowrap px-4 py-2 rounded-full bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
197
- Deliverables
198
- </button>
199
- <button onclick="scrollToSection('partners')" class="whitespace-nowrap px-4 py-2 rounded-full bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
200
- Partners
201
- </button>
202
- <button onclick="scrollToSection('media')" class="whitespace-nowrap px-4 py-2 rounded-full bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
203
- Media Network
204
- </button>
205
- <button onclick="scrollToSection('strategy')" class="whitespace-nowrap px-4 py-2 rounded-full bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
206
- Strategy
207
- </button>
208
- <button onclick="scrollToSection('roadmap')" class="whitespace-nowrap px-4 py-2 rounded-full bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
209
- Roadmap
210
- </button>
211
- </div>
212
-
213
- <!-- Mobile Menu (hidden by default) -->
214
- <div id="mobileMenu" class="hidden md:hidden bg-gray-900/95 backdrop-blur-lg w-full py-2">
215
- <div class="flex flex-col space-y-2 px-4">
216
- <button onclick="scrollToSection('speakers')" class="w-full text-left px-4 py-3 rounded-lg bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
217
- Speakers
218
- </button>
219
- <button onclick="scrollToSection('academy')" class="w-full text-left px-4 py-3 rounded-lg bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
220
- Academy Topics
221
- </button>
222
- <button onclick="scrollToSection('deliverables')" class="w-full text-left px-4 py-3 rounded-lg bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
223
- Deliverables
224
- </button>
225
- <button onclick="scrollToSection('partners')" class="w-full text-left px-4 py-3 rounded-lg bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
226
- Partners
227
- </button>
228
- <button onclick="scrollToSection('media')" class="w-full text-left px-4 py-3 rounded-lg bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
229
- Media Network
230
- </button>
231
- <button onclick="scrollToSection('strategy')" class="w-full text-left px-4 py-3 rounded-lg bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
232
- Strategy
233
- </button>
234
- <button onclick="scrollToSection('roadmap')" class="w-full text-left px-4 py-3 rounded-lg bg-gradient-to-r from-purple-900/50 to-fuchsia-900/50 hover:from-purple-700 hover:to-fuchsia-700 text-white font-medium transition-all">
235
- Roadmap
236
- </button>
237
- </div>
238
- </div>
239
- </div>
240
- </nav>
241
-
242
  <!-- Hero Section -->
243
  <section class="min-h-screen flex items-center relative">
244
  <!-- Video Background -->
@@ -262,22 +198,16 @@
262
  </div>
263
  </div>
264
 
265
- <div class="flex justify-center mb-6">
266
- <div class="bg-gradient-to-r from-purple-start to-fuchsia-end p-1 rounded-full">
267
- <div class="bg-gray-900 rounded-full px-4 py-1 text-sm font-semibold">
268
- Partnership Campaign: May-October 2025
269
- </div>
270
- </div>
271
- </div>
272
  <h1 class="text-5xl md:text-7xl font-extrabold mb-8 text-3d">
273
  <span class="text-white">SBC I SUMMIT</span>
274
  <span class="gradient-text mx-2">×</span>
275
  <span class="text-white">Web3District</span>
276
  </h1>
277
- <div class="bg-black/30 backdrop-blur-sm rounded-lg p-4 mb-8 max-w-3xl mx-auto">
278
- <p class="text-xl md:text-2xl font-light text-white mb-0">
279
- Connecting Lisbon's Web3 culture to SBC Summit through a gamified Quest experience
280
- </p>
 
281
  </div>
282
 
283
  <div class="speaker-card group relative max-w-md mx-auto mb-4">
@@ -342,7 +272,7 @@
342
  </section>
343
 
344
  <!-- Speakers Section -->
345
- <section id="speakers" class="py-20 relative overflow-hidden bg-gradient-to-br from-pink-500/20 via-purple-500/20 to-fuchsia-500/20">
346
  <div class="container mx-auto px-4 relative z-10">
347
  <div class="text-center mb-16">
348
  <h2 class="text-3xl md:text-4xl font-bold mb-4">
@@ -439,7 +369,7 @@
439
  </section>
440
 
441
  <!-- Academy Topics Section -->
442
- <section id="academy" class="py-20 relative overflow-hidden bg-gray-900">
443
  <div class="container mx-auto px-4 relative z-10">
444
  <div class="text-center mb-16">
445
  <h2 class="text-3xl md:text-4xl font-bold mb-4">
@@ -483,18 +413,12 @@
483
  <p class="text-purple-200">Prototype an off-chain ML service ingesting on-chain data, flagging anomalies and triggering automated freezes or alerts.</p>
484
  </div>
485
 
486
- <!-- View More Button -->
487
- <div class="md:col-span-3 text-center mt-8">
488
- <a href="https://docs.google.com/spreadsheets/d/1C16Bn_0BY-8lg8dM_F1LCzWbko1dzkbQGYkbfaXH8ZQ/edit?gid=691593670#gid=691593670" target="_blank" class="bg-gradient-to-r from-purple-start to-fuchsia-end hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105 inline-block">
489
- View All Academy Topics
490
- </a>
491
- </div>
492
  </div>
493
  </div>
494
  </section>
495
 
496
- <!-- Deliverables Section -->
497
- <section id="deliverables" class="py-20 relative overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-fuchsia-900">
498
  <div class="container mx-auto px-4 relative z-10">
499
  <div class="text-center mb-16">
500
  <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">
@@ -623,7 +547,7 @@
623
  </section>
624
 
625
  <!-- Potential Brands Section -->
626
- <section id="partners" class="py-20 relative overflow-hidden bg-gray-900">
627
  <div class="container mx-auto px-4 relative z-10">
628
  <div class="text-center mb-16">
629
  <h2 class="text-3xl md:text-4xl font-bold mb-4">
@@ -642,7 +566,7 @@
642
  </section>
643
 
644
  <!-- Media Outlets Section -->
645
- <section id="media" class="py-20 relative overflow-hidden bg-gradient-to-br from-purple-900/20 to-fuchsia-900/20">
646
  <div class="container mx-auto px-4 relative z-10">
647
  <div class="text-center mb-16">
648
  <h2 class="text-3xl md:text-4xl font-bold mb-4">
@@ -661,7 +585,7 @@
661
  </section>
662
 
663
  <!-- Strategy Summary -->
664
- <section id="strategy" class="py-20 relative overflow-hidden bg-gradient-to-br from-blue-600/20 via-indigo-600/20 to-purple-600/20">
665
  <div class="container mx-auto px-4 relative z-10">
666
  <div class="text-center mb-16">
667
  <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">
@@ -734,8 +658,8 @@
734
  </div>
735
  </section>
736
 
737
- <!-- Roadmap Section -->
738
- <section id="roadmap" class="py-20 relative bg-white">
739
  <style>
740
  .timeline-item .relative {
741
  opacity: 1 !important;
@@ -1031,14 +955,19 @@
1031
  <!-- Footer -->
1032
  <footer class="bg-gray-900 border-t border-purple-900 py-10">
1033
  <div class="container mx-auto px-4">
1034
- <div class="flex flex-col md:flex-row justify-between items-center">
1035
- <div class="mb-6 md:mb-0">
1036
  <div class="flex items-center">
1037
  <div class="bg-gradient-to-r from-purple-start to-fuchsia-end w-8 h-8 rounded-full mr-3"></div>
1038
  <span class="text-xl font-bold">SBCxWeb3District</span>
1039
  </div>
1040
  <p class="text-purple-300 text-sm mt-2">Official Partnership 2025 • All rights reserved</p>
1041
  </div>
 
 
 
 
 
1042
  <div class="text-purple-300 text-sm">
1043
  SBC Summit: September 16-18, 2025 • Lisbon, Portugal
1044
  </div>
@@ -1068,6 +997,43 @@
1068
 
1069
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
1070
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1071
  // Mobile menu toggle
1072
  const mobileMenuButton = document.getElementById('mobileMenuButton');
1073
  const mobileMenu = document.getElementById('mobileMenu');
 
175
  </style>
176
  </head>
177
  <body class="min-h-screen">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
178
  <!-- Hero Section -->
179
  <section class="min-h-screen flex items-center relative">
180
  <!-- Video Background -->
 
198
  </div>
199
  </div>
200
 
 
 
 
 
 
 
 
201
  <h1 class="text-5xl md:text-7xl font-extrabold mb-8 text-3d">
202
  <span class="text-white">SBC I SUMMIT</span>
203
  <span class="gradient-text mx-2">×</span>
204
  <span class="text-white">Web3District</span>
205
  </h1>
206
+ <div class="speaker-card group relative max-w-md mx-auto mb-4">
207
+ <div class="absolute inset-0 bg-gradient-to-br from-purple-900/24 to-fuchsia-900/24 rounded-2xl shadow-2xl"></div>
208
+ <div class="relative bg-gray-900/60 backdrop-blur-sm border border-purple-700/50 rounded-2xl p-6 text-center">
209
+ <h3 class="text-xl md:text-2xl font-bold gradient-text confetti-trigger drop-shadow-lg">Bridging Web3, AI and Gaming</h3>
210
+ </div>
211
  </div>
212
 
213
  <div class="speaker-card group relative max-w-md mx-auto mb-4">
 
272
  </section>
273
 
274
  <!-- Speakers Section -->
275
+ <section id="speakers-section" class="hidden py-20 relative overflow-hidden bg-gradient-to-br from-pink-500/20 via-purple-500/20 to-fuchsia-500/20">
276
  <div class="container mx-auto px-4 relative z-10">
277
  <div class="text-center mb-16">
278
  <h2 class="text-3xl md:text-4xl font-bold mb-4">
 
369
  </section>
370
 
371
  <!-- Academy Topics Section -->
372
+ <section id="academy-section" class="py-20 relative overflow-hidden bg-gray-900">
373
  <div class="container mx-auto px-4 relative z-10">
374
  <div class="text-center mb-16">
375
  <h2 class="text-3xl md:text-4xl font-bold mb-4">
 
413
  <p class="text-purple-200">Prototype an off-chain ML service ingesting on-chain data, flagging anomalies and triggering automated freezes or alerts.</p>
414
  </div>
415
 
 
 
 
 
 
 
416
  </div>
417
  </div>
418
  </section>
419
 
420
+ <!-- Deliverables Section (Hidden by default) -->
421
+ <section id="deliverables-section" class="hidden py-20 relative overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-fuchsia-900">
422
  <div class="container mx-auto px-4 relative z-10">
423
  <div class="text-center mb-16">
424
  <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">
 
547
  </section>
548
 
549
  <!-- Potential Brands Section -->
550
+ <section id="partners-section" class="py-20 relative overflow-hidden bg-gray-900">
551
  <div class="container mx-auto px-4 relative z-10">
552
  <div class="text-center mb-16">
553
  <h2 class="text-3xl md:text-4xl font-bold mb-4">
 
566
  </section>
567
 
568
  <!-- Media Outlets Section -->
569
+ <section id="media-section" class="py-20 relative overflow-hidden bg-gradient-to-br from-purple-900/20 to-fuchsia-900/20">
570
  <div class="container mx-auto px-4 relative z-10">
571
  <div class="text-center mb-16">
572
  <h2 class="text-3xl md:text-4xl font-bold mb-4">
 
585
  </section>
586
 
587
  <!-- Strategy Summary -->
588
+ <section id="strategy-section" class="py-20 relative overflow-hidden bg-gradient-to-br from-blue-600/20 via-indigo-600/20 to-purple-600/20">
589
  <div class="container mx-auto px-4 relative z-10">
590
  <div class="text-center mb-16">
591
  <h2 class="text-3xl md:text-4xl font-bold mb-4 text-white">
 
658
  </div>
659
  </section>
660
 
661
+ <!-- Roadmap Section (Hidden by default) -->
662
+ <section id="roadmap-section" class="hidden py-20 relative bg-white">
663
  <style>
664
  .timeline-item .relative {
665
  opacity: 1 !important;
 
955
  <!-- Footer -->
956
  <footer class="bg-gray-900 border-t border-purple-900 py-10">
957
  <div class="container mx-auto px-4">
958
+ <div class="flex flex-col-reverse md:flex-row justify-between items-center">
959
+ <div class="mt-6 md:mt-0">
960
  <div class="flex items-center">
961
  <div class="bg-gradient-to-r from-purple-start to-fuchsia-end w-8 h-8 rounded-full mr-3"></div>
962
  <span class="text-xl font-bold">SBCxWeb3District</span>
963
  </div>
964
  <p class="text-purple-300 text-sm mt-2">Official Partnership 2025 • All rights reserved</p>
965
  </div>
966
+ <div class="text-center mb-6 md:mb-0">
967
+ <button id="toggleDetails" class="bg-gradient-to-r from-purple-start to-fuchsia-end text-white font-bold py-2 px-4 rounded-full transition-all transform hover:scale-105 text-sm">
968
+ Show Detailed Information
969
+ </button>
970
+ </div>
971
  <div class="text-purple-300 text-sm">
972
  SBC Summit: September 16-18, 2025 • Lisbon, Portugal
973
  </div>
 
997
 
998
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
999
  <script>
1000
+ // Toggle hidden sections
1001
+ const toggleBtn = document.getElementById('toggleDetails');
1002
+ const hiddenSections = ['deliverables-section', 'roadmap-section'];
1003
+
1004
+ toggleBtn.addEventListener('click', function() {
1005
+ let shouldShow = false;
1006
+
1007
+ // Check current state - if any section is hidden, we'll show them
1008
+ hiddenSections.forEach(id => {
1009
+ const section = document.getElementById(id);
1010
+ if (section.classList.contains('hidden')) {
1011
+ shouldShow = true;
1012
+ }
1013
+ });
1014
+
1015
+ // Toggle sections based on current state
1016
+ hiddenSections.forEach(id => {
1017
+ const section = document.getElementById(id);
1018
+ if (shouldShow) {
1019
+ section.classList.remove('hidden');
1020
+ } else {
1021
+ section.classList.add('hidden');
1022
+ }
1023
+
1024
+ if (shouldShow && id === 'deliverables-section') {
1025
+ // Smooth scroll to first section when showing
1026
+ setTimeout(() => {
1027
+ section.scrollIntoView({ behavior: 'smooth' });
1028
+ }, 100);
1029
+ }
1030
+ });
1031
+
1032
+ // Update button text
1033
+ toggleBtn.textContent = shouldShow ?
1034
+ 'Hide Detailed Information' :
1035
+ 'Show Detailed Information';
1036
+ });
1037
  // Mobile menu toggle
1038
  const mobileMenuButton = document.getElementById('mobileMenuButton');
1039
  const mobileMenu = document.getElementById('mobileMenu');