new destructr script

Applight/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

Atlas/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

Browny/assets/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

Browny/index.html

@@ -854,7 +854,7 @@
 										<div class="row">
 											<div class="col-sm-12">
 												<div class="form-group">
-													<textarea class="form-control" rows="8" id="comment" placeholder="Message" ></textarea>
+													<textarea class="form-control" rows="8" id="message" placeholder="Message" ></textarea>
 												</div><!--/.form-group-->
 											</div><!--/.col-->
 										</div><!--/.row-->

Chain App Dev/assets/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

ConvidMedic/index.html

@@ -243,7 +243,7 @@
             <h1 class="update_taital">Get Every Update.... </h1>
             <form action="/action_page.php">
                <div class="form-group">
-                   <textarea class="update_mail" placeholder="Massage" rows="5" id="comment" name="Massage"></textarea>
+                   <textarea class="update_mail" placeholder="Massage" rows="5" id="message" name="Massage"></textarea>
                </div>
                <div class="subscribe_bt"><a href="#">Subscribe Now</a></div>
             </form>

ConvidMedic/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

Digimedia/assets/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

Drifolio-Bootstrap-master/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

Industrial/index.html

@@ -455,9 +455,9 @@
                 <div class="col-md-12">
                   <textarea
                     class="textarea"
+                    id="message"
                     placeholder="Message"
                     type="type"
-                    Message="Name"
                   >
 Message </textarea
                   >

Industrial/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

MedicalCare/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

ONEPage/index.html

@@ -1,61 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-
+  <head>
-<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script src="js/destruct.js"></script>
     <title>Onepage - clean responsive HTML5 themes - thomsoon.com</title>
 
-		<meta name="description" content="Free download theme onepage, clean and modern responsive for all"/>
+    <meta
-		<meta name="keywords" content="responsive, html5, onepage, themes, template, clean layout, free web"/>
+      name="description"
-		<meta name="author" content="Thomsoon.com"/>
+      content="Free download theme onepage, clean and modern responsive for all"
+    />
+    <meta
+      name="keywords"
+      content="responsive, html5, onepage, themes, template, clean layout, free web"
+    />
+    <meta name="author" content="Thomsoon.com" />
 
-		<link rel="shortcut icon" href="img/favicon.png"> 
+    <link rel="shortcut icon" href="img/favicon.png" />
 
     <link rel="stylesheet" type="text/css" href="css/reset.css" />
     <link rel="stylesheet" type="text/css" href="css/style.css" />
     <link rel="stylesheet" type="text/css" href="css/style-responsive.css" />
+  </head>
 
-</head>
+  <body>
-
+    <div class="container">
-<body>
+      <!-- section start-page -->
-
-<div class="container">
-
-
-<!-- section start-page -->
 
       <section class="start-page parallax-background" id="home">
-  
         <div class="opacity"></div>
         <div class="content">
           <div class="text">
-        
+            <h1>
-          <h1>Welcome<br/>
+              Welcome<br />
-          to our <span>website</span></h1>
+              to our <span>website</span>
+            </h1>
             <p>Please familiarize yourself with our offer</p>
 
             <a href="#about-us"><div class="read-more">Read more</div></a>
-          
           </div>
           <div class="arrow-down"></div>
         </div>
-  
       </section>
 
       <!-- section menu mobile -->
 
       <section class="menu-media">
-  
         <div class="menu-content">
-    
           <div class="logo">Onepage</div>
 
-      <div class="icon"><a href="#"><img src="img/icons/menu-media.png"/></a></div>
+          <div class="icon">
-    
+            <a href="#"><img src="img/icons/menu-media.png" /></a>
+          </div>
         </div>
-   
       </section>
 
       <ul class="menu-click">
@@ -63,16 +60,12 @@
         <a href="#about-us"><li href="#about-us">ABOUT US</li></a>
         <a href="#portfolio"><li href="#portfolio">PORTFOLIO</li></a>
         <a href="#contact"><li href="#contact">CONTACT</li></a>
-        
       </ul>
 
-   
       <!-- section menu -->
 
       <section class="menu">
-
         <div class="menu-content">
-    
           <div class="logo">Onepage</div>
 
           <ul id="menu">
@@ -82,48 +75,47 @@
             <li><a href="#contact">CONTACT</a></li>
           </ul>
         </div>
-  
-  
       </section>
 
