Architecture

Architecture

RYUG is a flat static site. Six HTML pages sit in the project root, each linking to one shared stylesheet (css/style.css) and one shared script (js/main.js). There is no router and no build tool. The browser loads a page, the script runs once, and only the modules whose markup is present on that page do anything.

Site map

The pages share a common navbar, so any page links to any other. The one directed jump in the code is the login redirect: a correct password sends the visitor from index.html to home.html.

graph TD
  Login[index.html<br/>Login] -->|valid password| Home[home.html<br/>Home]
  Login --> History[history.html]
  Home --> Catalog[catalog.html<br/>Catalog]
  Home --> Discount[discount.html<br/>Discount game]
  Home --> History[history.html<br/>History timeline]
  Home --> Contact[contact.html<br/>Contact]
  Catalog --> Discount
  Discount --> History
  History --> Contact
  Contact --> Home

Loading

Every page also carries the navbar back to Login and Home, so the graph above shows the main flow rather than an exhaustive list of links.

The shared script

js/main.js registers one DOMContentLoaded listener. That listener calls five setup functions in order. Each function queries the DOM for the element it needs and returns early if that element is missing, which is how one script safely serves six different pages.

graph LR
  Init[DOMContentLoaded listener] --> WC[setupWordCounts]
  Init --> AS[setupAutoScrollToggle]
  Init --> LF[setupLoginForm]
  Init --> DT[setupDiscountTiles]
  Init --> SF[setupSearchFilter]
  DT --> SH[shuffle helper<br/>Fisher-Yates]

Loading

Module-to-page map

Module	Looks for	Active on
setupWordCounts	[data-wordcount-target]	every page
setupAutoScrollToggle	[data-auto-scroll]	history.html
setupLoginForm	#loginForm	index.html
setupDiscountTiles	[data-discount-tile]	discount.html
setupSearchFilter	#itemSearch	catalog.html

Styling notes

css/style.css holds the whole visual layer. CSS custom properties at the top define the brand palette. The hero badge floats with a keyframe animation, the ad cards have a sweep-and-pulse effect, and the discount tiles flip in 3D using transform-style: preserve-3d and a rotateY(180deg) on the .flipped class. One media query at 768px tightens the hero padding and navbar text for small screens.