From ad1d5bcacc66dc3cd71a24d4002e65526074fa3e Mon Sep 17 00:00:00 2001
From: Your Name <faizanshah123123123@gmail.com>
Date: Mon, 19 Apr 2021 18:34:15 +0100
Subject: [PATCH] finished navbar

---
 __pycache__/backend.cpython-39.pyc | Bin 1695 -> 1695 bytes
 main.py                            |   8 ++++++++
 static/base.css                    |  14 ++++++++++----
 templates/base.html                |  10 +++++-----
 templates/index.html               |   2 +-
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/__pycache__/backend.cpython-39.pyc b/__pycache__/backend.cpython-39.pyc
index 57e54811743220bc1d92f7c972ec5af85d68f323..aeff24dbc83e5a4daa22fb4aaf7fe3cd4de73146 100644
GIT binary patch
delta 22
ccmbQwJD-;~k(ZZ?0SHd7s!34Z$UBJ*06d8WwEzGB

delta 22
ccmbQwJD-;~k(ZZ?0SLaxRwwXp<ekI@068ZGJOBUy

diff --git a/main.py b/main.py
index f395708..78ea441 100644
--- a/main.py
+++ b/main.py
@@ -26,6 +26,14 @@ def home():
         pass
     else:
         return render_template("index.html")
+        
+@app.route("/about")
+def about():
+    return "about"
+
+@app.route("/contact")
+def contact():
+    return "contact"
 
 if __name__ == "__main__":
     app.run(debug=True, host="0.0.0.0")
diff --git a/static/base.css b/static/base.css
index 5e37187..a567166 100644
--- a/static/base.css
+++ b/static/base.css
@@ -63,7 +63,8 @@ main {
 }
 
 .link-text {
-  display: none;
+  transition: opacity 200ms ease-out;
+  opacity: 0;
   margin-left: 1rem;
 }
 
@@ -81,6 +82,10 @@ main {
   transition: var(--transition-speed);
 }
 
+.logo {
+  width: 100%;
+}
+
 .logo .nav-link{
   font-weight: bold;
   text-transform: uppercase;
@@ -88,18 +93,19 @@ main {
   text-align: center;
   color: var(--main-text-color);
   background: var(--red);
-  font-size: 0.5rem;
+  font-size: 1.5rem;
   letter-spacing: 0.3ch;
-  width: 100%;
   filter: grayscale(0%) opacity(1);
 }
 
 .logo svg {
+  position: absolute;
   transform: rotate(0deg);
   transition: transform 200ms;
 }
 
 .navbar:hover .logo svg {
+  position: static;
   transform: rotate(-360deg)
 }
 
@@ -138,6 +144,6 @@ main {
   }
 
   .navbar:hover .link-text {
-    display: block;
+    opacity: 1;
   }
 }
diff --git a/templates/base.html b/templates/base.html
index 3c42f37..c6bd2a3 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -14,31 +14,31 @@
         <ul class="navbar-nav">
           <li class="logo">
             <a href="#" class="nav-link">
-              <span class="link-text">Youtube Video Downloader</span>
+              <span class="link-text">Ytbuddy</span>
               <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="cloud-download-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-cloud-download-alt fa-w-20 fa-3x"><g class="fa-group"><path fill="currentColor" d="M537.6 226.6A96.11 96.11 0 0 0 448 96a95.51 95.51 0 0 0-53.3 16.2A160 160 0 0 0 96 192c0 2.7.1 5.4.2 8.1A144 144 0 0 0 144 480h368a128 128 0 0 0 25.6-253.4zm-132.9 88.7L299.3 420.7a16.06 16.06 0 0 1-22.6 0L171.3 315.3c-10.1-10.1-2.9-27.3 11.3-27.3H248V176a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v112h65.4c14.2 0 21.4 17.2 11.3 27.3z" class="fa-secondary"></path><path fill="currentColor" d="M404.7 315.3L299.3 420.7a16.06 16.06 0 0 1-22.6 0L171.3 315.3c-10.1-10.1-2.9-27.3 11.3-27.3H248V176a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v112h65.4c14.2 0 21.4 17.2 11.3 27.3z" class="fa-primary" id="logo-primary"></path></g></svg>
             </a>
           </li>
 
           <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="{{ url_for('home') }}" class="nav-link">
               <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="home" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="svg-inline--fa fa-home fa-w-18 fa-3x"><g class="fa-group"><path fill="currentColor" d="M336 463.59V368a16 16 0 0 0-16-16h-64a16 16 0 0 0-16 16v95.71a16 16 0 0 1-15.92 16L112 480a16 16 0 0 1-16-16V300.06l184.39-151.85a12.19 12.19 0 0 1 15.3 0L480 300v164a16 16 0 0 1-16 16l-112-.31a16 16 0 0 1-16-16.1z" class="fa-secondary"></path><path fill="currentColor" d="M573.32 268.35l-25.5 31a12 12 0 0 1-16.9 1.65L295.69 107.21a12.19 12.19 0 0 0-15.3 0L45.17 301a12 12 0 0 1-16.89-1.65l-25.5-31a12 12 0 0 1 1.61-16.89L257.49 43a48 48 0 0 1 61 0L408 116.61V44a12 12 0 0 1 12-12h56a12 12 0 0 1 12 12v138.51l83.6 68.91a12 12 0 0 1 1.72 16.93z" class="fa-primary"></path></g></svg>
               <span class="link-text">Home</span>
             </a>
           </li>
           <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="{{ url_for('about') }}" class="nav-link">
               <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-info-circle fa-w-16 fa-3x"><g class="fa-group"><path fill="currentColor" d="M256 8C119 8 8 119.08 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 110a42 42 0 1 1-42 42 42 42 0 0 1 42-42zm56 254a12 12 0 0 1-12 12h-88a12 12 0 0 1-12-12v-24a12 12 0 0 1 12-12h12v-64h-12a12 12 0 0 1-12-12v-24a12 12 0 0 1 12-12h64a12 12 0 0 1 12 12v100h12a12 12 0 0 1 12 12z" class="fa-secondary"></path><path fill="currentColor" d="M256 202a42 42 0 1 0-42-42 42 42 0 0 0 42 42zm44 134h-12V236a12 12 0 0 0-12-12h-64a12 12 0 0 0-12 12v24a12 12 0 0 0 12 12h12v64h-12a12 12 0 0 0-12 12v24a12 12 0 0 0 12 12h88a12 12 0 0 0 12-12v-24a12 12 0 0 0-12-12z" class="fa-primary" id="info-primary"></path></g></svg>
               <span class="link-text">About</span>
             </a>
           </li>
           <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="https://github.com/pot-noodle-python/youtube-video-downloader" class="nav-link">
               <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="code-merge" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-code-merge fa-w-12 fa-3x"><g class="fa-group"><path fill="currentColor" d="M227.06 293.9A199.9 199.9 0 0 1 104 225.83v129.84a80.31 80.31 0 0 0-48 0V156.33a80.24 80.24 0 0 0 58.73-4.24 152.51 152.51 0 0 0 113.78 93.41 80 80 0 0 0-1.45 48.4z" class="fa-secondary"></path><path fill="currentColor" d="M80 0a80 80 0 1 0 80 80A80 80 0 0 0 80 0zm0 96a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm0 256a80 80 0 1 0 80 80 80 80 0 0 0-80-80zm0 96a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm224-256a80 80 0 1 0 80 80 80 80 0 0 0-80-80zm0 96a16 16 0 1 1 16-16 16 16 0 0 1-16 16z" class="fa-primary"></path></g></svg>
               <span class="link-text">Github</span>
             </a>
           </li>
           <li class="nav-item">
-            <a href="#" class="nav-link">
+            <a href="{{ url_for('contact') }}" class="nav-link">
               <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="envelope" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-envelope fa-w-16 fa-3x"><g class="fa-group"><path fill="currentColor" d="M256.47 352h-.94c-30.1 0-60.41-23.42-82.54-40.52C169.39 308.7 24.77 202.7 0 183.33V400a48 48 0 0 0 48 48h416a48 48 0 0 0 48-48V183.36c-24.46 19.17-169.4 125.34-173 128.12-22.12 17.1-52.43 40.52-82.53 40.52zM464 64H48a48 48 0 0 0-48 48v19a24.08 24.08 0 0 0 9.2 18.9c30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4 23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7A23.93 23.93 0 0 0 512 131v-19a48 48 0 0 0-48-48z" class="fa-secondary"></path><path fill="currentColor" d="M512 131v52.36c-24.46 19.17-169.4 125.34-173 128.12-22.12 17.1-52.43 40.52-82.53 40.52h-.94c-30.1 0-60.41-23.42-82.54-40.52C169.39 308.7 24.77 202.7 0 183.33V131a24.08 24.08 0 0 0 9.2 18.9c30.6 23.9 40.7 32.4 173.4 128.7 16.69 12.12 49.75 41.4 72.93 41.4h.94c23.18 0 56.24-29.28 72.93-41.4 132.7-96.3 142.8-104.7 173.4-128.7A23.93 23.93 0 0 0 512 131z" class="fa-primary" id="contact-primary"></path></g></svg>
               <span class="link-text">Contact</span>
             </a>
diff --git a/templates/index.html b/templates/index.html
index 17ab71b..63b8b43 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}Youtube Video Downloader{% endblock %}
+{% block title %}YT Buddy{% endblock %}
 {%block head %}
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='index.css')}}">
 {% endblock %}