Add Data Science Feature

deadlock-api · Oct 17, 2024 · a28dda3 · a28dda3
1 parent d0b1306
commit a28dda3
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 16 deletions.
diff --git a/public/assets/bubble_chart.svg b/public/assets/bubble_chart.svg
diff --git a/public/assets/colab.svg b/public/assets/colab.svg
diff --git a/public/index.html b/public/index.html
@@ -97,12 +97,38 @@ <h2>Deadlock Analytics API</h2>
             </p>
         </div>
     </div>
+    <div>
+        <a href="https://colab.research.google.com/drive/1-EuP_EoE2-G18puKioeDJJklL9N20YZR?usp=sharing"
+           title="Deadlock Data Science API" class="feature">
+            <div>
+                <img src="assets/bubble_chart.svg" alt="Data Science Icon" width="80" height="80">
+                <h2>Deadlock Data Science API</h2>
+                <p>Providing data for use in data science projects.</p>
+            </div>
+        </a>
+        <br>
+        <div>
+            <a href="https://colab.research.google.com/drive/1-EuP_EoE2-G18puKioeDJJklL9N20YZR?usp=sharing"
+               title="Deadlock Data Science API" target="_blank">
+                <button>
+                    <img src="assets/colab.svg" alt="Key Icon" width="25" height="25" class="no-invert">
+                    Colab Active Matches - Data
+                </button>
+            </a>
+            <a href="https://discord.gg/XMF9Xrgfqu" title="Request Data API-Key" target="_blank">
+                <button>
+                    <img src="assets/key.svg" alt="Key Icon" width="25" height="25">
+                    Request an Data API-Key
+                </button>
+            </a>
+        </div>
+    </div>
 </main>
 <footer>
     <p id="policy">
-        deadlock-api.com is not endorsed by Valve and does not reflect the views or opinions of Valve or anyone
-        officially involved in producing or managing Valve properties. Valve and all associated properties are
-        trademarks or registered trademarks of Valve Corporation
+        <a href="https://deadlock-api.com" title="deadlock-api.com" class="highlight">deadlock-api.com</a> is not
+        endorsed by Valve and does not reflect the views or opinions of Valve or anyone officially involved in producing
+        or managing Valve properties.
     </p>
     <div id="footer-links">
         <a href="https://www.patreon.com/user?u=68961896" title="Patreon" target="_blank">
@@ -114,13 +140,13 @@ <h2>Deadlock Analytics API</h2>
         <a href="https://discord.gg/XMF9Xrgfqu" title="Discord" target="_blank">
             <button>
                 <img src="assets/discord.svg" alt="Discord Icon" width="25" height="25" class="no-invert">
-                API Discord
+                API
             </button>
         </a>
         <a href="https://discord.gg/rs23RCNqjt" title="Discord" target="_blank">
             <button>
                 <img src="assets/discord.svg" alt="Discord Icon" width="25" height="25" class="no-invert">
-                Developer Community Discord
+                Developer Community
             </button>
         </a>
         <a href="https://stats.uptimerobot.com/V1HIfGQT77" title="Status" target="_blank">

diff --git a/public/style.css b/public/style.css
@@ -3,20 +3,29 @@ body {
     background: #111217 url("assets/background.svg") no-repeat fixed left top;
     background-size: 100vw 100vh;
     color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100vh;
+    gap: 40px;
 }
 
 header {
     text-align: center;
-    height: 20vh;
-    width: 100vw;
+    height: 10vh;
+}
+
+* {
+    box-sizing: border-box;
 }
 
 main {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     justify-content: center;
-    gap: 40px;
-    width: 100%;
+    gap: 60px;
+    width: 90%;
+    margin: 0 auto;
 
     > div {
         text-align: center;
@@ -72,15 +81,15 @@ main {
 }
 
 footer {
-    position: fixed;
+    position: relative;
     bottom: 0;
     width: calc(100vw - 2rem);
     display: flex;
     flex-wrap: nowrap;
     gap: 0.4rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    align-items: center;
+    height: 20vh;
+    align-items: end;
+    margin-bottom: 20px;
 
     p#policy {
         max-width: 800px;
@@ -130,7 +139,7 @@ a.disabled-link {
     }
 }
 
-@media (max-width: 908px) {
+@media (max-width: 450px) {
     footer {
         visibility: hidden;
         display: none;