Project Structure

Relevant source files

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

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

The yeuems.io project is a single-page interactive web application. It creates a playful "proposal" interface where users interact with two primary buttons, "Yes" and "No." The system utilizes a combination of static HTML, CSS animations, and jQuery-based logic to manage user engagement and visual feedback.

Application Architecture

The application follows a standard frontend structure. It separates presentation, styling, and behavior into distinct files and directories.

Core Components

• Main Entry Point: index.html loads all external libraries and internal assets.
• Visual Layout: css/style.css defines the positioning of interactive elements and background aesthetics.
• Loading System: css/spinload.css manages the preloader state during the initial page load.
• Logic Engine: js/myJs.js controls the button interactions, text configuration, and popup sequences.

The diagram shows the dependency flow where the HTML file acts as the central hub for styling and scripting.
Sources: index.html:1-70, js/myJs.js:1-135

UI and Styling Modules

The user interface consists of a background layer, a content wrapper, and a high-priority preloader.

Preloader and Spinner

The preloader uses a fixed-position mask to cover the viewport until the application initializes. A CSS-only spinner, consisting of five rectangular elements, provides visual feedback during this phase. The application hides the preloader after a 600ms delay.
Sources: css/spinload.css:2-55, js/myJs.js:17-25

Layout and Responsiveness

The layout uses absolute and fixed positioning to center text and buttons. Media queries adjust font sizes and button coordinates for screens narrower than 500px to ensure mobile compatibility.
Sources: css/style.css:1-85

Element	Description	Styling Key
Background	Fixed image with a 4px blur filter	#bg
Content Wrapper	Relative container for headers and buttons	.content
Yes Button	Red button with transition effects	#yes
No Button	Blue button with rapid escape transitions	#no

Interaction Logic

The application uses jQuery to manage the behavior of the two main buttons and the sequence of popups.

Button Behavior Logic

The "No" button is designed to be difficult or impossible to click. When the user moves the mouse over the button, the script either swaps its position with the "Yes" button or moves it to a random location on the screen.
Sources: js/myJs.js:62-95

This flowchart illustrates the logic used to prevent the user from selecting the negative option.
Sources: js/myJs.js:62-95

Proposal Sequence

When the user clicks the "Yes" button, the application initiates a multi-stage dialogue using the SweetAlert2 library.

1. Stage 1: Asks for the reason behind the selection.
2. Stage 2: A text input field simulates a "forced" response. The textGenerate() function replaces user input with a predefined string from textConfig.text9.
3. Completion: Upon submission, the page redirects the user to a specific Facebook profile.

  // logic for simulated typing in the reason field
  function textGenerate() {
    var n = "";
    var text = " " + textConfig.text9;
    var a = Array.from(text);
    var textVal = $("#txtReason").val() ? $("#txtReason").val() : "";
    var count = textVal.length;
    if (count > 0) {
      for (let i = 1; i <= count; i++) {
        n = n + a[i];
      }
    }
    $("#txtReason").val(n);
  }

Sources: js/myJs.js:98-115, js/myJs.js:127-130

Configuration Data

All textual content is centralized in the textConfig object. This allows for easy modification of the application's messages without altering the logic functions.

Variable	Value (Source Data)	Purpose
text1	"He luu cậu!"	Initial popup title
text3	"Cậu yêu tớ có phải không nào ._."	Main header question
text5	"Cậu mơ à???"	"No" button label
text9	"Vì cậu đẹp try và dthuong vlll:>>"	Forced input response
text11	Messenger/Inbox prompt	Final confirmation text

Sources: js/myJs.js:1-15

Summary

The project structure organizes a simple interactive experience by combining a static HTML foundation with dynamic jQuery controls. By utilizing external libraries like SweetAlert2 and Bootstrap, the application delivers a responsive and animated user interface. The logic focuses on redirecting user behavior through button manipulation and simulated text input, culminating in a social media redirection.