From a0b65af50ee41308a445baadb3f6c6686dc8e6d2 Mon Sep 17 00:00:00 2001 From: Francisca105 Date: Fri, 15 Nov 2024 19:51:13 +0000 Subject: [PATCH] feat(aoc): add AoC page and styles (#380) 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 --- client/src/App.jsx | 41 ++++--- client/src/pages/aoc/AoCPage.jsx | 204 +++++++++++++++++++++++++++++++ client/src/pages/aoc/styles.css | 49 ++++++++ 3 files changed, 279 insertions(+), 15 deletions(-) create mode 100644 client/src/pages/aoc/AoCPage.jsx create mode 100644 client/src/pages/aoc/styles.css diff --git a/client/src/App.jsx b/client/src/App.jsx index 6d6d895b..0cde8665 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useContext, Suspense, lazy } from 'react'; import { - BrowserRouter, + BrowserRouter, Routes, Route, Navigate @@ -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 }) => ( - <> -

{error}

-

{errorDescription}

- + <> +

{error}

+

{errorDescription}

+ ); const App = () => { @@ -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(() => { @@ -104,14 +106,23 @@ const App = () => { - - }> - - - + + }> + + + } /> + + }> + + + + } /> + - + ); }; @@ -160,7 +171,7 @@ const PrivateRoute = ({ condition, children }) => { }; const ActiveTecnicoStudentRoute = ({ children }) => ( - + ); const ActiveLMeicStudentRoute = ({ children }) => ( diff --git a/client/src/pages/aoc/AoCPage.jsx b/client/src/pages/aoc/AoCPage.jsx new file mode 100644 index 00000000..c6f134ab --- /dev/null +++ b/client/src/pages/aoc/AoCPage.jsx @@ -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 ( +
+
+
+

+ ADVENT OF CODE +

+ +

+ 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 + + {' X '} + 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 + +

+ +
+

+ 1.1.1.1: + 2024 +

+
+ +
+

Código da leaderboard:

+
+ 4234755-033d0796 + + + +
+
+ +

Como funciona?

+

+ O Advent Of Code é 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. +

+ +

+ 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 + *. Quem obtiver mais pontos no final do + evento, ganha! +

+ +

+ Este ano, o NEIIST juntamente com a CloudFlare decidiu + criar uma leaderboard e oferecer prendas de Natal ao pódio! + [1] +

+ +
    +
  • + 1º lugar: Entrevista garantida para o estágio de verão da + CloudFlare, uma Sweat de EIC do NEIIST à + escolha de qualquer ano letivo, incluindo o atual e ainda brindes da CloudFlare. +
    • +
  • + 2º lugar: Sweat de EIC à escolha de qualquer ano letivo anterior e brindes da CloudFlare. +
    • +
  • + 3º lugar: Vale de 5€ na compra de uma sweat de EIC e brindes da CloudFlare. +
    • +
+ +

Como me posso juntar à leaderboard NEIIST X CLOUDFLARE?

+ +

+ Para te juntares à leaderboard, tens de fazer + [login] no site + do Advent Of Code, por uma das seguintes formas: +

+ +
    + {['Github', 'Google', 'Twitter', 'Reddit'].map(provider => ( +
  • - {provider}
    • + ))} +
+ +

+ Depois de fazeres login, tens de ir a [leaderboard] + {' > '}[Private leaderboard], e coloca o código da + leaderboard NEIIST X CloudFlare e clicar em [Join]! +

+ +

+ Caso não te consigas juntar à leaderboard, por favor contacta-nos por email + neiist@tecnico.ulisboa.pt para que possamos ajudar. +

+ +

+ O NEIIST e a CloudFlare desejam-te boa sorte e um feliz Advent Of Code! +

+ +

+ [1] Participação limitada a alunos do Instituto Superior + Técnico (a ser verificado aquando da atribuição de prémios). +
+ [2] Escolha de sweats de anos letivos anteriores está limitada ao stock existente. +

+ +
+ NEIIST Logo + Cloudflare Logo +
+ + +
+
+
+ ); +} \ No newline at end of file diff --git a/client/src/pages/aoc/styles.css b/client/src/pages/aoc/styles.css new file mode 100644 index 00000000..a421ac63 --- /dev/null +++ b/client/src/pages/aoc/styles.css @@ -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; +} \ No newline at end of file