feat(docs): Update README to include detailed features section for be…

…tter clarity fix(ui): Correct login title position in template for improved layout style(css): Enhance selection and focus styles for better user experience fix(run): Change default Flask port from 5000 to 5001 for conflict resolution
CarlKho-Minerva · Nov 3, 2024 · 01918fb · 01918fb
1 parent 0d1c899
commit 01918fb
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,15 @@
 
 A hierarchical todo list application with an immersive medieval theme that allows users to manage quests (todos) with up to 3 levels of nested sub-quests.
 
+## Features
+
+- 🏰 Medieval-themed UI with smooth animations and visual effects
+- 👤 User authentication system
+- 📜 Multiple todo lists (quest journals)
+- ⚔️ Hierarchical tasks up to 3 levels deep
+- 🔄 AJAX-powered interactions for smooth UX
+- 📱 Responsive design with elegant scrolling behavior
+
 ## Demo Video
 <div>
     <a href="https://www.loom.com/share/da2a485c02b14377ae5e01d53ba56695">
@@ -12,15 +21,6 @@ A hierarchical todo list application with an immersive medieval theme that allow
     </a>
   </div>
 
-## Features
-
-- 🏰 Medieval-themed UI with smooth animations and visual effects
-- 👤 User authentication system
-- 📜 Multiple todo lists (quest journals)
-- ⚔️ Hierarchical tasks up to 3 levels deep
-- 🔄 AJAX-powered interactions for smooth UX
-- 📱 Responsive design with elegant scrolling behavior
-
 ## Project Structure
 The project uses Flask for the backend, SQLAlchemy for the database, and vanilla JavaScript with AJAX for frontend interactions. The medieval theme is implemented through CSS variables, gradients, and animations.
 ```

diff --git a/app/medieval_todos.db b/app/medieval_todos.db
diff --git a/app/models/__pycache__/todo.cpython-311.pyc b/app/models/__pycache__/todo.cpython-311.pyc
diff --git a/app/models/todo.py b/app/models/todo.py
@@ -1,9 +1,9 @@
 """Todo models for the Medieval Todo List application."""
 
+from sqlalchemy import Column
 from datetime import datetime
 from typing import Optional
 from app import db
-from sqlalchemy import Column, Boolean
 
 
 class TodoList(db.Model):

diff --git a/app/routes.py b/app/routes.py
diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -6,6 +6,36 @@
     --background-color: #1a0a0a;
 }
 
+/* Selection highlight */
+::selection {
+    background: rgba(156, 124, 56, 0.4);
+    /* Using secondary-color with transparency */
+    color: var(--text-color);
+}
+
+:-moz-selection {
+    background: rgba(156, 124, 56, 0.4);
+    color: var(--text-color);
+}
+
+/* Input highlight */
+input::selection {
+    background: rgba(192, 160, 128, 0.4);
+    /* Using accent-color with transparency */
+    color: var(--text-color);
+}
+
+/* Focus outline */
+:focus {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+}
+
+/* Active state highlight
+:active {
+    background-color: rgba(156, 124, 56, 0.2);
+} */
+
 body,
 html {
     margin: 0;
@@ -15,7 +45,7 @@ html {
     color: var(--text-color);
     height: 100%;
     overflow: hidden;
-
+    cursor: url('data:image/x-icon;base64,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AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqKiqgoKBnZ2chISEsLCwAAAAAAAAAAABAP0EpJysAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABNTU1CQkJEREQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/////////////wP///8B///+AD///gAP//wAD//8AAf/+AAH//gAB//4AAf/8AAP//AAH/wAAD/4AAA/8AAAf+AAAP/AAAH/wAAH/4AAB/+AAA//kAAf//AAH//wAB//4AA//+AAf//AAH//gA///wcf//8f//////////////w=='), auto;
 }
 
 .background {

diff --git a/app/templates/login.html b/app/templates/login.html
@@ -7,12 +7,12 @@
     <div class="auth-card">
         <div class="auth-header">
             <i class="fas fa-castle auth-icon"></i>
-            <h2 class="auth-title">Enter the Realm <span style="display: none;">Login</span></h2>
             <div class="auth-divider">
                 <span class="divider-line"></span>
                 <i class="fas fa-crown divider-icon"></i>
                 <span class="divider-line"></span>
             </div>
+            <h2 class="auth-title">Enter the Realm <span style="display: none;">Login</span></h2>
         </div>
 
         <form method="POST" action="{{ url_for('auth.login') }}" class="auth-form">

diff --git a/run.py b/run.py
@@ -12,6 +12,6 @@
     # Run the application
     app.run(
         host=os.environ.get("FLASK_HOST", "127.0.0.1"),
-        port=int(os.environ.get("FLASK_PORT", 5000)),
+        port=int(os.environ.get("FLASK_PORT", 5001)),
         debug=config[config_name].DEBUG,
     )