Add files via upload

HBD Krish/script.js

@@ -0,0 +1,36 @@
+const card = $('.card');
+const year = $('.year');
+const img = $('img');
+
+const assets = {imgs: [], idx: 0, cap: 0};
+
+for (let i = 2015; i <= 2023; i++) {
+    if (i == 2020) continue;
+    assets.imgs.push({year: i, file: `./assets/${i}.jpg`});
+    assets.cap++;
+}
+
+function set_card_bg() {
+    card.css('background', `url('${assets.imgs[assets.idx].file}')`);
+}
+
+function set_img() {
+    img.get().src = assets.imgs[assets.idx].file;
+    year.text(assets.imgs[assets.idx].year);
+    set_card_bg();
+}
+
+$('.footer').on('click', () => {
+    $('.active').removeClass('active');
+    $('.back').addClass('active');
+})
+
+$('.left').on('click', () => {
+    assets.idx = (assets.idx > 0 ? assets.idx : assets.cap) - 1;
+    set_img();
+})
+
+$('.right').on('click', () => {
+    assets.idx = (assets.idx + 1) % assets.cap;
+    set_img();
+})

HBD Krish/styles.css

@@ -0,0 +1,100 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
+    font-family: 'Poppins', sans-serif;
+}
+
+.card {
+    background: white;
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    max-width: 500px;
+    max-height: 90vh;
+    width: 90%;
+    margin: 20px;
+    position: relative;
+    overflow: scroll;
+}
+.card-stuff {
+    display: none;
+}
+
+.ctrl {
+    position: absolute;
+    width: 50%;
+    top: 0;
+    bottom: 0;
+}
+
+.left {
+    left: 0;
+    background: transparent;
+}
+
+.right {
+    right: 0;
+    background: transparent;
+}
+
+.active {
+    display: initial;
+}
+
+.header {
+    background: #ff6f91;
+    padding: 10px;
+    border-radius: 10px 10px 0 0;
+}
+
+.header h1 {
+    color: white;
+    font-family: 'Pacifico', cursive;
+    margin: 0;
+    font-size: 2.5em;
+    text-shadow: 1px 1px black;
+}
+
+.content {
+    padding: 20px;
+}
+
+.message {
+    font-size: 1.2em;
+    color: #555;
+    margin-top: 20px;
+}
+
+fieldset {
+    border: none;
+}
+
+.year {
+    font-size: 1.5rem;
+    color: #ff6f91;
+    text-shadow: 1px 1px black;
+}
+
+.footer {
+    background: #ff6f91;
+    padding: 10px;
+    border-radius: 0 0 10px 10px;
+    color: white;
+    font-weight: bold;
+}
+
+/* Responsive Styles */
+@media (max-width: 600px) {
+    .header h1 {
+        font-size: 2em;
+    }
+
+    .message {
+        font-size: 1em;
+    }
+}