Merge pull request #1199 from Harsh2504/UIenhancement

#1 Enhanced user interface of home page and other changes
vikhyatsingh123 · Dec 27, 2023 · 97559da · 97559da
2 parents fa596aa + 4743f0a
commit 97559da
Show file tree

Hide file tree

Showing 32 changed files with 2,093 additions and 256 deletions.
diff --git a/Images/HayateGekkō.png b/Images/HayateGekkō.png
diff --git a/Naruto-Shippuden b/Naruto-Shippuden
diff --git a/about.html b/about.html
@@ -5,41 +5,79 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
-    <link rel="stylesheet" href="./style.css" type="text/css">
+    <link rel="stylesheet" href="css/style.css" type="text/css">
     <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
         integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous" />
     <link rel="icon" type="image/png" href="Images/favicon.png">
     <title>Naruto</title>
-    <link rel="shortcut icon" href="Images/favicon.ico" />
-    <link rel="stylesheet" href="index.css">
-    <link rel="stylesheet" href="contact.css">
+    <link rel="shortcut icon" href="./Images/favicon.ico" />
+    <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/contact.css">
+    <link href="css/translate.css" rel="stylesheet" type="text/css" media="all" />
 </head>
 
 
-<body>
+<body class="light-mode">
     <header>
+        <nav class="navbar fixed-top navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">
+            <img src="adi image/naruto-advenimiento-los-animes-cortos-2.png"  style="max-height: 100%; width: auto;">
+            <!-- <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a> -->
 
-        <nav class="navbar navbar-expand-lg navbar-light nav1">
-            <a class="navbar-brand" href="index.html" style="color: beige;">Naruto</a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+
+            <div class="search">
+                <div class="icon"></div>
+                <div class="input">
+                    <input type="text" placeholder="search" id="mysearch">
+                </div>
+
+                <span class="clear" onclick="document.getElementById('mysearch').value = ' '"></span>
+            </div>
+            <button class="navbar-toggler" class="menu-btn" type="button" data-toggle="collapse"
+                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
+
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav mr-auto" style="margin-left: 78%;">
-                    <li class="nav-item active mx-4">
-                        <a class="nav-link" href="./index.html" style="color: black;">Home</a>
+                <ul class="navbar-nav mr-auto">
+                    <li class="nav-item  mx-4">
+                        <a class="nav-link link" href="./index.html" >Home</a>
                     </li>
-                    <li class="nav-item mx-4">
-                        <a class="nav-link" href="./about.html" style="color: black;">About</a>
+                    <li class="nav-item active mx-4">
+                        <a class="link nav-link " href="./about.html">About</a>
                     </li>
                     <li class="nav-item mx-4">
-                        <a class="link nav-link " href="./contact.html" style="color: black;">Contact</a>
+                        <a class="link nav-link " href="./contact.html" >Contact</a>
                     </li>
+                    <div class="dark_lang">
+                        <li>
+                            <div>
+                                <button onclick="darkmode()" class="toggle-mode darkmodebutton" id="toggler">🌙
+                                    Dark</button>
+                            </div>
+                        </li>
+                        <li class="nav-item mx-4">
+                        <div id="google_translate_element"></div>
+                        <script>
+                            function googleTranslateElementInit() {
+                            new google.translate.TranslateElement({
+                            pageLanguage: 'en',
+                            autoDisplay: 'true',
+                            layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
+                            }, 'google_translate_element');
+                            }
+                        </script>
+                        <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
+                        </li>
+                    </div>
+                </ul>
+
             </div>
         </nav>
+
     </header>
+
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav mr-auto" style="margin-left: 78%;">
             <li class="nav-item active mx-4">
@@ -116,6 +154,12 @@ <h5 class="card-title"><i class="fab fa-facebook"></i> Facebook</h5>
             </div>
         </div>
     </main>
+
+    <div class="contributors">
+        <h1>Our Valuable Contributors</h1>
+        <div id="contributor"></div>
+    </div>
+    <script src="contributors.js"></script>
     <!-- <footer>
         <nav class="navbar navbar-expand-lg navbar-light nav1">
             <p class="mx-auto text-light font-weight-lighter">&copyright Developed By- Vikhyat Singh</p>
@@ -125,12 +169,31 @@ <h5 class="card-title"><i class="fab fa-facebook"></i> Facebook</h5>
         Developed and Designed By <a href="https://github.com/vikhyatsingh123/"><span>Vikhyat Singh</span> </a> | © All
         Rights Reserved
     </footer>
+    <script>
+        function darkmode() {
+           console.log("hello");
+
+            var element2 = document.querySelector("body");
+            const body = document.body;
+             body.classList.toggle("light-mode");
+             body.classList.toggle("dark-mode");
+
+            if (element2.classList.contains("light-mode")) {
+
+                document.querySelector("#toggler").innerHTML = "🌞 Light"
+            }
+            else {
+
+                document.querySelector("#toggler").innerHTML = "🌙 Dark";
+            }
+        }
+    </script>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
         crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
         crossorigin="anonymous"></script>
