From 5e83baf308791649b6ee2843c3dbe2ac43e9a785 Mon Sep 17 00:00:00 2001 From: Ronnie Date: Mon, 26 May 2025 20:32:45 -0400 Subject: [PATCH 1/8] first commit --- README.md | 20 ++++++++++++++ index.html | 23 ++++++++++++++++ script.js | 31 ++++++++++++++++++++++ styles.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 152 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..db1f0ab --- /dev/null +++ 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. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1bd1385 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + Is My Internet Working? + + + + + +
+ +

Is My Internet Working?

+ +
+ Yes +
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..aa6c7e8 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4e544fc --- /dev/null +++ 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); } +} \ No newline at end of file From 0fb614a55191bc9864c6ee211e9a4d40b336654b Mon Sep 17 00:00:00 2001 From: Ronniie Date: Mon, 26 May 2025 20:32:45 -0400 Subject: [PATCH 2/8] first commit --- README.md | 20 ++++++++++++++ index.html | 23 ++++++++++++++++ script.js | 31 ++++++++++++++++++++++ styles.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 152 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..db1f0ab --- /dev/null +++ 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. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1bd1385 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + Is My Internet Working? + + + + + +
+ +

Is My Internet Working?

+ +
+ Yes +
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..aa6c7e8 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4e544fc --- /dev/null +++ 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); } +} \ No newline at end of file From b471a4df40a9ac596a20a6f280d327fc429ad36f Mon Sep 17 00:00:00 2001 From: Ronnie Date: Mon, 26 May 2025 20:35:46 -0400 Subject: [PATCH 3/8] Added meta data --- index.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/index.html b/index.html index 1bd1385..79b23c9 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,30 @@ Is My Internet Working? + + + + + + + + + + + + + + + + + + + + + + + + From fc1391fef35ab8e8ad1b7e8639437a6112165e84 Mon Sep 17 00:00:00 2001 From: Ronniie Date: Mon, 26 May 2025 20:35:46 -0400 Subject: [PATCH 4/8] Added meta data --- index.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/index.html b/index.html index 1bd1385..79b23c9 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,30 @@ Is My Internet Working? + + + + + + + + + + + + + + + + + + + + + + + + From 5c093c14ff48256a2294fddc99c662b9d77861e1 Mon Sep 17 00:00:00 2001 From: Ronnie <30136547+Ronniie@users.noreply.github.com> Date: Mon, 26 May 2025 20:36:23 -0400 Subject: [PATCH 5/8] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..0306f21 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +ismyinternetworking.ronniie.dev \ No newline at end of file From ee9cb24b7115966187d5271a7897c01a9e016a06 Mon Sep 17 00:00:00 2001 From: Ronniie Date: Mon, 26 May 2025 20:36:23 -0400 Subject: [PATCH 6/8] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..0306f21 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +ismyinternetworking.ronniie.dev \ No newline at end of file From 6894a1f36139380c21517fcf56d61f4a5f38bf11 Mon Sep 17 00:00:00 2001 From: Ronnie Date: Mon, 26 May 2025 20:43:41 -0400 Subject: [PATCH 7/8] Added Favicon and SEO stuff --- index.html | 46 +++++++++++++++++++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 79b23c9..0a352bb 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,12 @@ - Is My Internet Working? + Is My Internet Working? | Simple Internet Connection Checker + + + + + @@ -11,23 +16,50 @@ - - + + + + + + + - - + + + - - + + + + + + + + From 042202c9132a86c230df4bd6a1f99769358865e4 Mon Sep 17 00:00:00 2001 From: Ronniie Date: Mon, 26 May 2025 20:43:41 -0400 Subject: [PATCH 8/8] Added Favicon and SEO stuff --- index.html | 46 +++++++++++++++++++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 79b23c9..0a352bb 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,12 @@ - Is My Internet Working? + Is My Internet Working? | Simple Internet Connection Checker + + + + + @@ -11,23 +16,50 @@ - - + + + + + + + - - + + + - - + + + + + + + +