mirror of
https://github.com/System-End/daydream-phoenix.git
synced 2026-04-19 19:45:13 +00:00
Add organizer site
This commit is contained in:
Gus Ruben
parent
0888100c16
commit
759695382c
6 changed files with 296 additions and 40 deletions
|
|
@ -3,9 +3,46 @@
|
|||
import { gsap } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
|
||||
// Event Configuration
|
||||
const EVENT_NAME = "Example";
|
||||
const EVENT_LOCATION = "Example City";
|
||||
/**
|
||||
* This is the template site! Create a copy of this folder (src/routes/example)
|
||||
* and rename it to whatever you want your URL to be.
|
||||
*
|
||||
* Then, configure the event name, location, and schedule below:
|
||||
*/
|
||||
|
||||
// Configuration - Put your information here!
|
||||
const eventName = "Example";
|
||||
const eventLocation = "Example City";
|
||||
|
||||
// Schedule Configuration
|
||||
const scheduleData = {
|
||||
saturday: {
|
||||
title: "Saturday, September 27th",
|
||||
items: [
|
||||
{ event: "Doors open", time: "11:00 AM" },
|
||||
{ event: "Opening ceremony", time: "12:00 PM" },
|
||||
{ event: "Lunch", time: "12:30 PM" },
|
||||
{ event: "Start working on your project!", time: "1:00 PM" },
|
||||
{ event: "Workshop 1", time: "2:00 PM" },
|
||||
{ event: "Activity 1", time: "4:00 PM" },
|
||||
{ event: "Workshop 2", time: "4:00 PM" },
|
||||
{ event: "Dinner", time: "6:00 PM" },
|
||||
{ event: "Lightning talks", time: "8:00 PM" },
|
||||
{ event: "Midnight surprise", time: "12:00 AM" }
|
||||
]
|
||||
},
|
||||
sunday: {
|
||||
title: "Sunday, September 28th",
|
||||
items: [
|
||||
{ event: "Breakfast", time: "8:00 AM" },
|
||||
{ event: "Demos!", time: "10:30 AM" },
|
||||
{ event: "Closing ceremony", time: "12:00 PM" }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data;
|
||||
|
||||
// Cities where the game jam is happening
|
||||
const cities = `Columbus
|
||||
|
|
@ -262,7 +299,7 @@ Mumbai`.split("\n")
|
|||
|
||||
let showVideoPopup = false;
|
||||
|
||||
// Generate ticker text from cities array - constant for local event
|
||||
// Generate ticker text from cities array (constant)
|
||||
const tickerText = cities.join(" • ");
|
||||
|
||||
// Particle system
|
||||
|
|
@ -378,7 +415,18 @@ Mumbai`.split("\n")
|
|||
function createParticle () {
|
||||
if (!particleContainer || !isTabVisible) return;
|
||||
|
||||
const button = document.querySelector('a[href="https://forms.hackclub.com/daydream-stickers"]');
|
||||
// Find the visible button - mobile first, then desktop
|
||||
const buttons = document.querySelectorAll('a[href="https://forms.hackclub.com/daydream-stickers"]');
|
||||
let button = null;
|
||||
|
||||
for (const btn of buttons) {
|
||||
const styles = window.getComputedStyle(btn);
|
||||
if (styles.display !== 'none') {
|
||||
button = btn;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!button) return;
|
||||
|
||||
const buttonRect = button.getBoundingClientRect();
|
||||
|
|
@ -452,6 +500,7 @@ Mumbai`.split("\n")
|
|||
}
|
||||
|
||||
onMount(() => {
|
||||
console.log('User city:', data.userCity);
|
||||
|
||||
// Register GSAP plugins
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
|
@ -561,6 +610,7 @@ Mumbai`.split("\n")
|
|||
|
||||
<svelte:head>
|
||||
<title>Daydream</title>
|
||||
<script defer data-domain="daydream.hackclub.com" src="https://plausible.io/js/script.js"></script>
|
||||
</svelte:head>
|
||||
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-[url('brushstroking.png')] bg-size-[100vw_100vh] bg-repeat mix-blend-overlay opacity-60 pointer-events-none"></div>
|
||||
|
|
@ -632,7 +682,7 @@ Mumbai`.split("\n")
|
|||
<h4
|
||||
class="text-2xl opacity-90 mt-2 font-serif bg-gradient-to-b from-[#487DAB] to-[#3F709A] bg-clip-text text-transparent max-sm:text-xl"
|
||||
>
|
||||
Organized by teenagers in {EVENT_LOCATION}
|
||||
Organized by Teenagers in {eventLocation}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
|
|
@ -653,7 +703,7 @@ Mumbai`.split("\n")
|
|||
<a
|
||||
href="https://forms.hackclub.com/daydream-stickers"
|
||||
target="_blank"
|
||||
class="w-max px-4 py-2 bg-pink border-b-2 border-b-pink-dark text-white rounded-full active:transform active:translate-y-0.5 transition-all duration-100 font-sans cursor-pointer mx-auto relative overflow-visible hover:shadow-[0_2px_0_0_theme(colors.pink.dark)] hover:-translate-y-[2px] active:border-transparent active:shadow-none active:"
|
||||
class="w-max px-4 py-2 bg-pink border-b-2 border-b-pink-dark text-white rounded-full active:transform active:translate-y-0.5 transition-all duration-100 font-sans cursor-pointer mx-auto relative overflow-visible hover:shadow-[0_2px_0_0_theme(colors.pink.dark)] hover:-translate-y-[2px] active:border-transparent active:shadow-none active: mt-4 md:hidden"
|
||||
>
|
||||
Get free stickers
|
||||
<img
|
||||
|
|
@ -675,7 +725,7 @@ Mumbai`.split("\n")
|
|||
<!-- <img src="hot-air-balloon.png" alt="" class="absolute w-1/12 left-36 bottom-81 z-20"> -->
|
||||
|
||||
<!-- Particle container -->
|
||||
<div bind:this={particleContainer} class="absolute inset-0 pointer-events-none z-0 opacity-70">
|
||||
<div bind:this={particleContainer} class="absolute inset-0 pointer-events-none z-40 opacity-70">
|
||||
{#each particles as particle (particle.id)}
|
||||
<img
|
||||
src="particle.png"
|
||||
|
|
@ -686,6 +736,8 @@ Mumbai`.split("\n")
|
|||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<img src="/clouds-top-middle-bg.svg" alt="" class="absolute left-5/12 -translate-x-1/2 w-7/12 -bottom-24">
|
||||
<div class="absolute left-5/12 -translate-x-1/2 w-7/12 -bottom-24 bg-[url('brushstroking.png')] bg-size-[100vw_100vh] bg-repeat mix-blend-overlay opacity-60 pointer-events-none h-full" style="mask-image: url('/clouds-top-middle-bg.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('/clouds-top-middle-bg.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;"></div>
|
||||
|
||||
|
|
@ -695,9 +747,9 @@ Mumbai`.split("\n")
|
|||
<img src="/clouds-top-left-bg.svg" alt="" class="absolute left-0 w-3/12 -bottom-12 translate-y-1/2">
|
||||
<div class="absolute left-0 w-3/12 -bottom-12 translate-y-1/2 bg-[url('brushstroking.png')] bg-size-[100vw_100vh] bg-repeat mix-blend-overlay opacity-60 pointer-events-none h-full" style="mask-image: url('/clouds-top-left-bg.svg'); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url('/clouds-top-left-bg.svg'); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;"></div>
|
||||
|
||||
<img src="/clouds-top-middle.png" alt="" class="absolute left-5/12 -translate-x-1/2 w-7/12 -bottom-24 z-20">
|
||||
<img src="/clouds-top-right.png" alt="" class="absolute right-0 w-1/2 -bottom-12 translate-y-1/2 z-20">
|
||||
<img src="/clouds-top-left.png" alt="" class="absolute left-0 w-3/12 -bottom-12 translate-y-1/2 z-20">
|
||||
<img src="/clouds-top-middle.png" alt="" class="absolute left-5/12 -translate-x-1/2 w-7/12 -bottom-24 z-20 pointer-events-none">
|
||||
<img src="/clouds-top-right.png" alt="" class="absolute right-0 w-1/2 -bottom-12 translate-y-1/2 z-20 pointer-events-none">
|
||||
<img src="/clouds-top-left.png" alt="" class="absolute left-0 w-3/12 -bottom-12 translate-y-1/2 z-20 pointer-events-none">
|
||||
|
||||
|
||||
|
||||
|
|
@ -722,6 +774,26 @@ Mumbai`.split("\n")
|
|||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Desktop stickers button (bottom left) -->
|
||||
<a
|
||||
href="https://forms.hackclub.com/daydream-stickers"
|
||||
target="_blank"
|
||||
class="hidden md:block absolute bottom-16 left-16 z-50 w-max px-4 py-2 bg-pink border-b-2 border-b-pink-dark text-white rounded-full active:transform active:translate-y-0.5 transition-all duration-100 font-sans cursor-pointer overflow-visible hover:shadow-[0_2px_0_0_theme(colors.pink.dark)] hover:-translate-y-[2px] active:border-transparent active:shadow-none"
|
||||
>
|
||||
Get free stickers
|
||||
<img
|
||||
src="button-clouds.svg"
|
||||
alt=""
|
||||
class="absolute bottom-0 left-1/2 -translate-x-1/2 w-auto object-contain pointer-events-none"
|
||||
>
|
||||
<img
|
||||
src="rock-sticker.png"
|
||||
alt=""
|
||||
class="absolute bottom-2 right-3 translate-2/3 w-18 h-18 object-contain pointer-events-none"
|
||||
style="transform: rotate(-15deg);"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="w-full relative flex items-start justify-center">
|
||||
|
|
@ -773,30 +845,129 @@ Mumbai`.split("\n")
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full absolute z-30 max-h-64 bottom-0 max-xl:translate-y-1/4 max-lg:translate-y-1/2 pointer-events-none">
|
||||
<img src="/cloud-cover-1.png" alt="" class="w-full h-full object-contain">
|
||||
<div class="absolute top-1/2 left-1/2 w-1 h-1 -translate-x-1/2 -translate-y-1/2" data-point="0"></div>
|
||||
<div class="w-full absolute z-30 max-h-64 bottom-0 max-2xl:translate-y-1/4 max-lg:translate-y-1/2 pointer-events-none">
|
||||
<img src="/cloud-cover-1.png" alt="" class="w-full h-full object-contain min-[2048px]:hidden">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Schedule Container -->
|
||||
<div class="w-full bg-[#FCEFC5] py-16 px-8 flex justify-center">
|
||||
<div class="relative max-w-4xl w-full">
|
||||
<!-- Billboard Container -->
|
||||
<div class="relative bg-[#f0f9ff] border-[10px] border-b-[16px] border-[#888896] rounded-lg rounded-b-xl mx-auto z-40">
|
||||
<!-- Billboard Lights (top) -->
|
||||
<img
|
||||
src="/billboard-lights.png"
|
||||
alt=""
|
||||
class="absolute top-0 left-0 w-full h-auto object-contain pointer-events-none z-10 -translate-y-[calc(100%+9px)]"
|
||||
>
|
||||
|
||||
<!-- Header Section -->
|
||||
<div class="w-full bg-[url('/billboard-bg-texture.png')] bg-contain bg-repeat py-6 relative" style="border-bottom: 8px solid #B4B4C5;">
|
||||
<h2 class="text-4xl font-serif text-[#F0F0FF] text-center">
|
||||
Schedule
|
||||
</h2>
|
||||
<!-- Brush texture overlay for header -->
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-[url('brushstroking.png')] bg-size-[100vw_100vh] bg-repeat mix-blend-overlay opacity-60 pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="relative bg-gradient-to-b from-[#CCF4FD] to-[#AECDF6] px-8 pt-8 pb-16">
|
||||
<!-- Brush texture overlay for content -->
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-[url('brushstroking.png')] bg-size-[100vw_100vh] bg-repeat mix-blend-overlay opacity-60 pointer-events-none"></div>
|
||||
|
||||
<!-- Schedule Content -->
|
||||
<div class="relative z-10">
|
||||
<!-- Saturday Section -->
|
||||
<div class="mb-8 bg-white/50 py-6 -mx-8">
|
||||
<h3 class="text-2xl font-sans font-bold text-[#335969] mb-6 text-center px-8 max-sm:text-xl max-sm:px-4">
|
||||
{scheduleData.saturday.title}
|
||||
</h3>
|
||||
|
||||
<div class="max-w-xl mx-auto px-4">
|
||||
{#each scheduleData.saturday.items as item, index}
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<span class="text-lg font-sans text-[#477783]">{item.event}</span>
|
||||
<span class="text-lg font-sans text-[#477783]">{item.time}</span>
|
||||
</div>
|
||||
{#if index < scheduleData.saturday.items.length - 1}
|
||||
<div class="h-[2px] bg-white/30"></div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sunday Section -->
|
||||
<div class="bg-white/50 py-6 -mx-8">
|
||||
<h3 class="text-2xl font-sans font-bold text-[#335969] mb-6 text-center px-8 max-sm:text-xl max-sm:px-4">
|
||||
{scheduleData.sunday.title}
|
||||
</h3>
|
||||
|
||||
<div class="max-w-xl mx-auto px-4">
|
||||
{#each scheduleData.sunday.items as item, index}
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<span class="text-lg font-sans text-[#477783]">{item.event}</span>
|
||||
<span class="text-lg font-sans text-[#477783]">{item.time}</span>
|
||||
</div>
|
||||
{#if index < scheduleData.sunday.items.length - 1}
|
||||
<div class="h-[2px] bg-white/30"></div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Billboard Bars (bottom) -->
|
||||
<div
|
||||
class="absolute bottom-0 -left-[5px] w-[calc(100%+10px)] h-6 bg-[url('/billboard-bars.png')] bg-repeat-x bg-contain bg-center pointer-events-none z-10 border-[#9898a7] border-x-[6px]"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Billboard Pillars -->
|
||||
<div
|
||||
class="absolute top-1/2 left-[15%] w-[10vw] max-w-12 -bottom-12 bg-[url('/billboard-pillar.png')] bg-repeat-y pointer-events-none bg-contain"
|
||||
style="box-shadow: inset 0 8px 12px -6px rgba(0, 0, 0, 0.1);"
|
||||
>
|
||||
<div class="absolute bottom-0 left-0 w-full h-auto bg-[url('/clouds-loop.png')] bg-no-repeat bg-contain bg-bottom pointer-events-none aspect-[2/1]"></div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-1/2 right-[15%] w-[10vw] max-w-12 -bottom-12 bg-[url('/billboard-pillar.png')] bg-repeat-y pointer-events-none bg-contain"
|
||||
style="box-shadow: inset 0 8px 12px -6px rgba(0, 0, 0, 0.1);"
|
||||
>
|
||||
<div class="absolute bottom-0 left-0 w-full h-auto bg-[url('/clouds-loop.png')] bg-no-repeat bg-contain bg-bottom pointer-events-none aspect-[2/1]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gamejam Text Section -->
|
||||
<div class="w-full bg-[#FCEFC5] flex justify-center py-16 relative overflow-hidden max-h-[400px]">
|
||||
<!-- Cloud backdrop for gamejam text -->
|
||||
<div class="absolute inset-0 w-full h-full pointer-events-none z-1">
|
||||
<img src="/cloud-cover-1.png" alt="" class="w-full h-full object-cover">
|
||||
<div class="absolute top-1/2 left-1/2 w-1 h-1 -translate-x-1/2 -translate-y-1/2" data-point="0"></div>
|
||||
<div class="absolute top-1/2 left-1/4 w-1 h-1 -translate-x-1/2 -translate-y-1/2" data-point="0.5"></div>
|
||||
</div>
|
||||
<div class="absolute -bottom-44 left-1/2 -translate-x-1/2 w-10/12 h-auto object-contain z-100 cursor-text flex flex-row max-md:flex-wrap items-center justify-center align-middle max-w-5xl">
|
||||
<img src="gamejam-1.png" alt="Here's How You Organize a" class="flex-shrink min-w-0 object-contain">
|
||||
|
||||
<div class="relative w-10/12 h-auto object-contain cursor-text flex flex-row max-lg:flex-wrap md:translate-y-0 max-lg:translate-y-1/5 items-center justify-center align-middle max-w-5xl z-50">
|
||||
<img src="gamejam-1-alt.png" alt="Here's How You Crush a" class="flex-shrink min-w-0 object-contain">
|
||||
<img src="gamejam-2.png" alt="Game Jam" class="flex-shrink min-w-0 object-contain">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-64 bg-[#FCEFC5]"></div>
|
||||
|
||||
<div class="flex flex-row flex-wrap w-full h-auto bg-gradient-to-b from-[#FCEFC5] to-[#FEC1CF] px-36 max-md:px-8 pb-50 max-sm:pb-24 relative xl:pt-12 2xl:pt-48" id="islands-container">
|
||||
<div class="flex flex-row flex-wrap w-full h-auto bg-gradient-to-b from-[#FCEFC5] to-[#FEC1CF] px-36 max-md:px-8 pb-50 max-sm:pb-24 relative" id="islands-container">
|
||||
|
||||
<img src="/clouds-left-2.png" alt="" class="absolute left-0 w-3/12 top-12">
|
||||
<img src="/clouds-left-3.png" alt="" class="absolute left-0 w-2/12 bottom-32">
|
||||
<img src="/clouds-right-2.png" alt="" class="absolute right-0 w-3/12 bottom-0">
|
||||
<img src="/clouds-left-2.png" alt="" class="absolute left-0 w-3/12 top-12 pointer-events-none">
|
||||
<img src="/clouds-left-3.png" alt="" class="absolute left-0 w-2/12 bottom-32 pointer-events-none">
|
||||
<img src="/clouds-right-2.png" alt="" class="absolute right-0 w-3/12 bottom-0 pointer-events-none">
|
||||
|
||||
<!-- SVG Path Overlay -->
|
||||
<svg class="absolute inset-0 w-full h-full pointer-events-none z-0" id="path-svg">
|
||||
<path id="dotted-path" stroke="rgba(255,255,255,0.5)" stroke-width="3" fill="none" stroke-dasharray="8,8" opacity="0.7"></path>
|
||||
</svg>
|
||||
|
||||
<img src="paper-airplane.png" alt="Paper airplane" class="h-16 absolute z-10" id="paper-airplane">
|
||||
<img src="paper-airplane.png" alt="Paper airplane" class="h-16 absolute" id="paper-airplane">
|
||||
|
||||
<div class="flex flex-col items-center w-max basis-1/2 max-md:basis-full max-md:w-full z-10">
|
||||
<div class="relative translate-y-8 max-md:translate-y-4 z-30">
|
||||
|
|
@ -805,7 +976,7 @@ Mumbai`.split("\n")
|
|||
<div class="relative w-72 h-40 max-md:w-80 animate-hover ![--hover:-0.15rem] ![animation-delay:1.7s] z-20" data-point="1">
|
||||
<img src="paper1.png" alt="" class="w-full h-full object-contain">
|
||||
<div class="absolute inset-0 justify-center text-center p-6 text-xl font-serif max-md:text-lg text-[#8B4513] inline-block content-center">
|
||||
<span class="font-sans text-[#E472AB] font-bold text-[1.3rem] mr-1">#1:</span> <a href="https://forms.hackclub.com/daydream" class="underline">Sign up</a> for Daydream {EVENT_NAME}
|
||||
<span class="font-sans text-[#E472AB] font-bold text-[1.3rem] mr-1">#1:</span> <a href="https://example.com" class="underline">Sign up</a> for Daydream {eventName}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -832,7 +1003,7 @@ Mumbai`.split("\n")
|
|||
<div class="relative w-72 h-40 max-md:w-80 animate-hover ![--hover:-0.15rem] ![animation-delay:1.4s] z-20" data-point="3">
|
||||
<img src="paper3.png" alt="" class="w-full h-full object-contain">
|
||||
<div class="absolute inset-0 justify-center text-center p-6 text-xl font-serif max-md:text-lg text-[#8B4513] inline-block content-center">
|
||||
<span class="font-sans text-[#AB68E2] font-bold text-[1.3rem] mr-1">#3:</span> Start building your game - <u>no experience needed</u>
|
||||
<span class="font-sans text-[#AB68E2] font-bold text-[1.3rem] mr-1">#3:</span> Start building your game - <em>no experience needed</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -856,7 +1027,7 @@ Mumbai`.split("\n")
|
|||
<div class="flex flex-col items-center w-full basis-full translate-y-40 max-md:translate-y-12 z-20">
|
||||
<div class="relative">
|
||||
<div class="bg-[url('/card-final.png')] bg-contain bg-no-repeat bg-center text-2xl font-serif pt-24 px-8 w-128 h-96 text-center max-md:w-80 max-md:h-80 max-md:text-xl max-md:pt-16 animate-hover ![--hover:-0.15rem] ![animation-delay:1.9s]" data-point="5">
|
||||
<span class="font-sans text-[#F2CC32] font-bold text-[1.5rem] mr-1">#5:</span> Share what you made with the world
|
||||
<span class="font-sans text-[#F2CC32] font-bold text-[1.5rem] mr-1">#5:</span> Share what you made with the world!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -867,24 +1038,109 @@ Mumbai`.split("\n")
|
|||
<div class="absolute top-0 left-0 w-full h-full bg-[url('brushstroking.png')] bg-size-[100vw_100vh] bg-repeat mix-blend-overlay opacity-60 pointer-events-none bg-position-[0_100vh]"></div>
|
||||
</div>
|
||||
|
||||
<div class="w-full bg-gradient-to-b from-[#FDC5D1] to-[#FAE3C9] items-center justify-center px-32 relative pt-36">
|
||||
<div class="max-md:absolute max-md:left-1/2 max-md:-translate-x-1/2 max-md:z-100 max-sm:pt-16">
|
||||
<div class="relative w-full max-w-3xl mx-auto min-w-72 max-md:mx-0">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 max-md:-translate-y-1/2 max-sm:translate-y-[calc(-50%-4rem)] h-48 w-auto z-100 flex items-center justify-center px-4 pointer-events-none">
|
||||
<h2 class="text-4xl font-serif italic text-[#60574b] bg-white px-6 py-3 rounded-lg shadow-lg max-md:text-3xl max-sm:text-2xl text-center">
|
||||
{EVENT_LOCATION}
|
||||
</h2>
|
||||
<div class="w-full bg-gradient-to-b from-[#FDC5D1] to-[#FAE3C9] items-center justify-center px-0 md:px-8 relative pt-36">
|
||||
<div class="w-full max-w-5xl lg:max-w-6xl mx-auto px-2 md:px-8">
|
||||
<div class="relative w-full min-w-72">
|
||||
<img src="banner.png" alt="100 Cities Worldwide" class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/3 md:-translate-y-[40%] h-48 w-auto z-100 scale-[1.15] md:scale-[1.65] saturate-70 brightness-110 object-contain px-4 pointer-events-none">
|
||||
|
||||
<!-- Map container with cloudy edges -->
|
||||
<div class="relative w-full h-156 overflow-hidden bg-transparent">
|
||||
<iframe
|
||||
src="/map"
|
||||
class="w-full h-full border-0 bg-[#acd4e0]"
|
||||
style="
|
||||
mask-image:
|
||||
linear-gradient(white, white),
|
||||
url('/clouds-loop-mask-2.png'),
|
||||
url('/clouds-loop-mask-1.png'),
|
||||
url('/clouds-loop-mask-3.png'),
|
||||
url('/clouds-loop-mask-4.png'),
|
||||
url('/cloud-corner-1.png'),
|
||||
url('/cloud-corner-2.png'),
|
||||
url('/cloud-corner-3.png'),
|
||||
url('/cloud-corner-4.png');
|
||||
mask-position:
|
||||
center,
|
||||
top left,
|
||||
bottom left,
|
||||
left top,
|
||||
right top,
|
||||
bottom left,
|
||||
top left,
|
||||
top right,
|
||||
bottom right;
|
||||
mask-size:
|
||||
auto auto,
|
||||
auto 72px,
|
||||
auto 72px,
|
||||
72px auto,
|
||||
72px auto,
|
||||
100px 100px,
|
||||
100px 100px,
|
||||
100px 100px,
|
||||
100px 100px;
|
||||
mask-repeat:
|
||||
no-repeat,
|
||||
repeat-x,
|
||||
repeat-x,
|
||||
repeat-y,
|
||||
repeat-y,
|
||||
no-repeat,
|
||||
no-repeat,
|
||||
no-repeat,
|
||||
no-repeat;
|
||||
-webkit-mask-image:
|
||||
linear-gradient(white, white),
|
||||
url('/clouds-loop-mask-2.png'),
|
||||
url('/clouds-loop-mask-1.png'),
|
||||
url('/clouds-loop-mask-3.png'),
|
||||
url('/clouds-loop-mask-4.png'),
|
||||
url('/cloud-corner-1.png'),
|
||||
url('/cloud-corner-2.png'),
|
||||
url('/cloud-corner-3.png'),
|
||||
url('/cloud-corner-4.png');
|
||||
-webkit-mask-position:
|
||||
center,
|
||||
top left,
|
||||
bottom left,
|
||||
left top,
|
||||
right top,
|
||||
bottom left,
|
||||
top left,
|
||||
top right,
|
||||
bottom right;
|
||||
-webkit-mask-size:
|
||||
auto auto,
|
||||
auto 72px,
|
||||
auto 72px,
|
||||
72px auto,
|
||||
72px auto,
|
||||
100px 100px,
|
||||
100px 100px,
|
||||
100px 100px,
|
||||
100px 100px;
|
||||
-webkit-mask-repeat:
|
||||
no-repeat,
|
||||
repeat-x,
|
||||
repeat-x,
|
||||
repeat-y,
|
||||
repeat-y,
|
||||
no-repeat,
|
||||
no-repeat,
|
||||
no-repeat,
|
||||
no-repeat;
|
||||
mask-type: luminance;
|
||||
mask-mode: luminance;
|
||||
mask-composite: exclude, add, add, add, add, add, add, add, add;
|
||||
"
|
||||
title="Daydream Events Map">
|
||||
</iframe>
|
||||
</div>
|
||||
<img src="hole.png" alt="" class="w-full h-full max-w-3xl max-sm:scale-200 pointer-events-none">
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full border-0 max-sm:scale-200 bg-blue-200 flex items-center justify-center text-[#60574b] font-bold text-xl"
|
||||
style="mask: url('hole.png') no-repeat center; -webkit-mask: url('hole.png') no-repeat center; mask-size: contain; -webkit-mask-size: contain;">
|
||||
Local Event
|
||||
</div>
|
||||
<p class="absolute left-1/2 -translate-x-1/2 font-sans text-center text-2xl pt-12 max-sm:pt-40 max-sm:text-xl w-max max-w-[80vh] max-md:max-w-full md:px-12 text-[#60574b] z-10000 ">All daydream events are organized by high school students like yourself! <br> <span class="font-bold"><a class="underline hover:text-pink" href="https://forms.hackclub.com/daydream">Sign up</a> to organize now!</span></p>
|
||||
|
||||
<p class="text-center font-sans text-2xl pt-12 max-sm:text-xl text-[#60574b] z-10000">All daydream events are organized by high school students like yourself! <br> <span class="font-bold"><a class="underline hover:text-pink" href="https://forms.hackclub.com/daydream">Sign up</a> to organize now!</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-md:h-136"></div>
|
||||
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-[url('brushstroking.png')] bg-size-[100vw_100vh] bg-repeat mix-blend-overlay opacity-60 pointer-events-none"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
BIN
static/billboard-bars.png
Normal file
BIN
static/billboard-bars.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 628 B |
BIN
static/billboard-bg-texture.png
Normal file
BIN
static/billboard-bg-texture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 566 B |
BIN
static/billboard-lights.png
Normal file
BIN
static/billboard-lights.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
static/billboard-pillar.png
Normal file
BIN
static/billboard-pillar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 934 B |
BIN
static/gamejam-1-alt.png
Normal file
BIN
static/gamejam-1-alt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Loading…
Add table
Reference in a new issue