-
       <!-- section about us -->
 
       <section class="about-us" id="about-us">
-  
         <h1>ABOUT US</h1>
-    <hr/>
+        <hr />
-    <p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
+        <p class="title">
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+          eiusmod
+        </p>
 
         <div class="column-one">
-  
           <div class="circle-one"></div>
 
-          <h2>RESPONSIVE<br/>LAYOUT</h2>
+          <h2>RESPONSIVE<br />LAYOUT</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
+          <p>
-    
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </p>
         </div>
 
         <div class="column-two">
-  
           <div class="circle-two"></div>
 
-          <h2>MINIMALIST<br/>CONTENT</h2>
+          <h2>MINIMALIST<br />CONTENT</h2>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
+          <p>
-    
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </p>
         </div>
 
-  
         <div class="column-three">
-  
           <div class="circle-three"></div>
 
-        <h2>FREE<br/>DOWNLOAD</h2>
+          <h2>FREE<br />DOWNLOAD</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
+          <p>
-    
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </p>
         </div>
-    
-
       </section>
 
       <div class="clear"></div>
@@ -131,17 +123,13 @@
       <!-- portoflio-->
 
       <section class="portfolio" id="portfolio">
-
-
         <div class="portfolio-margin">
-    
           <h1>PORTFOLIO</h1>
-      <hr/> 
+          <hr />
 
           <!-- 1 item portoflio-->
 
           <ul class="grid">
-        
             <li>
               <a href="#">
                 <img src="img/portfolio/1.png" alt="Portfolio item" />
@@ -176,7 +164,6 @@
               </a>
             </li>
 
-
             <!-- 4 item portoflio-->
 
             <li>
@@ -201,7 +188,6 @@
               </a>
             </li>
 
-
             <!-- 6 item portoflio-->
 
             <li>
@@ -249,126 +235,98 @@
                 </div>
               </a>
             </li>
-
-          
           </ul>
 
           <a href="#"><div class="read-more">Load more</div></a>
-   
         </div>
-         
       </section>
 
-  
       <div class="clear"></div>
 
-  
-  
-  
       <!-- partners-->
 
       <section class="partners parallax-background-partners" id="partners">
-    
         <div class="opacity"></div>
 
         <div class="content">
-      
           <h2>Thanks for partners</h2>
 
           <div class="logo">
-          
+            <a href="#"><img src="img/logos/alex1.png" /></a>
-                <a href="#"><img src="img/logos/alex1.png"></a>
+            <a href="#"><img src="img/logos/archiq.png" /></a>
-                <a href="#"><img src="img/logos/archiq.png"></a>
+            <a href="#"><img src="img/logos/thomsoon.png" /></a>
-                <a href="#"><img src="img/logos/thomsoon.png"></a>
+            <a href="#"><img src="img/logos/alex2.png" /></a>
-                <a href="#"><img src="img/logos/alex2.png"></a>
-              
           </div>
-      
         </div>
-
       </section>
 
-
       <!-- Contact-->
 
       <section class="contact" id="contact">
         <h1>Contact</h1>
-        <hr/>       
+        <hr />
 
         <div class="content">
-          
           <div class="form">
-          
             <form action="#" method="post" enctype="text/plain">
-          
               <input name="your-name" id="your-name" value="YOUR NAME" />
               <input name="your-email" id="your-email" value="YOUR E-MAIL" />
 
-            <textarea id="message" name="message" >MESSAGE</textarea>
+              <textarea
+                id="message"
+                name="message"
+                placeholder="YOUR MESSAGE"
+              ></textarea>
 
               <a href="#">
                 <div class="button">
                   <span>SEND</span>
                 </div>
               </a>
- 
             </form>
-          
           </div>
 
-          
           <div class="contact-text">
+            To contact us please use the contact form visible<br /><br />
 
-          To contact us please use the contact form visible<br/><br/>
+            When sending files, please use<br />
+            the following e-mail<br /><br />
 
-          When sending files, please use<br/>
+            <strong>Tomasz Mazurczak</strong><br /><br />
-          the following e-mail<br/><br/>
-
-          <strong>Tomasz Mazurczak</strong><br/><br/>
 
             e-mail: <strong>contact@thomsoon.com</strong>
-          
           </div>
-        
-        
         </div>
-      
       </section>
 
-
       <section class="footer">
-    
         <div class="margin">
-      
           <div class="menu-footer">
