ui update and code refactor (#251)

* ui: remove theme toggle, and better footer * refactor code * font change * 404 page code refactor
oyepriyansh · Jun 25, 2024 · 753ca67 · 753ca67
1 parent 5459325
commit 753ca67
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 276 deletions.
diff --git a/404.html b/404.html
@@ -4,24 +4,8 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DevProfiles - 404 Not-Found</title>
-    <meta name="description" content="DevProfiles is a platform for developers to easily share their profiles, spotlight your skills, and connect with fellow developers in the community.">
-    <meta name="author" content="Priyansh Prajapat">
-    <meta property="og:title" content="DevProfiles - 404 Not-Found">
-    <meta property="og:description" content="DevProfiles is a platform for developers to easily share their profiles, spotlight your skills, and connect with fellow developers in the community.">
-    <meta property="og:image" content="https://devtweet.is-an.app/assets/devprofiles.jpg">
-    <meta property="og:url" content="https://devtweet.is-an.app">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="DevProfiles - 404 Not-Found">
-    <meta name="twitter:description" content="DevProfiles is a platform for developers to easily share their profiles, spotlight your skills, and connect with fellow developers in the community.">
-    <meta name="twitter:image" content="https://devtweet.is-an.app/assets/devprofiles.jpg">
-    <meta name="github" content="https://github.com/oyepriyansh/DevProfiles">
-    <link rel="canonical" href="https://devtweet.is-an.app">
-    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="/styles/404.css">
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-GTFGBS8HG8"></script>
-    <script type="text/javascript" src="https://oyepriyansh.pages.dev/cdnjs/analytics/devprofiles.js"></script>
-  </head>
+    <title>DevProfiles - 404 Not-Found</title> 
+    <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
 </body>
     <div class="flex-center full-height">
        <div>

diff --git a/index.html b/index.html
@@ -25,35 +25,25 @@
     <script src="https://oyepriyansh.pages.dev/cdnjs/analytics/devprofiles.js" defer></script>
 </head>
 <body>
-    <div class="header">
+    <header class="header">
         <h1 class="col">DevProfiles</h1>
-        <div class="wrapper-toggle-button col">
-            <input type="checkbox" id="input-toggle-button">
-            <label for="input-toggle-button" class="toggle-mode">
-                <div class="mode-toggle"></div>
-            </label>
-        </div>
-    </div>
-
-    <div class="search">
-        <input type="text" id="searchInput" placeholder="Search by name...">
-    </div>
-
-    <div class="addprofilebutton">
-        <a href="https://github.com/oyepriyansh/DevProfiles/blob/main/CONTRIBUTING.md" target="_blank">
-            <button class="add-col">
-                <span>Add your Profile &nbsp;</span>
-                <i class="fa-sharp fa-solid fa-user-plus"></i>
-            </button>
-        </a>
-    </div>
-
-    <div class="no-profile">No Profile Found</div>
-
-    <div class="container"></div>
-
+    </header>
+    <main>
+        <section class="search">
+            <input type="text" id="searchInput" placeholder="Search by name...">
+        </section>
+        <section class="addprofilebutton">
+            <a href="https://github.com/oyepriyansh/DevProfiles/blob/main/CONTRIBUTING.md" target="_blank">
+                <button class="add-col">
+                    <span>Add your Profile &nbsp;</span>
+                    <i class="fa-sharp fa-solid fa-user-plus"></i>
+                </button>
+            </a>
+        </section>
+        <section class="no-profile">No Profile Found</section>
+        <section class="container"></section>
+    </main>
     <hr>
-
     <footer>
         <div class="fcontainer">
             <div class="fabout">
@@ -63,21 +53,19 @@ <h1 class="col">DevProfiles</h1>
                 <a href="https://github.com/oyepriyansh/DevProfiles" target="_blank">GitHub</a>
                 <a href="https://github.com/oyepriyansh/DevProfiles/blob/main/LICENSE" target="_blank">License</a>
             </div>
-        </div>
-        <div class="ficons">
-            <a href="https://github.com/oyepriyansh" target="_blank"><i class="fab fa-github"></i></a>
-            <a href="https://x.com/oyepriyansh" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
-            <a href="https://linkedin.com/in/oyepriyansh" target="_blank"><i class="fab fa-linkedin-in"></i></a>
+            <div class="ficons">
+                <a href="https://github.com/oyepriyansh" target="_blank"><i class="fab fa-github"></i></a>
+                <a href="https://x.com/oyepriyansh" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
+                <a href="https://linkedin.com/in/oyepriyansh" target="_blank"><i class="fab fa-linkedin-in"></i></a>
+            </div>
         </div>
         <p class="copyright">Copyright © <span id="currentYear"></span> DevProfiles | All rights reserved.</p>
     </footer>
-
     <button id="backToTopBtn" class="top-btn">
         <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="arrow-icon">
             <path d="M11 2.206l-6.235 7.528-.765-.645 7.521-9 7.479 9-.764.646-6.236-7.53v21.884h-1v-21.883z" fill="white" />
         </svg>
     </button>
-
     <script src="scripts/app.js" defer></script>
 </body>
 </html>
diff --git a/scripts/404.js b/scripts/404.js
@@ -1,5 +1,5 @@
-
 'use strict';
+
 var e, t;
 new function(e) {
     const t = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+<>,./?[{()}]!@#$%^&*~`|".split(""),
@@ -21,4 +21,52 @@ new function(e) {
     }, this.stop = function() {
         n.style.display = "block", o.style.display = "none", o.innerText = "", s = 0, void 0 !== r && (window.clearInterval(r), r = void 0), void 0 !== l && (window.clearInterval(l), l = void 0), void 0 !== i && (window.clearInterval(i), i = void 0)
     }
-}(document.getElementById("error_text")).start(), "en" !== navigator.language.substring(0, 2).toLowerCase() && (e = document.createElement("script"), t = document.body, e.src = "", e.async = e.defer = !0, e.addEventListener("load", (() => t.removeChild(e))), t.appendChild(e));
+}(document.getElementById("error_text")).start(), "en" !== navigator.language.substring(0, 2).toLowerCase() && (e = document.createElement("script"), t = document.body, e.src = "", e.async = e.defer = !0, e.addEventListener("load", (() => t.removeChild(e))), t.appendChild(e));
+
+
+var style = document.createElement('style');
+style.type = 'text/css';
+style.innerHTML = `
+    @import url("https://fonts.googleapis.com/css2?family=PT+Serif&family=Poppins:wght@200&display=swap");
+
+    body,
+    html {
+        margin: 0;
+        background-color: #222;
+        color: #aaa;
+        font-family: "Poppins", sans-serif;
+        font-size: 0
+    }
+
+    .full-height {
+        height: 100vh
+    }
+
+    .flex-center {
+        align-items: center;
+        display: flex;
+        justify-content: center
+    }
+
+    #error_text {
+        font-size: 32px
+    }
+
+    button {
+        display: inline-block;
+        padding: 10px 20px;
+        background-color: #2b3031;
+        border: none;
+        color: #fff;
+        border-radius: 4px;
+        margin-top: 10px;
+        font-size: 16px;
+        cursor: pointer;
+        transition: all .3s ease-in-out
+    }
+
+    button:hover {
+        background-color: #555
+    }
+`;
+document.head.appendChild(style);
diff --git a/scripts/app.js b/scripts/app.js
@@ -37,7 +37,7 @@ const loadProfiles = async () => {
       <div class="pfp">
         <img src="${profile.image}" alt="User Image" onerror="this.onerror=null; this.src='${defaultImage}';">
       </div>
-      <h3 class="name">${profile.name}</h3>
+      <h2 class="name">${profile.name}</h2>
       <div class="skills">${skills}</div>
       <div class="social">${social}</div>
     `;
@@ -57,48 +57,6 @@ const shuffleArray = (array) => {
 loadProfiles();
 
 
-// dark light mode 
-
-const colorSwitch = document.getElementById("input-toggle-button");
-colorSwitch.addEventListener("click", checkMode);
-
-const btn = document.querySelector('.add-col');
-
-function checkMode() {
-  console.log("checking...");
-  if (colorSwitch.checked) {
-    console.log("dark on");
-    darkModeOn();
-    btn.style.color = "black";
-    btn.addEventListener('mouseover', () => {
-      btn.style.color = "white";
-    })
-    btn.addEventListener('mouseout', () => {
-      btn.style.color = "black";
-    })
-  } else {
-    console.log("dark off");
-    darkModeOff();
-    btn.style.color = "white";
-    btn.addEventListener('mouseout', () => {
-      btn.style.color = "white";
-    })
-
-    btn.addEventListener('mouseover', () => {
-      btn.style.color = "white";
-    })
-  }
-}
-
-function darkModeOn() {
-  document.body.classList.add("dark-mode");
-}
-
-function darkModeOff() {
-  document.body.classList.remove("dark-mode");
-}
-
-
 //search 
 
 searchInput.addEventListener('keyup', () => {

diff --git a/styles/404.css b/styles/404.css