From ab26939794709be5ba9746101db238beeee8c53b Mon Sep 17 00:00:00 2001
From: Andrew4Coding <andrewdevitoaryo@gmail.com>
Date: Fri, 11 Oct 2024 19:40:43 +0700
Subject: [PATCH] feat: initialize navbar and footer design

---
 modules/authentication/templates/login.html   |   6 +++---
 .../authentication/templates/register.html    |   4 ++--
 modules/authentication/views.py               |   4 +---
 modules/main/views.py                         |   2 +-
 static/assets/eventyog-white.png              | Bin 0 -> 2554 bytes
 templates/base.html                           |  15 +++++++++++----
 templates/ds/footer.html                      |  17 +++++++++++++++--
 templates/ds/navbar.html                      |  18 ++++++++++++++++--
 8 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 static/assets/eventyog-white.png

diff --git a/modules/authentication/templates/login.html b/modules/authentication/templates/login.html
index ac8ad23..b6ff35a 100644
--- a/modules/authentication/templates/login.html
+++ b/modules/authentication/templates/login.html
@@ -12,7 +12,7 @@
   >    
     <img src={% static "assets/icon.png" %} alt="icon" class="w-20 object-contain">
     <h1
-      class="font-bold text-xl sm:text-2xl text-center"
+      class="font-semibold text-xl text-center"
     >Welcome to EventYog!</h1>
     <form method="POST" action="" class="flex flex-col gap-5 bg-white">
       {% csrf_token %}
@@ -20,11 +20,11 @@
       <div class="rounded-md shadow-sm -space-y-px flex flex-col gap-5">
         <div>
           <label for="username" class="sr-only">Username</label>
-          <input id="username" name="username" type="text" required class="bg-[#F2F2F2] py-3 px-10 text-black placeholder:text-[#C9C9C9] focus:outline-none font-semibold placeholder:font-normal rounded-3xl justify-center" placeholder="Username">
+          <input id="username" name="username" type="text" required class="bg-[#F2F2F2] py-3 px-10 text-black placeholder:text-[#C9C9C9] focus:outline-none font-normal rounded-3xl justify-center" placeholder="Username">
         </div>
         <div>
           <label for="password" class="sr-only">Password</label>
-          <input id="password" name="password" type="password" required class="bg-[#F2F2F2] py-3 px-10 text-black placeholder:text-[#C9C9C9] focus:outline-none font-semibold placeholder:font-normal rounded-3xl justify-center" placeholder="Password">
+          <input id="password" name="password" type="password" required class="bg-[#F2F2F2] py-3 px-10 text-black placeholder:text-[#C9C9C9] focus:outline-none font-normal rounded-3xl justify-center" placeholder="Password">
         </div>
       </div>
       <button 
diff --git a/modules/authentication/templates/register.html b/modules/authentication/templates/register.html
index ae545fd..fcc4b1d 100644
--- a/modules/authentication/templates/register.html
+++ b/modules/authentication/templates/register.html
@@ -12,7 +12,7 @@
   >    
     <img src={% static "assets/icon.png" %} alt="icon" class="w-20 object-contain">
     <h1
-      class="font-bold text-xl sm:text-2xl text-center"
+      class="font-semibold text-xl text-center"
     >Register to EventYog!</h1>
     <form method="POST" action="" class="flex flex-col gap-5 bg-white">
       {% csrf_token %}
@@ -20,7 +20,7 @@
       <div class="rounded-md shadow-sm -space-y-px flex flex-col gap-5">
         {% for field in form %}
           <div class="{% if not forloop.first %}mt-4{% endif %}">
-            <label for="{{ field.id_for_label }}" class="mb-2 font-semibold text-black">
+            <label for="{{ field.id_for_label }}" class="mb-2 font-semibold text-black text-sm">
             {{ field.label }}
             </label>
             <div class="relative">
