Add icon bar partial template with navigation links and iconsHEAD main

author: Bobby <[email protected]> 2026-02-11 17:44:40 +0530
committer: Bobby <[email protected]> 2026-02-11 17:44:40 +0530
commit: 81ba5c7c9bbb175ed8680255e7828cc9703c7596 (patch)
tree: ba9076bf6a47cbaa5b9bad1583111777718b3523 /templates
parent: 136e437b1ae1697c688c9a548cd4ae0c5a948419 (diff)
download: cafe-main.tar.xz
cafe-main.zip
4 files changed, 120 insertions, 13 deletions
diff --git a/templates/auth/logout.django b/templates/auth/logout.django
index 4f26d62..0e49b19 100644
--- a/templates/auth/logout.django
+++ b/templates/auth/logout.django
@@ -1,5 +1,33 @@
 {% extends "layouts/base.django" %}
 
 {% block content %}
-You have been logged out. However, if you are still logged in to <a href="https://my.thatcomputerscientist.com"> Shifoo's Dungeon</a>, you may be automatically logged back in when you visit home page again.
+<div class="flex flex-1 items-center justify-center min-h-screen bg-gradient-to-br from-[#0a0a0f] via-[#1a1a2e] to-[#0a0a0f]">
+    <div class="max-w-md w-full mx-4">
+        <div class="bg-[#16213e] rounded-lg shadow-2xl p-8 border border-[#0f3460]">
+            <!-- Logo/Icon Area -->
+            <div class="text-center mb-8">
+                <h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 mb-2">
+                    ☕ Shifoo's Cafe
+                </h1>
+                <p class="text-gray-400 text-sm">A cozy place for close friends</p>
+            </div>
+
+            <!-- Logout Message -->
+            <div class="mb-6 text-center">
+                <h2 class="text-xl font-semibold text-white mb-2">Logged Out</h2>
+                <p class="text-gray-400 text-sm">
+                    You have been logged out. If you are still logged in to <a href="https://my.thatcomputerscientist.com" class="text-purple-400 hover:underline">Shifoo's Dungeon</a>, you may be automatically logged back in when you visit the <a href="{% url "mainHall" %}" class="text-purple-400 hover:underline">main hall</a>.
+                </p>
+            </div>
+
+            <!-- Footer Info -->
+            <div class="mt-6 text-center text-xs text-gray-500">
+                <p>See you next time! 👋</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+{% comment %} You have been logged out. However, if you are still logged in to <a href="https://my.thatcomputerscientist.com"> Shifoo's Dungeon</a>, you may be automatically logged back in when you visit the <a href="{% url "mainHall" %}">main hall</a>. {% endcomment %}
 {% endblock content %}
 \ No newline at end of file
diff --git a/templates/layouts/base.django b/templates/layouts/base.django
index e8fe890..1455a67 100644
--- a/templates/layouts/base.django
+++ b/templates/layouts/base.django
@@ -6,6 +6,11 @@
     <meta name="theme-color" content="#1e1e2e" />
     <title>{% block title %}{{ Title }}{% endblock %}</title>
     
+    <link rel="icon" type="image/png" href="/static/icons/cafe/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/static/icons/cafe/favicon.svg" />
+    <link rel="shortcut icon" href="/static/icons/cafe/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/cafe/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="Shifoo's Cafe" />
     <link rel="manifest" href="/static/manifest.json" />
     <link rel="stylesheet" href="{% static "css/style.css" %}" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -13,8 +18,8 @@
     <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
     {% block head %}{% endblock %}
   </head>
-  <body class="">
-    <div class="">
+  <body>
+    <div class="flex h-screen overflow-hidden bg-dark text-white">
       {% block content %}{% endblock %}
     </div>
     
diff --git a/templates/pages/main.django b/templates/pages/main.django
index 6f3994e..20cdd40 100644
--- a/templates/pages/main.django
+++ b/templates/pages/main.django
@@ -2,29 +2,31 @@
 
 {% block content %}
 <div class="flex h-screen">
-    {% if User %}
-    <span class="text-gray-300">👋 {{ User.Username }}</span>
-    <a href="{% url "auth.logout" %}" 
-        class="text-sm bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition-colors">
+    {% include "partials/iconbar.partial.django" %}
+
+
+    {% comment %} {% if User %}
+    <span>👋 {{ User.Username }}</span>
+    <a href="{% url "auth.logout" %}" >
         Logout
     </a>
     {% endif %}
             
