akshay/Url_monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added little bit style

Browse Source
This commit is contained in:
Vadher
2026-07-19 17:14:08 +05:30
parent 609a4efcbc
commit a15ec61607
3 changed files with 179 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/database/urls.json
+2 -1
View File
@@ -20,5 +20,6 @@
"amazon.com", "amazon.com",
"amns.in", "amns.in",
"missingwebsite.fake", "missingwebsite.fake",
"randominvaliddomain12345.io" "randominvaliddomain12345.io",
"how are you"
] ]
frontend/index.html
+19 -23
View File
@@ -1,37 +1,34 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL HEALTH MONITOR</title> <title>URL HEALTH MONITOR</title>
<script src="scripts.js" defer></script> <script src="scripts.js" defer></script>
</head> <link rel="stylesheet" href="style.css" />
</head>
<body> <body>
<div style="display:flex; justify-content:space-between; align-items:flex-start;"> <div class="container">
<div class="header">
<div> <div class="info">
<h1>URL HEALTH MONITOR</h1> <h1>URL HEALTH MONITOR</h1>
<h4>WebSocket: <span id="websocket_status">Connecting...</span></h4> <h4>WebSocket: <span id="websocket_status">Connecting...</span></h4>
<h4>Page will fetch latest update every 60 second </h4> <h4>Page will fetch latest update every 60 second</h4>
<h4 id="status"></h4> <h4 id="status"></h4>
</div> </div>
<div style="border:1px solid #ccc;padding:10px;border-radius:5px;"> <div class="card">
<h3>Add URL</h3> <h3>Add URL</h3>
<input type="text" id="urlInput" placeholder="https://example.com"> <input type="text" id="urlInput" placeholder="https://example.com" />
<button id="addBtn"> <button id="addBtn">Add URL</button>
Add </div>
</button>
</div> </div>
</div> <table>
<table border="1">
<thead> <thead>
<tr> <tr>
<th>URL</th> <th>URL</th>
@@ -41,10 +38,9 @@
<th>Error</th> <th>Error</th>
</tr> </tr>
</thead> </thead>
<tbody id="content-display"></tbody> <tbody id="content-display"></tbody>
</table> </table>
</div>
</body>
</body>
</html> </html>
frontend/style.css
+145
View File
@@ -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;
}
}