Skip to content

Commit

Permalink
Merge pull request #38 from MuNuChapterHKN/develop
Browse files Browse the repository at this point in the history 
Refactored Telegram messages, Activities section update, Floating header
  • Loading branch information
@AlbertoBaroso
AlbertoBaroso authored Jun 17, 2024
2 parents 550da9e + 2c086a3 commit c5c5edc
Show file tree
Hide file tree
Showing 5 changed files with 177 additions and 11 deletions.
3 changes: 0 additions & 3 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,6 @@ const Header = ({darkHeader = false} : {darkHeader? :boolean}) => {
<div className={styles.arrowDown}></div>
</div>
<ul className={styles.dropdown}>
<li className={isActive('/Activities/Activities') ? styles.activeDropdown : ''}
onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/Activities/Activities')}>Activities
</li>
<li className={isActive('/Activities/Events') ? styles.activeDropdown : ''}
onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleNavigate(e, '/Activities/Events')}>Events
</li>
Expand Down
16 changes: 11 additions & 5 deletions pages/api/telegram.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const TelegramBot = require("node-telegram-bot-api");
const fs = require("fs");
import TelegramBot from "node-telegram-bot-api";
import fs from "fs";
import { handleError } from "./application";

const token = process.env.TELEGRAM_TOKEN;
Expand All @@ -16,8 +16,8 @@ export async function shareNewApply(name: string) {
handleError(e, "Error retrieving count");
}
const counterMessage = counter ?? "Unknown";
const emoji1 = ["🔥", "✨", "👾"][Math.floor(Math.random() * 3)];
const emoji2 = ["🥳", "🤩", "😍"][Math.floor(Math.random() * 3)];
const emoji1 = getRandomEmoji(["🔥", "✨", "👾"]);
const emoji2 = getRandomEmoji(["🥳", "🤩", "😍"]);
const message = `${emoji1} Nuova Candidatura! ${emoji2}\nNome: ${name}\nCount: ${counterMessage}`;
await sendMessage(message);
}
Expand All @@ -28,8 +28,10 @@ export async function sendApplyFailedMessage(stage: string, applicant: string) {
}

export async function sendMessage(message: string) {
if (!token || !chatId)
throw new Error("Telegram APIs not configured.");
const bot = new TelegramBot(token, { polling: false });
await bot.sendMessage(chatId, message, { message_thread_id: threadId });
await bot.sendMessage(chatId, message, { message_thread_id: Number(threadId) });
}

