INFORMATION & CODE

Coming Soon Page

What the Code Does

This code is a complete, single-file HTML webpage designed as a retro-styled "Coming Soon" splash page. It features an atmospheric background image with a grayscale filter, a semi-transparent dark content box, and a distinct arcade/pixel-art aesthetic utilizing Google Fonts ("Press Start 2P" and "VT323").

Beyond its visual styling, the page includes a short JavaScript program that dynamically calculates and displays the current "edition" or season based on the user's local date. It then generates a projected premiere date for the upcoming season's first episode, ensuring the information on the page stays relevant automatically.

How the code works

The code is broken down into three main parts: the Document Structure (HTML), the Styling (CSS), and the Dynamic Logic (JavaScript).

1. The HTML Structure

• Head Section: Defines the character encoding and mobile responsiveness (viewport). It links to the custom favicon, imports two retro Google Fonts, and includes a FontAwesome script for potential icon usage.
• Body Section: Contains a main container (.coming-soon-page) that holds a centered text box (.text-box). Inside the text box are standard heading tags for titles and two empty structural elements (<h4 id="season"> and <p id="start-date">) which are reserved for the JavaScript to populate.

2. The CSS Styling

• Layout: The body is set to take up the full width and height of the screen (100vw and 100vh) with no margin or padding. Flexbox is used on both the page wrapper and the text box to perfectly center the content both vertically and horizontally.
• Background: It loads a remote image (autumn-road.jpg) scaled to cover the entire screen (background-size: cover), prevents it from repeating, and applies a grayscale(100%) CSS filter to give it a muted, monochromatic look.
• Retro Theme: The text box features a semi-transparent dark background ( rgba(0, 0, 0, 0.5) ) and a bright green inset border (border: 4px inset #00cc00). The typography relies heavily on the "Press Start 2P" font for headings and "VT323" for paragraph text, utilizing high-contrast colors like white, cyan, and bright green to mimic classic 8-bit video game interfaces.

3. The JavaScript Logic

• DOM Selection: It grabs references to the season header and start-date paragraph using their respective IDs.
• Date Calculation: It initializes a new JavaScript Date object (d) to get the current date. It then retrieves the current month using d.getMonth() (which returns a number from 0 to 11).
• Season Mapping: The code adds 2 to the current month value and evaluates it in a series of if/else statements to determine which seasonal edition to display (Spring, Summer, Autumn, or Winter) and assigns a corresponding day/month integer (sd) for the start date. (Note: Due to the math (d.getMonth() + 2), the script offsets the traditional calendar quarters slightly for its specific logic).
• Text Injection: Finally, it injects the determined season name into the <h4> tag and dynamically constructs a release date string—combining a hardcoded day, the calculated month variable (sd), and the current four-digit year (d.getFullYear())—into the <p> tag.

How to Use the Code

Using this code is very straightforward because everything (HTML, CSS, and JavaScript) are in seperate files.

1. Save the Files: Copy the entire code block of HTML and paste it into a plain text editor (such as Notepad, TextEdit, VS Code, or Sublime Text). Save the file with an .html extension, for example: index.html.
2. Save CSS File: Copy the entire code block of CSS and paste it into your plain text editor. Save the file with an .css extension, for example: styles.css.
3. Save Javascript File: Copy the entire code block of Javascript and paste it into your plain text editor. Save the file with an .js extension, for example: scripts.js.
4. Open in a Browser: Double-click the saved index.html file, or right-click it and choose to open it in any modern web browser (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari).
5. Customize the Content:
   • To change the main heading, locate <h2>Coming Soon</h2> in the HTML and replace "Coming Soon" with your own text.
   • To change the sub-heading, modify <h3>Watching Nature</h3>.
   • To change the background image, replace the URL inside background-image: url("...") in the CSS section with a direct link to your own image.
6. Hosting: You can upload this single file to any web hosting provider, GitHub Pages, or Netlify to use it immediately as a live "Coming Soon" or maintenance placeholder page for a website.