-    <script src="aboutdarkmode.js"></script>
+    <!-- <script src="js/aboutdarkmode.js"></script> -->
 </body>
 </html>
diff --git a/adi image/Naruto-Uzumaki-No-Background.png b/adi image/Naruto-Uzumaki-No-Background.png
diff --git a/adi image/cloud.png b/adi image/cloud.png
diff --git a/adi image/d383ajh-c063f3bf-1787-4484-a75e-5bd8a8892a86.png b/adi image/d383ajh-c063f3bf-1787-4484-a75e-5bd8a8892a86.png
diff --git a/adi image/mountain.png b/adi image/mountain.png
diff --git a/adi image/naruto - Made with Clipchamp.mp4 b/adi image/naruto - Made with Clipchamp.mp4
diff --git a/adi image/naruto-advenimiento-los-animes-cortos-2.png b/adi image/naruto-advenimiento-los-animes-cortos-2.png
diff --git a/adi image/naruto-shippuden.png b/adi image/naruto-shippuden.png
diff --git a/adi image/naruto.png b/adi image/naruto.png
diff --git a/adi image/png-image.png b/adi image/png-image.png
diff --git a/adi image/sky.png b/adi image/sky.png
diff --git a/adi image/uchiha_madara___png___by_anvmadara_dewr6zj-pre.png b/adi image/uchiha_madara___png___by_anvmadara_dewr6zj-pre.png
diff --git a/audio.js b/audio.js
@@ -40,4 +40,4 @@ nyanBtn.addEventListener("click", function () {
   nyanBtn.classList.toggle("playing");
   playPause(nyan);
   progress(nyanBtn, nyan);
-});
+});
diff --git a/contact.html b/contact.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
-    <link rel="stylesheet" href="./style.css" type="text/css">
+    <link rel="stylesheet" href="css/style.css" type="text/css">
     <link href="https://fonts.cdnfonts.com/css/ninja-naruto" rel="stylesheet">
 
     <link
@@ -17,17 +17,17 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="index.css">
-    <link href="translate.css" rel="stylesheet" type="text/css" media="all" />
-    <link rel="stylesheet" href="contact.css" />
+    <link rel="stylesheet" href="css/index.css">
+    <link href="css/translate.css" rel="stylesheet" type="text/css" media="all" />
+    <link rel="stylesheet" href="css/contact.css" />
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <title>Contact Form</title>
   </head>
-  <body class="contact_body">
+  <body class="contact_body light-mode">
      <header>
-            <nav class="navbar fixed-top navbar-expand-lg navbar-light">
-
-                <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a>
+      <nav class="navbar fixed-top navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">
+              <img src="adi image/naruto-advenimiento-los-animes-cortos-2.png"  style="max-height: 100%; width: auto;">
+                <!-- <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a> -->
 
 
                 <div class="search">
@@ -46,14 +46,14 @@
 
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav mr-auto">
-                        <li class="nav-item active mx-4">
-                            <a class="nav-link link" href="./index.html" style="color: beige;">Home</a>
+                        <li class="nav-item  mx-4">
+                            <a class="nav-link link" href="./index.html" >Home</a>
                         </li>
                         <li class="nav-item mx-4">
-                            <a class="link nav-link " href="./about.html" style="color: beige;">About</a>
+                            <a class="link nav-link " href="./about.html" >About</a>
                         </li>
-                        <li class="nav-item mx-4">
-                            <a class="link nav-link " href="./contact.html" style="color: beige;">Contact</a>
+                        <li class="nav-item active mx-4">
+                            <a class="link nav-link " href="./contact.html" >Contact</a>
                         </li>
                         <li>
                             <div>
@@ -151,6 +151,25 @@ <h1>Naruto Friends, Get In Touch with us</h1>
         <div class="wpcf7-response-output wpcf7-display-none"></div>
       </form>
     </div>
+    <script>
+      function darkmode() {
+          // console.log("hello");
+
+          var element2 = document.querySelector("body");
+          const body = document.body;
+          body.classList.toggle("light-mode");
+           body.classList.toggle("dark-mode");
+
+          if (element2.classList.contains("light-mode")) {
+
+              document.querySelector("#toggler").innerHTML = "🌞 Light"
+          }
+          else {
+
+              document.querySelector("#toggler").innerHTML = "🌙 Dark";
+          }
+      }
+  </script>
     <script src="./contact.js"></script>
   </body>
 </html>
diff --git a/contact.css → css/contact.css b/contact.css → css/contact.css
@@ -1,7 +1,7 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
 
 .contact_body {
-  background: url("adi image/677425.jpg");
+  background: url("/adi image/677425.jpg");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;