From fd08f04600a8b805ff290dda2f036f0dbd7e8e51 Mon Sep 17 00:00:00 2001
From: Felix Ivo <fx.ivo@web.de>
Date: Mon, 16 Jun 2025 10:49:26 +0200
Subject: [PATCH] added sorting functionality, changed style

---
 CSS/style.css               | 433 +++++++++++++++++++++++++-----------
 Views/Notes/showNotes.phtml |  22 +-
 2 files changed, 321 insertions(+), 134 deletions(-)

diff --git a/CSS/style.css b/CSS/style.css
index 39f584f..956fbe1 100644
--- a/CSS/style.css
+++ b/CSS/style.css
@@ -1,145 +1,312 @@
-/* 
-    Created on : 04.01.2018, 15:39:10
-    Author     : reich
-*/
-
-*, *:before, *:after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     margin: 0;
-  }
-  
-  body {
-      font-size: 18px;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  }
-  
-  .wrapper {
-      max-width: 1000px;
-      margin: 0 auto;
-  }
-  
-  /*** Allgemeine Definitionen ***/
-  h1 {
-      /* margin: 10px; */
-      color: #F2F2F2;
-      font-size: 48px;
-      font-weight: 100;
-      text-align: center;
-  }
-  
-  h1 span {
-      margin-left: -2px;
-      color: #FDBD02;
-      font-size: 24px;
-      font-weight: 600;
-  }
-  
-  h2 {
-      padding: 10px 0 10px 0;
-      text-align: center;
-      color: #011448;
-      font-size: 36px;
-      font-weight: 100;
-  }
-  
-  main {
-      background-color: #e6e6e6;
-      color: #000;
-      padding-bottom: 20px;
-  }
-  
-  /*** Standard-Button ***/
-  
-  .button {
-      text-align: right;
-  }
-  
-  .button a {
-      display: inline-block;
-      background: #FDBD02;
-      color:#303E64; 
-      border: none; 
-      width: 100px; 
-      margin: 5px; 
-      padding: 2px; 
-      border-radius: 5px; 
-      cursor:pointer; 
-      font-size: 12px;
-      text-decoration: none;
-      text-align: center;
-  }
-  
-  .button a:hover {
-      color:#fff; 
-  }
-  
-  .clear {
-      clear: both;
-  }
-  
-  /*** Header-Bereich mit Navigationsleiste ***/
-  header {
-      width: 100%;
-      background-color: #303E64;
-  }
-  
-  nav {
-      text-align: center;
-      position: sticky;
-      top: 0;
-      background-color: #303E64;
-  }
-  
-  nav ul {
-      list-style-type: none;
-      padding: 0;
-      display: inline-block;
-  }
-  
-  nav li {
-      float: left;
-      text-align: center; 
-  }
-  
-  nav li a {
-      display: block;
-      width: 120px;
-      height: 35px;
-      border: 1px solid #000;
-      background-color: #e6e6e6;
-      color: #000;
-      text-decoration: none;
-      margin: 5px;
-      text-align: center;
-      line-height: 35px;
-  }
-  
-  nav li a:hover {
-      background-color: #F2C608;
-  }
-  
-  
-  #metanavi {
-      color: lightskyblue;
-      font-weight: bold;
-      margin-bottom: 5px;
-  }
+    background-color: #f0f2f5;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.top-bar {
+    background-color: #6A5ACD;
+    color: white;
+    padding: 15px 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.top-bar h1 {
+    margin: 0;
+    font-size: 1.5em;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+}
+
+.user-info span {
+    margin-right: 15px;
+}
+
+.user-info a, .user-info button {
+    color: white;
+    text-decoration: none;
+    padding: 8px 12px;
+    border-radius: 4px;
+    background-color: transparent;
+    border: 1px solid white;
+    cursor: pointer;
+    font-size: 0.9em;
+    margin-left: 10px;
+}
+
+.user-info a:hover, .user-info button:hover {
+    background-color: rgba(255,255,255,0.1);
+}
+
+.icon-button {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.5em;
+    cursor: pointer;
+    padding: 0 5px;
+}
+.icon-button:hover {
+    opacity: 0.8;
+}
+
 
 .container {
+    flex-grow: 1;
+    width: 90%;
+    max-width: 1200px;
+    margin: 30px auto;
+    padding: 20px;
+    background-color: white;
+    box-shadow: 0 0 15px rgba(0,0,0,0.1);
+    border-radius: 8px;
+}
+
+.page-header {
     display: flex;
-    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
 }
 
