Add Link to API Key Request

deadlock-api · Oct 15, 2024 · 0084272 · 0084272
1 parent 7334976
commit 0084272
Show file tree

Hide file tree

Showing 6 changed files with 182 additions and 60 deletions.
diff --git a/public/assets/github.svg b/public/assets/github.svg
diff --git a/public/assets/key.svg b/public/assets/key.svg
diff --git a/public/assets/patreon.svg b/public/assets/patreon.svg
diff --git a/public/assets/swagger.svg b/public/assets/swagger.svg
diff --git a/public/index.html b/public/index.html
@@ -17,52 +17,119 @@
 <body>
 <header><h1>Deadlock API</h1></header>
 <main>
-    <a href="https://assets.deadlock-api.com/" title="Deadlock Assets API" class="feature">
+    <div>
+        <a href="https://assets.deadlock-api.com/" title="Deadlock Assets API" class="feature">
+            <div>
+                <img src="assets/gallery.svg" alt="Gallery Icon" width="80" height="80">
+                <h2>Deadlock Assets API</h2>
+                <p>Images & Stats of heroes, items, weapons, abilities, and much more.</p>
+            </div>
+        </a>
+        <br>
         <div>
-            <img src="assets/gallery.svg" alt="Gallery Icon" width="80" height="80">
-            <h2>Deadlock Assets API</h2>
-            <p>Images & Stats of heroes, items, weapons, abilities, and much more.</p>
+            <a href="https://assets.deadlock-api.com/" title="Deadlock Assets API">
+                <button>
+                    <img src="assets/swagger.svg" alt="Key Icon" width="25" height="25">
+                    Swagger Docs
+                </button>
+            </a>
+            <a href="https://github.com/raimannma/deadlock-assets-api" title="Github" target="_blank">
+                <button>
+                    <img src="assets/github.svg" alt="GitHub Icon" width="25" height="25">
+                    GitHub Repository
+                </button>
+            </a>
         </div>
-    </a>
-    <a href="https://data.deadlock-api.com/" title="Deadlock Data API" class="feature">
+    </div>
+    <div>
+        <a href="https://data.deadlock-api.com/" title="Deadlock Data API" class="feature">
+            <div>
+                <img src="assets/database.svg" alt="Database Icon" width="80" height="80">
+                <h2>Deadlock Data API</h2>
+                <p>Game data like active matches and builds</p>
+            </div>
+        </a>
+        <br>
         <div>
-            <img src="assets/database.svg" alt="Database Icon" width="80" height="80">
-            <h2>Deadlock Data API</h2>
-            <p>Game data like active matches and builds</p>
+            <a href="https://data.deadlock-api.com/" title="Deadlock Data API">
+                <button>
+                    <img src="assets/swagger.svg" alt="Key Icon" width="25" height="25">
+                    Swagger Docs
+                </button>
+            </a>
+            <a href="https://discord.gg/XMF9Xrgfqu" title="Request API-Key" target="_blank">
+                <button>
+                    <img src="assets/key.svg" alt="Key Icon" width="25" height="25">
+                    Request an API-Key
+                </button>
+            </a>
+            <p class="note">
+                <span class="highlight">Not required</span>, but may change<br>
+                For future-proofing, you can request an API-Key.
+            </p>
         </div>
-    </a>
-    <a href="https://analytics.deadlock-api.com/" title="Deadlock Analytics API" class="feature">
+    </div>
+    <div>
+        <a href="https://analytics.deadlock-api.com/" title="Deadlock Analytics API" class="feature">
+            <div>
+                <img src="assets/query_stats.svg" alt="Analytics Icon" width="80" height="80">
+                <h2>Deadlock Analytics API</h2>
+                <p>Analytics & Statistics, including match, player, hero and item statistics.</p>
+            </div>
+        </a>
+        <br>
         <div>
