Home

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• js/myJs.js
• css/style.css
• css/spinload.css
• sound/sound.mp3

The Home module serves as the landing page and primary interface for the yeuems.io application. It presents a stylized, interactive "crush" proposal designed to engage users through a sequence of loading animations, modal questions, and evasive UI elements.

This module integrates HTML5, CSS3, and JavaScript, leveraging libraries such as jQuery for DOM manipulation and SweetAlert2 for interactive popups. It transitions from a preloader phase to a main content area where the user interacts with responsive buttons that trigger specific logic based on user input.
Sources: index.html:1-67, js/myJs.js:15-30

Application Architecture and Flow

The application follows a linear execution flow starting from page load. It initializes global configurations, manages a preloader, and then activates the interactive content.

Loading and Initialization

Upon page entry, a preloader obscures the main content. The preloader consists of a five-rectangle CSS animation. After a 600ms timeout, the application hides the preloader, reveals the body, and triggers the first modal question.
Sources: index.html:19-27, js/myJs.js:16-25, css/spinload.css:1-60

The diagram shows the initialization sequence from initial render to user interaction.
Sources: js/myJs.js:16-39, index.html:19-27

UI Components and Styling

The Home interface relies on absolute positioning and CSS transitions to manage the layout of interactive elements.

Layout Configuration

The interface uses a fixed background image with a blur filter. The content container sits on a higher z-index to remain visible over the background.
Sources: css/style.css:1-25

Component	Description	Selector/Source
Preloader Mask	Fixed overlay with color #ef6a8a	#preloader
Background	Fixed image puung3.jpg with 4px blur	#bg
Content Wrapper	Relative container for headers and buttons	.content
Yes Button	Large danger-themed Bootstrap button	#yes
No Button	Large info-themed Bootstrap button	#no

Sources: index.html:28-45, css/style.css:1-25, css/spinload.css:1-9

Responsive Design

The module includes media queries for devices with a width of 500px or less. It adjusts font sizes and button positioning to ensure usability on mobile screens.
Sources: css/style.css:47-75

Interactive Logic

The core functionality of the Home module resides in js/myJs.js, which controls button behaviors and modal sequences.

Evasive "No" Button

The "No" button implements a dodging mechanism to prevent users from clicking it easily.

1. On the first mouse movement (n < 1), the script calls switchButton(), which swaps the CSS left and top coordinates of the "Yes" and "No" buttons.
2. For subsequent movements (n > 1), the script calls moveButton(), which assigns random coordinates to the "No" button within defined bounds based on screen width.
3. Clicking the button on large screens (>= 900px) also triggers the position switch.
   Sources: js/myJs.js:41-83

The flowchart illustrates the logic controlling the evasive behavior of the negative response button.
Sources: js/myJs.js:41-83

Affirmative Response and Text Generation

When a user clicks the "Yes" button, a SweetAlert2 modal appears, asking for a reason. This modal features a custom text generation effect:

• As the user types in the input field #txtReason, the textGenerate() function intercepts the input.
• It replaces the user's actual keystrokes with characters from a predefined string (textConfig.text9).
• This creates the illusion that the application is forcing a specific positive response.
  Sources: js/myJs.js:85-134

Data Configuration

System text and strings are centralized in the textConfig object.

const textConfig = {
  text1: "He luu cậu!",
  text3: "Cậu yêu tớ có phải không nào ._.",
  text9: "Vì cậu đẹp try và dthuong vlll:>>",
  text11: "Tối nay tớ qua đón cậu đi chơi nhaa :v...",
};

Sources: js/myJs.js:1-13

Conclusion

The Home module functions as an interactive experience rather than a traditional landing page. It utilizes CSS animations for visual engagement and JavaScript event listeners to create a playful, evasive interaction model that guides the user toward a specific outcome (the "Yes" button). Upon completion, the module redirects the user to a specific Facebook profile.
Sources: js/myJs.js:125-130, index.html:60