From a15ec61607ab423dc0ad77f4c2712b917dfd8635 Mon Sep 17 00:00:00 2001 From: Vadher Date: Sun, 19 Jul 2026 17:14:08 +0530 Subject: [PATCH] added little bit style --- backend/database/urls.json | 3 +- frontend/index.html | 68 ++++++++--------- frontend/style.css | 145 +++++++++++++++++++++++++++++++++++++ 3 files changed, 179 insertions(+), 37 deletions(-) create mode 100644 frontend/style.css diff --git a/backend/database/urls.json b/backend/database/urls.json index b5ffba9..97f53ca 100644 --- a/backend/database/urls.json +++ b/backend/database/urls.json @@ -20,5 +20,6 @@ "amazon.com", "amns.in", "missingwebsite.fake", - "randominvaliddomain12345.io" + "randominvaliddomain12345.io", + "how are you" ] \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html index effd472..1d34a3e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,50 +1,46 @@ - + - - - - + + + URL HEALTH MONITOR - + + + +
+
+
+

URL HEALTH MONITOR

- -
+

WebSocket: Connecting...

+

Page will fetch latest update every 60 second

-
-

URL HEALTH MONITOR

- -

WebSocket: Connecting...

-

Page will fetch latest update every 60 second

- -

+

-
-

Add URL

+
+

Add URL

- + - +
+
-
- +
- - - - - - - + + + + + + + + -
URLStatusStatus CodeResponse TimeError
URLStatusStatus CodeResponse TimeError
- - - - - \ No newline at end of file + +
+ + diff --git a/frontend/style.css b/frontend/style.css new file mode 100644 index 0000000..8b2e63a --- /dev/null +++ b/frontend/style.css @@ -0,0 +1,145 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial, Helvetica, sans-serif; +} + +body { + background: #f5f7fb; + color: #333; + padding: 30px; +} + +.container { + max-width: 1200px; + margin: auto; +} + +.header { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 25px; + gap: 20px; +} + +h1 { + color: #1f4e79; + margin-bottom: 15px; +} + +.info h4 { + margin: 8px 0; + font-weight: normal; +} + +#status { + margin-top: 10px; + color: #1f4e79; + font-weight: bold; +} + +.card { + background: white; + border: 1px solid #ddd; + border-radius: 8px; + padding: 18px; + width: 300px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +.card h3 { + margin-bottom: 15px; + color: #1f4e79; +} + +input { + width: 100%; + padding: 10px; + border: 1px solid #bbb; + border-radius: 5px; + margin-bottom: 10px; + font-size: 14px; +} + +input:focus { + outline: none; + border-color: #1f4e79; +} + +button { + width: 100%; + padding: 10px; + border: none; + background: #1f4e79; + color: white; + border-radius: 5px; + cursor: pointer; + font-size: 14px; + transition: 0.2s; +} + +button:hover { + background: #163a5b; +} + +table { + width: 100%; + border-collapse: collapse; + background: white; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +thead { + background: #1f4e79; + color: white; +} + +th, +td { + padding: 12px; + border: 1px solid #ddd; + text-align: center; +} + +tbody tr:nth-child(even) { + background: #f8f8f8; +} + +tbody tr:hover { + background: #eef5ff; +} + +#websocket_status { + font-weight: bold; +} + +.up { + color: #1b8f3a; + font-weight: bold; +} + +.down { + color: #d32f2f; + font-weight: bold; +} + +@media (max-width: 768px) { + body { + padding: 15px; + } + + .header { + flex-direction: column; + } + + .card { + width: 100%; + } + + table { + display: block; + overflow-x: auto; + } +} \ No newline at end of file