Implement Contests page

ancc-iitd · Sep 25, 2024 · a52667c · a52667c
1 parent 7a88d60
commit a52667c
Show file tree

Hide file tree

Showing 5 changed files with 320 additions and 0 deletions.
diff --git a/contests.css b/contests.css
@@ -0,0 +1,137 @@
+
+.contests-table-outer{
+    width: 90vw;
+    height: 20vh;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 20px;
+    font-family: "Poppins";
+}
+
+.contests-table-title-outer{
+    width: 100%;
+    height: 50px;
+    background-color: #161719;
+    border-radius: 50px 50px 0 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: 24px;
+    font-weight: 350;
+}
+
+.contests-list-outer{
+    width: 100%;
+    margin-top: 5px;
+}
+
+.contests-tile-outer{
+    width: 100%;
+    height: 80px;
+    background-color: #161719;
+    display: flex;
+    align-items: center;
+    color: white;
+    margin-top: 2px;
+    margin-bottom: 5px;
+}
+.centered-flex{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.contest-tile-name{
+    width: 25%;
+    /* background-color: rgb(41, 41, 41); */
+    margin-left: 1%;
+    margin-right: 1%;
+    font-size: 20px;
+}
+.contest-tile-divider{
+    width: 4px;
+    height: 80%;
+    border-radius: 100px;
+    background-color: #222629;
+
+}
+
+.contest-tile-start-outer{
+    width: 12%;
+    height: 100%;
+    /* background-color: rgb(41, 41, 41); */
+    margin-left: 1%;
+    margin-right: 1%;
+    font-size: 20px;
+}
+.contest-tile-block{
+    height: 80%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+.contest-tile-block-title{
+    font-size: 14px;
+    color: rgb(212, 212, 212);
+}
+.contest-tile-start-date{
+    font-size: 16px;
+}
+.contest-tile-start-time{
+    font-size: 16px;
+}
+.contest-tile-duration-outer{
+    width: 12%;
+    /* background-color: rgb(41, 41, 41); */
+    margin-left: 1%;
+    margin-right: 1%;
+    font-size: 20px;
+}
+.contest-tile-duration-duration{
+    font-size: 16px;
+}
+.contest-tile-editorial{
+    width: 10%;
+    /* background-color: rgb(41, 41, 41); */
+    margin-left: 1%;
+    margin-right: 1%;
+    font-size: 20px;
+    color: rgb(212, 212, 212);
+}
+.contest-tile-virtual-outer{
+    width: 15%;
+    /* background-color: rgb(41, 41, 41); */
+    margin-left: 1%;
+    margin-right: 1%;
+    font-size: 20px;
+}
+.contest-tile-virtual-btn{
+    width: 90%;
+    padding: 3px;
+    background-color:  #222629;
+    display: flex;
+    justify-content: center;
+    border-radius: 5px;
+    border: 2px solid rgb(44, 44, 44);
+}
+.contest-tile-action-outer{
+    width: 10%;
+    /* background-color: rgb(41, 41, 41); */
+    margin-left: 1%;
+    margin-right: 1%;
+    font-size: 20px;
+    flex-grow: 1;
+}
+.contest-tile-action-btn{
+    width: 90%;
+    padding: 3px;
+    background-color:  #222629;
+    display: flex;
+    justify-content: center;
+    border-radius: 5px;
+    border: 2px solid rgb(44, 44, 44);
+}
+
+.is-template{
+    display: none;
+}
diff --git a/contests.html b/contests.html
@@ -0,0 +1,174 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link href="./main.css" rel="stylesheet" >
+    <link href="./contests.css" rel="stylesheet">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <title>ANCC IITD</title>
+    <!-- Codeforces CSS-->
+    <style type="text/css">.recent-actions{margin:1em;font-size:.9em}.rated-user{font-family:helvetica neue,Helvetica,Arial,sans-serif;text-decoration:none!important;font-weight:700;display:inline-block}.user-black{color:#000!important;font-weight:400!important}.user-legendary{color:red!important}.user-legendary::first-letter{color:#000!important}.legendary-user-first-letter{color:#000!important}.user-red{color:red!important}.user-fire{color:red!important}.user-yellow{color:#bb0!important}.user-violet{color:#a0a!important}.user-orange{color:#ff8c00!important}.user-blue{color:blue!important}.user-cyan{color:#03a89e!important}.user-green{color:green!important}.user-gray{color:gray!important}.user-admin{color:#000!important}</style>
+  </head>
+  <body style="background-color: black">
+    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
+      <div class="container-fluid">
+        <a class="navbar-brand h1 my-0" href="index.html">ANCC</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-sm-0">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="index.html">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="socp.html">SoCP 2021</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="previous-team.html">Team 2023</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="contests.html">Contests</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <div class="px-3 pt-5 pb-4 mb-3 text-center text-white bg-dark" style="background-color: #747474; border-radius: 0 0 60% 60%/0 0 30% 30%;  z-index: 9999; opacity: 1.0;">
+      <h1 class="display-2">Algorithms and Coding Club<br>IIT Delhi</h1>
+      <p class="lead">Learn. Code. Win.</p>
+      <hr class="my-3 mx-5">
+      <a target="_blank" class = "m-2 text-white text-decoration-none" href="https://www.youtube.com/channel/UC7XoOZ3Ip7i8-78jYLjAC2Q">
+        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
+          <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
+        </svg>
+      </a>
+      <a target="_blank" class = "m-2 text-white text-decoration-none" href="https://www.instagram.com/ancc.iitd/?hl=en">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
+          <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
+        </svg>
+      </a>
+      <a target="_blank" class = "m-2 text-white text-decoration-none" href="https://www.facebook.com/anciitd/">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
+          <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
+        </svg>
+      </a> 
+      <a target="_blank" class = "m-2 text-white text-decoration-none" href="https://discord.gg/x8pvE8sFGP">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
+          <path d="M6.552 6.712c-.456 0-.816.4-.816.888s.368.888.816.888c.456 0 .816-.4.816-.888.008-.488-.36-.888-.816-.888zm2.92 0c-.456 0-.816.4-.816.888s.368.888.816.888c.456 0 .816-.4.816-.888s-.36-.888-.816-.888z"/>
+          <path d="M13.36 0H2.64C1.736 0 1 .736 1 1.648v10.816c0 .912.736 1.648 1.64 1.648h9.072l-.424-1.48 1.024.952.968.896L15 16V1.648C15 .736 14.264 0 13.36 0zm-3.088 10.448s-.288-.344-.528-.648c1.048-.296 1.448-.952 1.448-.952-.328.216-.64.368-.92.472-.4.168-.784.28-1.16.344a5.604 5.604 0 0 1-2.072-.008 6.716 6.716 0 0 1-1.176-.344 4.688 4.688 0 0 1-.584-.272c-.024-.016-.048-.024-.072-.04-.016-.008-.024-.016-.032-.024-.144-.08-.224-.136-.224-.136s.384.64 1.4.944c-.24.304-.536.664-.536.664-1.768-.056-2.44-1.216-2.44-1.216 0-2.576 1.152-4.664 1.152-4.664 1.152-.864 2.248-.84 2.248-.84l.08.096c-1.44.416-2.104 1.048-2.104 1.048s.176-.096.472-.232c.856-.376 1.536-.48 1.816-.504.048-.008.088-.016.136-.016a6.521 6.521 0 0 1 4.024.752s-.632-.6-1.992-1.016l.112-.128s1.096-.024 2.248.84c0 0 1.152 2.088 1.152 4.664 0 0-.68 1.16-2.448 1.216z"/>
+        </svg>
+      </a>
+    </div>
+
+    <div class="contests-table-outer">
+      <div class="contests-table-title-outer">
+        Contests organized by ANCC
+      </div>
+      <div class="contests-list-outer">
+        <div class="contests-tile-outer contests-tile-template is-template">
+          <div class="contest-tile-name centered-flex">CodeMania Blitz 2.0 2024</div>
+          <div class="contest-tile-divider"></div>
+          <div class="contest-tile-start-outer centered-flex">
+            <div class="contest-tile-block">
+              <div class="contest-tile-block-title">Starts on</div>
+              <div class="contest-tile-start-date">22-08-2024</div>
+              <div class="contest-tile-start-time">8:05 PM</div>
+            </div>
+          </div>
+          <div class="contest-tile-divider"></div>
+          <div class="contest-tile-start-outer centered-flex">
+            <div class="contest-tile-block">
+              <div class="contest-tile-block-title"> Duration</div>
+              <div class="contest-tile-duration-duration">22-08-2024</div>
+            </div>
+          </div>
+          <div class="contest-tile-divider"></div>
+          <div class="contest-tile-editorial centered-flex">Editorial</div>
+          <div class="contest-tile-divider"></div>
+          <div class="contest-tile-virtual-outer centered-flex">
+            <div class="contest-tile-virtual-btn">
+
+              Virtual Participate
+            </div>
+          </div>
+          <div class="contest-tile-divider"></div>
+          <div class="contest-tile-action-outer centered-flex">
+            <div class="contest-tile-action-btn">
+              In Progress
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+    <script type="text/javascript">  
+      function loadContests() {
+        let Sheet = new XMLHttpRequest();
+        Sheet.open("GET","https://docs.google.com/spreadsheets/d/1RWcSfjy6gEPpgkwgm_6sHOPnDNdwK0QpzQQXHeyKUzw/export?format=tsv",true);
+
+        Sheet.onload = () => {
+          let values=Sheet.responseText;
+          console.log(values);
+          let index=[];
+          let firstRow=true;
+          let rows=values.split('\r');
+          rows.forEach(r=> {
+            cols=r.split('\t');
+            if(firstRow){
+              cols.forEach(col=>index.push(col));
+            }
+            else {
+              let detailsMap={};
+              for(let i=0;i<cols.length;i++){
+                detailsMap[index[i]]=cols[i];
+              }
+              generateContest(detailsMap);
+            }
+            firstRow=false;
+          })
+
+        }
+        Sheet.send(null);
+      }
+      loadContests();
+      function generateContest(detailsMap) {
+        let newTile=document.querySelector(".contests-tile-template").cloneNode(true);
+
+        newTile.querySelector(".contest-tile-name").innerHTML=detailsMap['Name'];
+        newTile.querySelector(".contest-tile-start-date").innerHTML=detailsMap['Start Date'];
+        newTile.querySelector(".contest-tile-start-time").innerHTML=detailsMap['Start Time'];
+        newTile.querySelector(".contest-tile-duration-duration").innerHTML=detailsMap['Duration'];
+
+        if(detailsMap['Editorial Link']!=""){
+          newTile.querySelector(".contest-tile-editorial").addEventListener('click',()=>{
+            window.open(detailsMap['Editorial Link'],"_blank");
+          });
+        }
+        else{
+          newTile.querySelector(".contest-tile-editorial").innerHTML="";
+        } 
+        if(detailsMap['Virtual Participation Link']!=""){
+          newTile.querySelector(".contest-tile-virtual-btn").addEventListener('click',()=>{
+            window.open(detailsMap['Virtual Participation Link'],"_blank");
+          });
+        }
+        else{
+          newTile.querySelector(".contest-tile-virtual-btn").style.display="none";
+        }
+        newTile.querySelector(".contest-tile-action-btn").innerHTML=detailsMap['Contest Progress'];
+        if(detailsMap['Action Link']!=""){
+          newTile.querySelector(".contest-tile-action-btn").addEventListener('click',()=>{
+            window.open(detailsMap['Action Link'],"_blank");
+          });
+        }
+        newTile.className="contests-tile-outer";
+        document.querySelector(".contests-list-outer").appendChild(newTile);
+      }
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -30,6 +30,9 @@
             <li class="nav-item">
               <a class="nav-link" href="previous-team.html">Team 2023</a>
             </li>
+            <li class="nav-item">
+              <a class="nav-link" href="contests.html">Contests</a>
+            </li>
           </ul>
         </div>
       </div>

diff --git a/previous-team.html b/previous-team.html
@@ -31,6 +31,9 @@
             <li class="nav-item">
               <a class="nav-link active" href="previous-team.html">Team 2023</a>
             </li>
+            <li class="nav-item">
+              <a class="nav-link" href="contests.html">Contests</a>
+            </li>
           </ul>
         </div>
       </div>

diff --git a/socp.html b/socp.html
@@ -29,6 +29,9 @@
             <li class="nav-item">
               <a class="nav-link" href="previous-team.html">Team 2023</a>
             </li>
+            <li class="nav-item">
+              <a class="nav-link" href="contests.html">Contests</a>
+            </li>
           </ul>
         </div>
       </div>