AMA Computer College La Union Student WiFi Portal

A clean, responsive captive portal website for AMA Computer College La Union student WiFi access. The page is built with simple static files, so it can be hosted on most routers, hotspot gateways, local servers, or basic web hosting setups.

The design is meant to feel official, trustworthy, and easy to use on phones. It includes a school-branded welcome area, student login form, WiFi reminders, optional logo support, optional background image support, and clear places to edit captive portal settings.

Features

• Responsive layout for phones, tablets, and desktop screens
• Professional school-style design for student WiFi login
• Separate html, css, js, and pictures structure
• No external libraries, fonts, CDN files, or build tools required
• Optional logo support with pictures/ama-logo.png
• Optional campus/background image support with pictures/campus.jpg
• Easy captive portal edit points for gateway login URL and form field names
• Small JavaScript helper for current year and optional missing images

Project Structure

ama-captive-portal/
|-- index.html
|-- README.md
|-- description.lua
|-- topics.lua
|-- css/
|   `-- styles.css
|-- js/
|   `-- app.js
`-- pictures/
    `-- README.md

Quick Start

1. Open index.html in a browser to preview the portal.
2. Edit the captive portal settings inside index.html.
3. Add optional branding images to the pictures folder.
4. Upload the full ama-captive-portal folder contents to your router, hotspot gateway, or web host.

Captive Portal Setup

Before using this on a live network, update the form settings in index.html:

<form class="login-form" action="#" method="post">

Change action="#" to the login URL required by your captive portal system.

The default input field names are:

name="username"
name="password"

If your router or gateway expects different field names, rename them in index.html.

The Continue to Internet button is also a placeholder:

<a class="button secondary-button" href="#" id="continueLink">Continue to Internet</a>

Replace href="#" with your approved passthrough URL, or remove the button if your portal does not allow guest/continue access.

Branding

Add a school logo here:

pictures/ama-logo.png

Add a campus or school background image here:

pictures/campus.jpg

If these files are missing, the page still works. It will use the built-in AMA text mark and a clean blue background.

Customization

Most visual settings are in css/styles.css near the top:

:root {
  --primary: #0f3f8f;
  --primary-dark: #082b63;
  --accent: #f4c430;
}

You can update the colors, spacing, background image, and card styling from there.

Common text edits are in index.html, including:

• School name
• Welcome message
• Login labels
• Help email
• WiFi reminders
• Footer text

Files for GitHub

This project includes two small Lua files that can be used by automation scripts or copied into repository metadata workflows:

• description.lua - short repository description
• topics.lua - suggested GitHub topics

Deployment Notes

This is a static website. It does not require Node.js, PHP, Python, a database, or a build step.

For captive portal systems, upload these files together so the relative links continue to work:

• index.html
• css/styles.css
• js/app.js
• pictures/

Keep the folder paths unchanged unless you also update the links inside index.html and css/styles.css.