Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
A white screen tool is a simple utility that turns your browser into a blank, fullscreen white canvas. It’s surprisingly useful:
In this quick tutorial, you’ll build your own white screen page using just HTML, CSS, and JavaScript — no libraries or frameworks required.
?️ Step 1: Create the HTML
We’ll start with a minimal structure and a button that will trigger the white screen mode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>White Screen Tool</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<button class="button" onclick="goWhiteScreen()">Go Fullscreen White</button>
<script src="script.js"></script>
</body>
</html>
? Step 2: Style the Page with CSS
We’ll make the button look nice and set up a class to make the background white when activated.
/* styles.css */
body {
font-family: sans-serif;
text-align: center;
padding: 2rem;
background: #f9f9f9;
color: #333;
}
.button {
padding: 1rem 2rem;
font-size: 1.2rem;
background-color: #0077cc;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
.button:hover {
background-color: #005fa3;
}
.white-mode {
background-color: white;
color: white;
}
? Step 3: Add JavaScript to Go Fullscreen
We’ll add a small script that applies the white-mode class and uses the Fullscreen API.
// script.js
function goWhiteScreen() {
document.body.classList.add("white-mode");
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
}
}
You’re Done! Try It Live
You now have a fully working white screen tool. Click the button to test it — it goes fullscreen and turns the screen white.
? Want a full‑featured version with dark mode toggle and zero distractions?
Bonus Ideas
Want to expand on this? Here are a few suggestions:
Final Thoughts
Sometimes the simplest tools are the most effective. This project is a great starter for experimenting with the Fullscreen API, toggling styles, and learning how to build clean utility tools with just a few lines of code.
Feel free to fork it, enhance it, and share your version!
- ? Photographers use it for lighting.
- ? Developers use it to test screens.
- ? Some use it to brighten their room or reduce distractions.
In this quick tutorial, you’ll build your own white screen page using just HTML, CSS, and JavaScript — no libraries or frameworks required.
?️ Step 1: Create the HTML
We’ll start with a minimal structure and a button that will trigger the white screen mode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>White Screen Tool</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<button class="button" onclick="goWhiteScreen()">Go Fullscreen White</button>
<script src="script.js"></script>
</body>
</html>
? Step 2: Style the Page with CSS
We’ll make the button look nice and set up a class to make the background white when activated.
/* styles.css */
body {
font-family: sans-serif;
text-align: center;
padding: 2rem;
background: #f9f9f9;
color: #333;
}
.button {
padding: 1rem 2rem;
font-size: 1.2rem;
background-color: #0077cc;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
.button:hover {
background-color: #005fa3;
}
.white-mode {
background-color: white;
color: white;
}
? Step 3: Add JavaScript to Go Fullscreen
We’ll add a small script that applies the white-mode class and uses the Fullscreen API.
// script.js
function goWhiteScreen() {
document.body.classList.add("white-mode");
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
}
}
You’re Done! Try It LiveYou now have a fully working white screen tool. Click the button to test it — it goes fullscreen and turns the screen white.
? Want a full‑featured version with dark mode toggle and zero distractions?
Bonus Ideas
Want to expand on this? Here are a few suggestions:
- ? Add a dark mode toggle.
Use keyboard shortcuts to toggle white mode.- ?️ Auto-enable fullscreen when the page loads.
Final Thoughts
Sometimes the simplest tools are the most effective. This project is a great starter for experimenting with the Fullscreen API, toggling styles, and learning how to build clean utility tools with just a few lines of code.
Feel free to fork it, enhance it, and share your version!