MAJOR UI UPDATE cookie based theme switch added

Author: codeIntrovert

z_CourseAddition.txt renamed to CourseAddition.txt

@@ -99,10 +99,10 @@
 
 | Color             | Hex                                                                |
 | ----------------- | ------------------------------------------------------------------ |
-| Primary Color | ![#222831](https://via.placeholder.com/10/222831?text=+) #222831 |
-| Secondary Color | ![#393E46](https://via.placeholder.com/10/393E46?text=+) #393E46 |
-| Accent Color | ![#00ADB5](https://via.placeholder.com/10/00ADB5?text=+) #00ADB5 |
-| Text Color | ![#EEEEEE](https://via.placeholder.com/10/EEEEEE?text=+) #EEEEEE |
+| Accent Color | ![#6320ee](https://via.placeholder.com/10/6320ee?text=+) #6320ee |
+| Text Color | ![#f8f0fb](https://via.placeholder.com/10/f8f0fb?text=+) #f8f0fb |
+| Background Color | ![#00000d](https://via.placeholder.com/10/00000d?text=+) #00000d |
+| Foreground Color | ![#01111d](https://via.placeholder.com/10/01111d?text=+) #01111d |
 
 
 <!-- Usage -->
@@ -114,7 +114,10 @@
 <!-- Roadmap -->
 ## :compass: Roadmap
 
+* [x] Complete Frontend
 * [x] Complete Free Courses Library
+* [ ] Light/Dark Mode
+* [ ] Sign in with Google
 * [ ] Build Certify (Certification engine)
 
 <!-- Contributing -->

README.md

@@ -7,6 +7,11 @@
 
 app = Flask(__name__)
 
+def get_theme_css():
+    # Implement logic to retrieve the user's theme preference and return the corresponding CSS path
+    theme_preference = "light"  # Replace with your actual logic
+    return f"static/{theme_preference}_theme.css"
+    
 # Register the Blueprints from separate files
 app.register_blueprint(index_blueprint)
 app.register_blueprint(browse_blueprint)

app.py

@@ -2,6 +2,7 @@
 import data, menuData
 from lecturesData import lecturesData
 
+
 browse_blueprint = Blueprint('browse', __name__)
 
 # Map the course_name parameter to the corresponding course data using a dictionary
@@ -49,6 +50,8 @@ def details(course_name):
 def browse():
     trending = menuData.trending
     allCourses = menuData.all
+    theme_preference = request.cookies.get('theme', 'light')  # Default to 'light' if cookie not found
+    theme_css = f"static/assets/sass/{theme_preference}_theme.css"
 
     # If the form is submitted (POST request), get the search keyword from the form
     if request.method == 'POST':
@@ -58,7 +61,7 @@ def browse():
         for course_name, course_data in course_mapping.items():
             if search_keyword.lower() in course_name.lower():
                 filtered_courses.append(course_data)
-        return render_template('browse.html', trending=trending, allCourses=allCourses, search_keyword=search_keyword, search_results=filtered_courses)
+        return render_template('browse.html',theme_css=theme_css, trending=trending, allCourses=allCourses, search_keyword=search_keyword, search_results=filtered_courses)
 
     # If it's a GET request, show the regular browse page without search results
-    return render_template('browse.html', trending=trending, allCourses=allCourses)
+    return render_template('browse.html', trending=trending, allCourses=allCourses, theme_css=theme_css)

routes/browse_routes.py

@@ -1,7 +1,10 @@
-from flask import Blueprint, render_template
+from flask import Blueprint, render_template,request
+
 
 error_blueprint = Blueprint('error', __name__)
 
 @error_blueprint.errorhandler(404)
 def page_not_found(e):
-    return render_template('components/error.html'), 404
+    theme_preference = request.cookies.get('theme', 'light')  # Default to 'light' if cookie not found
+    theme_css = f"static/assets/sass/{theme_preference}_theme.css"
+    return render_template('components/error.html', theme_css=theme_css), 404

routes/error_routes.py

@@ -1,9 +1,12 @@
-from flask import Blueprint, render_template
+from flask import Blueprint, render_template, request
 import menuData,data
 
+
 index_blueprint = Blueprint('index', __name__)
 
 @index_blueprint.route('/',endpoint='index')
 def index():
     trending = menuData.trending
-    return render_template('index.html', trending=trending)
+    theme_preference = request.cookies.get('theme', 'light')  # Default to 'light' if cookie not found
+    theme_css = f"static/assets/sass/{theme_preference}_theme.css"
+    return render_template('index.html', trending=trending, theme_css=theme_css)

routes/index_routes.py

@@ -1,7 +1,10 @@
-from flask import Blueprint, render_template
+from flask import Blueprint, render_template, request
+
 
 login_blueprint = Blueprint('login', __name__)
 
 @login_blueprint.route('/login')
 def login():
-    return render_template('login.html')
+    theme_preference = request.cookies.get('theme', 'light')  # Default to 'light' if cookie not found
+    theme_css = f"static/assets/sass/{theme_preference}_theme.css"
+    return render_template('login.html', theme_css=theme_css)

routes/login_routes.py

@@ -0,0 +1,12 @@
+function setCookie(name, value) {
+    document.cookie = `${name}=${value};path=/`;
+}
+
+function toggleTheme() {
+    const currentTheme = document.querySelector("link[href*='theme']").getAttribute("href");
+    const newTheme = currentTheme.includes("light") ? "dark" : "light";
+    document.querySelector("link[href*='theme']").setAttribute("href", `/static/assets/sass/${newTheme}_theme.css`);
+    
+    // Set the theme preference as a cookie
+    setCookie("theme", newTheme);
+}

routes/profile_routes.py

@@ -1,4 +1,13 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100 200 300 400 500 600 700 800 900");
+/**
+ *  $primary-color: #007AFF
+ *  $main-font-color: #00000d
+ *  $background-color: #D7EEFF
+ *  $dimText-color: #666
+ *  $darkblue-color: #FAFAFA
+ *  $cardBody-color: #F8F9FB
+ *  $yellow-color: #ffec51
+ *  $banner-gradient: linear-gradient(310deg, rgba(83,141,255,1) 0%, rgba(215,238,255,1) 100%) */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div pre, a, abbr, acronym, address,
 big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl,
 dt, dd, ol, ul, li, figure, header, nav, section, article, aside, footer,
@@ -671,7 +680,7 @@ section {
   }
 }
 .main-banner {
-  background-image: url(../images/card.png);
+  background: linear-gradient(310deg, #18033e 0%, #081b42 100%);
   background-position: center center;
   background-size: cover;
   min-height: 380px;
@@ -1033,4 +1042,4 @@ body {
   .gaming-library .item ul li {
     width: 16%;
   }
-}/*# sourceMappingURL=style.css.map */
+}/*# sourceMappingURL=dark_theme.css.map */

static/assets/js/theme.js

@@ -1,13 +1,22 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100 200 300 400 500 600 700 800 900") 
+/**
+    $primary-color: #007AFF
+    $main-font-color: #00000d
+    $background-color: #D7EEFF
+    $dimText-color: #666
+    $darkblue-color: #FAFAFA
+    $cardBody-color: #F8F9FB
+    $yellow-color: #ffec51
+    $banner-gradient: linear-gradient(310deg, rgba(83,141,255,1) 0%, rgba(215,238,255,1) 100%)
 
 $primary-color:  #6320ee // accent color
 $main-font-color: #f8f0fb // white font throughout
 $background-color: #00000d //dark container color
 $dimText-color: #666 //dim text in navbar
 $darkblue-color: #01111d // layout inside blockcontent color
-$cardBody-color: #010b13 // card body color
+$cardBody-color: #010b13 // card body color #18033e
 $yellow-color: #ffec51 // star color
-
+$banner-gradient: linear-gradient(310deg, #18033e 0%, #081b42 100%)
 
 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,div pre,a,abbr,acronym,address,
 big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,
@@ -738,8 +747,9 @@ section
 
 
 
-.main-banner  
-  background-image: url(../images/card.png) 
+.main-banner
+  background: $banner-gradient
+  //background-image: url(../images/card.png) 
   background-position: center center 
   background-size: cover 
   min-height: 380px