Merge pull request #27 from VaagenIM/feature/front-end

Added theme support for piggy

piggy/static/js/card_script.js

@@ -35,16 +35,11 @@ function stringToColor(str, transparency = 'FF') {
     return color;
 }
 
-// fix all the post-load stuff
-document.addEventListener('DOMContentLoaded', function () {
-    const tags = document.querySelectorAll('.tag-box');
+const tags = document.querySelectorAll('.tag-box');
 
-    tags.forEach(tag => {
-        const tagText = tag.getAttribute('data-tag');
-        tag.style.backgroundColor = stringToColor(tagText, '44');
-        tag.style.borderColor = stringToColor(tagText);
-    });
+tags.forEach(tag => {
+    const tagText = tag.getAttribute('data-tag');
+    tag.style.backgroundColor = stringToColor(tagText, '88');
+    tag.style.borderColor = stringToColor(tagText);
+});
 
-    // checkTagsVisibility();
-    // window.addEventListener('resize', checkTagsVisibility);
-});

piggy/static/js/main.js

@@ -0,0 +1,31 @@
+const modal = document.getElementById('theme-modal');
+const currentTheme = localStorage.getItem('theme') || 'dark'; // Default to dark mode
+
+// Function to close the modal
+const closeModal = () => {
+    modal.style.display = 'none';
+};
+
+// Set the current theme on page load
+document.documentElement.setAttribute('data-theme', currentTheme);
+
+document.getElementById('theme-modal-btn').addEventListener('click', function() {
+    document.getElementById('theme-modal').style.display = 'block'; // Show the modal
+});
+
+// Optional: Close modal if user clicks outside the modal content
+window.addEventListener('click', function(event) {
+    if (event.target === modal) {
+        closeModal();
+    }
+});
+
+const themeButtons = document.querySelectorAll('.theme-option');
+themeButtons.forEach(button => {
+    button.addEventListener('click', function() {
+        const selectedTheme = button.getAttribute('data-theme');
+        document.documentElement.setAttribute('data-theme', selectedTheme);
+        localStorage.setItem('theme', selectedTheme); // Save theme to localStorage
+        document.getElementById('theme-modal').style.display = 'none'; // Hide modal
+    });
+});

piggy/templates/index.html

@@ -1,12 +1,12 @@
 {% extends 'layout.html' %}
 {% block base %}
   <main class="container mx-auto text-center">
-    <h1 class="text-5xl font-extrabold text-center my-6">
+    <h1 class="main-title text-5xl font-extrabold text-center my-6">
       Velkommen til piggy!
     </h1>
     <div class="h-4"></div>
     <a
-      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-8 text-4xl"
+      class="piggy-button text-3xl font-bold"
       href="/{{ ASSIGNMENT_URL_PREFIX }}"
     >
       Oppgaver

piggy/templates/objects/card-topic.html

@@ -14,4 +14,4 @@
   )
 }}
 
-<script src="{{ url_for('static', filename='js/card_script.js') }}"></script>
+<script src="{{ url_for('static', filename='js/card_script.js') }}" defer></script>

piggy/templates/objects/card.html

@@ -14,52 +14,58 @@
 %}
   <a
     href="{{ abspath }}/{{ item }}"
-    class="card-container block p-3 rounded-lg border border-slate-400 {{ extra_classes }}"
+    class="card-container grid-cols-2 p-3 block {{ extra_classes }}"
   >
+
+  {% if title %}
     <div class="card-title text-2xl font-extrabold text-center pb-2">
       {{ title }}
     </div>
-    <div class="thumbnail-container">
-      <img
-        class="thumbnail-image w-full object-cover rounded-lg shadow-lg"
-        src="{{ thumbnail }}"
-        alt="{{ thumbnail_alt }}"
-      />
-
-      {% if difficulty %}
-        {% if difficulty > 0 %}
-          <div class="thumbnail-text-overlay">
-            {% if difficulty > 7 %}
-              <!-- Hardcoded color here, change this-->
-              <span
-                >Difficulty:
-                <span style="color:#dd2256;">⭐ × {{ difficulty }}</span></span
-              >
-            {% else %}
-              <span>Difficulty: {{ difficulty * '⭐' }}</span>
-            {% endif %}
-          </div>
-        {% endif %}
-      {% else %}
-        {% if overlay_text %}
-          <div class="thumbnail-text-overlay">{{ overlay_text }}</div>
-        {% endif %}
+  {% endif %}
+
+  <div class="thumbnail-container">
+    <img
+      class="thumbnail-image w-full object-cover"
+      src="{{ thumbnail }}"
+      alt="{{ thumbnail_alt }}"
+    />
+
+    {% if difficulty %}
+      {% if difficulty > 0 %}
+        <div class="thumbnail-text-overlay">
+          {% if difficulty > 7 %}
+            <!-- Hardcoded color here, change this-->
+            <span
+              >Difficulty:
+              <span class="difficulty-overkill">⭐ × {{ difficulty }}</span></span
+            >
+          {% else %}
+            <span>Difficulty: {{ difficulty * '⭐' }}</span>
+          {% endif %}
+        </div>
       {% endif %}