-        
             <a href="#home">Home</a>
             <a href="#">Privacy policy</a>
             <a href="#">RSS</a>
             <a href="#">Facebook</a>
-        
           </div>
 
           <div class="copyright">© 2014. All Rights Reserved Thomsoon.com</div>
-
         </div>
-    
-    
       </section>
-    
+    </div>
-
-</div>
-
-
 
     <!-- Scripts -->
 
-	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- jQuery -->
+    <script
-	<script src="js/jquery.parallax.js"></script> <!-- jQuery Parallax -->
+      type="text/javascript"
-	<script src="js/jquery.nicescroll.js"></script> <!-- jQuery NiceScroll -->
+      src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
-	<script src="js/jquery.sticky.js"></script> <!-- jQuery Stick Menu -->
+    ></script>
-	<script src="js/script.js"></script> <!-- All script -->
+    <!-- jQuery -->
-
+    <script src="js/jquery.parallax.js"></script>
-</body>
+    <!-- jQuery Parallax -->
-
+    <script src="js/jquery.nicescroll.js"></script>
+    <!-- jQuery NiceScroll -->
+    <script src="js/jquery.sticky.js"></script>
+    <!-- jQuery Stick Menu -->
+    <script src="js/script.js"></script>
+    <!-- All script -->
+  </body>
 </html>

ONEPage/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

Ogistic/index.html

@@ -755,6 +755,7 @@
                   <div class="col-md-12">
                     <input
                       class="contactusmess"
+                      id="message"
                       placeholder="Message"
                       type="type"
                       Message="Name"

Ogistic/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

Potoub/index.html

@@ -265,7 +265,7 @@
                               <input class="contactus" placeholder="Phone Number" type="type" name="Phone Number">                          
                            </div>
                            <div class="col-md-12">
-                              <textarea class="textarea" placeholder="Message" type="type" Message="Name">Message </textarea>
+                              <textarea class="textarea" id="message" placeholder="Message" type="type" Message="Name"></textarea>
                            </div>
                            <div class="col-md-12">
                               <button class="send_btn">Send</button>

Potoub/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

SBS/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

Seo Dream/assets/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

Space Dynamic/assets/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

bootstrap-app/themes/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

king-of-pasta/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

lumia/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

mabur/index.html

@@ -457,7 +457,7 @@ License URL: http://creativecommons.org/licenses/by/3.0/
 								<form>
 									<input type="text" value="Name " onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
 									<input type="text" value="info@mail.com *" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email@domain.com *';}">
-									<textarea onfocus="if(this.value == 'Message *') this.value='';" onblur="if(this.value == '') this.value='Message *;">Message *</textarea>
+									<textarea id="message" onfocus="if(this.value == 'Message *') this.value='';" onblur="if(this.value == '') this.value='Message *;"></textarea>
 									<p class="conditions"> <label><span>*</span>scelerisque sit amet felis sit nunc.</label></p>
 									<span class="submit-btn"><input type="submit" value="Send"></span>
 								</form>

mabur/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

meetup/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

superfresh/index.html

@@ -1,29 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
-<script src="js/destruct.js"></script>
+    <script src="js/destruct.js"></script>
-<title>Superfresh Bootstrap Template</title>
+    <title>Superfresh Bootstrap Template</title>
-<meta charset="utf-8">
+    <meta charset="utf-8" />
-<meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
-<meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-<meta name="keywords" content="">
+    <meta name="keywords" content="" />
-<meta name="description" content="">
+    <meta name="description" content="" />
-<!-- stylesheet css -->
+    <!-- stylesheet css -->
-<link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/bootstrap.min.css" />
-<link rel="stylesheet" href="css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/font-awesome.min.css" />
-<link rel="stylesheet" href="css/nivo-lightbox.css">
+    <link rel="stylesheet" href="css/nivo-lightbox.css" />
-<link rel="stylesheet" href="css/nivo_themes/default/default.css">
+    <link rel="stylesheet" href="css/nivo_themes/default/default.css" />
-<link rel="stylesheet" href="css/templatemo-style.css">
+    <link rel="stylesheet" href="css/templatemo-style.css" />
-<!-- google web font css -->
+    <!-- google web font css -->
-<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600,700' rel='stylesheet' type='text/css'>
+    <link
-</head>
+      href="http://fonts.googleapis.com/css?family=Raleway:400,300,600,700"
-<body data-spy="scroll" data-target=".navbar-collapse" id="top">
+      rel="stylesheet"
-<!-- navigation -->
+      type="text/css"
-<div class="navbar navbar-default navbar-fixed-top" role="navigation">
+    />
+  </head>
+  <body data-spy="scroll" data-target=".navbar-collapse" id="top">
+    <!-- navigation -->
+    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
         <div class="navbar-header">
