first commit
This commit is contained in:
commit
0fb614a551
4 changed files with 152 additions and 0 deletions
20
README.md
Normal file
20
README.md
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
# Is My Internet Working?
|
||||||
|
|
||||||
|
A super simple website that tells you if your internet is working. That's it. No fancy stuff.
|
||||||
|
|
||||||
|
## What it does
|
||||||
|
|
||||||
|
- Shows "Yes" by default (because we're optimistic)
|
||||||
|
- Actually checks your internet connection by pinging Google
|
||||||
|
- Updates every 5 seconds
|
||||||
|
- Looks pretty in dark mode
|
||||||
|
- Has some cool animations
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
1. Open `index.html` in your browser
|
||||||
|
2. That's it. You're done.
|
||||||
|
|
||||||
|
## Why?
|
||||||
|
|
||||||
|
Because sometimes you just need to know if it's your internet or if the website is actually down.
|
||||||
23
index.html
Normal file
23
index.html
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Is My Internet Working?</title>
|
||||||
|
<!-- styles -->
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- main container -->
|
||||||
|
<div class="container">
|
||||||
|
<!-- title -->
|
||||||
|
<h1 class="title">Is My Internet Working?</h1>
|
||||||
|
<!-- status box -->
|
||||||
|
<div class="status-container">
|
||||||
|
<span id="status" class="status">Yes</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- scripts -->
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
31
script.js
Normal file
31
script.js
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
// grab the status element from the DOM
|
||||||
|
const statusElement = document.getElementById('status');
|
||||||
|
|
||||||
|
// check if we can actually reach the internet
|
||||||
|
// using google's favicon as a lightweight ping target
|
||||||
|
async function checkInternetConnection() {
|
||||||
|
try {
|
||||||
|
// try to fetch google's favicon - if this works, we're online
|
||||||
|
const response = await fetch('https://www.google.com/favicon.ico', {
|
||||||
|
mode: 'no-cors', // don't care about CORS for this
|
||||||
|
cache: 'no-cache', // don't cache this request
|
||||||
|
timeout: 5000 // 5 second timeout
|
||||||
|
});
|
||||||
|
|
||||||
|
// we're online! update the UI
|
||||||
|
statusElement.textContent = 'Yes';
|
||||||
|
statusElement.classList.add('online');
|
||||||
|
statusElement.classList.remove('offline');
|
||||||
|
} catch (error) {
|
||||||
|
// welp, looks like we're offline
|
||||||
|
statusElement.textContent = 'No';
|
||||||
|
statusElement.classList.add('offline');
|
||||||
|
statusElement.classList.remove('online');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// check every 5 seconds
|
||||||
|
setInterval(checkInternetConnection, 5000);
|
||||||
|
|
||||||
|
// do the first check right away
|
||||||
|
checkInternetConnection();
|
||||||
78
styles.css
Normal file
78
styles.css
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
/* reset some default browser styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* main page styles */
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
background-color: #0f0f0f;
|
||||||
|
color: #ffffff;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* center everything */
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* make the title look nice and fade in */
|
||||||
|
.title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeIn 1s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* status box styling */
|
||||||
|
.status-container {
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* make the status text big and bold */
|
||||||
|
.status {
|
||||||
|
font-size: 4rem;
|
||||||
|
font-weight: bold;
|
||||||
|
display: inline-block;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* online status is green */
|
||||||
|
.status.online {
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* offline status is red and shakes */
|
||||||
|
.status.offline {
|
||||||
|
color: #f44336;
|
||||||
|
animation: shake 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fade in animation for the title */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* shake animation for when we go offline */
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% { transform: translateX(0); }
|
||||||
|
25% { transform: translateX(-10px); }
|
||||||
|
75% { transform: translateX(10px); }
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue