Static Site Architecture

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
• img/cuteCat.jpg

This document describes the static site architecture for the yeuems.io project. The site functions as a client-side interactive web application that uses HTML, CSS, and JavaScript to deliver a scripted user experience involving modal interactions and dynamic UI behavior.

The architecture relies on standard web technologies and third-party libraries like jQuery and SweetAlert2 to manage state and presentation. It features a preloading phase followed by a series of interactive prompts.

Core Components and Structure

The application follows a standard frontend structure where index.html serves as the entry point, linking to external style sheets and scripts.

Component Overview

Component	Technology	File Path	Description
Document Structure	HTML5	index.html	Defines the DOM elements, including the preloader, background, and content wrapper.
Core Logic	JavaScript (jQuery)	js/myJs.js	Manages event listeners, dynamic text, and UI logic.
Styling	CSS3	css/style.css	Defines layout, positioning for buttons, and background effects.
Preloader Style	CSS3	css/spinload.css	Contains specific animations for the loading screen.
External Libraries	CDN-based	index.html	Includes Bootstrap, SweetAlert2, and jQuery.

Sources: index.html:1-76, js/myJs.js:1-137, css/style.css:1-70, css/spinload.css:1-66

UI Execution Flow

The site executes in three distinct phases: the preloading phase, the introduction phase, and the interactive phase.

Execution Sequence

1. Preloading: The #preloader div masks the screen with a pink background and a white rectangular spinner animation.
2. Initialization: After 600ms, the firstQuestion() function triggers a SweetAlert2 modal.
3. Interaction: The user interacts with "Yes" and "No" buttons, where the "No" button dynamically moves or switches positions to prevent selection.
4. Completion: Upon clicking "Yes", a final form is shown, which redirects to an external Facebook profile upon closing.

The switchButton and moveButton functions utilize the Audio object to play sound effects (duck.mp3, Swish1.mp3) during UI changes.

Sources: js/myJs.js:21-42, js/myJs.js:56-89, css/spinload.css:2-15

Interactive Logic and Event Handling

The application uses a configuration object, textConfig, to store all strings displayed to the user. This allows for centralized management of the interactive dialogue.

Button Evasion Logic

The "No" button (#no) implements evasion logic to prevent the user from clicking it easily.

• Switching: Initially, the switchButton() function swaps the absolute CSS coordinates (top and left) of the #yes and #no buttons.
• Moving: Subsequently, the moveButton() function generates random x and y coordinates based on screen.width and applies them to the #no button's style.

Text Generation Effect

When the user focuses on the final input field (#txtReason), the textGenerate function simulates a "forced typing" effect. Regardless of what the user types, the function appends characters from textConfig.text9 to the input value at 10ms intervals.

Sources: js/myJs.js:92-110, js/myJs.js:129-136

Visual Styles and Responsiveness

The architecture utilizes a fixed background image with a blur filter applied via CSS.

• Background: The #bg element uses puung3.jpg with a -webkit-filter: blur(4px).
• Responsiveness: Media queries in style.css adjust the font size of header elements and the absolute positioning of interaction buttons for screens smaller than 500px.
• Animations: The preloader uses @keyframes stretchdelay to animate five rectangular div elements, creating a rhythmic loading effect.

Sources: css/style.css:19-33, css/style.css:47-70, css/spinload.css:52-66

Summary

The yeuems.io static site architecture provides a controlled, interactive user experience through a combination of CSS animations and jQuery-driven DOM manipulation. It utilizes a preloader to manage asset loading perception and relies on a configuration-based approach for its interactive dialogue. The system is designed for mobile and desktop compatibility through CSS media queries and screen-width detection in JavaScript.