+    {% else %}
+      {% if overlay_text %}
+        <div class="thumbnail-text-overlay">{{ overlay_text }}</div>
+      {% endif %}
+    {% endif %}
     </div>
 
     {# Card Tags #}
     {% if tags %}
       <div class="tags-container">
         {% for tag in tags %}
-          <span class="tag-box" style="border: 1px solid;" data-tag="{{ tag }}">
+          <span class="tag-box text-sm" data-tag="{{ tag }}">
             {{ tag }}
           </span>
         {% endfor %}
       </div>
     {% endif %}
 
-    <div class="description-container mt-4 font-semibold">
-      {{ description }}
-    </div>
+    {% if description %}
+      <div class="description-container mt-4 font-semibold">
+        {{ description }}
+      </div>
+    {% endif %}
   </a>
 {% endmacro %}

piggy/templates/partials/head.html

@@ -5,3 +5,5 @@
 {% block styles %}
   {% include "partials/parts/styles.html" %}
 {% endblock %}
+
+<script src="{{ url_for('static', filename='js/main.js') }}" defer></script>

piggy/templates/partials/parts/breadcrumbs.html

@@ -1,14 +1,14 @@
 {# TODO: fix this mess. #}
 {% if request.path.strip("/") %}
   <nav
-    class="flex px-5 py-3 rounded-lg bg-red-100 text-white"
+    class="piggy-navbar flex px-5 py-3"
     aria-label="Breadcrumb"
   >
     <ol class="inline-flex items-center space-x-1 md:space-x-2">
       <li class="inline-flex items-center">
         <a
           href="/"
-          class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white"
+          class="piggy-breadcrumb inline-flex items-center text-sm font-medium"
         >
           <svg
             class="w-3 h-3 me-2.5"
@@ -40,7 +40,7 @@
           <li>
             <div class="flex items-center">
               <svg
-                class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400 "
+                class="piggy-breadcrumb-no-hover rtl:rotate-180 block w-3 h-3 mx-1"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -56,7 +56,7 @@
               </svg>
               <a
                 href="{{ url }}"
-                class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white"
+                class="piggy-breadcrumb ms-1 text-sm font-medium"
               >
                 {{ p }}
               </a>
@@ -66,7 +66,7 @@
           <li aria-current="page">
             <div class="flex items-center">
               <svg
-                class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1"
+                class="piggy-breadcrumb-no-hover rtl:rotate-180 w-3 h-3 mx-1"
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -81,13 +81,25 @@
                 />
               </svg>
               <span
-                class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400"
+                class="piggy-breadcrumb-no-hover ms-1 text-sm font-medium"
                 >{{ p }}</span
               >
             </div>
           </li>
         {% endif %}
       {% endfor %}
     </ol>
+    <button id="theme-modal-btn">Theme</button>
+
+    <div id="theme-modal" class="modal inline">
+      <div class="modal-content">
+        <h3 class="theme-title">Select a Theme</h3>
+        <button class="theme-option" data-theme="dark">Dark</button>
+        <button class="theme-option" data-theme="light">Light</button>
+        <button class="theme-option" data-theme="piggy">Piggy</button>
+        <button class="theme-option" data-theme="high-contrast">High Contrast</button>
+        <button class="theme-option" data-theme="classic">Classic</button>
+      </div>
+    </div>
   </nav>
 {% endif %}

piggy/templates/partials/parts/styles.html

@@ -1,26 +1,50 @@
+<!-- fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
   href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
   rel="preload"
   as="style"
 />
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link 
+  href="https://fonts.googleapis.com/css2?family=Baloo+2:[email protected]&display=swap" 
+  rel="stylesheet"
+/>
+
 <link
   href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
   rel="stylesheet"
   as="style"
 />
 
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link 
+  href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" 
+  rel="stylesheet"
+/>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link 
+  href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" 
+  rel="stylesheet"
+/>
+
+<!-- Styles -->
+
 <link
   href="{{ url_for('static', filename='css/styles.css') }}"
   rel="stylesheet"
 />
 
 <style>
   body {
-    font-family: "Nunito", sans-serif;
+    font-family: "Quicksand";
     font-optical-sizing: auto;
-    font-weight: 100;
     font-style: normal;
   }
 </style>