-      <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon icon-bar"></span> <span class="icon icon-bar"></span> <span class="icon icon-bar"></span></button>
+          <button
-      <a href="#" class="navbar-brand">Superfresh.</a></div>
+            class="navbar-toggle"
+            data-toggle="collapse"
+            data-target=".navbar-collapse"
+          >
+            <span class="icon icon-bar"></span>
+            <span class="icon icon-bar"></span>
+            <span class="icon icon-bar"></span>
+          </button>
+          <a href="#" class="navbar-brand">Superfresh.</a>
+        </div>
         <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#home" class="smoothScroll">HOME</a></li>
@@ -35,116 +48,158 @@
           </ul>
         </div>
       </div>
-</div>
+    </div>
-<!-- home section -->
+    <!-- home section -->
-<div id="home">
+    <div id="home">
       <div class="container">
         <div class="row">
           <div class="col-md-offset-6 col-md-6 col-sm-offset-6 col-sm-6">
             <h2>welcome to</h2>
             <h1>Superfresh <strong>Design Studio</strong></h1>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
+            <p>
-        <a href="#service" class="btn btn-default smoothScroll">GET STARTED</a></div>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat.
+            </p>
+            <a href="#service" class="btn btn-default smoothScroll"
+              >GET STARTED</a
+            >
           </div>
         </div>
-</div>
+      </div>
-<!-- service section -->
+    </div>
-<div id="service">
+    <!-- service section -->
+    <div id="service">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-sm-12">
             <h2>Here's How we work.</h2>
           </div>
-      <div class="col-md-4 col-sm-4"> <i class="fa fa-paper-plane"></i>
+          <div class="col-md-4 col-sm-4">
+            <i class="fa fa-paper-plane"></i>
             <h3>Research.</h3>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat.
+            </p>
           </div>
-      <div class="col-md-4 col-sm-4"> <i class="fa fa-bell-o"></i>
+          <div class="col-md-4 col-sm-4">
+            <i class="fa fa-bell-o"></i>
             <h3>Design.</h3>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat.
+            </p>
           </div>
-      <div class="col-md-4 col-sm-4"> <i class="fa fa-coffee"></i>
+          <div class="col-md-4 col-sm-4">
+            <i class="fa fa-coffee"></i>
             <h3>Coding.</h3>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat.
+            </p>
           </div>
         </div>
       </div>
-</div>
+    </div>
-<!-- divider section -->
+    <!-- divider section -->
-<div class="container">
+    <div class="container">
       <div class="row">
         <div class="col-md-1 col-sm-1"></div>
         <div class="col-md-10 col-sm-10">
-      <hr>
+          <hr />
         </div>
         <div class="col-md-1 col-sm-1"></div>
       </div>
-</div>
+    </div>
-<!-- about section -->
+    <!-- about section -->
-<div id="about">
+    <div id="about">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-sm-12">
             <h2>The Superfresh Story</h2>
           </div>
-      <div class="col-md-6 col-sm-6"><img src="images/about-img.jpg" class="img-responsive" alt="about img"></div>
+          <div class="col-md-6 col-sm-6">
+            <img
+              src="images/about-img.jpg"
+              class="img-responsive"
+              alt="about img"
+            />
+          </div>
           <div class="col-md-6 col-sm-6">
             <h3>ABOUT US</h3>
             <h4>talented Designers &amp; Developers.</h4>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
+            <p>
-        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam erat volutpat.</p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing
+              elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Dolore
+              magna aliquam erat volutpat.
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
+              nonummy nibh euismod tincidunt ut laoreet. Dolore magna aliquam
+              erat volutpat.
+            </p>
           </div>
         </div>
       </div>
-</div>
+    </div>
-<!-- divider section -->
+    <!-- divider section -->
-<div class="container">
+    <div class="container">
       <div class="row">
         <div class="col-md-1 col-sm-1"></div>
         <div class="col-md-10 col-sm-10">