-            <img src="assets/query_stats.svg" alt="Analytics Icon" width="80" height="80">
-            <h2>Deadlock Analytics API</h2>
-            <p>Analytics & Statistics, including match, player, hero and item statistics.</p>
+            <a href="https://analytics.deadlock-api.com/" title="Deadlock Analytics API">
+                <button>
+                    <img src="assets/swagger.svg" alt="Key Icon" width="25" height="25">
+                    Swagger Docs
+                </button>
+            </a>
+            <a href="https://discord.gg/XMF9Xrgfqu" title="Request API-Key" target="_blank">
+                <button>
+                    <img src="assets/key.svg" alt="Key Icon" width="25" height="25">
+                    Request an API-Key
+                </button>
+            </a>
+            <p class="note">
+                <span class="highlight">Not required</span>, but may change<br>
+                For future-proofing, you can request an API-Key.
+            </p>
         </div>
-    </a>
+    </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
     </p>
-    <a href="https://www.patreon.com/user?u=68961896" title="Patreon" target="_blank">
-        <button>
-            <img src="assets/patreon.svg" alt="Patreon Icon" width="25" height="25">
-            Support via Patreon
-        </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">
-            Join Developer Discord
-        </button>
-    </a>
-    <a href="https://stats.uptimerobot.com/V1HIfGQT77" title="Status" target="_blank">
-        <button>
-            <img src="assets/status.svg" alt="Patreon Icon" width="25" height="25">
-            Status
-        </button>
-    </a>
+    <div id="footer-links">
+        <a href="https://www.patreon.com/user?u=68961896" title="Patreon" target="_blank">
+            <button>
+                <img src="assets/patreon.svg" alt="Patreon Icon" width="25" height="25">
+                Support via Patreon
+            </button>
+        </a>
+        <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
+            </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
+            </button>
+        </a>
+        <a href="https://stats.uptimerobot.com/V1HIfGQT77" title="Status" target="_blank">
+            <button>
+                <img src="assets/status.svg" alt="Status Icon" width="25" height="25">
+                Status
+            </button>
+        </a>
+    </div>
 </footer>
 </body>
 </html>
diff --git a/public/style.css b/public/style.css
@@ -15,10 +15,24 @@ main {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    align-items: center;
     gap: 40px;
     width: 100%;
 
+    > div {
+        text-align: center;
+
+        > div {
+            display: flex;
+            gap: 0.8rem;
+            justify-content: space-around;
+            flex-direction: column;
+            width: 100%;
+            p{
+                margin: 0 auto;
+            }
+        }
+    }
+
     a.feature {
         color: white;
         text-decoration: none;
@@ -38,6 +52,7 @@ main {
             text-wrap: balance;
             height: min(25vh, 250px);
             width: min(70vw, 350px);
+            margin: 0 auto;
 
             &:hover {
                 transform: scale(1.05);
@@ -70,32 +85,64 @@ footer {
         max-width: 800px;
     }
 
-    a button {
-        background: #fa4454;
-        border: 0.2rem solid #fa4454;
-        padding: 0.5rem;
-        border-radius: 1rem;
-        color: white;
-        font-size: 15px;
-        line-height: 25px;
-        text-wrap: nowrap;
-        cursor: pointer;
-        transition: all 0.3s;
-
-        &:hover {
-            background: white;
-            color: black;
-        }
+    div#footer-links {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem;
+        margin-left: auto;
+    }
+}
+
+a button {
+    background: #fa4454;
+    border: 0.2rem solid #fa4454;
+    padding: 0.5rem;
+    border-radius: 1rem;
+    color: white;
+    font-size: 15px;
+    line-height: 25px;
+    text-wrap: nowrap;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+        background: white;
+        color: black;
 
-        img {
-            vertical-align: bottom;
+        img:not(.no-invert) {
+            filter: invert(1);
         }
     }
+
+    img {
+        vertical-align: bottom;
+    }
+}
+
+a.disabled-link {
+    pointer-events: none;
+    cursor: none;
+    opacity: 0.5;
+
+    button {
+        cursor: none;
+    }
 }
 
 @media (max-width: 908px) {
     footer {
         visibility: hidden;
         display: none;
     }
+}
+
+.highlight{
+    color: #fa4454;
+    font-weight: bolder;
+}
+
+.note{
+    text-wrap: wrap;
+    text-align: center;
+    text-overflow: ellipsis;
 }