Initial commit

AMACAFELLA · Jan 12, 2024 · c6b47f8 · c6b47f8
commit c6b47f8
Show file tree

Hide file tree

Showing 4 changed files with 259 additions and 0 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hire Me</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="main-container">
+      <div class="text-container">
+        <h2 class="question">Will you hire me?</h2>
+      </div>
+      <div class="wrapper">
+        <img
+          class="gif"
+          alt="gif"
+          src="https://media.giphy.com/media/Cqq2DvlmbNo8izMrWO/giphy.gif"
+        />
+      </div>
+      <div class="btn-group">
+        <button class="hire-btn">Hire</button>
+        <button class="not-now-btn">Not now</button>
+      </div>
+    </div>
+    <div class="form-container">
+      <form id="email-form">
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" required />
+        <label for="message">Message:</label>
+        <textarea id="message" name="message" required></textarea>
+        <button type="submit">Send</button>
+      </form>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,89 @@
+const wrapper = document.querySelector(".wrapper");
+const question = document.querySelector(".question");
+const gif = document.querySelector(".gif");
+const hireBtn = document.querySelector(".hire-btn");
+const noBtn = document.querySelector(".not-now-btn");
+const formContainer = document.querySelector(".form-container");
+const emailForm = document.querySelector("#email-form");
+const emailInput = document.querySelector("#email");
+const messageInput = document.querySelector("#message");
+let formSubmitted = false;
+
+const funnyThreats = [
+  "Did I stutter?",
+  "You tried to click on the wrong button, right?",
+  "That was a mistake, right?",
+  "You're pushing my buttons, but not the right ones.",
+  "You really don't want to do that. Trust me.",
+  "Careful where you point that cursor.",
+  "I'm watching you. And judging you.",
+  "Warning! Malicious software detected.Click 'Hire' to install security update immediately.",
+  "Are you afraid of commitment? Is that what your therapist said?",
+  "Listen, I'm not here to judge your life choices. But clicking that button? That's a choice that screams 'regret'.",
+  "If you click that button, I'm releasing the squirrels. And trust me, you don't want to deal with an army of revenge squirrels.",
+  "Ransomware encrypted your files. Click 'Hire' to purchase the decryption key.",
+  "Click that and I'll email all your browser history to your mother.",
+  "I have your IP address right here. 192.168.0.1",
+  "You seem tense. Perhaps some calming music instead of clicking buttons?",
+  "That button casts a level 20 Confusion Spell. Are you sure?",
+  "I'll sign you up for so many email lists if click that button.",
+  "Click at your own risk. I know where you downloaded that album from.",
+  "Don't click, okay Let's just be friends.",
+];
+
+let lastThreatIndex;
+
+hireBtn.addEventListener("click", () => {
+  formContainer.style.display = "block";
+});
+
+noBtn.addEventListener("mouseover", () => {
+  const noBtnRect = noBtn.getBoundingClientRect();
+  const wrapperRect = wrapper.getBoundingClientRect();
+  const questionRect = question.getBoundingClientRect();
+  const maxX = window.innerWidth - noBtnRect.width;
+  const maxY = window.innerHeight - noBtnRect.height;
+
+  let randomX, randomY;
+
+  do {
+    randomX = Math.max(0, Math.min(maxX, Math.floor(Math.random() * maxX)));
+    randomY = Math.max(0, Math.min(maxY, Math.floor(Math.random() * maxY)));
+  } while (
+    randomX + noBtnRect.width > wrapperRect.left &&
+    randomX < wrapperRect.right &&
+    randomY + noBtnRect.height > wrapperRect.top &&
+    randomY < wrapperRect.bottom
+  );
+
+  noBtn.style.left = randomX + "px";
+  noBtn.style.top = randomY + "px";
+
+  let randomIndex;
+  do {
+    randomIndex = Math.floor(Math.random() * funnyThreats.length);
+  } while (randomIndex === lastThreatIndex);
+
+  lastThreatIndex = randomIndex;
+  question.textContent = funnyThreats[randomIndex];
+});
+
+window.addEventListener("beforeunload", function (e) {
+  if (!formSubmitted) {
+    e.preventDefault();
+    e.returnValue = "";
+    return "Error, you tried to leave without hiring me. Please click yes to proceed";
+  }
+});
+
+emailForm.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const email = emailInput.value;
+  const message = messageInput.value;
+  if (message.includes("You're hired, reply to this email")) {
+    formSubmitted = true;
+    window.location.href = `mailto:example@gmail.com?subject=Congrats on Your Job Application!&body=${message}`;
+  } else {
+    alert("Error: Only valid inputs, such as 'You're hired, reply to this email,' are allowed. Please enter this phrase.");
+  }
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,131 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: whitesmoke;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.main-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.wrapper {
+    height: 400px;
+    overflow: hidden;
+    /* Hide overflow content */
+}
+
+.gif {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}
+
+.text-container {
+    margin-top: 20px;
+}
+
+h2 {
+    text-align: center;
+    font-size: 1.5em;
+    color: #7D4101;
+    margin: 15px 0;
+}
+
+.btn-group {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+    /* Adjust the margin for the buttons */
+}
+
+button {
+    position: absolute;
+    width: 150px;
+    height: inherit;
+    color: #7D4101;
+    /* Text color */
+    font-size: 1.2em;
+    border-radius: 30px;
+    outline: none;
+    cursor: pointer;
+    box-shadow: 0 2px 4px gray;
+    border: 2px solid #F7AF63;
+    /* Border color */
+    font-size: 1.2em;
+}
+
+button:nth-child(1) {
+    margin-left: -200px;
+    background: #F7AF63;
+    /* Background color */
+}
+
+button:nth-child(2) {
+    margin-right: -200px;
+    background: #7D4101;
+    /* Background color */
+    color: #F7AF63;
+    /* Text color */
+}
+
+.form-container {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+}
+
+form {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px gray;
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+input,
+textarea {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid gray;
+}
+
+button[type="submit"] {
+    background-color: #F7AF63;
+    /* Background color */
+    color: #FDF4D4;
+    /* Text color */
+    border: none;
+    border-radius: 5px;
+    padding: 10px 20px;
+    cursor: pointer;
+    left: 18%;
+}