feat: UI Improvements and Updates

.husky/_/commit-msg

@@ -1,5 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/husky.sh"
-
-# Validate commit message
-npx --no-install commitlint --edit "$1"
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

.husky/_/husky.sh

@@ -1,31 +1,9 @@
-#!/bin/sh
-if [ -z "$husky_skip_init" ]; then
-  debug () {
-    [ "$HUSKY_DEBUG" = "1" ] && echo "husky:debug $1"
-  }
+echo "husky - DEPRECATED
 
-  readonly hook_name="$(basename "$0")"
-  debug "starting $hook_name..."
+Please remove the following two lines from $0:
 
-  if [ "$HUSKY" = "0" ]; then
-    debug "HUSKY env variable is set to 0, skipping hook"
-    exit 0
-  fi
+#!/usr/bin/env sh
+. \"\$(dirname -- \"\$0\")/_/husky.sh\"
 
-  if [ -f ~/.huskyrc ]; then
-    debug "sourcing ~/.huskyrc"
-    . ~/.huskyrc
-  fi
-
-  export readonly husky_skip_init=1
-  sh -e "$0" "$@"
-  exitCode="$?"
-
-  if [ $exitCode != 0 ]; then
-    debug "hook failed"
-  else
-    debug "hook succeeded"
-  fi
-
-  exit $exitCode
-fi
+They WILL FAIL in v10.0.0
+"

.husky/_/pre-commit

@@ -1,30 +1,2 @@
-#!/bin/sh
-# Ensure the script fails on the first error (except when running prettier)
-set -e
-
-# Run Prettier to format code
-echo "Running Prettier..."
-npx prettier --write .
-
-# Capture the Prettier exit code
-PRETTIER_EXIT_CODE=$?
-
-# Run ESLint to lint code
-echo "Running ESLint..."
-npx eslint .
-
-# Capture the ESLint exit code
-ESLINT_EXIT_CODE=$?
-
-# If Prettier or ESLint failed, exit with an error
-if [ "$PRETTIER_EXIT_CODE" -ne 0 ]; then
-  echo "Prettier formatting failed"
-fi
-
-if [ "$ESLINT_EXIT_CODE" -ne 0 ]; then
-  echo "ESLint failed"
-  exit 1 # Ensure pre-commit fails on lint issues
-fi
-
-# If both succeeded or ESLint failed, allow commit to proceed
-exit 0
+#!/usr/bin/env sh
+. "$(dirname "$0")/h"

favs.html

@@ -142,7 +142,7 @@ <h2>Share GIF</h2>
             <li><i class="fa-brands fa-square-instagram"></i></li>
             <li><i class="fa-brands fa-square-pinterest"></i></li>
           </ul>
-          <button id="copy" class="secondary-btn copy-btn">Copy Link</button>
+          <button id="copy" class="secondary-btn copy-btn" style="margin-bottom: 10px;">Copy Link</button>
         </div>
       </section>
 

index.html

@@ -8,6 +8,7 @@
       src="https://kit.fontawesome.com/72fc4d72f1.js"
       crossorigin="anonymous"
     ></script>
+    <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles/normalize.css" />
     <link rel="stylesheet" href="styles/styles.css" />
     <script src="scripts/scripts.js" defer></script>
@@ -66,19 +67,19 @@ <h2>Share GIF</h2>
           <a href="https://lcrojano.github.io/Giphy_Explorer/" class="logo-link">
             <h1 class="grow-2" id="logo">Giphy Search</h1>
           </a>
-          <caption>
+          <caption  style="font-family: 'Patrick Hand', cursive; font-weight: bolder;">
             By Luis Rojano
           </caption>
         </div>
         <div style="display: flex">
           <button class="secondary-btn">
-            <a href="login.html" style="text-decoration: none; color: inherit;">Log In</a>
+            <a href="login.html" style="text-decoration: none; color: inherit; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bolder;">Log In</a>
           </button> 
           <!-- Add this button to trigger the modal for uploading GIFs -->
           <button
             id="upload-button"
             class="secondary-btn"
-            style="margin-left: 15px"
+            style="margin-left: 15px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bolder;"
           >
             Upload GIF
           </button>
@@ -139,7 +140,7 @@ <h2>Share GIF</h2>
             <li><i class="fa-brands fa-square-instagram"></i></li>
             <li><i class="fa-brands fa-square-pinterest"></i></li>
           </ul>
