index js css

0xelsherif · Apr 1, 2024 · e396615 · e396615
1 parent b955a3f
commit e396615
Show file tree

Hide file tree

Showing 3 changed files with 628 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,161 @@
+// Get the element with id 'greeting'
+const greetingElement = document.getElementById('greeting');
+// Get the current hour of the day
+const currentTime = new Date().getHours();
+// Get the element with id 'tag'
+const tagElement = document.getElementById('tag');
+// Variable to store the greeting message
+let greeting;
+
+// Determine the appropriate greeting based on the current time
+if (currentTime < 12) {
+  greeting = 'Good morning,'; // Set greeting to 'Good morning,' if current time is before 12 PM
+} else if (currentTime < 18) {
+  greeting = 'Good afternoon,'; // Set greeting to 'Good afternoon,' if current time is before 6 PM
+} else {
+  greeting = 'Good evening,'; // Set greeting to 'Good evening,' if current time is 6 PM or later
+}
+
+// Set the text content of the greeting element to the constructed greeting message
+greetingElement.textContent = `${greeting}`;
+// Append a waving hand emoji to the text content of the tag element
+tagElement.textContent += ' \uD83D\uDC4B\uD83C\uDFFB';
+
+// Save the original document title
+let docTitle = document.title;
+let welcomeBackTimeoutID; // Variable to store the timeout ID for "Welcome back" message
+
+// Change document title when window loses focus
+window.addEventListener("blur", () => {
+  // Set the document title to "Miss you" only if it's not already set to "Miss you"
+  if (document.title !== "Miss you 😥") {
+    document.title = "Miss you 😥";
+  }
+});
+
+// Restore original document title with "Welcome back!" message when window gains focus
+window.addEventListener("focus", () => {
+  clearTimeout(welcomeBackTimeoutID); // Clear any existing timeout
+  document.title = "Welcome back 😍";
+  // Set a timeout to revert back to the original title after 5 seconds
+  welcomeBackTimeoutID = setTimeout(() => {
+    document.title = docTitle;
+  }, 5000);
+});
+
+
+// document.addEventListener('DOMContentLoaded', function () {
+//   const toggleSwitch = document.querySelector('#themeToggle');
+
+//   // Check the current theme on load
+//   if (localStorage.getItem('theme') === 'dark') {
+//     document.body.classList.add('dark-mode');
+//     toggleSwitch.checked = true;
+//   } else {
+//     document.body.classList.remove('dark-mode');
+//     toggleSwitch.checked = false;
+//   }
+
+//   // Switch theme dynamically
+//   toggleSwitch.addEventListener('change', function () {
+//     if (this.checked) {
+//       document.body.classList.add('dark-mode');
+//       localStorage.setItem('theme', 'dark');
+//     } else {
+//       document.body.classList.remove('dark-mode');
+//       localStorage.setItem('theme', 'light');
+//     }
+//   });
+// });
+document.addEventListener('DOMContentLoaded', function () {
+  const toggleSwitch = document.querySelector('#themeToggle');
+
+  // Function to toggle dark mode
+  function toggleDarkMode(isDarkMode) {
+    document.body.classList.toggle('dark-mode', isDarkMode); // Toggle body class
+    const cards = document.querySelectorAll('.card');
+    cards.forEach(card => {
+      card.classList.toggle('dark-mode', isDarkMode); // Toggle dark mode for each card
+    });
+    const headers = document.querySelectorAll('.header');
+    headers.forEach(header => {
+      header.classList.toggle('dark-mode', isDarkMode); // Toggle dark mode for each header
+    });
+  }
+
+  // Check the current theme on load
+  if (localStorage.getItem('theme') === 'dark') {
+    toggleDarkMode(true);
+    toggleSwitch.checked = true;
+  } else {
+    toggleDarkMode(false);
+    toggleSwitch.checked = false;
+  }
+
+  // Switch theme dynamically
+  toggleSwitch.addEventListener('change', function () {
+    const isDarkMode = this.checked;
+    toggleDarkMode(isDarkMode);
+    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+  });
+});
+
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Check if unique visitor ID exists in cookies
+  let uniqueVisitorId = getCookie('uniqueVisitorId');
+
+  if (!uniqueVisitorId) {
+    // If unique visitor ID does not exist, generate a new one
+    uniqueVisitorId = generateUniqueId();
+
+    // Set the unique visitor ID in cookies with expiry date
+    setCookie('uniqueVisitorId', uniqueVisitorId, 365); // Cookie expires in 365 days
+  }
+
+  // Check if the unique visitor ID is counted already
+  let isCounted = localStorage.getItem(uniqueVisitorId);
+
+  if (!isCounted) {
+    // If the unique visitor ID is not counted, increment the counter
+    let uniqueVisitors = parseInt(document.getElementById('uniqueVisitors').textContent);
+    uniqueVisitors++;
+    document.getElementById('uniqueVisitors').textContent = uniqueVisitors;
+
+    // Mark this unique visitor as counted
+    localStorage.setItem(uniqueVisitorId, 'true');
+  }
+});
+
+// Function to generate a unique ID
+function generateUniqueId() {
+  return 'visitor_' + Math.random().toString(36).substr(2, 9);
+}
+
+// Function to set a cookie
+function setCookie(name, value, days) {
+  let expires = '';
+  if (days) {
+    let date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    expires = '; expires=' + date.toUTCString();
+  }
+  document.cookie = name + '=' + (value || '')  + expires + '; path=/';
+}
+
+// Function to get a cookie
+function getCookie(name) {
+  let nameEQ = name + '=';
+  let cookies = document.cookie.split(';');
+  for(let i = 0; i < cookies.length; i++) {
+    let cookie = cookies[i];
+    while (cookie.charAt(0) == ' ') {
+      cookie = cookie.substring(1, cookie.length);
+    }
+    if (cookie.indexOf(nameEQ) == 0) {
+      return cookie.substring(nameEQ.length, cookie.length);
+    }
+  }
+  return null;
+}
+
diff --git a/index.html b/index.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="styles.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<title>0xelsherif - Code Snippets</title>
+</head>
+<body>
+
+<div class="header">
+  <h2>0xelsherif Code Snippets</h2>
+  <div class="container">
+    <div id="greeting-container">
+      <p>
+        <span id="greeting"></span>
+        <span id="tag">Buddy</span>
+      </p>
+    </div>
+    <div id="toggle-container">
+      <label class="switch">
+        <input type="checkbox" id="themeToggle">
+        <span class="slider round"></span>
+      </label>
+      <span>Dark Mode</span>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="leftcolumn">
+    <div class="card">
+      <h2>Time-based Greeting</h2>
+      <h5>Created on, FEBRUARY 7, 2024</h5>
+      <p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="XWGBggP" data-user="0xelsherif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+        <span>See the Pen <a href="https://codepen.io/0xelsherif/pen/XWGBggP">
+        Time-based Greeting</a> by Ahmed Hamza El-Sherif (<a href="https://codepen.io/0xelsherif">@0xelsherif</a>)
+        on <a href="https://codepen.io">CodePen</a>.</span>
+      </p>
+
+      <p>A simple webpage that dynamically greets the user based on the time of day, accompanied by a friendly tag. The greeting changes from "Good morning," to "Good afternoon," or "Good evening," depending on the current time. A waving hand emoji adds a playful touch to the message.</p>
+      <div class="container">
+        <div class="badge-container">
+            <a href="https://github.com/0xelsherif/Time-based-Greeting">
+                <img src="https://img.shields.io/github/stars/0xelsherif/Time-based-Greeting.svg?style=social&label=Star" alt="GitHub Stars">
+            </a>
+            <a href="https://github.com/0xelsherif/Time-based-Greeting">
+                <img src="https://img.shields.io/github/forks/0xelsherif/Time-based-Greeting.svg?style=social&label=Fork" alt="GitHub Forks">
+            </a>
+            <a href="https://github.com/0xelsherif/Time-based-Greeting/issues">
+              <img src="https://img.shields.io/github/issues/0xelsherif/Time-based-Greeting.svg?style=flat&label=Issues" alt="GitHub Issues">
+            </a>
+            <a href="https://codepen.io/0xelsherif/full/XWGBggP" target="_blank">
+                <img src="https://img.shields.io/badge/CodePen-Project-blue?logo=codepen" alt="CodePen Project">
+            </a>
+        </div>
+        <div class="flex items-center text-sm">
+          <div class="w-3 h-3 rounded-full mr-1 bg-yellow-300 opacity-60"></div>
+          <span class="text-base-content text-opacity-60">JavaScript</span>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <h2>Search Text Highlighter</h2>
+      <h5>Created on, MARCH 27, 2024</h5>
+      <p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEZJOLP" data-user="0xelsherif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+        <span>See the Pen <a href="https://codepen.io/0xelsherif/pen/ZEZJOLP">
+        Time-based Greeting</a> by Ahmed Hamza El-Sherif (<a href="https://codepen.io/0xelsherif">@0xelsherif</a>)
+        on <a href="https://codepen.io">CodePen</a>.</span>
+      </p>
+      <p>A simple text search and highlight tool that allows users to enter a search query and find matching text within a paragraph. The matching text is highlighted, and the number of results is displayed. If no matches are found, a message indicating so is shown.</p>
+      <div class="container">
+          <div class="badge-container">
+              <a href="https://github.com/0xelsherif/Search-Text-Highlighter">
+                  <img src="https://img.shields.io/github/stars/0xelsherif/Search-Text-Highlighter.svg?style=social&label=Star" alt="GitHub Stars">
+              </a>
+              <a href="https://github.com/0xelsherif/Search-Text-Highlighter">
+                  <img src="https://img.shields.io/github/forks/0xelsherif/Search-Text-Highlighter.svg?style=social&label=Fork" alt="GitHub Forks">
+              </a>
+              <a href="https://github.com/0xelsherif/Search-Text-Highlighter/issues">
+                <img src="https://img.shields.io/github/issues/0xelsherif/Search-Text-Highlighter.svg?style=flat&label=Issues" alt="GitHub Issues">
+              </a>
+              <a href="https://codepen.io/0xelsherif/full/ZEZJOLP" target="_blank">
+                  <img src="https://img.shields.io/badge/CodePen-Project-blue?logo=codepen" alt="CodePen Project">
+              </a>
+          </div>
+          <div class="flex items-center text-sm">
+            <div class="w-3 h-3 rounded-full mr-1 bg-yellow-300 opacity-60"></div>
+            <span class="text-base-content text-opacity-60">JavaScript</span>
+          </div>
+      </div>
+    </div>
+    <div class="card">
+      <h2>URL QR Code Generator</h2>
+      <h5>Created on, MARCH 27, 2024</h5>
+      <p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poBrEPJ" data-user="0xelsherif" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+        <span>See the Pen <a href="https://codepen.io/0xelsherif/pen/poBrEPJ">
+        Time-based Greeting</a> by Ahmed Hamza El-Sherif (<a href="https://codepen.io/0xelsherif">@0xelsherif</a>)
+        on <a href="https://codepen.io">CodePen</a>.</span>
+      </p>
+      <p>This CodePen demonstrates a simple URL QR code generator. Enter a valid URL in the input field, and click the "Generate QR Code" button to generate a QR code representing the URL. If the entered URL is not valid or the input field is empty, appropriate error messages are displayed below the input field. The generated QR code will be displayed in the designated area.</p>
+      <div class="container">
+        <div class="badge-container">
+          <a href="https://github.com/0xelsherif/URL-QR-Code-Generator">
+            <img src="https://img.shields.io/github/stars/0xelsherif/URL-QR-Code-Generator.svg?style=social&label=Star" alt="GitHub Stars">
+          </a>
+          <a href="https://github.com/0xelsherif/URL-QR-Code-Generator">
+              <img src="https://img.shields.io/github/forks/0xelsherif/URL-QR-Code-Generator.svg?style=social&label=Fork" alt="GitHub Forks">
+          </a>
+          <a href="https://github.com/0xelsherif/URL-QR-Code-Generator/issues">
+              <img src="https://img.shields.io/github/issues/0xelsherif/URL-QR-Code-Generator.svg?style=flat&label=Issues" alt="GitHub Issues">
+          </a>
+          <a href="https://codepen.io/0xelsherif/full/poBrEPJ" target="_blank">
+              <img src="https://img.shields.io/badge/CodePen-Project-blue?logo=codepen" alt="CodePen Project">
+          </a>
+        </div>
+        <div class="flex items-center text-sm">
+          <div class="w-3 h-3 rounded-full mr-1 bg-yellow-300 opacity-60"></div>
+          <span class="text-base-content text-opacity-60">JavaScript</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="rightcolumn">
+    <div class="card">
+      <h3>Search</h3>
+      <input type="text" id="searchInput" placeholder="Search...">
+
+    </div>
+    <div class="card">
+        <h2>About Me</h2>
+        <div class="fakeimg"><img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExODFrcG9lbWQ3NW1zeXkxcHN2ZWJtejlzcWh1eWowc3RlbHhhZ3FncSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/gVlgj80ZLp9yo/giphy.gif" alt=""></div>
+        <p>A results-driven and versatile Senior Software Engineer and Technical Consultant with a proven track record in full-stack web application development. Armed with a master's in Software Engineering and an MBA, I bring over 7years of experience and a passion for building innovative software solutions. Proficient in Node.js and Laravel, I amacclaimed for superior project management skills, supported by ITIL and PRINCE2 certifications, ensuringseamless project execution. Additionally, I am dedicated to providing technical guidance to drive business success,leading teams to deliver high-quality software products.</p>
+    </div>
+    <div class="card">
+      <h3>Follow Me</h3>
+      <div class="socialmediaicons">
+        <a href="" class="fa fa-linkedin"></a>
+        <a href="" class="fa fa-github"></a>
+        <a href="" class="fa fa-code"></a>
+        <a href="" class="fa fa-stack-overflow"></a>
+        <a href="" class="fa fa-codepen"></a>
+
+      </div>
+
+    </div>
+    <div class="centered">
+        <p><i class="fa fa-eye"></i><span id="uniqueVisitors">0</span>&nbsp;unique visitors.</p>
+    </div>
+  </div>
+</div>
+
+<div class="footer">
+  © Copyright <script>document.write(new Date().getFullYear())</script>, Made with
+            <span class="text-gray">
+              &#10084;
+            </span> by <a href="https://github.com/0xelsherif" target="_blank">0xelsherif</a>.
+</div>
+<script src="app.js"></script>
+<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
+<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="0xelsherif" data-description="Support me on Buy me a coffee!" data-message="" data-color="#ff6600" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
+
+</body>
+</html>