Mikrotik Hotspot Status Page

This project is a custom HTML page for a Mikrotik Hotspot status interface, designed for Seascape Palace. It displays user session details (IP address, bytes up/down, connection time) and provides links to contact the Front Desk, Telegram, the hotel website, Facebook, and Google Maps.

Features

• Displays dynamic session information using Mikrotik placeholders ($(ip), $(username), etc.).
• Links to:
  • Services 24/7: tel:+877 108023541
  • Telegram: https://t.me/telegram
  • Hotel Website: https://website.com/
  • Facebook: Placeholder link
  • Google Maps: Placeholder link
• Responsive design using Bootstrap 5.3.0.
• Advertisement popup support for Mikrotik's advert-pending feature.
• Logout functionality with popup window.

Project Structure

mikrotik-hotspot/ ├── css/ │ └── theme.css ├── img/ │ ├── bg.jpg │ ├── logo.png │ ├── favicon.png │ ├── chat-support.svg │ ├── telegram_icon.png │ └── hotel_logo.png ├── js/ │ └── jquery.min.js ├── packages/ │ └── bootstrap/ │ └── libraries/ │ ├── tether.js │ ├── popper.js │ └── bootstrap.js ├── index.html └── README.md

Installation

Follow these steps to set up the project locally for testing or development.

Prerequisites

• Node.js (optional, for local server): Install from https://nodejs.org/.
• Python 3 (for local server): Usually pre-installed on macOS, or download from https://www.python.org/.
• Git: Installed on macOS via Xcode or brew install git.
• Text Editor: VS Code, Sublime Text, or similar.
• Asset Files: Obtain actual images (img/), CSS (theme.css), and JavaScript (jquery.min.js, Bootstrap dependencies).

Steps

1. Clone the Repository:

   git clone https://github.com/kaoheng1515/mikrotik-hotspot.git
   cd mikrotik-hotspot

python3 -m http.server 8000 npm install -g http-server http-server -p 8000