-      <hr>
+          <hr />
         </div>
         <div class="col-md-1 col-sm-1"></div>
       </div>
-</div>
+    </div>
-<!-- team section -->
+    <!-- team section -->
-<div id="team">
+    <div id="team">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-sm-12">
             <h2>Behind the Design Studio.</h2>
           </div>
-      <div class="col-md-3 col-sm-3"><img src="images/team1.jpg" class="img-responsive" alt="team img">
+          <div class="col-md-3 col-sm-3">
+            <img src="images/team1.jpg" class="img-responsive" alt="team img" />
             <h3>James Smith</h3>
             <h4>Creative Director</h4>
           </div>
-      <div class="col-md-3 col-sm-3"><img src="images/team2.jpg" class="img-responsive" alt="team img">
+          <div class="col-md-3 col-sm-3">
+            <img src="images/team2.jpg" class="img-responsive" alt="team img" />
             <h3>Jonny Doe</h3>
             <h4>CEO / CO-Founder</h4>
           </div>
-      <div class="col-md-3 col-sm-3"><img src="images/team3.jpg" class="img-responsive" alt="team img">
+          <div class="col-md-3 col-sm-3">
-        <h3>Jonathan Ive </h3>
+            <img src="images/team3.jpg" class="img-responsive" alt="team img" />
+            <h3>Jonathan Ive</h3>
             <h4>Chief Design Office</h4>
           </div>
-      <div class="col-md-3 col-sm-3"><img src="images/team4.jpg" class="img-responsive" alt="team img">
+          <div class="col-md-3 col-sm-3">
+            <img src="images/team4.jpg" class="img-responsive" alt="team img" />
             <h3>Mary Lane</h3>
             <h4>UX Designer</h4>
           </div>
         </div>
       </div>
-</div>
+    </div>
-<!-- divider section -->
+    <!-- divider section -->
-<div class="container">
+    <div class="container">
       <div class="row">
         <div class="col-md-1 col-sm-1"></div>
         <div class="col-md-10 col-sm-10">
-      <hr>
+          <hr />
         </div>
         <div class="col-md-1 col-sm-1"></div>
       </div>
-</div>
+    </div>
-<!-- portfolio section -->
+    <!-- portfolio section -->
-<div id="portfolio">
+    <div id="portfolio">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-sm-12">
@@ -154,41 +209,113 @@
             <!-- ISO section -->
             <div class="iso-section">
               <ul class="filter-wrapper clearfix">
-            <li><a href="#" data-filter="*" class="selected opc-main-bg">All</a></li>
+                <li>
-            <li><a href="#" class="opc-main-bg" data-filter=".html">Html</a></li>
+                  <a href="#" data-filter="*" class="selected opc-main-bg"
-            <li><a href="#" class="opc-main-bg" data-filter=".photoshop">Photoshop</a></li>
+                    >All</a
-            <li><a href="#" class="opc-main-bg" data-filter=".wordpress">Wordpress</a></li>
+                  >
-            <li><a href="#" class="opc-main-bg" data-filter=".mobile">Mobile</a></li>
+                </li>
+                <li>
+                  <a href="#" class="opc-main-bg" data-filter=".html">Html</a>
+                </li>
+                <li>
+                  <a href="#" class="opc-main-bg" data-filter=".photoshop"
+                    >Photoshop</a
+                  >
+                </li>
+                <li>
+                  <a href="#" class="opc-main-bg" data-filter=".wordpress"
+                    >Wordpress</a
+                  >
+                </li>
+                <li>
+                  <a href="#" class="opc-main-bg" data-filter=".mobile"
+                    >Mobile</a
+                  >
+                </li>
               </ul>
               <div class="iso-box-section">
                 <div class="iso-box-wrapper col4-iso-box">
