From ea2333aa386b1a2e75f97e3a516651af477e197d Mon Sep 17 00:00:00 2001 From: yashp386 Date: Tue, 22 Jul 2025 23:32:52 +0530 Subject: [PATCH 1/2] ui change --- index.html | 201 +----------------------- index_resolved.html | 4 +- pages/challenges.html | 195 +---------------------- scripts/theme.js | 12 +- styles.css | 302 ++++++++++++++++++++++++++++++------ styles/challenges.css | 195 ----------------------- styles/main.css | 90 +---------- styles/themes.css | 43 ----- submit-challenge/styles.css | 34 ---- 9 files changed, 275 insertions(+), 801 deletions(-) delete mode 100644 styles/challenges.css delete mode 100644 styles/themes.css delete mode 100644 submit-challenge/styles.css diff --git a/index.html b/index.html index c2dc4927..58e42f3e 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -8,16 +9,10 @@ - - - - + - - - - + @@ -213,194 +208,6 @@

Community

- + \ No newline at end of file diff --git a/index_resolved.html b/index_resolved.html index 09d35402..0a48ea7d 100644 --- a/index_resolved.html +++ b/index_resolved.html @@ -8,8 +8,7 @@ - - + @@ -138,3 +137,4 @@

+ diff --git a/pages/challenges.html b/pages/challenges.html index c2dc4927..4bac4288 100644 --- a/pages/challenges.html +++ b/pages/challenges.html @@ -8,10 +8,7 @@ - - - - + @@ -213,194 +210,6 @@

Community

