add nice statistics

2025-06-21 09:38:22 +02:00
parent 99b0aaa72e
commit e79626972f
43 changed files with 1359 additions and 1 deletions
--- a/app/assets/stylesheets/app.css
+++ b/app/assets/stylesheets/app.css
@@ -0,0 +1,129 @@
+/* Spotify-inspired dark theme for Plays Hub */
+
+body {
+  background: #f5f6fa;
+  color: #222;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  font-size: 18px;
+}
+
+main {
+  padding-left: 3vw;
+  padding-right: 3vw;
+  box-sizing: border-box;
+}
+
+@media (max-width: 700px) {
+  main {
+    padding-left: 1vw;
+    padding-right: 1vw;
+  }
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+  color: #222;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  margin-top: 2em;
+  margin-bottom: 1em;
+}
+
+h1 {
+  font-size: 2.2em;
+  margin-top: 1.5em;
+}
+
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 2em 0;
+  max-width: 500px;
+}
+
+
+li {
+  background: #fff;
+  margin-bottom: 1.5em;
+  padding: 1.3em 1.5em;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+  border: 1px solid #e0e0e0;
+  transition: box-shadow 0.2s, border 0.2s;
+  font-size: 1.05em;
+  display: flex;
+  align-items: center;
+}
+li:last-child {
+  margin-bottom: 0;
+}
+li:hover {
+  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
+  border: 1px solid #bdbdbd;
+}
+
+
+button {
+  background: #0071e3;
+  color: #fff;
+  border: none;
+  border-radius: 12px;
+  padding: 0.8em 2.2em;
+  font-size: 1.05em;
+  font-weight: 600;
+  cursor: not-allowed;
+  opacity: 0.7;
+  margin-top: 2em;
+  transition: background 0.2s, opacity 0.2s;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  letter-spacing: 0.2px;
+}
+button:active {
+  background: #005bb5;
+}
+
+
+.notice {
+  background: #e8f0fe;
+  color: #0071e3;
+  padding: 0.7em 1.2em;
+  border-radius: 10px;
+  margin: 1.5em 0 0 0;
+  font-weight: 500;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+}
+
+.alert {
+  background: #fff0f0;
+  color: #d7263d;
+  padding: 0.7em 1.2em;
+  border-radius: 10px;
+  margin: 1.5em 0 0 0;
+  font-weight: 500;
+  border: none;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+}
+
+
+@media (max-width: 600px) {
+  body {
+    font-size: 1em;
+  }
+  ul {
+    max-width: 100%;
+  }
+  li {
+    padding: 1em 0.7em;
+    font-size: 1em;
+  }
+  button {
+    width: 100%;
+    padding: 1em 0;
+  }
+}
+