Add html

Nicconike · May 7, 2024 · 0e79683 · 0e79683 · vercel · May 7, 2024
1 parent 73e9826
commit 0e79683
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 3 deletions.
diff --git a/.github/workflows/steam-stats.yml b/.github/workflows/steam-stats.yml
@@ -35,4 +35,4 @@ jobs:
                 git config --global user.name "GitHub Action"
                 git add .
                 git commit -m "Update README with latest Stats" || echo "No changes to commit"
-                git push --force
+                git push
diff --git a/README.md b/README.md
@@ -3,9 +3,7 @@
 [![Visitor Badge](https://badges.pufler.dev/visits/nicconike/steam-stats)](https://badges.pufler.dev)
 
 <!-- Steam-Stats start -->
-![Steam Games Stats](https://github.com/Nicconike/Steam-Stats/blob/master/assets/recently_played_games.svg?sanitize=true)
 <!-- Steam-Stats end -->
 
 <!-- Steam-Workshop start -->
-![Steam Games Stats](https://github.com/Nicconike/Steam-Stats/blob/master/assets/steam_workshop_stats.svg?sanitize=true)
 <!-- Steam-Workshop end -->
diff --git a/assets/index.html b/assets/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Progress Bars</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <progress value="70" max="100"></progress>
+    <progress value="50" max="100"></progress>
+    <progress value="30" max="100"></progress>
+    <progress value="80" max="100"></progress>
+    <progress value="60" max="100"></progress>
+    <progress value="90" max="100"></progress>
+</body>
+
+</html>
diff --git a/assets/style.css b/assets/style.css
@@ -0,0 +1,76 @@
+body {
+    display: grid;
+    grid-gap: 2vmin;
+    place-content: center;
+    margin: 0;
+    min-height: 100vh;
+    background: #262f3e;
+}
+
+progress {
+    box-sizing: border-box;
+    border: solid 0.15em #242b35;
+    width: 12.5em;
+    height: 1em;
+    border-radius: 0.5em;
+    background: linear-gradient(#191c23, #2d3341);
+    font: clamp(.625em, 7.5vw, 5em) monospace;
+}
+
+progress::-webkit-progress-bar {
+    background: transparent;
+}
+
+progress::-webkit-progress-value {
+    border-radius: 0.35em;
+    box-shadow: inset 0 0.05em 0.05em rgba(255, 255, 255, 0.35);
+    background: var(--fill);
+}
+
+progress::-moz-progress-bar {
+    border-radius: 0.35em;
+    box-shadow: inset 0 0.05em 0.05em rgba(255, 255, 255, 0.35);
+    background: var(--fill);
+}
+
+progress:nth-child(1) {
+    --fill:
+        repeating-linear-gradient(90deg,
+            transparent 0 0.15em, #f1c00c 0 0.5em) 0.25em,
+        linear-gradient(#f3c402, #ed7401);
+}
+
+progress:nth-child(2) {
+    --fill:
+        linear-gradient(#ffec9d, transparent 85%),
+        linear-gradient(90deg, #ffe94b, #f94745);
+}
+
+progress:nth-child(3) {
+    --fill:
+        linear-gradient(rgba(226, 102, 76, 0.65), transparent),
+        repeating-linear-gradient(135deg,
+            #a22215 0 0.25em, #be2a20 0 0.5em);
+}
+
+progress:nth-child(4) {
+    --fill:
+        linear-gradient(rgba(215, 131, 227, 0.5), transparent),
+        conic-gradient(from -30deg at 25%,
+            transparent 240deg, #8b42ab 0%) 0/ 0.7em,
+        conic-gradient(from -30deg at 75%,
+            #8b42ab 240deg, #9956b3 0%) 0/ 0.7em;
+}
+
+progress:nth-child(5) {
+    --fill:
+        linear-gradient(#d0a9e2, transparent 85%),
+        linear-gradient(90deg, #433485, #dd3c6e);
+}
+
+progress:nth-child(6) {
+    --fill:
+        linear-gradient(rgba(90, 240, 255, 0.85), transparent),
+        repeating-linear-gradient(90deg,
+            #123c92 0 0.0625em, #1b5ec6 0 1em);
+}