-    <h2 class="text-2xl font-bold mb-4 text-white">Welcome to Shifoo's Cafe! ☕</h2>
-    <p class="text-gray-400 mb-4">
+    <h2 >Welcome to Shifoo's Cafe! ☕</h2>
+    <p >
         You're now authenticated. This is where the main application will be built.
     </p>
                     
     {% if User %}
-    <div class="mt-6 p-4 bg-[#0f3460]/50 rounded border border-[#0f3460]">
-        <h3 class="text-lg font-semibold text-white mb-2">Your User Info:</h3>
-        <ul class="text-gray-300 space-y-1">
+    <div >
+        <h3 >Your User Info:</h3>
+        <ul >
             <li><strong>Username:</strong> {{ User.Username }}</li>
             <li><strong>Email:</strong> {{ User.Email }}</li>
             <li><strong>Display Name:</strong> {{ User.DisplayName }}</li>
             <li><strong>Admin:</strong> {% if User.IsAdmin %}Yes ⭐{% else %}No{% endif %}</li>
         </ul>
     </div>
-    {% endif %}
+    {% endif %} {% endcomment %}
 </div>
 {% endblock %}
 \ No newline at end of file
diff --git a/templates/partials/iconbar.partial.django b/templates/partials/iconbar.partial.django
new file mode 100644
index 0000000..f88163a
--- /dev/null
+++ b/templates/partials/iconbar.partial.django
@@ -0,0 +1,72 @@
+<div class="iconbar flex flex-col h-full w-16 p-2 gap-8">
+  <div class="flex flex-col items-center justify-center">
+    <a href="/@me" class="w-full aspect-square">
+        <img src="/static/icons/defaults/user.png" alt="User Profile" class="icon w-full h-full object-contain rounded-lg hover:opacity-80 transition-opacity" />
+    </a>
+  </div>
+  <div class="flex flex-col items-center">
+    <p class="text-xxs text-center font-bold text-muted uppercase">Main</p>
+    <a href="{% url "mainHall" %}" class="w-full aspect-square p-1">
+        <div class="rounded-lg p-3 items-center transition-colors {%if Request.Path == '/' %}bg-overlay{% else %}hover:bg-overlay{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+            </svg>
+        </div>
+    </a>
+    <a href="/bulletin" class="w-full aspect-square p-1">
+        <div class="rounded-lg p-3 items-center transition-colors {%if Request.Path == '/bulletin' %}bg-overlay{% else %}hover:bg-overlay{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
+            </svg>
+        </div>
+    </a>
+    <a href="/polls" class="w-full aspect-square p-1">
+        <div class="rounded-lg p-3 items-center transition-colors {%if Request.Path == '/polls' %}bg-overlay{% else %}hover:bg-overlay{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
+            </svg>
+        </div>
+    </a>
+    <a href="/links" class="w-full aspect-square p-1">
+        <div class="rounded-lg p-3 items-center transition-colors {%if Request.Path == '/links' %}bg-overlay{% else %}hover:bg-overlay{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
+            </svg>
+        </div>
+    </a>
+    <a href="/@me" class="w-full aspect-square p-1">
+        <div class="rounded-lg p-3 items-center transition-colors {%if Request.Path == '/@me' %}bg-overlay{% else %}hover:bg-overlay{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+            </svg>
+        </div>
+    </a>
+    <a href="/settings" class="w-full aspect-square p-1">
+        <div class="rounded-lg p-3 items-center transition-colors {%if Request.Path == '/settings' %}bg-overlay{% else %}hover:bg-overlay{% endif %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+            </svg>
+        </div>
+    </a>
+    <a href="{% url "auth.logout" %}" class="w-full aspect-square p-1">
+        <div class="rounded-lg p-3 items-center transition-colors hover:bg-overlay">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
+            </svg>
+        </div>
+    </a>
+  </div>
+  <div class="flex-1 flex flex-col items-center gap-2">
+    <p class="text-xxs text-center font-bold text-muted uppercase">Whispers</p>
+  </div>
+  <div class="flex flex-col">
+    <a href="/directory" class="w-full aspect-square p-1">
+        <div class="rounded-lg p-3 items-center transition-colors bg-primary hover:bg-primary-hover">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+            </svg>
+        </div>
+    </a>
+  </div>
+</div>
+\ No newline at end of file
author	Bobby <[email protected]>	2026-02-11 17:44:40 +0530
committer	Bobby <[email protected]>	2026-02-11 17:44:40 +0530
commit	81ba5c7c9bbb175ed8680255e7828cc9703c7596 (patch)
tree	ba9076bf6a47cbaa5b9bad1583111777718b3523 /templates
parent	136e437b1ae1697c688c9a548cd4ae0c5a948419 (diff)
download	cafe-main.tar.xz cafe-main.zip