Final Project

Alok-2002 · Sep 2, 2023 · c68de74 · c68de74
1 parent ce9e869
commit c68de74
Show file tree

Hide file tree

Showing 3 changed files with 349 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Favicon Catcher</title>
+    <link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.min.js" integrity="sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6+n2r4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+  <!-- <script type="text/javascript">
+    function isValidURL(string) {
+      var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
+      return (res !== null)
+    }
+
+    function startIT() {
+
+      var myurl = document.getElementById("urltext").value;
+
+      if (myurl == "") {
+
+        alert("Please Enter URL");
+
+      }
+
+      else if (myurl !== "" && isValidURL(myurl) == true) {
+        grabFAV();
+      }
+
+      else {
+        alert("Please Enter Valid URL");
+      }
+
+    }
+
+    function grabFAV() {
+      var myurl = document.getElementById("urltext").value;
+      var myimg = document.getElementById("theimg");
+      var mysize = document.getElementById("size").value;
+      var duckapi = "https://icons.duckduckgo.com/ip3/";
+      var gapi = "https://s2.googleusercontent.com/s2/favicons?domain=";
+      if (mysize == "default") {
+        var h1 = "https://";
+        var h2 = "http://";
+
+        myurl = myurl.replace(h1, "");
+        myurl = myurl.replace(h2, "");
+
+        myimg.src = duckapi + myurl + ".ico";
+      }
+
+      else if (mysize == "16") {
+
+        myimg.src = gapi + myurl + "&sz=16";
+      }
+
+      else if (mysize == "32") {
+
+        myimg.src = gapi + myurl + "&sz=32";
+      }
+
+      else if (mysize == "48") {
+
+        myimg.src = gapi + myurl + "&sz=48";
+      }
+
+      else if (mysize == "64") {
+
+        myimg.src = gapi + myurl + "&sz=64";
+      }
+
+      else if (mysize == "128") {
+
+        myimg.src = gapi + myurl + "&sz=128";
+      }
+    }
+  </script> -->
+  <div class="grid">
+    <h2 align="center">Favicon Catcher</h2>
+    <center> <img src="" id="theimg"></center><br>
+
+    <select id="size">
+      <option value="default">Default Size</option>
+      <option value="16">16x16</option>
+      <option value="32">32x32</option>
+      <option value="48">48x48</option>
+      <option value="64">64x64</option>
+      <option value="128">128x128</option>
+    </select><br><br>
+    <input type="text" placeholder="Enter URL" id="urltext">
+    <br><br>
+    <input type="submit" value="Grab" onClick="startIT()">
+    <p>Developed By <a href="https://soulfulscribbles.tech" target="_blank">Alok Sharma</a> | 
+    <a href="https://www.linkedin.com/in/alok-sharma2002-/" target="_blank"><i class="bi bi-linkedin"></i></a> 
+    <br>
+     Open Sourced On  <a href="https://github.com/alok-2002/favicon_catcher" target="_blank"><i class="bi bi-github"></i></a></p>
+
+  </div>
+  <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,45 @@
+function isValidURL(string) {
+  var res = string.match(
+    /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g
+  );
+  return res !== null;
+}
+
+function startIT() {
+  var myurl = document.getElementById("urltext").value;
+
+  if (myurl == "") {
+    alert("Please Enter URL");
+  } else if (myurl !== "" && isValidURL(myurl) == true) {
+    grabFAV();
+  } else {
+    alert("Please Enter Valid URL");
+  }
+}
+
+function grabFAV() {
+  var myurl = document.getElementById("urltext").value;
+  var myimg = document.getElementById("theimg");
+  var mysize = document.getElementById("size").value;
+  var duckapi = "https://icons.duckduckgo.com/ip3/";
+  var gapi = "https://s2.googleusercontent.com/s2/favicons?domain=";
+  if (mysize == "default") {
+    var h1 = "https://";
+    var h2 = "http://";
+
+    myurl = myurl.replace(h1, "");
+    myurl = myurl.replace(h2, "");
+
+    myimg.src = duckapi + myurl + ".ico";
+  } else if (mysize == "16") {
+    myimg.src = gapi + myurl + "&sz=16";
+  } else if (mysize == "32") {
+    myimg.src = gapi + myurl + "&sz=32";
+  } else if (mysize == "48") {
+    myimg.src = gapi + myurl + "&sz=48";
+  } else if (mysize == "64") {
+    myimg.src = gapi + myurl + "&sz=64";
+  } else if (mysize == "128") {
+    myimg.src = gapi + myurl + "&sz=128";
+  }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,196 @@
+:root {
+    --baseColor: #606468;
+  }
+
+  .grid {
+    inline-size: 90%;
+    margin-inline: auto;
+    max-inline-size: 20rem;
+    display:grid;
+  }
+
+
+  .hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  .icon {
+    block-size: 1em;
+    display: inline-block;
+    fill: var(--iconFill);
+    inline-size: 1em;
+    vertical-align: middle;
+  }
+
+  :root {
+    --htmlFontSize: 100%;
+
+    --bodyBackgroundColor: #2c3338;
+    --bodyColor: var(--baseColor);
+    --bodyFontFamily: "Open Sans";
+    --bodyFontFamilyFallback: sans-serif;
+    --bodyFontSize: 0.875rem;
+    --bodyFontWeight: 400;
+    --bodyLineHeight: 1.5;
+  }
+
+  * {
+    box-sizing: inherit;
+  }
+
+  html {
+    box-sizing: border-box;
+    font-size: var(--htmlFontSize);
+  }
+
+  body {
+    background-color: #342d34;
+   color: white;
+    font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
+    font-size: var(--bodyFontSize);
+    font-weight: var(--bodyFontWeight);
+    line-height: var(--bodyLineHeight);
+    margin: 0;
+    min-block-size: 100vh;
+     display: grid;
+    place-items: center;
+  }
+
+
+
+  :root {
+    --anchorColor: #eee;
+  }
+
+  a {
+    color: var(--anchorColor);
+    outline: 0;
+    text-decoration: none;
+  }
+
+  a:focus,
+  a:hover {
+    text-decoration: underline;
+  }
+
+
+  :root {
+    --formGap: 0.875rem;
+  }
+
+  input {
+    background-image: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    transition: background-color 0.3s;
+  }
+
+  input[type="text"] {
+    background-image: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    transition: background-color 0.3s;
+  }
+
+  select,option {
+    background-image: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    margin: 0;
+    outline: 0;
+    padding: 0;
+    transition: background-color 0.3s;
+  }
+
+  input[type="submit"] {
+    cursor: pointer;
+  }
+
+
+  input[type="text"],
+  select,
+  option,
+  input[type="submit"] {
+    inline-size: 100%;
+  }
+
+
+
+
+  :root {
+    --loginBorderRadus: 0.25rem;
+    --loginColor: #eee;
+
+    --loginInputBackgroundColor: #3b4148;
+    --loginInputHoverBackgroundColor: #434a52;
+
+    --loginLabelBackgroundColor: #363b41;
+
+    --loginSubmitBackgroundColor: #ea4c88;
+    --loginSubmitColor: #eee;
+    --loginSubmitHoverBackgroundColor: #d44179;
+  }
+
+  input[type="text"],
+  select,
+  option,
+  input[type="submit"] {
+  border-radius: var(--loginBorderRadus);
+  padding: 1rem;
+  }
+
+
+
+
+  input[type="text"],option,select {
+    background-color: var(--loginInputBackgroundColor);
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+
+
+  input[type="text"]:focus,
+  input[type="text"]:hover {
+    background-color: var(--loginInputHoverBackgroundColor);
+  }
+
+  input[type="submit"] {
+  background-color: #d75821;
+  color: var(--loginSubmitColor);
+  font-weight: 700;
+  text-transform: uppercase;
+  }
+
+  input[type="submit"]:focus,
+  input[type="submit"]:hover {
+    background-color: #d75821;
+  }
+
+
+  p {
+    margin-block: 1.5rem;
+    text-align: center;
+  }
+
+
+  img
+  {
+  max-width: 100%;
+  max-height: 100%;
+  }