function readCounter(): number {
Expand All @@ -53,3 +55,7 @@ function isFileOlderThanNDays(filePath: string, days: number): boolean {
const thirtyDaysInMilliseconds = days * 24 * 60 * 60 * 1000; // days in ms
return now - lastUpdated > thirtyDaysInMilliseconds;
}

function getRandomEmoji(emojis: string[]): string {
return emojis[Math.floor(Math.random() * emojis.length)];
}
147 changes: 147 additions & 0 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import Image from 'next/image'
import styles from '@/styles/Home/Home.module.css'
import activities_styles from '@/styles/Activities/Activities.module.scss'
import {useRouter} from "next/router";
import Layout from "../components/Layout";
import HomeLogo from "../components/Home/HomeLogo";
import RoundButton from "../components/molecules/RoundButton";
import {useEffect, useState} from "react";



export default function Home() {
const router = useRouter();
const [windowWidth, setWindowWidth] = useState(0);
Expand Down Expand Up @@ -100,6 +103,150 @@ export default function Home() {
</div>
</div>

<div className={styles.projectsContainer}>
<text className={styles.projectsText}>NEWS</text>
<text className={styles.projectsTitle}>Our Latest Projects</text>
<text className={styles.projectsSubtitle}>COMING SOON</text>
<div className={styles.projectsCards}>
<div className={styles.projectsLeft}>
<div className={styles.projectsImageClip}>
<img className={styles.projectsPicture} src="/Home/Projects/Sirius_vedere.jpg"
alt="project"/>
</div>
<text className={styles.projectTitle}>
Sirius: Seeing the Future Through the Eyes of the Present
</text>
<text className={styles.project}>For the first time, it was the HKN students who paid a visit to
a company: SIRIUS (Sirius | Home). For the new members, this was their first experience of
internal training, but the real novelty involved the existing members: being able to
personally visit a company turned out to be an...
</text>
{/*TODO: add link*/}
</div>
<div className={styles.projectsCenter}>
<div className={styles.projectsImageClip}>
<img className={styles.projectsPicture} src="/Home/Projects/Vivere_lassociazione.png"
alt="project"/>
</div>
<text className={styles.projectTitle}>Living the Association Online: A Beginner's Guide
</text>
<text className={styles.project}>Initially, the idea was born from loneliness. Staying locked at
home and not seeing anyone due to the lockdown was a condition that, while it might have
seemed exhilarating and almost heroic at first, had become devastating over time. The
thought of becoming a part of an honor society...
</text>
{/*TODO: add link*/}
</div>
<div className={styles.projectsRight}>
<div className={styles.projectsImageClip}>
<img className={styles.projectsPicture} src="/Home/Projects/Poli_covid.png" alt="project"/>
</div>
<text className={styles.projectTitle}>POLITO, HKN, and Covid-19: A Reflection</text>
<text className={styles.project}>Seventeen o'clock on a quiet Sunday in March. Silent because
the streets are deserted, and only our thoughts resonate louder than ever. In these cases,
all that's left is to give them shape by projecting them into much broader worlds than the
walls that confine us in these...
</text>
{/*TODO: add link*/}
</div>
</div>
</div>


<div className={activities_styles.allActivities}>
<div className={activities_styles.allActivities__background}/>

<div className={activities_styles.allActivities__content}>
<div className={activities_styles.allActivities__events}>
events
</div>
<div className={activities_styles.allActivities__title}>
Discover All Our Activities
</div>

<div className={activities_styles.allActivities__columns}>
<div className={activities_styles.allActivities__columns__left}>
<div className={activities_styles.allActivities__group1}>
<div className={activities_styles.allActivities__group__events}>events</div>
<div className={activities_styles.allActivities__group__title}>Events</div>
<div className={activities_styles.allActivities__group__text}>Our events are thought for anyone who
likes talking, debating, learning and
discovering
</div>

<div className={activities_styles.allActivities__group1__imgcont1}>
<img className={activities_styles.allActivities__group__img} src={'/Activities/Events/mentalWellnessDigitalWellBeing.png'} alt={'Event 3'}/>
</div>
<div className={activities_styles.allActivities__group1__imgcont2}>
<img className={activities_styles.allActivities__group__img} src={'/Activities/Events/event_2022.png'} alt={'Event 2'} style={{objectPosition: "75% 100%"}}/>
</div>
<div className={activities_styles.allActivities__group1__imgcont3}>
<img className={activities_styles.allActivities__group__img} src={'/Activities/Events/quantumQuest.png'} alt={'Event 1'}/>
</div>

<div className={activities_styles.allActivities__group1__discover}>
Discover
<RoundButton className={activities_styles.allActivities__group__button} onClick={() => router.push('/Activities/Events')}>events</RoundButton>
</div>
</div>
<div className={activities_styles.allActivities__group2}>
<div className={activities_styles.allActivities__group__events}>events</div>
<div className={activities_styles.allActivities__group__title}>Masterclass</div>
<div className={activities_styles.allActivities__group__text}>Our experts will provide you advices
and tips that will help you improving
your skills & enriching your CV
</div>

<div className={activities_styles.allActivities__group2__imgcont1}>
<img className={activities_styles.allActivities__group__img} src={'/Activities/Activities/MentalWellness.jpg'} alt={'discover1'}/>
</div>
<div className={activities_styles.allActivities__group2__imgcont2}>
<img className={activities_styles.allActivities__group__img} src={'/Activities/Activities/Hexakappathlon.jpg'} alt={'discover2'} style={{objectPosition: "75% 100%"}}/>
</div>
<div className={activities_styles.allActivities__group2__imgcont3}>
<img className={activities_styles.allActivities__group__img} src={'/Activities/Activities/FoundersDay.jpg'} alt={'discover1'}/>
</div>

<div className={activities_styles.allActivities__group2__discover}>
Discover
{/*<RoundButton className={activities_styles.allActivities__group__button} onClick={() => router.push('/Activities/Masterclasses')}>Masterclasses</RoundButton>*/}
<RoundButton className={activities_styles.allActivities__group__button} onClick={() => {}}>COMING SOON</RoundButton>
</div>
</div>
</div>

<div className={activities_styles.allActivities__columns__right}>

<div className={activities_styles.allActivities__group3}>
<div className={activities_styles.allActivities__group__events}>events</div>
<div className={activities_styles.allActivities__group__title}>Study Groups</div>
<div className={activities_styles.allActivities__group__text}>HKN members and PhD students will
help you with whatever concept you
might be struggling with
</div>

<div className={activities_styles.allActivities__group3__imgcont1}>
<img className={activities_styles.allActivities__group__img} src={'/Activities/Activities/Discover_2.jpeg'} alt={'discover1'}/>
</div>
<div className={activities_styles.allActivities__group3__imgcont2}>
<img className={activities_styles.allActivities__group__img} src={'/Activities/Activities/FormazioneInternaReply.jpeg'} alt={'discover2'} style={{objectPosition: "75% 100%"}}/>
</div>
<div className={activities_styles.allActivities__group3__imgcont3}>
<img className={activities_styles.allActivities__group__img} src={'/Activities/Activities/Discover_3.jpeg'} alt={'discover1'}/>
</div>

<div className={activities_styles.allActivities__group3__discover}>
Discover
<RoundButton className={activities_styles.allActivities__group__button} onClick={() => router.push('/Activities/StudyGroups')}>study
groups</RoundButton>
</div>
</div>
</div>
</div>
</div>
</div>


<div className={styles.applyCard}>
<text className={styles.textAreYouReady}>ARE YOU READY?</text>
<text className={styles.textJoinOurChapter}>Join Our Chapter &</text>
Expand Down
21 changes: 18 additions & 3 deletions styles/components/Header.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@



.header {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
height: 130px;
width: 100%;
z-index: 2;
margin-top: 20px;
margin-bottom: 30px;
/* Added styles for floating header */
position: fixed;
background-color:#061E33;
left: 0; /* Position at the left of the viewport */
z-index: 20; /* Ensure it stays on top of other elements */
margin-top: 0; /* Remove top margin as it's now fixed */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}









.logoTitle {
display: flex;
Expand Down
1 change: 1 addition & 0 deletions styles/components/Layout.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
}

.pageContent {
margin-top: 150px; /* Adjust the value if your header height changes */
width: 97%;
display: flex;
flex-direction: column;
Expand Down

0 comments on commit c5c5edc

Please sign in to comment.