Ever wondered about the magic behind those WiFi login pages that greet you at places like Starbucks? You know the drill – you sip your coffee, pull out your laptop or smartphone, connect to the WiFi, and voilà! Suddenly, you're redirected to a page where you need to log in or accept terms before diving into the digital realm. It's a seamless experience we've all grown accustomed to, but have you ever thought about creating one yourself? Well, probably not. But I did! And there’s a good reason why.

I live in Ruppin street, and as a joke, I call my apartment the “Royal Ruppin Relax” as if it was some kind of a boutique hotel. I wanted to create my own customized WiFi login portal, so that guests at my home would get a surprise when they log in. That's what we're diving into today: In this tutorial, I’ll show you how to build and customize your own captive portal – a digital gateway that not only controls access but also acts as a canvas for your creativity, and a great conversation starter! With a Raspberry Pi and a bit of AI magic, you can transform your mundane WiFi login into an engaging, personalized experience.

But first, What is a Captive Portal?

The term might sound technical, but in essence, it's the official name for those login pages you encounter when connecting to a public WiFi network. Most captive portals are like virtual gatekeepers, ensuring that only authorized users gain access to a WiFi network. But this interface can be a powerful tool, not just for authentication, but also for conveying information and engaging users creatively.

Capabilities of a Captive Portal:

• Authentication: Captive portals authenticate users by prompting them to enter login credentials or accept terms and conditions. This process ensures that the network is used responsibly and securely.
• Customization: One of the features of a captive portal is its customization potential. Businesses often use captive portals to showcase their branding, display advertisements, or provide essential information.
• Access Control: Captive portals enable administrators to control the type of access users have to the internet. For instance, they can restrict certain websites, limit bandwidth, or provide different levels of access based on user roles. So technically, you can configure it such that your devices are prioritized bandwidth wise on your WiFi network, but that’s up to you 😉

Now, let's move forward and create our own captivating captive portal. The creative journey begins!

You Will Need:

Before we dive into creating your personalized captive portal, let's gather the essentials:

• Raspberry Pi: The heart of your project, this versatile microcomputer will serve as the central hub for your captive portal setup.
• MicroSD Card: You'll need a microSD card (at least 16GB) to store the operating system and other necessary files.
• Power Supply: Ensure you have a compatible power supply for your Raspberry Pi to keep it running smoothly.
• Ethernet Cable: You'll require an Ethernet cable to establish a wired connection between your Raspberry Pi and your internet router.

Why Raspberry Pi?

In the landscape of network devices, not all routers are created equal. Many standard routers lack native support for captive portals, making it challenging to implement this feature seamlessly. When faced with this limitation, we turn to Raspberry Pi as a solution. This credit-card-sized, affordable computer will allow you to run complimentary network related software, and overcome the constraints of your existing router.

If you never used your raspberry pi before, set it up according to the simple instructions on the official website. Our next step would be installing RaspAP.

RaspAP: Simplifying WiFi Management

Now that you have your Raspberry Pi ready, it's time to introduce RaspAP. RaspAP is an open-source software that simplifies the process of setting up a WiFi access point on your Raspberry Pi. Think of it as the bridge between your Raspberry Pi and the devices that will connect to your WiFi. To install RaspAP, simply follow the simple instructions on the official website.

Why Do We Need RaspAP for a Captive Portal?

‍To create a captive portal, we need a WiFi network that's entirely under our control. RaspAP allows you to do just that: While Raspberry Pi provides the hardware backbone, RaspAP adds the user-friendly interface, making it incredibly easy to configure your WiFi network settings. You can customize the network name (SSID), set up passwords, and manage the connection preferences. RaspAP handles the complexities of access points, security protocols, and IP addresses, ensuring that the WiFi network your guests connect to, operates smoothly and securely.

Why Is an Ethernet Cable Needed?

‍You might be wondering about the necessity of an Ethernet cable in a wireless setup. When you connect your Raspberry Pi to your router using an Ethernet cable, you establish a stable, wired connection. This wired connection serves as the foundation upon which you'll build your customized WiFi network.