diff --git a/modules/authentication/views.py b/modules/authentication/views.py
index eaa4df2..8eae466 100644
--- a/modules/authentication/views.py
+++ b/modules/authentication/views.py
@@ -22,12 +22,10 @@ def login_user(request):
             return response
         else:
             messages.error(request, "Invalid username or password")
-        
-
     else:
         form = AuthenticationForm(request)
 
-    context = {'form': form}
+    context = {'form': form, 'show_navbar': False, 'show_footer': False}
     return render(request, 'login.html', context)
 
 def logout_user(request):
diff --git a/modules/main/views.py b/modules/main/views.py
index dcad97e..db902cc 100644
--- a/modules/main/views.py
+++ b/modules/main/views.py
@@ -4,4 +4,4 @@
 # Create your views here.
 @login_required(login_url='auth:login')
 def main(request):
-    return render(request, 'base.html')
\ No newline at end of file
+    return render(request, 'base.html', {'show_navbar': True, 'show_footer': True})
\ No newline at end of file
diff --git a/static/assets/eventyog-white.png b/static/assets/eventyog-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..4fd279657d646ade72e043529ca73c611fca7b32
GIT binary patch
literal 2554
zcmV<W2?h3vP)<h;3K|Lk000e1NJLTq0043T003<W1^@s6eO)y(00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH36DucK~#7F?VU@A
z97Pz%|Ff>UMo^;%#RoV!n2>{-Rq-IGBj{BV5IjjXh!;H=L3|#PfG8+pB7z`@8x>EA
z249zGW_^JO?gsG?U+MS+H7_+AlQp*AH{G>cTT@kC)iXVr?yetvRCjOnW9vUv^;LCM
zbpsaSI9^V{B-!O;EwUy8GB-3DjW&9O(z!*!dL(JQJT+#PEF#-M_nCq(EFjq?vV(EJ
zMhiVa=WmSN(|9l0CeyVVnv1WY;0=V_=R&R=Nom}q;6)@k(3dE^ZzLaVC^ujccVRJW
z2kfj+6EurdL{8%-@^c7@n6u(QL%G2Wf`~qxO^JEPHFBRs6!3i~#1CmCy}@#XoaoCT
z9}!cYM*pg;j%KNLiIBuS2z8<_yL}>4f=^Pg7X773wvjg)siHFoLi)l@0%u{^>qIeW
z%%#E#&XH>oM9f3mHDc;SHc<?m5!VPI1OCi<#BHHi*0YcoBanw-60(yc*C61_w5P{<
z7K&y02m*O%!;cjxmSzw#A8%sF2txW3$z5Z^LJ-oQ?HEFWkp4_z2nj;^vBURm$Djy8
z`mq&5N)XbWs2{^RiXsT<&K3+YK}a{Ia}9nPAVEksCNbm$A+y;wte&b&5YkSBA@)>d
zf{=DLlp!}VK}a)OhPk<+!ee$~1XN~8#0m5XO5z9wzrYVUvYUu(9ZE(Jaw%d2cZ8A=
zgj}SwA~He9gs!<1Wg`e#0TG$H3mKsTA~JOrlEtfph)i9D+=dc6HabR8FStJB9-C71
zpZZWIA*abEtCS06>L6r<r1QIt3R7hvxftcTaBGg4#igT)Le@$^L6wB$I&gE<i%=6~
z7V<dRL9!pn9wY%jK#eJrkn?1}ksU}w7V%j6x7x2p!b0wYAN(S^k>hW!*JHtsry(2H
zb4Su+Dr0F_`#xh9Qgl(d3M96DL^H+pxyG0!{wb(AETs5VtBIrz0g=Uv4aZ?QA6WWh
zP>;#a@Lw9L@lDV04{8nzc`CXSrXRRovmfyy)EqfS3i8x*u4EO<F87vmr{Fu(99_|>
zODJ10Yx+B2F0M`I0s5j=SF{Sgpr*&)s5x@c%INAo)3)jF{U+<$?;+4tv=&*c`rJbZ
zHv+qezff*`8-ax!DPt>MZ8_IgoHk(hifzR>V6Io6M4$r;ISzA?s@v}c)3s%hOic{+
ze4ZusJ^~$dInsp988XE+?f1%8B;qp&EFcT16G>P6WpxzTicyoJ1SPJ`bNv)0n0Pv9
zbnQq%RuP+3^qJ!5;_J?X=Gb$T6CXyP3tb&K2+!5`J|B@iMk0QMfR<4#zRI#W8BpTD
zaE?zKQ|IN%+x*sp7w>z81pE*IE2I1O@0Xn&Z7vxd9o@Zb*|OQOv9Soq^%~2?L1OqF
z<6*MhRT(%uC|F22aTm6Eyh|L%+veuxwoXh;)Mo5ULF`4b6I~<i2!T|<%|XDvu@A+v
zZ;6oUsIz-lty(pOKtJJXVm*pucF7Ql6DLlrTe))O6axLG=oOdWl!e@~diCly0(~c)
zrqD()B#RyH*|R4mn?ayZ_*;{4F--FHJ2`TGetrW2g^~`O-iH1%y|CC}$c=*|PQH{o
z6ZeO`aq=0%4kP5?Y)4=qq^$y8!zV&-L{KK`j)WeR!ICCEud0=|n4N}hw)M=+Oznr;
zpDg0U0ctxIr5vwiy4E1xas)C+>pK2wU<=7S7T)J#I6~5FnXT(Av-%->K7sNQK08<u
zSjZLv<%f#ag9wzLSn96}lo+YIC$uNajMU(K5rOie^d4+NpqyyBf}Td8e8lEgBrOEW
zLu_Xkd$ghVXZZ2?fD3oxmg$w(=c)O^i!l98_7inf|A+yQwis?EyB<lW`PoPYbw@~E
zTk%K$>yXMSe~D*jYK(2#f^BNUpJX3XB7TViprpT+f=7__u9>Dzh<%<m@u+G33kw;c
z;LrV>BzC3dLe{J?E{$I9=W3Ib?vGP&w=D|vuNhw<dx)OpuzZk(<S{!{>^SElN&fY^
z%*Rx>MSR}oBKKWNz@El9QF@<A!49%Z4N+XCEAm2$x5!05k2K$nY6{8An(1a^yG*jx
zP59+`q_>d}hbaNSM}A%>TZLquJ^8-s{Z!=VI-l${dX}5$S-AM`y#1)^m>m{!EVXfI
zTi!oav2iIJSB{JG?w|xb2RWegHd1g278g#`*)e5*9!nQm6miZYdtO|db7ULUgoTtR
z@n+S7HspDqEa<I}643<`@j@hZ;(S(Az_^Nu%9V888!1=r9OY4Tw8NEn)jG}9qSbX?
zr;FfMQJS?W?Y@RP4?w?EX%<<6-cPnu%*Nuet@of>h@zFrs&jP5O?9O>eifOMkR<vA
z6kLZzA?0gxs4fhpyB`dHKbNk5r4W*53sqG}+cbK>zT$}OysODxg&S8O5z*!qo1RNP
z2E*U3>j=q1?YO8wwT6ADLgrb8#MWVO5vAGbly-B-<{Bgpidy%X#L^X~u_exB@<i7y
zsGgAg|LN+NJfiAg&v7rZISt)Tj;Zc*adOmW8($Ezg1J)UNL!+q+LNZZYK}MqZm{>9
z$I$`Yx);w;*AUnMw_jKpkeeS_OU}sX1OxO-(75~nfNmjeMYhS&(bcVDe@<OPAfjA(
zFKt%g<uZGMHfP6#$!pd9AdbKd(Wp0h!Eo4*E$98*wW<eyl8?l^1?4YdO<i;X7Z=}F
zXZ}TL^)1{GJu*e{t?2_UJco}vhnpxbaywFoi&LS?1tR<e?g$}W94HgEb3fAxnJ$)e
z1CrN3O_URnBUP7Qper^3bKRu!4%|_NG}XcKz6*TLAEeh8#!o7x^<|mG<T_GaFp)7i
z8ZHiz5aDM^AD__&qK=fWp>E6Qo>`7BpVxU+XZ<#oBqlpQYf&z;>d0QW9e(suN7|}@
z1Ef)>WXSx;Svtje9SORb!c8a-wzX(`;VDX!pWsIxA+ze!qh!y@k)26L(@h~6BsA=B
z)8ME>Jd?|>t3#h45xp10r*yjyivy}m?MA@8e&kO`y+F_Mt2p5G*}*h-^1Sy+B+F3`
zv!HTcYr_x<Y;8G)$HzQQ|NnEyhscpG^`nX!k6$@%SH}-|<;bo(#4!&M;kVu_XcNN)
zC*HrB<GxLRx5)0#8jfg#(&;V=&Vt@q>52}$*xc#f8RALL()Cfdo`l5Ghh<S)Sh}FW
z#W;EJ7w=-Y|MCSa7!QA$CVQzLBj+e>?xf&M_`~CIcz_kx$=}ek95Y4yA4fXgsMK`c
QQ2+n{07*qoM6N<$f>V&Vq5uE@

literal 0
HcmV?d00001

diff --git a/templates/base.html b/templates/base.html
index 9f8b531..ec72bb3 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -18,10 +18,17 @@
         <title>Eventyog</title>
     </head>
     <body class="font-Poppins">
-        <main class="flex flex-col">
-            {% include "ds/navbar.html" %}
-            {% block content %}{% endblock content%} 
-            {% include "ds/footer.html" %}
+        <main class="flex flex-col min-h-screen">
+            {% if show_navbar %}
+                {% include "ds/navbar.html" %}
+            {% endif %}
+            <div class="container h-full min-h-screen">
+                {% block content %}{% endblock content%} 
+            </div>
+
+            {% if show_footer %}
+                {% include "ds/footer.html" %}
+            {% endif %}
         </main>
     </body>
 </main>
\ No newline at end of file
diff --git a/templates/ds/footer.html b/templates/ds/footer.html
index d7ee91f..48e6a2c 100644
--- a/templates/ds/footer.html
+++ b/templates/ds/footer.html
@@ -1,3 +1,16 @@
-<footer>
-    <h1>Ini Footer</h1>
+{% load static %}
+<footer class="px-10 py-10 bg-[#003FE2] text-white flex flex-col gap-5">
+    <div
+        class="flex gap-6 items-center justify-center"
+    >
+        <img 
+            src="{% static 'assets/eventyog-white.png' %}" 
+            alt="icon" 
+            class="w-16 object-contain"
+        />
+        <h1 class="font-semibold text-xl">EventYog</h1>
+    </div>
+    <div class="w-full flex justify-center">
+        <h3 class="text-xs">&copy; 2024 EventYog!</h3>
+    </div>
 </footer>
\ No newline at end of file
diff --git a/templates/ds/navbar.html b/templates/ds/navbar.html
index 2451aa8..db08f87 100644
--- a/templates/ds/navbar.html
+++ b/templates/ds/navbar.html
@@ -1,3 +1,17 @@
-<nav>
-    <h1>Ini Navbar</h1>
+{% load static %}
+<nav class="px-10 flex items-center py-5 justify-between border-b-[1px] border-black/10">
+    <img src={% static "assets/icon.png" %} alt="icon" class="w-16 object-contain">
+    <div
+        class="flex items-center gap-5"
+    >
+        <p class="text-sm">Hello, {{user.username}}!</p>
+        <div class="w-10 h-10 bg-black rounded-full overflow-hidden">
+        </div>
+        <a href="{% url 'auth:logout'%}">
+            <button 
+                class="bg-[#003FE2] text-white text-sm font-semibold rounded-2xl h-full hover:scale-105 duration-300 ml-auto px-5 py-2">
+                Logout
+            </button>
+        </a>
+    </div>
 </nav>
\ No newline at end of file