From 91778c9cfb627cb252c3be8c2bb4053bde49fe85 Mon Sep 17 00:00:00 2001 From: Tina Date: Wed, 3 Jul 2024 11:11:39 +0530 Subject: [PATCH] Improved UI to match website theme --- check-progress.html | 69 ++++++++-------- progress.css | 194 ++++++++++++++++++++++---------------------- 2 files changed, 133 insertions(+), 130 deletions(-) diff --git a/check-progress.html b/check-progress.html index 8dc034e..72226f5 100644 --- a/check-progress.html +++ b/check-progress.html @@ -1,45 +1,50 @@ - - - + + Check Progress - - + + - +
- About Us -
- -
- Edit Profile - Check Progress - Settings - Exit - Sign Out -
+ About Us +
+ +
+ Edit Profile + Check Progress + Settings + Exit + Sign Out
+
-

Your Rubik's Cube Progress

-

-
-
Total Solves: --
-
Best Time: --
-
Average Time: --
-
Types of Cubes Solved: 3x3, 4x4, 5x5
-
Latest Solves:
-
    - -
+

Your Rubik's Cube Progress

+
+
+
+
Total Solves: --
+
Best Time: --
+
Average Time: --
+
+ Types of Cubes Solved: 3x3, 4x4, 5x5
+
Latest Solves:
+
    + +
+
- - - \ No newline at end of file + + diff --git a/progress.css b/progress.css index 6a54b94..36a4b8c 100644 --- a/progress.css +++ b/progress.css @@ -1,164 +1,162 @@ -/* Reset some default styles */ +/* Import Google Fonts */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap"); -*, -*:before, -*:after { - box-sizing: border-box; - margin: 0; - padding: 0; -} +/* Body styling */ body { font-family: "Space Grotesk", sans-serif; - /* Use a clean, modern font */ - font-size: 16px; - font-weight: 500; - /* Base font size */ - color: #333; - /* Dark gray text for readability */ - background-color: #f4f4f4; - /* Light gray background */ - padding: 20px; - line-height: 1.6; + background-image: url("https://png.pngtree.com/thumb_back/fh260/background/20210728/pngtree-purple-rubiks-cube-holographic-floating-geometric-abstract-background-image_752595.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + margin: 0; + padding: 0; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; } -/* Header styles */ - +/* Header styling */ .header { - background-color: #0053ac; - /* Blue background for the header */ - color: white; - padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; - border: 2px solid #264143; - border-radius: 20px; - box-shadow: 5px 4px 0px 2px #e9bf4c; + padding: 10px 20px; + color: #333; + z-index: 10; + background-color: rgba(194, 190, 190, 0.4); + width: 100%; + height: 60px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); + position: fixed; + top: 0; + left: 0; } +/* Button style for About Us link */ .header a { - color: white; + display: inline-block; + padding: 10px 20px; + background: linear-gradient(rgb(231, 231, 246), rgb(180, 180, 249)); + color: rgb(7, 6, 6); text-decoration: none; - margin-right: 15px; - transition: font-size 0.2s; + border: 2px solid #000000; + border-radius: 10px; + font-weight: bold; + transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; + box-shadow: 3px 3px 0px 0px #b3aaf7; } .header a:hover { - text-decoration: underline; - font-size: 17px; - transition: font-size 0.2s; + background-color: #2b74bc; + transform: translateY(-2px); + box-shadow: 5px 5px 0px 0px #090915; } -/* Profile menu styles */ +.header a:active { + transform: translateY(1px); + box-shadow: 2px 2px 0px 0px #e99f4c; +} +/* Profile menu styling */ .profile-menu { position: relative; + display: inline-block; + z-index: 11; } .profile-btn { background-color: transparent; border: none; + color: rgb(10, 10, 10); + padding: 10px; + border-radius: 50%; cursor: pointer; outline: none; - background-image: url("images/profilepic.jpg"); - background-size: cover; - /* Cover the entire button */ - background-position: center; - width: 40px; - height: 40px; - border-radius: 50%; - object-fit: cover; + width: 4rem; + height: 4rem; + margin-right: 80px; } .profile-pic { - background-image: url("images/profilepic.jpg"); - background-size: cover; - /* Cover the entire button */ - background-position: center; + width: 100%; + height: 100%; + border-radius: 50%; } -/* Dropdown menu */ - .dropdown-content { display: none; position: absolute; right: 0; - background-color: #fff; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + background-color: transparent; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + z-index: 12; border-radius: 5px; - z-index: 1; - width: 200px; - border: 2px solid #264143; - border-radius: 20px; - box-shadow: 3px 3px 0px 1px #e9bf4c; + margin-right: 30px; } .dropdown-content a { - color: #333; - padding: 12px 16px; + color: black; + padding: 10px 30px; text-decoration: none; display: block; } .dropdown-content a:hover { - background-color: #e2ebfb; - border: 2px solid #264143; - border-radius: 16px; - width: 100%; + background-color: #f1f1f1; } -/* Display dropdown on hover */ - .profile-menu:hover .dropdown-content { display: block; } -/* Progress container styles */ - +/* Progress container styling */ .progress-container { - background: white; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin-top: 20px; - border: 2px solid #264143; - border-radius: 20px; - box-shadow: 4px 3px 0px 2px #e94c4c; + opacity: 0.6; + background-image: url("https://t4.ftcdn.net/jpg/03/30/27/41/360_F_330274196_C6mjMdPaTggBr4Jg45faWAwViexh7DoA.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + margin-top: 150px; + border-radius: 10px; + padding: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); + width: 50%; + max-width: 800px; + text-align: center; } -.progress-stats div { - margin-bottom: 15px; - font-size: 1rem; - /* Set a reasonable font size for stats */ +.progress-container:hover { + opacity: 0.9; + transform: translateY(-10px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.9); } -#no-progress { - color: red; +.progress-container h1 { + font-size: 2em; + margin-bottom: 20px; + color: #0b0a0a; } -/* List styles for recent solves */ - -#recent-solves { - list-style: none; - padding: 0; +.progress-stats { + font-size: 1.2em; + color: #080606; } -#recent-solves li { - background: #eeeeee; - margin-top: 5px; - padding: 10px; - border-radius: 4px; +.progress-stats div { + margin-bottom: 10px; } -/* Responsive adjustments */ +.progress-stats ul { + list-style-type: none; + padding: 0; +} -@media (max-width: 600px) { - .header { - flex-direction: column; - align-items: flex-start; - } - .progress-container { - margin: 10px; - } +.progress-stats ul li { + background: rgba(231, 231, 246, 0.8); + border: 1px solid #ccc; + border-radius: 5px; + padding: 10px; + margin-bottom: 5px; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); }