-.item-4-12 {
-    flex: 0 0 33.3333333333%;
+.page-header h2 {
+    margin: 0;
+    color: #333;
 }
 
-img {
+.button, button {
+    background-color: #6A5ACD;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    text-decoration: none;
+    display: inline-block;
+    transition: background-color 0.2s ease-in-out;
+}
+
+button.secondary {
+    background-color: #777;
+}
+button.danger {
+    background-color: #e74c3c;
+}
+
+.button:hover, button:hover {
+    opacity: 0.85;
+}
+
+
+/* Form Styles */
+.form-container {
+    max-width: 600px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.form-group input[type="text"],
+.form-group input[type="password"],
+.form-group textarea {
     width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 1em;
 }
 
-[class*="item-"] {
-    padding: 0 10px 0 10px;
+.form-group textarea {
+    min-height: 150px;
+    resize: vertical;
+}
+
+.form-actions {
+    margin-top: 20px;
+    text-align: right;
+}
+.form-actions button {
+    margin-left: 10px;
+}
+
+
+/* Table Styles */
+.notes-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+.notes-table th, .notes-table td {
+    border: 1px solid #e0e0e0;
+    padding: 12px 15px;
+    text-align: left;
+    vertical-align: top;
+}
+
+.notes-table th {
+    background-color: #f9f9f9;
+    font-weight: bold;
+    cursor: pointer;
+}
+.notes-table th:hover {
+    background-color: #f0f0f0;
+}
+.notes-table th .sort-icon {
+    margin-left: 5px;
+    font-size: 0.8em;
+}
+
+.notes-table tr:nth-child(even) {
+    background-color: #fbfbfb;
+}
+.notes-table tr:hover {
+    background-color: #f5f5f5;
+}
+
+.actions-cell button, .actions-cell a {
+    margin-right: 5px;
+    padding: 5px 8px;
+    font-size: 0.9em;
+}
+
+/* Markdown Preview */
+.markdown-preview {
+    border: 1px solid #ddd;
+    padding: 15px;
+    min-height: 100px;
+    background-color: #fff;
+    border-radius: 4px;
+    margin-top: 10px;
+}
+.markdown-preview h1, .markdown-preview h2, .markdown-preview h3 {
+    margin-top: 0.5em;
+    margin-bottom: 0.25em;
+}
+.markdown-preview p {
+    margin-bottom: 0.5em;
+    line-height: 1.6;
+}
+.markdown-preview ul, .markdown-preview ol {
+    margin-left: 20px;
+    margin-bottom: 0.5em;
+}
+.markdown-preview pre {
+    background-color: #f5f5f5;
+    padding: 10px;
+    border-radius: 4px;
+    overflow-x: auto;
+}
+.markdown-preview code {
+    font-family: "Courier New", Courier, monospace;
+}
+.markdown-preview blockquote {
+    border-left: 3px solid #ccc;
+    padding-left: 10px;
+    margin-left: 0;
+    color: #666;
+}
+
+
+/* Drag and Drop Area */
+#drop-zone {
+    border: 2px dashed #ccc;
+    padding: 20px;
+    text-align: center;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+}
+#drop-zone.drag-over {
+    border-color: #6A5ACD;
+    background-color: #e8e4f5;
+}
+
+/* Alerts */
+.alert {
+    padding: 15px;
+    margin-bottom: 20px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+.alert-success {
+    color: #155724;
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+}
+.alert-danger {
+    color: #721c24;
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+}
+.alert-info {
+    color: #0c5460;
+    background-color: #d1ecf1;
+    border-color: #bee5eb;
+}
+
+#password-strength {
+    font-size: 0.9em;
+    margin-top: 5px;
+}
+.password-strength-meter {
+    height: 5px;
+    background-color: #eee;
+    border-radius: 5px;
+    margin-top: 3px;
+}
+.password-strength-meter div {
+    height: 100%;
+    width: 0;
+    background-color: red;
+    border-radius: 5px;
+    transition: width 0.3s ease, background-color 0.3s ease;
+}
+
+#password-strength ul {
+    list-style-type: none;
+    padding-left: 0;
+    font-size: 0.9em;
+    margin-top: 5px;
+}
+#password-strength li {
+    margin-bottom: 3px;
+}
+#password-strength li.valid {
+    color: green;
+}
+#password-strength li.invalid {
+    color: red;
+}
+
+.notes-table th .sort-icon {
+    margin-left: 5px;
+    font-size: 0.8em;
+    color: #6A5ACD;
+    display: inline-block;
 }
\ No newline at end of file
diff --git a/Views/Notes/showNotes.phtml b/Views/Notes/showNotes.phtml
index e83b915..5bf9ce5 100644
--- a/Views/Notes/showNotes.phtml
+++ b/Views/Notes/showNotes.phtml
@@ -1,5 +1,26 @@
 <?php include dirname(__DIR__).'/header.phtml'; ?>    
 
+<script>
+    document.querySelectorAll('.notes-table th[data-sort]').forEach(headerCell => {
+        headerCell.addEventListener('click', () => {
+            const sortBy = headerCell.dataset.sort;
+            const currentUrl = new URL(window.location.href);
+            const currentSortBy = currentUrl.searchParams.get('sort_by');
+            const currentSortOrder = currentUrl.searchParams.get('sort_order') || 'asc'; // Default to asc if not set
+            
+            let newSortOrder = 'asc';
+            if (sortBy === currentSortBy && currentSortOrder.toLowerCase() === 'asc') {
+                newSortOrder = 'desc';
+            }
+            // If different column, or current is desc, start with asc for the new column
+            
+            currentUrl.searchParams.set('sort_by', sortBy);
+            currentUrl.searchParams.set('sort_order', newSortOrder);
+            window.location.href = currentUrl.toString();
+        });
+    });
+</script>
+
 <h2>Notes</h2>
 
 <div class="container">
@@ -20,7 +41,6 @@
     
     $sortBy = $_GET['sort_by'] ?? 'updated_at';
     $sortOrder = strtoupper($_GET['sort_order'] ?? 'DESC'); // Ensure uppercase for comparison
-    //$notes = NotesModel::selectNotesForUser(2, $sortBy, $sortOrder); //$_SESSION['user_id']
     ?>
     <table class="notes-table">
         <thead>