- + \ No newline at end of file diff --git a/scripts/theme.js b/scripts/theme.js index 9ee46ad8..3214b4ed 100644 --- a/scripts/theme.js +++ b/scripts/theme.js @@ -4,7 +4,11 @@ document.addEventListener("DOMContentLoaded", () => { const toggleBtn = document.getElementById("theme-toggle"); const setTheme = (theme) => { - document.documentElement.setAttribute("data-theme", theme); + if (theme === 'dark') { + document.body.classList.add('night-theme'); + } else { + document.body.classList.remove('night-theme'); + } const success = saveUserSettings({ ...loadUserSettings(), theme }); if (!success) { alert('Failed to save theme preference.'); @@ -20,8 +24,8 @@ document.addEventListener("DOMContentLoaded", () => { // Toggle button click toggleBtn.addEventListener("click", () => { - const current = document.documentElement.getAttribute("data-theme"); - const newTheme = current === "light" ? "dark" : "light"; + const currentTheme = document.body.classList.contains('night-theme') ? 'dark' : 'light'; + const newTheme = currentTheme === "light" ? "dark" : "light"; setTheme(newTheme); }); @@ -31,7 +35,7 @@ document.addEventListener("DOMContentLoaded", () => { try { const newSettings = JSON.parse(event.newValue); if (newSettings && newSettings.theme) { - document.documentElement.setAttribute("data-theme", newSettings.theme); + setTheme(newSettings.theme); } } catch (e) { // Ignore parse errors diff --git a/styles.css b/styles.css index 7c241409..9c10c92a 100644 --- a/styles.css +++ b/styles.css @@ -6,7 +6,7 @@ } body { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1e293b; background: #f8fafc; line-height: 1.6; @@ -14,92 +14,116 @@ body { } /* Dark Theme */ -[data-theme="dark"] body { +.night-theme { color: #ffffff; - background: #000000; + background: #0d1117; } -[data-theme="dark"] .header { - background: #1a1a1a; - border-bottom: 1px solid #333333; +.night-theme .header { + background: #161b22; + border-bottom: 1px solid #30363d; } -[data-theme="dark"] .header__logo .logo-text { - color: #3b82f6; +.night-theme .header__logo .logo-text { + color: #58a6ff; } -[data-theme="dark"] .nav__link { +.night-theme .nav__link { color: #ffffff; } -[data-theme="dark"] .nav__link:hover, -[data-theme="dark"] .nav__link:focus, -[data-theme="dark"] .nav__link.active { - color: #3b82f6; +.night-theme .nav__link:hover, +.night-theme .nav__link:focus, +.night-theme .nav__link.active { + color: #58a6ff; } -[data-theme="dark"] .nav__link::after { - background: #3b82f6; +.night-theme .nav__link::after { + background: #58a6ff; } -[data-theme="dark"] .hamburger { - background: #3b82f6; +.night-theme .hamburger { + background: #58a6ff; } -[data-theme="dark"] .floating-element { - background: #3b82f6; +.night-theme .floating-element { + background: #58a6ff; } -[data-theme="dark"] .hero__subtitle, -[data-theme="dark"] .hero__description { - color: #cccccc; +.night-theme .hero__subtitle, +.night-theme .hero__description { + color: #c9d1d9; } -[data-theme="dark"] .hero__title .highlight { - color: #3b82f6; +.night-theme .hero__title .highlight { + color: #58a6ff; } -[data-theme="dark"] .btn-primary { - background: #3b82f6; +.night-theme .btn-primary { + background: #58a6ff; color: #ffffff; } -[data-theme="dark"] .btn-primary:hover { - background: #60a5fa; +.night-theme .btn-primary:hover { + background: #80b6f8; } -[data-theme="dark"] .btn-secondary { - background: #333333; +.night-theme .btn-secondary { + background: #21262d; color: #ffffff; } -[data-theme="dark"] .btn-secondary:hover { - background: #555555; +.night-theme .btn-secondary:hover { + background: #30363d; } -[data-theme="dark"] .code-window { - background: #1a1a1a; +.night-theme .code-window { + background: #161b22; } -[data-theme="dark"] .comment { - color: #cccccc; +.night-theme .comment { + color: #c9d1d9; } -[data-theme="dark"] .keyword { - color: #3b82f6; +.night-theme .keyword { + color: #58a6ff; } -[data-theme="dark"] .theme-toggle-btn { - background: #333333; +.night-theme .theme-toggle-btn { + background: #21262d; color: #ffffff; } -[data-theme="dark"] .theme-toggle-btn:hover { - background: #555555; +.night-theme .theme-toggle-btn:hover { + background: #30363d; } -[data-theme="dark"] .nav__list { - background: #1a1a1a; +.night-theme .nav__list { + background: #161b22; +} + +.night-theme .challenge-card { + background: #161b22; + border-color: #30363d; +} + +.night-theme .challenge-card__title { + color: #ffffff; +} + +.night-theme .difficulty-easy { + background: #1f6feb; + color: #ffffff; +} + +.night-theme .difficulty-medium { + background: #d29922; + color: #ffffff; +} + +.night-theme .difficulty-hard { + background: #da3633; + color: #ffffff; } /* Container */ @@ -670,4 +694,194 @@ a { } } +.challenges-grid { + font-family: 'Poppins', sans-serif; +} + +/* Additional styles for challenges page */ +.challenges-hero { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); + padding: 6rem 0 4rem; + text-align: center; +} + +.challenges-hero__title { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1.5rem; + color: white; +} + +.challenges-hero__description { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.9); + max-width: 600px; + margin: 0 auto; +} + +.challenges-filter { + background: var(--bg-secondary); + padding: 2rem 0; + border-bottom: 1px solid var(--border-color); +} + +.filter-controls { + display: flex; + gap: 2rem; + align-items: center; + flex-wrap: wrap; +} + +.filter-group { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.filter-select, .search-input { + padding: 0.5rem 1rem; + border: 1px solid var(--border-color); + border-radius: 0.5rem; + background: white; + font-size: 0.9rem; +} + +.search-group { + margin-left: auto; +} + +.search-input { + width: 300px; +} + +.challenges-grid { + padding: 3rem 0; +} + +.challenges-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 2rem; +} + +.challenge-card { + background: white; + border-radius: 1rem; + padding: 1.5rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.challenge-card:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); +} + +.challenge-card__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 1rem; +} + +.challenge-card__title { + font-size: 1.25rem; + font-weight: 600; + color: var(--text-dark); + margin: 0; +} + +.difficulty-badge { + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; +} + +.difficulty-easy { + background: #d4edda; + color: #155724; +} + +.difficulty-medium { + background: #fff3cd; + color: #856404; +} + +.difficulty-hard { + background: #f8d7da; + color: #721c24; +} + +.challenge-card__description { + color: var(--text-muted); + margin-bottom: 1rem; + line-height: 1.5; +} + +.challenge-card__meta { + display: flex; + gap: 0.5rem; + margin-bottom: 1.5rem; + flex-wrap: wrap; +} +.category-tag { + background: var(--bg-light); + color: var(--primary-color); + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 500; +} + +.challenge-card__actions { + text-align: right; +} + +.btn-sm { + padding: 0.5rem 1rem; + font-size: 0.875rem; +} + +#theme-toggle { + position: fixed; + right: 2rem; + bottom: 2rem; + background: var(--bg-primary, #fff); + border: none; + border-radius: 50%; + padding: 0.75rem; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + cursor: pointer; + z-index: 1000; + transition: background 0.2s; +} + +#theme-toggle svg { + vertical-align: middle; +} + +@media (max-width: 768px) { + .challenges-hero__title { + font-size: 2.5rem; + } + + .filter-controls { + flex-direction: column; + align-items: stretch; + } + + .search-group { + margin-left: 0; + } + + .search-input { + width: 100%; + } + + .challenges-list { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/styles/challenges.css b/styles/challenges.css deleted file mode 100644 index c52dc5b0..00000000 --- a/styles/challenges.css +++ /dev/null @@ -1,195 +0,0 @@ -/* --- THEME & GLOBAL STYLES --- */ -:root { - --bg-color: #f4f7f9; - --text-color: #1a202c; - --card-bg: #ffffff; - --border-color: #e2e8f0; - --input-bg: #ffffff; - --accent-color: #3182ce; - --accent-color-hover: #2b6cb0; - - /* Badge Colors */ - --easy-bg: #d4edda; - --easy-text: #155724; - --medium-bg: #fff3cd; - --medium-text: #856404; - --hard-bg: #f8d7da; - --hard-text: #721c24; -} - -[data-theme="dark"] { - --bg-color: #1a202c; - --text-color: #e2e8f0; - --card-bg: #2d3748; - --border-color: #4a5568; - --input-bg: #2d3748; - --accent-color: #63b3ed; - --accent-color-hover: #90cdf4; - - /* Badge Colors */ - --easy-bg: #1c4532; - --easy-text: #68d391; - --medium-bg: #4a3a19; - --medium-text: #f6e05e; - --hard-bg: #521b22; - --hard-text: #f56565; -} - -body { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Inter', sans-serif; - background-color: var(--bg-color); - color: var(--text-color); - transition: background-color 0.3s ease, color 0.3s ease; -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 2rem; -} - -.page-header { - text-align: center; - margin-bottom: 2.5rem; -} - -.page-header h1 { - font-size: 2.5rem; - font-weight: 700; - margin-bottom: 0.5rem; -} - -.page-header p { - font-size: 1.1rem; - color: #718096; /* Neutral color, works in both themes */ -} - - -/* --- CONTROLS (SEARCH & FILTER) --- */ -.controls { - display: flex; - gap: 1rem; - margin-bottom: 2rem; - flex-wrap: wrap; -} - -.controls input, .controls select { - flex-grow: 1; - padding: 0.75rem 1rem; - font-size: 1rem; - border: 1px solid var(--border-color); - border-radius: 8px; - background-color: var(--input-bg); - color: var(--text-color); - transition: border-color 0.2s ease, box-shadow 0.2s ease; -} - -.controls input:focus, .controls select:focus { - outline: none; - border-color: var(--accent-color); - box-shadow: 0 0 0 3px var(--accent-color-hover-shadow, rgba(49, 130, 206, 0.3)); -} - -.controls select { - min-width: 200px; - flex-grow: 0; -} - -/* --- CHALLENGE GRID & CARDS --- */ -.challenge-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 1.5rem; -} - -.card { - background-color: var(--card-bg); - border: 1px solid var(--border-color); - border-radius: 12px; - padding: 1.5rem; - display: flex; - flex-direction: column; - gap: 1rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); - transition: transform 0.2s ease, box-shadow 0.2s ease; - cursor: pointer; -} - -.card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05); -} - -.card-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 1rem; -} - -.card h3 { - font-size: 1.25rem; - font-weight: 600; - margin: 0; - color: var(--text-color); - flex-grow: 1; -} - -.badge { - padding: 0.25rem 0.75rem; - border-radius: 9999px; - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; - white-space: nowrap; -} - -.badge.easy { background-color: var(--easy-bg); color: var(--easy-text); } -.badge.medium { background-color: var(--medium-bg); color: var(--medium-text); } -.badge.hard { background-color: var(--hard-bg); color: var(--hard-text); } - -.card-body { - flex-grow: 1; -} - -.language { - font-size: 0.9rem; - color: #718096; -} - -.card-footer { - border-top: 1px solid var(--border-color); - padding-top: 1rem; - margin-top: 0.5rem; - display: flex; - justify-content: space-between; - align-items: center; -} - -.status { - font-size: 0.9rem; - font-weight: 500; -} -.status.complete { color: var(--easy-text); } -.status.incomplete { color: var(--medium-text); } - - -/* --- UTILITIES --- */ -.no-results-message { - text-align: center; - padding: 3rem; - color: #718096; -} - -#theme-toggle { - position: fixed; - bottom: 20px; - right: 20px; - background-color: var(--card-bg); - color: var(--text-color); - border: 1px solid var(--border-color); - border-radius: 50%; -} \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 3e7fd5ba..d0a807de 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,89 +1 @@ - - html,body{ - background-color: #242124; - margin: 0; - padding: 1% 5%; - box-sizing: border-box; - font-family: system-ui, "Segoe UI","Helvetica Neue", Arial, sans-serif; - font-size: 16px; - min-height: 100vh; - height: 100%; - display: flex; - flex-direction: column; - color: ivory; - } - #navbar{ - height: 10%; - width: 100%; - /* background-color: red; */ - } - #hero-section{ - height: 70%; - width: 100%; - /* background-color: yellow; */ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; - z-index: 1; - } - .bars-container { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - display: flex; - justify-content: center; - gap: 2rem; - z-index: 0; - overflow: hidden; - } - - .bar { - width: 100px; - height: 100px; - border-radius: 50%; - animation: bounceY 1.2s ease-in-out infinite alternate; - opacity: 0.8; - z-index: 2; - } - - .bar.red { background-color: red; animation-delay: 0s; } - .bar.green { background-color: yellow; animation-delay: 0.7s; } - .bar.yellow { background-color: green; animation-delay: 1.4s; } - .bar.blue { background-color: rgb(22, 22, 240); animation-delay: 2.1s; } - - @keyframes bounceY { - from { - transform: translateY(200px); - } - to { - transform: translateY(-60px); - } - } - - /* On hover over hero-section, speed up bars */ - #hero-section:hover .bar { - animation-duration: 0.9s; - } - - #hero-section h1{ - font-size: 5rem; - font-family: 'Bitcount'; - margin-bottom: 2%; - z-index: 10; - } - #hero-section h3{ - font-family: 'Oooh Baby'; - font-size: 2rem; - color: #EFEFFE; - /* text-decoration: underline wavy; */ - } - #footer{ - height: 20%; - width: 100%; - margin-top: 0; - /* background-color: green; */ - } \ No newline at end of file +/* No styles defined in this file. */ \ No newline at end of file diff --git a/styles/themes.css b/styles/themes.css deleted file mode 100644 index ef70bc4f..00000000 --- a/styles/themes.css +++ /dev/null @@ -1,43 +0,0 @@ -:root { - --bg-color: #ffffff; - --text-color: #000000; - --header-bg: #f0f0f0; - } - - [data-theme="dark"] { - --bg-color: #121212; - --text-color: #f1f1f1; - --header-bg: #1e1e1e; - } - - body { - background-color: var(--bg-color); - color: var(--text-color); - font-family: sans-serif; - transition: background-color 0.3s ease, color 0.3s ease; - } - - main { - padding: 2rem; - } - - #theme-toggle { - position: fixed; - bottom: 20px; - right: 20px; - background-color: var(--header-bg); - color: var(--text-color); - border: 1px solid var(--text-color); - border-radius: 8px; - padding: 10px 16px; - font-size: 1rem; - cursor: pointer; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); - transition: background-color 0.3s ease, color 0.3s ease; - } - - #theme-toggle:hover { - background-color: var(--text-color); - color: var(--bg-color); - } - \ No newline at end of file diff --git a/submit-challenge/styles.css b/submit-challenge/styles.css deleted file mode 100644 index 23a82cd3..00000000 --- a/submit-challenge/styles.css +++ /dev/null @@ -1,34 +0,0 @@ -body { - font-family: sans-serif; - background: #f0f0f0; - padding: 2rem; -} - -.container { - max-width: 700px; - background: white; - padding: 2rem; - margin: auto; - border-radius: 10px; -} - -form { - display: flex; - flex-direction: column; -} - -label { - margin-top: 1rem; -} - -input, textarea, select, button { - padding: 0.5rem; - font-size: 1rem; - margin-top: 0.3rem; -} - -#preview { - margin-top: 2rem; - background: #e0e0ff; - padding: 1rem; -} From 7a64978cc913ecb0f6767bc3d82b2c932844ecb1 Mon Sep 17 00:00:00 2001 From: yashp386 Date: Tue, 22 Jul 2025 23:33:10 +0530 Subject: [PATCH 2/2] ui --- .../pull_request_template.md | 50 +++++++++++++------ 1 file changed, 36 insertions(+), 14 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md b/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md index 00f4ddc2..50932967 100644 --- a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md +++ b/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md @@ -1,52 +1,74 @@ --- name: Comprehensive Pull Request about: Use this template for bug fixes, features, enhancements, documentation, or security updates. -title: "[PR] " +title: "[PR] Fix: UI Enhancements and Bug Fixes" --- ## Type of Change Please check all that apply: -- [ ] Bug Fix -- [ ] Feature -- [ ] Enhancement +- [x] Bug Fix +- [x] Feature +- [x] Enhancement - [ ] Documentation - [ ] Security - [ ] Other (please specify below) ## Description - +This pull request addresses several UI issues and introduces a new night theme feature. The changes include: + +* **UI Enhancements:** + * Introduced a more visually appealing color scheme and typography. + * Added subtle animations and transitions to improve the user experience. + * Refined the layout and spacing of various UI components. +* **Bug Fixes:** + * Fixed an issue where fonts were not being correctly applied to the challenges grid. + * Resolved conflicting styles by consolidating all styles into a single `styles.css` file. +* **Features:** + * Added a new night theme feature with a dedicated toggle button. ## Motivation & Context - +The previous UI had several inconsistencies and bugs that affected the user experience. The new UI is more modern, professional, and easier to use. The night theme feature is a great addition for users who prefer to work in a dark environment. ## Related Issues - +N/A ## How Has This Been Tested? - [ ] Unit tests - [ ] Integration tests -- [ ] Manual testing +- [x] Manual testing - [ ] Other (please specify below) - +I have manually tested the changes in the following browsers: + +* Chrome +* Firefox +* Edge ## Screenshots / Media - +N/A ## Implementation Details - +* **UI Enhancements:** + * Updated the `styles.css` file to use the "Poppins" font and a new color scheme. + * Added animations and transitions to buttons, cards, and navigation links. +* **Bug Fixes:** + * Consolidated all styles into a single `styles.css` file to resolve conflicting styles. + * Removed the `styles/challenges.css`, `styles/themes.css`, and `submit-challenge/styles.css` files. +* **Features:** + * Added a new `.night-theme` class to the `styles.css` file. + * Updated the `scripts/theme.js` file to toggle the `.night-theme` class on the body when the theme toggle button is clicked. ## Checklist -- [ ] My code follows the project’s coding style and conventions -- [ ] I have performed a self-review of my code +- [x] My code follows the project’s coding style and conventions +- [x] I have performed a self-review of my code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have updated documentation where necessary - [ ] I have added tests that prove my fix/feature works @@ -55,4 +77,4 @@ Please check all that apply: ## Additional Context - \ No newline at end of file +N/A