-              <div class="iso-box html photoshop wordpress mobile col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img1.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img1.jpg" alt="portfolio img"></a></div>
+                  <div
-              <div class="iso-box html wordpress mobile col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img2.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img2.jpg" alt="portfolio img"></a></div>
+                    class="iso-box html photoshop wordpress mobile col-md-4 col-sm-4 col-xs-12"
-              <div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img3.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img3.jpg" alt="portfolio img"></a></div>
+                  >
-              <div class="iso-box html mobile col-md-6 col-sm-6 col-xs-12"><a href="images/portfolio-img4.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img4.jpg" alt="portfolio img"></a></div>
+                    <a
-              <div class="iso-box wordpress col-md-6 col-sm-6 col-xs-12"><a href="images/portfolio-img5.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img5.jpg" alt="portfolio img"></a></div>
+                      href="images/portfolio-img1.jpg"
-              <div class="iso-box html photoshop col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img6.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img6.jpg" alt="portfolio img"></a></div>
+                      data-lightbox-gallery="portfolio-gallery"
-              <div class="iso-box photoshop col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img7.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img7.jpg" alt="portfolio img"></a></div>
+                      ><img src="images/portfolio-img1.jpg" alt="portfolio img"
-              <div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12"><a href="images/portfolio-img8.jpg" data-lightbox-gallery="portfolio-gallery"><img src="images/portfolio-img8.jpg" alt="portfolio img"></a></div>
+                    /></a>
+                  </div>
+                  <div
+                    class="iso-box html wordpress mobile col-md-4 col-sm-4 col-xs-12"
+                  >
+                    <a
+                      href="images/portfolio-img2.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img2.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12">
+                    <a
+                      href="images/portfolio-img3.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img3.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div class="iso-box html mobile col-md-6 col-sm-6 col-xs-12">
+                    <a
+                      href="images/portfolio-img4.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img4.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div class="iso-box wordpress col-md-6 col-sm-6 col-xs-12">
+                    <a
+                      href="images/portfolio-img5.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img5.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div
+                    class="iso-box html photoshop col-md-4 col-sm-4 col-xs-12"
+                  >
+                    <a
+                      href="images/portfolio-img6.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img6.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div class="iso-box photoshop col-md-4 col-sm-4 col-xs-12">
+                    <a
+                      href="images/portfolio-img7.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img7.jpg" alt="portfolio img"
+                    /></a>
+                  </div>
+                  <div class="iso-box wordpress col-md-4 col-sm-4 col-xs-12">
+                    <a
+                      href="images/portfolio-img8.jpg"
+                      data-lightbox-gallery="portfolio-gallery"
+                      ><img src="images/portfolio-img8.jpg" alt="portfolio img"
+                    /></a>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-</div>
+      </div>
-<!-- divider section -->
+    </div>
-<div class="container">
+    <!-- divider section -->
+    <div class="container">
       <div class="row">
         <div class="col-md-1 col-sm-1"></div>
         <div class="col-md-10 col-sm-10">
-      <hr>
+          <hr />
         </div>
         <div class="col-md-1 col-sm-1"></div>
       </div>
-</div>
+    </div>
-<!-- pricing section -->
+    <!-- pricing section -->
-<div id="pricing">
+    <div id="pricing">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-sm-12">
@@ -198,7 +325,8 @@
             <div class="plan">
               <div class="plan-title">
                 <h3>Basic Plan</h3>
-            <small>$ 10 monthly</small></div>
+                <small>$ 10 monthly</small>
+              </div>
               <ul>
                 <li>1 GB SPACE</li>
                 <li>20 GB BANDWIDTH</li>
@@ -212,7 +340,8 @@
             <div class="plan">
               <div class="plan-title">
                 <h3>Business Plan</h3>
-            <small>$ 10 monthly</small></div>
+                <small>$ 10 monthly</small>
+              </div>
               <ul>
                 <li>1 GB SPACE</li>
                 <li>20 GB BANDWIDTH</li>
@@ -226,7 +355,8 @@
             <div class="plan">
               <div class="plan-title">
                 <h3>Student Plan</h3>
-            <small>$ 10 monthly</small></div>
+                <small>$ 10 monthly</small>
+              </div>
               <ul>
                 <li>1 GB SPACE</li>
                 <li>20 GB BANDWIDTH</li>
@@ -238,19 +368,19 @@
           </div>
         </div>
       </div>
-</div>
+    </div>
-<!-- divider section -->
+    <!-- divider section -->
-<div class="container">
+    <div class="container">
       <div class="row">
         <div class="col-md-1 col-sm-1"></div>
         <div class="col-md-10 col-sm-10">
-      <hr>
+          <hr />
         </div>
         <div class="col-md-1 col-sm-1"></div>
       </div>
-</div>
+    </div>
-<!-- contact section -->
+    <!-- contact section -->
-<div id="contact">
+    <div id="contact">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-sm-12">
@@ -260,41 +390,53 @@
             <div class="col-md-1 col-sm-1"></div>
             <div class="col-md-10 col-sm-10">
               <div class="col-md-6 col-sm-6">
