first commit

2025-05-26 20:32:45 -04:00 · 2025-05-26 20:32:45 -04:00 · 0fb614a551
commit 0fb614a551
4 changed files with 152 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -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. 
--- a/index.html
+++ b/index.html
@ -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> 
--- a/script.js
+++ b/script.js
@ -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(); 
--- a/styles.css
+++ b/styles.css
@ -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); }
+}