Skip to content

Commit

Permalink
feat(aoc): add AoC page and styles (neiist-dev#380)
Browse files Browse the repository at this point in the history 
Add landing page for Advent of Code 2024 event in collaboration with Cloudflare

This PR implements a standalone landing page for the Advent of Code 2024 competition, featuring:
- Event description and rules
- NEIIST x Cloudflare collaboration announcement
- Prize information for top 3 participants
- Leaderboard code with copy functionality
- Participant instructions
- Custom styling matching AoC theme (dark mode, monospace font)
- Isolated route without default layout

Technical details:
- Standalone route without shared layout
- CSS isolation to prevent style conflicts
- Full viewport design
- Custom animations for interactive elements
  • Loading branch information
@Francisca105
Francisca105 authored Nov 15, 2024
1 parent b91a459 commit a0b65af
Show file tree
Hide file tree
Showing 3 changed files with 279 additions and 15 deletions.
41 changes: 26 additions & 15 deletions client/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useEffect, useContext, Suspense, lazy } from 'react';
import {
BrowserRouter,
BrowserRouter,
Routes,
Route,
Navigate
Expand Down Expand Up @@ -29,11 +29,13 @@ const AdminElectionsPage = lazy(() => import("./pages/AdminElectionsPage.jsx"));
const GacPage = lazy(() => import("./pages/GacPage.jsx"));
const CollabsPage = lazy(() => import("./pages/CollabsPage.jsx"));

const AoCPage = lazy(() => import("./pages/aoc/AoCPage.jsx"));

const Error = ({ error, errorDescription }) => (
<>
<h1>{error}</h1>
<p>{errorDescription}</p>
</>
<>
<h1>{error}</h1>
<p>{errorDescription}</p>
</>
);

const App = () => {
Expand Down Expand Up @@ -67,9 +69,9 @@ const App = () => {
};

const Redirect = (user) => window.location.replace(
user?.isCollab ? '/collab':
user?.isMember ? '/socios':
'/'
user?.isCollab ? '/collab' :
user?.isMember ? '/socios' :
'/'
);

useEffect(() => {
Expand Down Expand Up @@ -104,14 +106,23 @@ const App = () => {
<UserDataContext.Provider value={{ userData, setUserData }}>
<MantineProvider>
<BrowserRouter>
<Layout>
<Suspense fallback={<LoadSpinner />}>
<DefinedRoutes />
</Suspense>
</Layout>
<Routes>
<Route path="/AoC" element={
<Suspense fallback={<LoadSpinner />}>
<AoCPage />
</Suspense>
} />
<Route path="/*" element={
<Layout>
<Suspense fallback={<LoadSpinner />}>
<DefinedRoutes />
</Suspense>
</Layout>
} />
</Routes>
</BrowserRouter>
</MantineProvider>
</UserDataContext.Provider>
</UserDataContext.Provider>
);
};

Expand Down Expand Up @@ -160,7 +171,7 @@ const PrivateRoute = ({ condition, children }) => {
};

const ActiveTecnicoStudentRoute = ({ children }) => (
<PrivateRoute children={children} condition={'isActiveTecnicoStudent'} />
<PrivateRoute children={children} condition={'isActiveTecnicoStudent'} />
);

const ActiveLMeicStudentRoute = ({ children }) => (
Expand Down
204 changes: 204 additions & 0 deletions client/src/pages/aoc/AoCPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
// pages/aoc/page.jsx
'use client';
import { useState } from 'react';
import './styles.css';

export default function AoC() {
const [copied, setCopied] = useState(false);

const copyToClipboard = () => {
navigator.clipboard.writeText('4234755-033d0796');
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};

return (
<div className="aoc-container">
<div className="aoc-content">
<div style={{
minWidth: '60em',
margin: '40px',
background: '#0f0f23',
color: '#cccccc',
fontFamily: '"Source Code Pro", monospace',
fontWeight: 300,
fontSize: '14pt'
}}>
<h1 style={{
textAlign: 'center',
fontSize: '100px',
color: '#009900',
cursor: 'default',
animation: 'blink 2s infinite alternate',
textShadow: '0 0 5px #009900'
}}>
ADVENT OF CODE
</h1>

<h1 style={{
textAlign: 'center',
fontSize: '80px',
color: '#009900',
textShadow: '0 0 5px #009900'
}}>
<span
onClick={() => window.location.href = 'https://neiist.tecnico.ulisboa.pt/'}
style={{
color: '#2863fd',
cursor: 'pointer',
transition: 'color 0.3s ease'
}}
onMouseOver={(e) => e.target.style.color = '#6a9bff'}
onMouseOut={(e) => e.target.style.color = '#2863fd'}
>
NEIIST
</span>
{' X '}
<span
onClick={() => window.location.href = 'https://www.cloudflare.com/pt-br/'}
style={{
color: '#f97316',
cursor: 'pointer',
transition: 'color 0.3s ease'
}}
onMouseOver={(e) => e.target.style.color = '#f5a623'}
onMouseOut={(e) => e.target.style.color = '#f97316'}
>
CLOUDFLARE
</span>
</h1>

<div style={{ textAlign: 'center' }}>
<h1 style={{ fontSize: '50px', color: '#009900', padding: '10px' }}>
<span style={{ opacity: 0.33, padding: 0 }}>1.1.1.1:</span>
<a href="https://adventofcode.com/2024" style={{ color: '#009900', textDecoration: 'none' }}>2024</a>
</h1>
</div>

<div style={{ textAlign: 'center' }}>
<h4>Código da leaderboard:</h4>
<div
style={{
display: 'inline-flex',
alignItems: 'center',
gap: '10px',
padding: '10px 15px',
borderRadius: '8px',
cursor: 'pointer',
backgroundColor: copied ? '#4CAF50' : '#2C2C44',
transition: 'background-color 0.3s ease'
}}
onClick={copyToClipboard}
>
<span style={{ fontSize: '30px' }}>4234755-033d0796</span>
<svg style={{ width: '30px', height: '20px' }} viewBox="0 0 16 16" fill="currentColor">
<path d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z" />
</svg>
</div>
</div>

<h2 style={{ marginTop: '2em' }}>Como funciona?</h2>
<p>
O <a href="https://adventofcode.com/" style={{ color: '#009900', textDecoration: 'none' }}>Advent Of Code</a> é um evento que lança desafios diários de programação,
desde o dia 1 de dezembro até ao Natal. Estes desafios podem ser resolvidos
na linguagem de programação que preferires! Todos os dias às 5h da manhã
são lançados 2 problemas, que vão ficando progressivamente mais difíceis.
</p>

<p>
Em cada desafio, os participantes que o resolvem mais rápido recebem um
maior número de pontos. Por cada problema resolvido, ganhas uma estrela
<span style={{ color: '#ffff66' }}> *</span>. Quem obtiver mais pontos no final do
evento, ganha!
</p>

<p>
Este ano, o <em style={{ color: '#2863fd', textShadow: '0 0 5px #2863fd', fontStyle: 'normal' }}>NEIIST</em> juntamente com a <em style={{ color: '#f97316', textShadow: '0 0 5px #f97316', fontStyle: 'normal' }}>CloudFlare</em> decidiu
criar uma leaderboard e oferecer prendas de Natal ao pódio!
<em style={{ color: 'white', textShadow: '0 0 5px #ffffff', fontStyle: 'normal' }}> [1]</em>
</p>

<ul style={{ listStyle: 'none', padding: 0 }}>
<li style={{ paddingLeft: '2.5em', position: 'relative' }}>
<em style={{ color: 'white', textShadow: '0 0 5px #ffffff', fontStyle: 'normal' }}>1º lugar:</em> Entrevista garantida para o estágio de verão da
<em style={{ color: '#f97316', textShadow: '0 0 5px #f97316', fontStyle: 'normal' }}> CloudFlare</em>, uma Sweat de EIC do <em style={{ color: '#2863fd', textShadow: '0 0 5px #2863fd', fontStyle: 'normal' }}>NEIIST</em> à
escolha de qualquer ano letivo, incluindo o atual e ainda brindes da <em style={{ color: '#f97316', textShadow: '0 0 5px #f97316', fontStyle: 'normal' }}>CloudFlare</em>.
</li>
<li style={{ paddingLeft: '2.5em', position: 'relative' }}>
<em style={{ color: 'white', textShadow: '0 0 5px #ffffff', fontStyle: 'normal' }}>2º lugar:</em> Sweat de EIC à escolha de qualquer ano letivo anterior e brindes da <em style={{ color: '#f97316', textShadow: '0 0 5px #f97316', fontStyle: 'normal' }}>CloudFlare</em>.
</li>
<li style={{ paddingLeft: '2.5em', position: 'relative' }}>
<em style={{ color: 'white', textShadow: '0 0 5px #ffffff', fontStyle: 'normal' }}>3º lugar:</em> Vale de 5€ na compra de uma sweat de EIC e brindes da <em style={{ color: '#f97316', textShadow: '0 0 5px #f97316', fontStyle: 'normal' }}>CloudFlare</em>.
</li>
</ul>

<h2 style={{ marginTop: '2em' }}>Como me posso juntar à leaderboard <em style={{ color: '#2863fd', textShadow: '0 0 5px #2863fd', fontStyle: 'normal' }}>NEIIST</em> <em style={{ color: 'white', textShadow: '0 0 5px #ffffff', fontStyle: 'normal' }}>X</em> <em style={{ color: '#f97316', textShadow: '0 0 5px #f97316', fontStyle: 'normal' }}>CLOUDFLARE</em>?</h2>

<p>
Para te juntares à leaderboard, tens de fazer
<a href="https://adventofcode.com/2024/auth/login" style={{ color: '#009900', textDecoration: 'none' }}> [login]</a> no site
do <a href="https://adventofcode.com/" style={{ color: '#009900', textDecoration: 'none' }}>Advent Of Code</a>, por uma das seguintes formas:
</p>

<ul style={{ listStyle: 'none', padding: 0 }}>
{['Github', 'Google', 'Twitter', 'Reddit'].map(provider => (
<li key={provider} style={{ paddingLeft: '2.5em' }}>- {provider}</li>
))}
</ul>

<p>
Depois de fazeres login, tens de ir a <a href="https://adventofcode.com/2024/leaderboard" style={{ color: '#009900', textDecoration: 'none' }}>[leaderboard]</a>
{' > '}<a href="https://adventofcode.com/2024/leaderboard/private" style={{ color: '#009900', textDecoration: 'none' }}>[Private leaderboard]</a>, e coloca o código da
leaderboard <em style={{ color: 'white', textShadow: '0 0 5px #ffffff', fontStyle: 'normal' }}>NEIIST X CloudFlare</em> e clicar em <a style={{ color: '#009900', textDecoration: 'none' }}>[Join]</a>!
</p>

<p>
Caso não te consigas juntar à leaderboard, por favor contacta-nos por email
<a href="mailto:neiist@tecnico.ulisboa.pt" style={{ color: '#009900', textDecoration: 'none' }}> neiist@tecnico.ulisboa.pt</a> para que possamos ajudar.
</p>

<p>
O <em style={{ color: '#2863fd', textShadow: '0 0 5px #2863fd', fontStyle: 'normal' }}>NEIIST</em> e a <em style={{ color: '#f97316', textShadow: '0 0 5px #f97316', fontStyle: 'normal' }}>CloudFlare</em> desejam-te boa sorte e um feliz Advent Of Code!
</p>

<p>
<em style={{ color: 'white', textShadow: '0 0 5px #ffffff', fontStyle: 'normal' }}>[1]</em> Participação limitada a alunos do Instituto Superior
Técnico (a ser verificado aquando da atribuição de prémios).
<br />
<em style={{ color: 'white', textShadow: '0 0 5px #ffffff', fontStyle: 'normal' }}>[2]</em> Escolha de sweats de anos letivos anteriores está limitada ao stock existente.
</p>

<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<img
src="https://web.tecnico.ulisboa.pt/~ist199075/static/neiist_logo.png"
style={{ width: '10%', height: '10%', margin: '15px' }}
alt="NEIIST Logo"
/>
<img
src="https://web.tecnico.ulisboa.pt/~ist199075/static/CF_logo_stacked_whitetype.svg"
style={{ width: '10%', height: '10%', margin: '15px' }}
alt="Cloudflare Logo"
/>
</div>

<style jsx>{`
@keyframes blink {
0% {
color: #009900;
text-shadow: 0 0 5px #009900, 0 0 10px #00cc00, 0 0 15px #00cc00;
}
50% {
color: #009900;
text-shadow: 0 0 15px #009900;
}
}
a:hover {
color: #99ff99 !important;
}
`}</style>
</div>
</div>
</div>
);
}
49 changes: 49 additions & 0 deletions client/src/pages/aoc/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/* pages/aoc/styles.css */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300');

.aoc-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #0f0f23;
color: #cccccc;
overflow-y: auto;
z-index: 9999;
}

.aoc-content {
min-width: 60em;
margin: 40px;
font-family: "Source Code Pro", monospace;
font-weight: 300;
font-size: 14pt;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
}

/* Remove os estilos padrão do Next.js */
:root {
--max-width: none;
--border-radius: 0;
--font-mono: inherit;
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}

/* Remover estilos globais do Next.js */
* {
box-sizing: content-box;
}

0 comments on commit a0b65af

Please sign in to comment.