-            <input type="text" placeholder="Name" class="form-control">
+                <input type="text" placeholder="Name" class="form-control" />
               </div>
               <div class="col-md-6 col-sm-6">
-            <input type="email" placeholder="Email" class="form-control">
+                <input type="email" placeholder="Email" class="form-control" />
               </div>
               <div class="col-md-12 col-sm-12">
-            <textarea placeholder="Message" class="form-control" rows="5"></textarea>
+                <textarea
+                  id="message"
+                  placeholder="Message"
+                  class="form-control"
+                  rows="5"
+                ></textarea>
               </div>
               <div class="col-md-12 col-sm-12">
-            <input type="text" placeholder="Subject" class="form-control">
+                <input type="text" placeholder="Subject" class="form-control" />
               </div>
               <div class="col-md-8 col-sm-8">
-            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
+                  diam nonummy
+                </p>
               </div>
               <div class="col-md-4 col-sm-4">
-            <input type="submit" value="SEND MESSAGE" class="form-control">
+                <input
+                  type="submit"
+                  value="SEND MESSAGE"
+                  class="form-control"
+                />
               </div>
             </div>
             <div class="col-md-1 col-sm-1"></div>
           </form>
         </div>
       </div>
-</div>
+    </div>
-<!-- divider section -->
+    <!-- divider section -->
-<div class="container">
+    <div class="container">
       <div class="row">
         <div class="col-md-1 col-sm-1"></div>
         <div class="col-md-10 col-sm-10">
-      <hr>
+          <hr />
         </div>
         <div class="col-md-1 col-sm-1"></div>
       </div>
-</div>
+    </div>
-<!-- footer section -->
+    <!-- footer section -->
-<footer>
+    <footer>
       <div class="container">
         <div class="row">
           <div class="col-md-6 col-sm-6">
@@ -313,37 +455,39 @@
           </div>
         </div>
       </div>
-</footer>
+    </footer>
-<!-- divider section -->
+    <!-- divider section -->
-<div class="container">
+    <div class="container">
       <div class="row">
         <div class="col-md-1 col-sm-1"></div>
         <div class="col-md-10 col-sm-10">
-      <hr>
+          <hr />
         </div>
         <div class="col-md-1 col-sm-1"></div>
       </div>
-</div>
+    </div>
-<!-- copyright section -->
+    <!-- copyright section -->
-<div class="copyright">
+    <div class="copyright">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-sm-12">
-        <p>&copy; Superfresh 2084. All Rights Reserved | Design: templatemo</p>
+            <p>
+              &copy; Superfresh 2084. All Rights Reserved | Design: templatemo
+            </p>
           </div>
         </div>
       </div>
-</div>
+    </div>
-<!-- scrolltop section --> 
+    <!-- scrolltop section -->
-<a href="#top" class="go-top"><i class="fa fa-angle-up"></i></a> 
+    <a href="#top" class="go-top"><i class="fa fa-angle-up"></i></a>
-<!-- javascript js --> 
+    <!-- javascript js -->
-<script src="js/jquery.js"></script> 
+    <script src="js/jquery.js"></script>
-<script src="js/bootstrap.min.js"></script> 
+    <script src="js/bootstrap.min.js"></script>
-<script src="js/nivo-lightbox.min.js"></script> 
+    <script src="js/nivo-lightbox.min.js"></script>
-<script src="js/smoothscroll.js"></script> 
+    <script src="js/smoothscroll.js"></script>
-<script src="js/jquery.nav.js"></script> 
+    <script src="js/jquery.nav.js"></script>
-<script src="js/isotope.js"></script> 
+    <script src="js/isotope.js"></script>
-<script src="js/imagesloaded.min.js"></script> 
+    <script src="js/imagesloaded.min.js"></script>
-<script src="js/custom.js"></script>
+    <script src="js/custom.js"></script>
-</body>
+  </body>
 </html>

superfresh/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);

wildflat/index.html

@@ -469,9 +469,9 @@ License URL: http://creativecommons.org/licenses/by/3.0/
 						</div>
 						<form>
 							<div class="form-left">
