hw_partner
/
urmic_mpeg2_transcoder
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui update

This commit is contained in:
Devdatt Bhatt 2026-06-06 10:35:13 +00:00
parent e2a96efa91
commit 38ae0e3043
4 changed files with 646 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
html/all.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

31
html/header.php
View File

@ -1,3 +1,4 @@
<!-- header.php -->
<?php <?php
/* /*
@ -19,30 +20,34 @@ include 'static.php';
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ShreeBhattJi</title> <title>ShreeBhattJi - URMI Digital Transcoder</title>
<script src="chart.js"></script> <script src="chart.js"></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="all.min.css">
</head> </head>
<body> <body>
<header class="top-header-1"><a href="index.php" style="color:white; text-decoration:none;">URMI Digital Transcoder</a></header> <header class="top-header-1">
<a href="index.php" style="color:white; text-decoration:none;">
<i class="fas fa-robot"></i> URMI Digital Transcoder
</a>
</header>
<header class="top-header-2"> <header class="top-header-2">
<nav aria-label="Top navigation"> <nav aria-label="Top navigation">
<a href="https://learn.urmic.org/" target="_blank">Tutorials</a> <a href="https://learn.urmic.org/" target="_blank"><i class="fas fa-graduation-cap"></i> Tutorials</a>
<a href="about_us.php">About Us</a> <a href="about_us.php"><i class="fas fa-info-circle"></i> About Us</a>
<a href="contact_us.php">Contact Us ( Free Service )</a> <a href="contact_us.php"><i class="fas fa-envelope"></i> Contact Us</a>
<a href="premium_service.php">Premium Service</a> <a href="premium_service.php"><i class="fas fa-crown"></i> Premium Service</a>
</nav> </nav>
</header> </header>
<header class="site-header"> <header class="site-header">
<nav aria-label="Top navigation"> <nav aria-label="Top navigation">
<a href="input.php">Input</a> <a href="input.php"><i class="fas fa-file-upload"></i> Input</a>
<a href="index.php">Monitor</a> <a href="index.php"><i class="fas fa-tachometer-alt"></i> Monitor</a>
<a href="firewall.php">Firewall</a> <a href="firewall.php"><i class="fas fa-shield-alt"></i> Firewall</a>
<a href="firmware.php">Firmware</a> <a href="firmware.php"><i class="fas fa-microchip"></i> Firmware</a>
<a href="password.php">Password</a> <a href="password.php"><i class="fas fa-lock"></i> Password</a>
<a href="logout.php">Logout</a> <a href="logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
</nav> </nav>
</header> </header>

155
html/index.php
View File

@ -1,3 +1,4 @@
<!-- index.php -->
<?php <?php
/* /*
@ -14,27 +15,27 @@ include 'header.php'; ?>
<div class="containerindex"> <div class="containerindex">
<div class="grid"> <div class="grid">
<div class="card"> <div class="card">
<h3>CPU (%)</h3> <h3><i class="fas fa-microchip"></i> CPU (%)</h3>
<div class="chart-wrap"><canvas id="cpuChart"></canvas></div> <div class="chart-wrap"><canvas id="cpuChart"></canvas></div>
</div> </div>
<div class="card"> <div class="card">
<h3>RAM (%)</h3> <h3><i class="fas fa-memory"></i> RAM (%)</h3>
<div class="chart-wrap"><canvas id="ramChart"></canvas></div> <div class="chart-wrap"><canvas id="ramChart"></canvas></div>
</div> </div>
<div class="card wide"> <div class="card wide">
<h3>Network (KB/s)</h3> <h3><i class="fas fa-network-wired"></i> Network (KB/s)</h3>
<div class="chart-wrap"><canvas id="netChart"></canvas></div> <div class="chart-wrap"><canvas id="netChart"></canvas></div>
</div> </div>
<div class="card wide"> <div class="card wide">
<h3>Disk I/O (KB/s) & Disk %</h3> <h3><i class="fas fa-hdd"></i> Disk I/O (KB/s) & Disk %</h3>
<div class="chart-wrap"><canvas id="diskChart"></canvas></div> <div class="chart-wrap"><canvas id="diskChart"></canvas></div>
</div> </div>
</div> </div>
<div style="margin-top:12px; color:#9fb2d6; display:flex; justify-content:space-between;"> <div style="margin-top:12px; color:#a9c7ff; display:flex; justify-content:space-between; font-size:14px;">
<div>Last update: <span id="lastUpdate">—</span></div> <div>Last update: <span id="lastUpdate" class="pulse">—</span></div>
<div>CPU: <span id="lastCpu">—</span>% · RAM: <span id="lastRam">—</span>% · In: <span id="lastIn">—</span>KB/s · <div>CPU: <span id="lastCpu" class="pulse">—</span>% · RAM: <span id="lastRam" class="pulse">—</span>% · In: <span id="lastIn" class="pulse">—</span>KB/s ·
Out: <span id="lastOut">—</span>KB/s</div> Out: <span id="lastOut" class="pulse">—</span>KB/s</div>
</div> </div>
<br> <br>
<br> <br>
@ -57,7 +58,11 @@ include 'header.php'; ?>
label: 'CPU %', label: 'CPU %',
data: [], data: [],
fill: false, fill: false,
tension: 0.2 borderColor: '#00a8ff',
backgroundColor: 'rgba(0, 168, 255, 0.1)',
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 6
}] }]
}, },
options: { options: {
@ -66,11 +71,33 @@ include 'header.php'; ?>
scales: { scales: {
y: { y: {
min: 0, min: 0,
max: 100 max: 100,
grid: {
color: 'rgba(92, 158, 255, 0.1)'
},
ticks: {
color: '#a9c7ff'
}
},
x: {
grid: {
color: 'rgba(92, 158, 255, 0.1)'
},
ticks: {
color: '#a9c7ff'
}
}
},
plugins: {
legend: {
labels: {
color: '#a9c7ff'
}
} }
} }
} }
}); });
const ramChart = new Chart(document.getElementById('ramChart').getContext('2d'), { const ramChart = new Chart(document.getElementById('ramChart').getContext('2d'), {
type: 'line', type: 'line',
data: { data: {
@ -79,7 +106,11 @@ include 'header.php'; ?>
label: 'RAM %', label: 'RAM %',
data: [], data: [],
fill: false, fill: false,
tension: 0.2 borderColor: '#00b8ff',
backgroundColor: 'rgba(0, 184, 255, 0.1)',
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 6
}] }]
}, },
options: { options: {
@ -88,11 +119,33 @@ include 'header.php'; ?>
scales: { scales: {
y: { y: {
min: 0, min: 0,
max: 100 max: 100,
grid: {
color: 'rgba(92, 158, 255, 0.1)'
},
ticks: {
color: '#a9c7ff'
}
},
x: {
grid: {
color: 'rgba(92, 158, 255, 0.1)'
},
ticks: {
color: '#a9c7ff'
}
}
},
plugins: {
legend: {
labels: {
color: '#a9c7ff'
}
} }
} }
} }
}); });
const netChart = new Chart(document.getElementById('netChart').getContext('2d'), { const netChart = new Chart(document.getElementById('netChart').getContext('2d'), {
type: 'line', type: 'line',
data: { data: {
@ -101,13 +154,21 @@ include 'header.php'; ?>
label: 'Net In (KB/s)', label: 'Net In (KB/s)',
data: [], data: [],
fill: false, fill: false,
tension: 0.2 borderColor: '#00a8ff',
backgroundColor: 'rgba(0, 168, 255, 0.1)',
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 6
}, },
{ {
label: 'Net Out (KB/s)', label: 'Net Out (KB/s)',
data: [], data: [],
fill: false, fill: false,
tension: 0.2 borderColor: '#00b8ff',
backgroundColor: 'rgba(0, 184, 255, 0.1)',
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 6
} }
] ]
}, },
@ -116,11 +177,33 @@ include 'header.php'; ?>
maintainAspectRatio: false, maintainAspectRatio: false,
scales: { scales: {
y: { y: {
beginAtZero: true beginAtZero: true,
grid: {
color: 'rgba(92, 158, 255, 0.1)'
},
ticks: {
color: '#a9c7ff'
}
},
x: {
grid: {
color: 'rgba(92, 158, 255, 0.1)'
},
ticks: {
color: '#a9c7ff'
}
}
},
plugins: {
legend: {
labels: {
color: '#a9c7ff'
}
} }
} }
} }
}); });
const diskChart = new Chart(document.getElementById('diskChart').getContext('2d'), { const diskChart = new Chart(document.getElementById('diskChart').getContext('2d'), {
type: 'line', type: 'line',
data: { data: {
@ -129,20 +212,32 @@ include 'header.php'; ?>
label: 'Disk Read (KB/s)', label: 'Disk Read (KB/s)',
data: [], data: [],
fill: false, fill: false,
tension: 0.2 borderColor: '#00a8ff',
backgroundColor: 'rgba(0, 168, 255, 0.1)',
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 6
}, },
{ {
label: 'Disk Write (KB/s)', label: 'Disk Write (KB/s)',
data: [], data: [],
fill: false, fill: false,
tension: 0.2 borderColor: '#00b8ff',
backgroundColor: 'rgba(0, 184, 255, 0.1)',
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 6
}, },
{ {
label: 'Disk %', label: 'Disk %',
data: [], data: [],
yAxisID: 'percent', yAxisID: 'percent',
fill: false, fill: false,
tension: 0.2 borderColor: '#00e0ff',
backgroundColor: 'rgba(0, 224, 255, 0.1)',
tension: 0.4,
pointRadius: 0,
pointHoverRadius: 6
} }
] ]
}, },
@ -152,7 +247,13 @@ include 'header.php'; ?>
scales: { scales: {
y: { y: {
position: 'left', position: 'left',
beginAtZero: true beginAtZero: true,
grid: {
color: 'rgba(92, 158, 255, 0.1)'
},
ticks: {
color: '#a9c7ff'
}
}, },
percent: { percent: {
position: 'right', position: 'right',
@ -162,8 +263,24 @@ include 'header.php'; ?>
display: false display: false
}, },
ticks: { ticks: {
color: '#a9c7ff',
callback: v => v + '%' callback: v => v + '%'
} }
},
x: {
grid: {
color: 'rgba(92, 158, 255, 0.1)'
},
ticks: {
color: '#a9c7ff'
}
}
},
plugins: {
legend: {
labels: {
color: '#a9c7ff'
}
} }
} }
} }

234
html/style.css
View File

@ -1,3 +1,4 @@
/* style.css */
*, *,
*::before, *::before,
*::after { *::after {
@ -8,21 +9,32 @@
body { body {
height: 100%; height: 100%;
margin: 0; margin: 0;
background: linear-gradient(135deg, #0a1929, #0c1424);
color: #e6f0ff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} }
body { body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden;
} }
:root { :root {
--header-h: 64px; --header-h: 64px;
--header-bg: linear-gradient(90deg, #1e293b, #0f172a); --header-bg: linear-gradient(90deg, #0a1929, #0c1424);
--header-color: #e6eef8; --header-color: #e6f0ff;
--footer-h: 52px; --footer-h: 52px;
--footer-bg: linear-gradient(90deg, #1e293b, #0f172a); --footer-bg: linear-gradient(90deg, #0a1929, #0c1424);
--footer-color: #e6eef8; --footer-color: #e6f0ff;
--card-bg: rgba(13, 27, 45, 0.7);
--card-border: rgba(92, 158, 255, 0.2);
--accent-blue: #00a8ff;
--accent-blue-light: #00b8ff;
--accent-blue-dark: #0077b6;
--text-primary: #e6f0ff;
--text-secondary: #a9c7ff;
} }
main { main {
@ -37,9 +49,11 @@
max-width: 1100px; max-width: 1100px;
margin: 12px auto; margin: 12px auto;
padding: 12px; padding: 12px;
background: #ffffff; background: var(--card-bg);
border-radius: 12px; border-radius: 16px;
box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
border: 1px solid var(--card-border);
backdrop-filter: blur(10px);
} }
.containerindex { .containerindex {
@ -47,15 +61,16 @@
margin: 12px auto; margin: 12px auto;
padding: 12px; padding: 12px;
padding-top: 160px; padding-top: 160px;
/* Adjusted for multiple headers */ background: var(--card-bg);
background: #ffffff; border-radius: 16px;
border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06); border: 1px solid var(--card-border);
backdrop-filter: blur(10px);
} }
.grid { .grid {
display: flex; display: flex;
gap: 12px; gap: 16px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
} }
@ -65,10 +80,18 @@
min-width: 300px; min-width: 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02)); background: var(--card-bg);
border-radius: 10px; border-radius: 14px;
padding: 12px; padding: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
border: 1px solid var(--card-border);
backdrop-filter: blur(10px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 168, 255, 0.25);
} }
.card.wide { .card.wide {
@ -76,8 +99,11 @@
} }
.card h3 { .card h3 {
margin: 0 0 8px 0; margin: 0 0 12px 0;
font-size: 1.3rem; font-size: 1.4rem;
font-weight: 600;
color: var(--accent-blue-light);
text-shadow: 0 0 8px rgba(0, 168, 255, 0.5);
} }
.card .chart-wrap { .card .chart-wrap {
@ -85,6 +111,9 @@
min-height: 180px; min-height: 180px;
height: 247px; height: 247px;
position: relative; position: relative;
border-radius: 10px;
overflow: hidden;
background: rgba(0, 0, 0, 0.2);
} }
.card canvas { .card canvas {
@ -95,7 +124,7 @@
.status-row { .status-row {
margin-top: 12px; margin-top: 12px;
color: #9fb2d6; color: var(--text-secondary);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 11px; font-size: 11px;
@ -136,8 +165,9 @@
background: var(--footer-bg); background: var(--footer-bg);
color: var(--footer-color); color: var(--footer-color);
z-index: 999; z-index: 999;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.18); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
font-size: 14px; font-size: 14px;
border-top: 1px solid rgba(92, 158, 255, 0.1);
} }
/* === MULTIPLE TOP HEADERS === */ /* === MULTIPLE TOP HEADERS === */
@ -149,30 +179,39 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #e6eef8; color: var(--text-primary);
font-size: 17px; font-size: 17px;
z-index: 1001; z-index: 1001;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(92, 158, 255, 0.2);
background: rgba(10, 25, 41, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
} }
.top-header-2 { .top-header-2 {
position: fixed; position: fixed;
top: 50px;
left: 0; left: 0;
right: 0; right: 0;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #e6eef8; color: var(--text-primary);
font-size: 14px; font-size: 14px;
z-index: 1001; z-index: 1001;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(92, 158, 255, 0.2);
background: rgba(10, 25, 41, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
} }
.top-header-1 { .top-header-1 {
top: 0; top: 0;
background: #0f172a; background: linear-gradient(90deg, #0a1929, #0c1424);
font-size: 20px; font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
} }
.top-header-2 { .top-header-2 {
@ -186,26 +225,42 @@
justify-content: space-between; justify-content: space-between;
padding: 0 48px; padding: 0 48px;
margin-bottom: 57px; margin-bottom: 57px;
background: linear-gradient(90deg, #0f172a, #1e293b); background: linear-gradient(90deg, #0a1929, #0c1424);
color: #e6eef8; color: var(--text-primary);
font-weight: bold;
font-size: 15px;
font-weight: 500; font-weight: 500;
font-size: 15px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(92, 158, 255, 0.2);
z-index: 999; z-index: 999;
transition: all 0.3s ease; transition: all 0.3s ease;
backdrop-filter: blur(10px);
} }
.top-header-2 nav a { .top-header-2 nav a {
margin-left: 28px; margin-left: 28px;
color: #e6eef8; color: var(--text-primary);
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: all 0.3s ease;
font-weight: bold; font-weight: 500;
position: relative;
padding: 8px 0;
} }
.top-header-2 nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-blue-light);
transition: width 0.3s ease;
}
.top-header-2 nav a:hover::after {
width: 100%;
}
/* === MAIN NAV HEADER === */ /* === MAIN NAV HEADER === */
.site-header { .site-header {
@ -219,28 +274,45 @@
justify-content: space-between; justify-content: space-between;
padding: 0 48px; padding: 0 48px;
margin-bottom: 57px; margin-bottom: 57px;
background: linear-gradient(90deg, #0f172a, #1e293b); background: linear-gradient(90deg, #0a1929, #0c1424);
color: #e6eef8; color: var(--text-primary);
font-weight: bold;
font-size: 15px;
font-weight: 500; font-weight: 500;
font-size: 15px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(92, 158, 255, 0.2);
z-index: 999; z-index: 999;
transition: all 0.3s ease; transition: all 0.3s ease;
backdrop-filter: blur(10px);
} }
.site-header nav a { .site-header nav a {
margin-left: 28px; margin-left: 28px;
color: #e6eef8; color: var(--text-primary);
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: all 0.3s ease;
font-weight: bold; font-weight: 500;
position: relative;
padding: 8px 0;
}
.site-header nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-blue-light);
transition: width 0.3s ease;
} }
.site-header nav a:hover { .site-header nav a:hover {
color: #38bdf8; color: var(--accent-blue-light);
}
.site-header nav a:hover::after {
width: 100%;
} }
.dropdown-container { .dropdown-container {
@ -253,7 +325,7 @@
.dropdown-label { .dropdown-label {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: #1e293b; color: var(--text-secondary);
} }
.dropdown { .dropdown {
@ -265,19 +337,22 @@
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
color: black; color: var(--text-primary);
padding: 12px 40px 12px 16px; padding: 12px 40px 12px 16px;
border: none; border: 1px solid rgba(92, 158, 255, 0.3);
border-radius: 12px; border-radius: 12px;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease; transition: all 0.2s ease;
background: rgba(13, 27, 45, 0.7);
backdrop-filter: blur(5px);
} }
.dropdown select:hover { .dropdown select:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
border-color: var(--accent-blue-light);
} }
.dropdown::after { .dropdown::after {
@ -287,13 +362,13 @@
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
pointer-events: none; pointer-events: none;
color: white; color: var(--accent-blue-light);
font-size: 12px; font-size: 12px;
} }
.dropdown select option { .dropdown select option {
background: #ffffff; background: #0a1929;
color: #1e293b; color: var(--text-primary);
padding: 7px; padding: 7px;
} }
@ -314,16 +389,19 @@
width: 100%; width: 100%;
padding: 11px 11px; padding: 11px 11px;
font-size: 13px; font-size: 13px;
border: 2px solid #cbd5e1; border: 2px solid rgba(92, 158, 255, 0.3);
border-radius: 8px; border-radius: 8px;
outline: none; outline: none;
background: white; background: rgba(13, 27, 45, 0.7);
transition: border-color 0.3s ease; transition: all 0.3s ease;
margin: 5px; margin: 5px;
color: var(--text-primary);
backdrop-filter: blur(5px);
} }
.input-group input:focus { .input-group input:focus {
border-color: #3b82f6; border-color: var(--accent-blue-light);
box-shadow: 0 0 10px rgba(0, 168, 255, 0.3);
} }
.input-group label { .input-group label {
@ -331,12 +409,13 @@
left: 12px; left: 12px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: #64748b; color: var(--text-secondary);
font-size: 13px; font-size: 13px;
pointer-events: none; pointer-events: none;
transition: 0.3s ease all; transition: 0.3s ease all;
background: white; background: rgba(13, 27, 45, 0.7);
padding: 0 4px; padding: 0 4px;
backdrop-filter: blur(5px);
} }
.input-group input:focus+label, .input-group input:focus+label,
@ -344,7 +423,7 @@
top: -6px; top: -6px;
left: 8px; left: 8px;
font-size: 12px; font-size: 12px;
color: #3b82f6; color: var(--accent-blue-light);
} }
.checkbox-group { .checkbox-group {
@ -355,7 +434,7 @@
} }
.checkbox-group input[type="checkbox"] { .checkbox-group input[type="checkbox"] {
accent-color: #3b82f6; accent-color: var(--accent-blue-light);
width: 18px; width: 18px;
height: 18px; height: 18px;
cursor: pointer; cursor: pointer;
@ -363,12 +442,12 @@
.checkbox-group label { .checkbox-group label {
font-size: 13px; font-size: 13px;
color: #1e293b; color: var(--text-primary);
cursor: pointer; cursor: pointer;
} }
.green-btn { .green-btn {
background-color: green; background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-light));
color: white; color: white;
font-weight: bold; font-weight: bold;
padding: 10px 20px; padding: 10px 20px;
@ -376,10 +455,12 @@
width: 33%; width: 33%;
border-radius: 7px; border-radius: 7px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 168, 255, 0.2);
} }
.red-btn { .red-btn {
background-color: red; background: linear-gradient(90deg, #ff4757, #ff6b81);
color: white; color: white;
font-weight: bold; font-weight: bold;
padding: 10px 20px; padding: 10px 20px;
@ -387,10 +468,14 @@
width: 33%; width: 33%;
border-radius: 7px; border-radius: 7px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.2);
} }
.red-btn:hover { .red-btn:hover {
background-color: darkred; background: linear-gradient(90deg, #ff6b81, #ff4757);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 71, 87, 0.3);
} }
.form-center { .form-center {
@ -410,20 +495,24 @@
display: inline-grid; display: inline-grid;
place-items: center; place-items: center;
border-radius: 8px; border-radius: 8px;
background: #f3f4f6; background: rgba(13, 27, 45, 0.7);
text-decoration: none; text-decoration: none;
transition: transform .12s, box-shadow .12s; transition: transform .12s, box-shadow .12s;
border: 1px solid rgba(92, 158, 255, 0.2);
backdrop-filter: blur(5px);
} }
.social-btn:hover { .social-btn:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0, 0, 0, .08); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
border-color: var(--accent-blue-light);
} }
.social-btn svg { .social-btn svg {
width: 22px; width: 22px;
height: 22px; height: 22px;
display: block; display: block;
color: var(--accent-blue-light);
} }
.sr-only { .sr-only {
@ -434,3 +523,14 @@
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
} }
/* Animation for futuristic effect */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 168, 255, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(0, 168, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 168, 255, 0); }
}
.pulse {
animation: pulse 2s infinite;
}