Introduction to Nodogsplash

Now that you've set up your WiFi access point with RaspAP, it's time to introduce Nodogsplash into the mix. Nodogsplash is a high-performance Captive Portal and the key player in bringing our idea to life. Nodogsplash offers by default a simple splash page that we will customize later. Install and configure Nodogsplash by following the easy tutorial on RaspAP’s official documentation. If you are successful - you will see this page:

Customizing the Splash Page

Here comes the exciting part! Now we will customize the captive portal page to our liking. Customizing the splash page might seem like a challenging task for two reasons:

1. Nodogsplash Rules: Nodogsplash has specific rules that the splash page must adhere to, ensuring functionality. Deviating from these rules might result in our captive portal not working, making it crucial to comply with them.
2. CDCs force us to work with HTML and CSS only, no JS. A CDC (Captive Detection Client) is a component in operating systems or devices that helps in detecting whether a network has a captive portal. When a device connects to a WiFi network, the CDC functionality checks if the network connection is restricted by a captive portal. If it detects a captive portal, the device redirects the user to the portal's login or authentication page. Most of the CDCs don’t allow JS or even hrefs, so we will have to work with HTML and CSS only to make a beautiful captive portal. Manipulating HTML & CSS requires a good understanding of their syntax, making customization challenging for many users.

To overcome these challenges, we will use some ✨ AI magic ✨.

First, we will obtain a stunning boutique hotel picture with Leonardo AI: an innovative tool that generates realistic and visually appealing images from prompts. Here’s how you can use it:

1. Visit Leonardo AI: Go to the Leonardo AI website and click on “AI Image Generation”
2. **Generate Your Image: **Using Leonardo AI's intuitive interface, generate an image that resonates with your captive portal's ambiance. You can tweak various settings until you find the perfect image. My prompt was: “A beautiful boutique hotel next to the sea, palms and luxurious atmosphere, beautiful day”
3. Download Your Image: Once satisfied with the generated image, download it to your computer. This stunning visual will serve as the backdrop for your customized splash page.

Now that we have the image, we can customize the default HTML and CSS. To do that we will use Fine’s AI agents, that can quickly get us to the point:

1. Deploy an HTML Agent to Your workspace: Open Fine and click “Deploy Agent”. Upload the YAML file of the HTML Agent, found here. This agent specializes in HTML and CSS tasks.
2. Create a project: Place the default Nodogsplash files in a folder, together with your generated image. Run git init inside the folder and then add it as a new project to Fine.
3. Create a Notebook and specify the changes you want to make: The agents work according to a plan specified in a notebook. I wrote a short description for my wanted task and connected the notebook to the project.
4. Run the agent, and make some final tweaks: The agent will start changing the HTML and CSS pages according to the specifications in your notebook. If it isn’t exactly to your liking, make the final changes and that’s it!

With Fine’s AI agents, the process of customizing your splash page becomes intuitive and efficient. You don’t need to deal with HTML and CSS, and you don’t need to learn the rules of Nodogsplash. You easily transform a basic login interface into a visually appealing and engaging portal that captivates users, providing a memorable WiFi experience.

Test Your Customized Page:

After Fine generates the code, test your customized splash page. To do that, upload your files to the raspberry pi and replace the default splash page files in

/etc/Nodogsplash/htdocs/

Ensure that it complies with Nodogsplash rules and provides a seamless user experience. Make any necessary adjustments until you achieve the desired result.

Final Words

By integrating Raspberry Pi, RaspAP, Nodogsplash, Fine, and Leonardo AI, you've not only created a functional captive portal but also unleashed your creativity without the headache of coding intricacies. This project not only enhances your technical skills but also transforms your WiFi experience at home. Feel free to experiment further and explore the endless possibilities of customization, all thanks to the power of innovative AI technology.

Now it's your turn to improve your home WiFi experience! Get creative, get connected, and let your imagination run wild, AI will take care of the rest!