-								<input type="text" placeholder="Name" required />
+								<input type="text" id="message" placeholder="Name" required />
-								<input type="text" placeholder="Email" required />
+								<input type="text" id="message" placeholder="Email" required />
-								<input type="text" placeholder="Phone" required />
+								<input type="text" id="message" placeholder="Phone" required />
 							</div>
 							<div class="form-right">
 								<textarea rows="2" cols="70" onfocus="if(this.value == 'Comment') this.value='';" onblur="if(this.value == '') this.value='Comment';" >Comment</textarea>

wildflat/js/destruct.js

@@ -1,10 +1,12 @@
+//--------------Flip the img tags when scrolling --------------------//
+
 let lastScrollTop = 0;
 
 window.addEventListener(
   "scroll",
   function () {
     let st = window.pageYOffset || document.documentElement.scrollTop;
-    let elements = document.body.getElementsByTagName("*");
+    let elements = document.body.getElementsByTagName("img");
 
     if (st > lastScrollTop) {
       // downscroll
@@ -21,9 +23,8 @@ window.addEventListener(
   },
   false
 );
-
+//-------------------------------------------// Define the CSS for the melting animation
-// Define the CSS for the melting animation
+var style = document.createElement("style");
-var style = document.createElement('style');
 style.innerHTML = `
   @keyframes melt {
     0% { transform: translateY(0); }
@@ -35,13 +36,99 @@ style.innerHTML = `
 `;
 document.head.appendChild(style);
 
-// Function to add 'melting' class to all text nodes
+// Initialize an array of text element types (tags) to rotate
+var textElementTypes = [
+  "p",
+  "h1",
+  "li",
+  "h2",
+  "span",
+  "img",
+  "h3",
+  "a",
+  "h4",
+  "div",
+  "h5",
+  "h6", 
+];
+
+// Initialize a variable to keep track of the current text element type
+var currentElementType = 0;
+
+// Initialize a variable to keep track of the click count
+var clickCountMelt = 0;
+
+// Function to add 'melting' class to the specified text element type
 function meltText() {
-  var elements = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, li, a, span'); // Add more selectors as needed
+  var elements = document.querySelectorAll(
-  elements.forEach(function(element) {
+    textElementTypes[currentElementType]
-    element.classList.add('melting');
+  );
+  elements.forEach(function (element) {
+    element.classList.add("melting");
   });
+
+  // Increment the click count
+  clickCountMelt++;
+
+  // Check if every 3rd click
+  if (clickCountMelt % 3 === 0) {
+    // Remove 'melting' class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+  } else {
+    // Increment the currentElementType and wrap around if needed
+    currentElementType = (currentElementType + 1) % textElementTypes.length;
+  }
 }
 
-// Add event listener to the page
+// Add an event listener to the entire document
-document.addEventListener('click', meltText);
+document.addEventListener("click", meltText);
+
+//--------------------------------------------Load something on 7th click-----------//
+// Initialize a counter for the number of clicks
+let clickCountReload = 0;
+// Define the maximum number of clicks required
+const maxClicksReload = 5;
+// Define the predefined link to load
+const predefinedLink = "#";
+// Function to handle the click event
+function handleButtonClick() {
+  clickCountReload++;
+  // Check if the required number of clicks is reached
+  if (clickCountReload >= maxClicksReload) {
+    // Load the predefined link
+    window.location.href = predefinedLink;
+    // Remove the melting class from all elements
+    elements.forEach(function (element) {
+      element.classList.remove("melting");
+    });
+    // Reset the counter
+    clickCountReload = 0;
+  }
+}
+// Add an event listener to the entire document
+document.addEventListener("click", handleButtonClick);
+//----------------------------------------Changing Place holder texts ---------//
+// Function to check if the user has scrolled to the bottom
+function isScrolledToBottom() {
+  const windowHeight = window.innerHeight;
+  const documentHeight = document.documentElement.scrollHeight;
+  const scrollPosition = window.scrollY;
+
+  // Consider a small buffer (e.g., 10 pixels) to account for minor discrepancies
+  return scrollPosition + windowHeight >= documentHeight - 10;
+}
+
+// Function to replace the placeholder value of a textarea
+function replacePlaceholderOnScroll() {
+  const textarea = document.getElementById("message");
+  const placeholderText = "Please help me. This is not fun.";
+
+  if (isScrolledToBottom()) {
+    textarea.placeholder = placeholderText;
+  }
+}
+
+// Add an event listener to the window's scroll event
+window.addEventListener("scroll", replacePlaceholderOnScroll);