From 031bd218698bee5dfbec70390cd53e75b59aea34 Mon Sep 17 00:00:00 2001 From: Ajayendra2705 Date: Sun, 1 Dec 2024 23:42:31 +0530 Subject: [PATCH 1/3] Made Carousel in the Events Psge Events --- npm-shrinkwrap.json | 4 +- templates/event-articles/cosplay23.njk | 158 +++++++++++++-- templates/event-articles/qatq.njk | 214 +++++++++++++++++---- templates/event-articles/seekers-quest.njk | 138 ++++++++++++- test/site.js | 2 +- 5 files changed, 449 insertions(+), 67 deletions(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 0ddfd1b8..015761d5 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1,12 +1,12 @@ { "name": "mask", - "version": "3.4.6", + "version": "3.4.7", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "mask", - "version": "3.4.6", + "version": "3.4.7", "license": "MPL-2.0", "dependencies": { "axios": "^1.4.0", diff --git a/templates/event-articles/cosplay23.njk b/templates/event-articles/cosplay23.njk index eeeaf6df..d6ffcb6b 100644 --- a/templates/event-articles/cosplay23.njk +++ b/templates/event-articles/cosplay23.njk @@ -22,18 +22,42 @@ The atmosphere was electric.

-
- {{ slide('cosplay23', 'ash_pika.jpg') }} - {# {{ slide('cosplay23', 'goku.jpg') }} #} - {{ slide('cosplay23', 'kitagawa.jpg') }} - {{ slide('cosplay23', 'levi.jpg') }} - {{ slide('cosplay23', 'luffy1.jpg') }} - {{ slide('cosplay23', 'luffy2.jpg') }} - {{ slide('cosplay23', 'luffy3.jpg') }} - {{ slide('cosplay23', 'naruto.jpg') }} - {{ slide('cosplay23', 'taki_mitsuha.jpg') }} - {{ slide('cosplay23', 'tanjiro.jpg') }} - {{ slide('cosplay23', 'yor_forger.jpg') }} +
+
+
+ Cosplay 2023 - Ash & Pikachu +
+
+ Cosplay 2023 - Kitagawa +
+
+ Cosplay 2023 - Levi +
+
+ Cosplay 2023 - Luffy 1 +
+
+ Cosplay 2023 - Luffy 2 +
+
+ Cosplay 2023 - Luffy 3 +
+
+ Cosplay 2023 - Naruto +
+
+ Cosplay 2023 - Taki & Mitsuha +
+
+ Cosplay 2023 - Tanjiro +
+
+ Cosplay 2023 - Yor Forger +
+
+
+
+

Here are some cosplayers from that fabulous evening.

@@ -42,7 +66,7 @@ The cosplayers themselves were the highlight of the event. Cosplayers could be spotted, and attendees were glad to have their pictures taken with their favourite characters. Fans were excited to meet their favourite characters in person. The overall atmosphere of the event was very positive. Everyone was having a great time, and there was a lot of excitement in the air. The event was a great way for anime, manga, and video game fans to come together and celebrate their love of their hobbies.

- MASK was on the scene to interview characters from anime and manga by using a special device that allowed them to travel to the world of the characters. Once they arrived in the world of the characters, they interviewed them and learn more about their lives and their stories. The team was able to interview various characters, including Luffy, Tanjiro, Ash & Pikachu, another Luffy, Naruto, Levi, yet another Luffy and many others. The interviews were a great way for fans of anime and manga to learn more about their favourite characters and to get a glimpse into their lives. + MASK was on the scene to interview characters from anime and manga by using a special device that allowed them to travel to the world of the characters. Once they arrived in the world of the characters, they interviewed them and learned more about their lives and their stories. The team was able to interview various characters, including Luffy, Tanjiro, Ash & Pikachu, another Luffy, Naruto, Levi, yet another Luffy and many others. The interviews were a great way for fans of anime and manga to learn more about their favourite characters and to get a glimpse into their lives.

Here are the questions that MASK asked the characters:
@@ -65,3 +89,111 @@ {% endblock %} +{% block eventCSS %} + +{% endblock %} + +{% block eventJS %} + + + + +{% endblock %} diff --git a/templates/event-articles/qatq.njk b/templates/event-articles/qatq.njk index f651b549..3cba1590 100644 --- a/templates/event-articles/qatq.njk +++ b/templates/event-articles/qatq.njk @@ -4,51 +4,181 @@ {% set pagedesc = 'Anime enthusiasts from diverse fandoms recently united for an electrifying quiz event, showcasing their knowledge and competing for exclusive merch and enticing prizes. Relive the excitement of this unforgettable celebration, where fans celebrated their shared love for anime in a thrilling clash of wits and passion.' %} {% block eventContent %} -

- Date: March 12, 2023
- Location: V4, Vikramshila
- Author: Ayush Parmar
-
-

- After the end of meticulous mid-semester exams for the seniors and the first semester of their college lives for the freshmen, our society decided to start things off in the spring semester with a quiz event in March bringing fans from four different fandoms together- namely the power-packed One Punch Man, the heroic My Hero Academia, the epic Naruto, and the thrilling Attack on Titan. -

-

- Participants eagerly engaged their minds, furiously tapping on their devices in pursuit of the ultimate reward: coveted merch t-shirts adorned with the - emblems of their favorite anime, accompanied by a treasure trove of enticing goodies. In a comical twist of fate, the first prize winners - turned out to be students from different academic years. -

-
-
-
- {{ slide('qatq', '4.jpg') }} - {{ slide('qatq', '1.jpg') }} - {{ slide('qatq', '2.jpg') }} - {{ slide('qatq', '3.jpg') }} -
-

Here are some images from the event

-
-
-

- Despite the last-minute venue changes and technical challenges, the organizers embraced their inner anime heroes, overcoming obstacles with unwavering enthusiasm. - The event buzzed with a vibrant atmosphere as participants showcased their knowledge of beloved anime worlds. This experience has taught us valuable lessons, - and we are committed to improving future events for everyone's enjoyment. Together, let's continue to celebrate the magic of anime and look forward - to the next chapter of our shared journey. -

+
+ Date: March 12, 2023
+ Location: V4, Vikramshila
+ Author: Ayush Parmar
+
+

+ After the end of meticulous mid-semester exams for the seniors and the first semester of their college lives for the freshmen, our society decided to start things off in the spring semester with a quiz event in March bringing fans from four different fandoms together- namely the power-packed One Punch Man, the heroic My Hero Academia, the epic Naruto, and the thrilling Attack on Titan. +

+

+ Participants eagerly engaged their minds, furiously tapping on their devices in pursuit of the ultimate reward: coveted merch t-shirts adorned with the emblems of their favorite anime, accompanied by a treasure trove of enticing goodies. In a comical twist of fate, the first prize winners turned out to be students from different academic years. +

+
+
+
+
+
+ Anime Event Image 1 +
+
+ Anime Event Image 2 +
+
+ Anime Event Image 3 +
+
+ Anime Event Image 4 +
+
+
+
+
+
+

Here are some images from the event

+
+
+

+ Despite the last-minute venue changes and technical challenges, the organizers embraced their inner anime heroes, overcoming obstacles with unwavering enthusiasm. The event buzzed with a vibrant atmosphere as participants showcased their knowledge of beloved anime worlds. This experience has taught us valuable lessons, and we are committed to improving future events for everyone's enjoyment. Together, let's continue to celebrate the magic of anime and look forward to the next chapter of our shared journey. +

{% endblock %} {% block eventCSS %} - + + @media (max-width: 768px) { + .swiper-container { + width: 90vw; + height: 50vh; + } + .swiper-button-next, + .swiper-button-prev { + width: 10px; + height: 10px; + top: 45%; + z-index:10; + } + .swiper-button-next { + margin-right:20px; + height:20px + width:20px; + } + .swiper-button-prev { + margin-left:20px; + } + .swiper-slide img { + height: 85%; + width: auto; + object-fit: contain; + display: block; + margin: auto; + align-items:center; + } + } + +{% endblock %} + +{% block eventJS %} + + + + {% endblock %} diff --git a/templates/event-articles/seekers-quest.njk b/templates/event-articles/seekers-quest.njk index a5259c24..3f177ab4 100644 --- a/templates/event-articles/seekers-quest.njk +++ b/templates/event-articles/seekers-quest.njk @@ -15,19 +15,32 @@ I mean, it's kinda boring how we just sit in Vikramshila with our computers, attempting a quiz in a room full of people, without really discussing with our friends.
Wouldn't it be better if you did something, I don't know, which I can enjoy with my friends or something?


-  - Nobody. This narration is fixtional. The next part, not so much. +  - Nobody. This narration is fictional. The next part, not so much.

- With this line of thought, we decided that it was time we let go of our online link and proceed with a completely offline event for teams. The Anime Seekers' Quest was a treasure hunt planned shortly after the Quad Anime Trivia Quiz. Teams of upto 3 people spent 2 hours, using the clues provided and their anime knowledge (and Google... yes, we allowed it. ) around 2.2 covering various locations in a quest to claim their prizes from a treasure curated just for the anime fans. + With this line of thought, we decided that it was time we let go of our online link and proceed with a completely offline event for teams. The Anime Seekers' Quest was a treasure hunt planned shortly after the Quad Anime Trivia Quiz. Teams of up to 3 people spent 2 hours, using the clues provided and their anime knowledge (and Google... yes, we allowed it.) around 2.2 covering various locations in a quest to claim their prizes from a treasure curated just for the anime fans.

-
- {{ slide('seekers-quest', '1.jpg') }} - {{ slide('seekers-quest', '2.jpg') }} - {{ slide('seekers-quest', '3.jpg') }} - {{ slide('seekers-quest', '4.jpg') }} +
+
+
+ Anime Seekers’ Quest Image 1 +
+
+ Anime Seekers’ Quest Image 2 +
+
+ Anime Seekers’ Quest Image 3 +
+
+ Anime Seekers’ Quest Image 4 +
+
+
+
+
-

Gallery of the winning teams

+

Gallery of the winning teams

With everything going on in the campus, we had a wonderful response from the participants. As the sun went down, the event ended as a beautiful success. We would like to congratulate those who won the event: @@ -39,7 +52,7 @@

-

The team behind the event. Yo Team!

+

The team behind the event. Yo Team!

{% endblock %} @@ -51,5 +64,112 @@ font-style: italic; color: var(--off-white); } + + .image-container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin: 20px auto; + width: 100%; + max-width: 900px; + overflow: hidden; + text-align: center; + } + + .swiper-container { + width: 80vw; + height: 70vh; + max-width: 900px; + border-radius: 10px; + overflow: hidden; + position: relative; + } + + .swiper-slide img { + height: 100%; + width: auto; + object-fit: contain; + display: block; + margin: auto; + } + + .swiper-button-next, + .swiper-button-prev { + color: red; + width: 40px; + height: 40px; + border-radius: 0; + top: 50%; + transform: translateY(-50%); + transition: background-color 0.3s ease; + } + .swiper-button-next { + right: 15px; + } + .swiper-button-prev { + left: 15px; + } + .swiper-button-next:hover, + .swiper-button-prev:hover { + background-color: rgba(255, 0, 0, 0.7); + } + + @media (max-width: 768px) { + .swiper-container { + width: 90vw; + height: 50vh; + } + .swiper-button-next, + .swiper-button-prev { + width: 30px; + height: 30px; + top: 45%; + z-index:10; + } + .swiper-button-next { + margin-right:20px; + } + .swiper-button-prev { + margin-left:20px; + } + .swiper-slide img { + height: 85%; + width: auto; + object-fit: contain; + display: block; + margin: auto; + align-items:center; + } + } {% endblock %} + +{% block eventJS %} + + + + +{% endblock %} diff --git a/test/site.js b/test/site.js index 6256141f..63d18024 100644 --- a/test/site.js +++ b/test/site.js @@ -27,7 +27,7 @@ describe('Server', () => { return assert(query?.name === 'MASK Society'); }).timeout(10_000); }); - + console.log(PARAMS); it('should have the right PARAMS object', () => assert.deepEqual(PARAMS, { test: true, discordless: true })); pages.forEach(page => { From 780a7238c12b9bf63e053317aeb93262f8468dfb Mon Sep 17 00:00:00 2001 From: Ajayendra2705 Date: Mon, 2 Dec 2024 21:03:18 +0530 Subject: [PATCH 2/3] updated the carousel --- templates/_event.njk | 154 ++++++++++++++--- templates/event-articles/cosplay23.njk | 173 ++++--------------- templates/event-articles/qatq.njk | 185 ++++----------------- templates/event-articles/seekers-quest.njk | 155 +++-------------- 4 files changed, 218 insertions(+), 449 deletions(-) diff --git a/templates/_event.njk b/templates/_event.njk index 52b05670..47b03dfe 100644 --- a/templates/_event.njk +++ b/templates/_event.njk @@ -18,34 +18,31 @@ {% endblock %} {% block customjs %} - - window.addEventListener('load', () => { - const slideshowContainer = document.querySelector('.slideshow-container'); - if (!slideshowContainer) return; - setInterval(() => { - nextSlideTime -= 25; - if (nextSlideTime < 0) nextSlide(slideshowContainer); - }, 25); - {# function checkForSlideChange () { - setTimeout(checkForSlideChange, 25); - }; - checkForSlideChange(); #} - }); - + {# - - -{% endblock %} diff --git a/templates/event-articles/qatq.njk b/templates/event-articles/qatq.njk index 3cba1590..b2f028a8 100644 --- a/templates/event-articles/qatq.njk +++ b/templates/event-articles/qatq.njk @@ -4,19 +4,21 @@ {% set pagedesc = 'Anime enthusiasts from diverse fandoms recently united for an electrifying quiz event, showcasing their knowledge and competing for exclusive merch and enticing prizes. Relive the excitement of this unforgettable celebration, where fans celebrated their shared love for anime in a thrilling clash of wits and passion.' %} {% block eventContent %} -
- Date: March 12, 2023
- Location: V4, Vikramshila
- Author: Ayush Parmar
-
-

- After the end of meticulous mid-semester exams for the seniors and the first semester of their college lives for the freshmen, our society decided to start things off in the spring semester with a quiz event in March bringing fans from four different fandoms together- namely the power-packed One Punch Man, the heroic My Hero Academia, the epic Naruto, and the thrilling Attack on Titan. -

-

- Participants eagerly engaged their minds, furiously tapping on their devices in pursuit of the ultimate reward: coveted merch t-shirts adorned with the emblems of their favorite anime, accompanied by a treasure trove of enticing goodies. In a comical twist of fate, the first prize winners turned out to be students from different academic years. -

-
-
+
+ Date: March 12, 2023
+ Location: V4, Vikramshila
+ Author: Ayush Parmar
+
+

+ After the end of meticulous mid-semester exams for the seniors and the first semester of their college lives for the freshmen, our society decided to start things off in the spring semester with a quiz event in March bringing fans from four different fandoms together- namely the power-packed One Punch Man, the heroic My Hero Academia, the epic Naruto, and the thrilling Attack on Titan. +

+

+ Participants eagerly engaged their minds, furiously tapping on their devices in pursuit of the ultimate reward: coveted merch t-shirts adorned with the + emblems of their favorite anime, accompanied by a treasure trove of enticing goodies. In a comical twist of fate, the first prize winners + turned out to be students from different academic years. +

+
+
@@ -38,147 +40,28 @@

Here are some images from the event

-
-

- Despite the last-minute venue changes and technical challenges, the organizers embraced their inner anime heroes, overcoming obstacles with unwavering enthusiasm. The event buzzed with a vibrant atmosphere as participants showcased their knowledge of beloved anime worlds. This experience has taught us valuable lessons, and we are committed to improving future events for everyone's enjoyment. Together, let's continue to celebrate the magic of anime and look forward to the next chapter of our shared journey. -

+
+

+ Despite the last-minute venue changes and technical challenges, the organizers embraced their inner anime heroes, overcoming obstacles with unwavering enthusiasm. + The event buzzed with a vibrant atmosphere as participants showcased their knowledge of beloved anime worlds. This experience has taught us valuable lessons, + and we are committed to improving future events for everyone's enjoyment. Together, let's continue to celebrate the magic of anime and look forward + to the next chapter of our shared journey. +

{% endblock %} {% block eventCSS %} - -{% endblock %} - -{% block eventJS %} - - - + .images > img { + margin: 5px; + max-height: calc(min(40vw, 40vh)); + max-width: calc(min(60vw, 60vh)); + } + {% endblock %} diff --git a/templates/event-articles/seekers-quest.njk b/templates/event-articles/seekers-quest.njk index 3f177ab4..14fdd0af 100644 --- a/templates/event-articles/seekers-quest.njk +++ b/templates/event-articles/seekers-quest.njk @@ -15,33 +15,33 @@ I mean, it's kinda boring how we just sit in Vikramshila with our computers, attempting a quiz in a room full of people, without really discussing with our friends.
Wouldn't it be better if you did something, I don't know, which I can enjoy with my friends or something?


-  - Nobody. This narration is fictional. The next part, not so much. +  - Nobody. This narration is fixtional. The next part, not so much.

- With this line of thought, we decided that it was time we let go of our online link and proceed with a completely offline event for teams. The Anime Seekers' Quest was a treasure hunt planned shortly after the Quad Anime Trivia Quiz. Teams of up to 3 people spent 2 hours, using the clues provided and their anime knowledge (and Google... yes, we allowed it.) around 2.2 covering various locations in a quest to claim their prizes from a treasure curated just for the anime fans. + With this line of thought, we decided that it was time we let go of our online link and proceed with a completely offline event for teams. The Anime Seekers' Quest was a treasure hunt planned shortly after the Quad Anime Trivia Quiz. Teams of upto 3 people spent 2 hours, using the clues provided and their anime knowledge (and Google... yes, we allowed it. ) around 2.2 covering various locations in a quest to claim their prizes from a treasure curated just for the anime fans.

-
-
-
- Anime Seekers’ Quest Image 1 -
-
- Anime Seekers’ Quest Image 2 -
-
- Anime Seekers’ Quest Image 3 -
-
- Anime Seekers’ Quest Image 4 -
-
-
-
-
-
-

Gallery of the winning teams

-
+
+
+
+ Anime Event Image 1 +
+
+ Anime Event Image 2 +
+
+ Anime Event Image 3 +
+
+ Anime Event Image 4 +
+
+
+
+
+
+

Gallery of the winning teams

+

With everything going on in the campus, we had a wonderful response from the participants. As the sun went down, the event ended as a beautiful success. We would like to congratulate those who won the event:

    @@ -52,7 +52,7 @@
-

The team behind the event. Yo Team!

+

The team behind the event. Yo Team!

{% endblock %} @@ -64,112 +64,5 @@ font-style: italic; color: var(--off-white); } - - .image-container { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - margin: 20px auto; - width: 100%; - max-width: 900px; - overflow: hidden; - text-align: center; - } - - .swiper-container { - width: 80vw; - height: 70vh; - max-width: 900px; - border-radius: 10px; - overflow: hidden; - position: relative; - } - - .swiper-slide img { - height: 100%; - width: auto; - object-fit: contain; - display: block; - margin: auto; - } - - .swiper-button-next, - .swiper-button-prev { - color: red; - width: 40px; - height: 40px; - border-radius: 0; - top: 50%; - transform: translateY(-50%); - transition: background-color 0.3s ease; - } - .swiper-button-next { - right: 15px; - } - .swiper-button-prev { - left: 15px; - } - .swiper-button-next:hover, - .swiper-button-prev:hover { - background-color: rgba(255, 0, 0, 0.7); - } - - @media (max-width: 768px) { - .swiper-container { - width: 90vw; - height: 50vh; - } - .swiper-button-next, - .swiper-button-prev { - width: 30px; - height: 30px; - top: 45%; - z-index:10; - } - .swiper-button-next { - margin-right:20px; - } - .swiper-button-prev { - margin-left:20px; - } - .swiper-slide img { - height: 85%; - width: auto; - object-fit: contain; - display: block; - margin: auto; - align-items:center; - } - } {% endblock %} - -{% block eventJS %} - - - - -{% endblock %} From 919c14d3ee725cb443eeed207c84e791a607c76b Mon Sep 17 00:00:00 2001 From: Ajayendra2705 Date: Thu, 5 Dec 2024 15:35:11 +0530 Subject: [PATCH 3/3] made the changes told. I added only the told edits till now. If I get some ideas to make it look better I will add it. --- templates/_event.njk | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/templates/_event.njk b/templates/_event.njk index 47b03dfe..c2876321 100644 --- a/templates/_event.njk +++ b/templates/_event.njk @@ -200,7 +200,7 @@ color: black; top: 50%; z-index: 10; - padding : 5px 5px; + padding : 7px 7px 7px 7px; width: 10px; height: 30px; display: flex; @@ -208,6 +208,7 @@ align-items: center; cursor: pointer; font-size: 10px; + border-radius: 10%; } .swiper-button-next { @@ -223,12 +224,13 @@ .swiper-button-prev::after { font-size: 20px; font-weight: bold; - color: red; + color: var(--error-red); } .swiper-button-next:hover, .swiper-button-prev:hover { - background-color: black; + background-color: #272727; + transform : scale(1.09); } @media (max-width: 768px) { @@ -260,6 +262,9 @@ align-items:center; } } + .swiper-pagination .swiper-pagination-bullet { + background-color: var(--error-red); + } {% block eventCSS %} {% endblock %}