-          <button id="copy" class="secondary-btn copy-btn">Copy Link</button>
+          <button id="copy" class="secondary-btn copy-btn" style="margin-bottom: 10px;">Copy Link</button>
         </div>
       </section>
 
@@ -151,7 +152,7 @@ <h2>Share GIF</h2>
           <span id="">2000</span>
         </div>
         <nav>
-          <menu id="history" class="flex-row tag-menu"></menu>
+          <menu id="history" class="flex-row tag-menu" ></menu>
         </nav>
       </section>
 

login.html

@@ -8,7 +8,7 @@
         /* CSS for styling the login page */
         body {
             font-family: 'Arial', sans-serif;
-            background-color: #f0f4f8;
+            background-color: black;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -19,6 +19,7 @@
         .login-container {
             background-color: #fff;
             padding: 40px;
+            border: 5px solid #c253b7;
             border-radius: 10px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             width: 300px;
@@ -82,20 +83,23 @@
     </style>
 </head>
 <body>
-
-    <div class="login-container">
-        <h2>Login</h2>
-        <form id="loginForm">
-            <label for="username">Username</label>
-            <input type="text" id="username" name="username" required>
-            <label for="password">Password</label>
-            <input type="password" id="password" name="password" required>
-            <button type="submit">Login</button>
-        </form>
-        <div class="signup-link">
-            Don't have an account? <a href="signup.html">Sign up</a>
+    <div style="display: flex; flex-direction: column; align-items: center; margin: 20px;">
+        <h1 style="color: white; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans';"><span style="color: #c253b7; font-weight: bolder; font-size: xx-large; margin-top: 10px;">Giphy</span></h1>
+        <div class="login-container">
+            <h2>Login</h2>
+            <form id="loginForm">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" required>
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" required>
+                <button type="submit" style="margin-left: 10px; background: #c253b7">Login</button>
+            </form>
+            <div class="signup-link">
+                Don't have an account? <a href="signup.html">Sign up</a>
+            </div>
         </div>
     </div>
+
 
     <script>
         // JavaScript for handling form submission

signup.html

@@ -14,7 +14,7 @@
 
         body {
             font-family: Arial, sans-serif;
-            background-color: #f0f4f8;
+            background-color: black;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -24,6 +24,7 @@
         .signup-container {
             background-color: white;
             padding: 30px;
+            border: 5px solid #c253b7;
             border-radius: 8px;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
             width: 400px;
@@ -38,6 +39,7 @@
         }
 
         form {
+
             display: flex;
             flex-direction: column;
         }
@@ -92,26 +94,30 @@
 </head>
 <body>
 
-    <div class="signup-container">
-        <h2>Sign Up</h2>
-        <form id="signupForm">
-            <label for="username">Username</label>
-            <input type="text" id="username" name="username" placeholder="Enter your username" required>
-
-            <label for="email">Email</label>
-            <input type="email" id="email" name="email" placeholder="Enter your email" required>
-
-            <label for="password">Password</label>
-            <input type="password" id="password" name="password" placeholder="Enter your password" required>
-
-            <button type="submit">Sign Up</button>
-        </form>
-
-        <div class="login-text">
-            Already have an account? <a href="login.html">Login</a> <!-- This line is updated -->
+    <div  style="display: flex; flex-direction: column; align-items: center; margin: 20px;">
+        <h1 style="color: white; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans'; margin-bottom: 20px;">Welcome to <span style="color: #c253b7; font-weight: bolder; font-size: xx-large; margin-bottom: 20px;">Giphy</span></h1>
+        <div class="signup-container">
+            <h2>Sign Up</h2>
+            <form id="signupForm">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" placeholder="Enter your username" required>
+
+                <label for="email">Email</label>
+                <input type="email" id="email" name="email" placeholder="Enter your email" required>
+
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" placeholder="Enter your password" required>
+
+                <button type="submit" style="background: #c253b7;">Sign Up</button>
+            </form>
+
+            <div class="login-text">
+                Already have an account? <a href="login.html">Login</a> 
+            </div>
         </div>
+
     </div>
-
+    
     <script>
         document.getElementById("signupForm").addEventListener("submit", function(event){
             event.preventDefault();