ui update
This commit is contained in:
Devdatt Bhatt
parent
e2a96efa91
commit
38ae0e3043
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,4 @@
|
|||
<!-- header.php -->
|
||||
<?php
|
||||
|
||||
/*
|
||||
|
|
@ -19,30 +20,34 @@ include 'static.php';
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>ShreeBhattJi</title>
|
||||
<title>ShreeBhattJi - URMI Digital Transcoder</title>
|
||||
<script src="chart.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="all.min.css">
|
||||
</head>
|
||||
|
||||
<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">
|
||||
<nav aria-label="Top navigation">
|
||||
<a href="https://learn.urmic.org/" target="_blank">Tutorials</a>
|
||||
<a href="about_us.php">About Us</a>
|
||||
<a href="contact_us.php">Contact Us ( Free Service )</a>
|
||||
<a href="premium_service.php">Premium Service</a>
|
||||
<a href="https://learn.urmic.org/" target="_blank"><i class="fas fa-graduation-cap"></i> Tutorials</a>
|
||||
<a href="about_us.php"><i class="fas fa-info-circle"></i> About Us</a>
|
||||
<a href="contact_us.php"><i class="fas fa-envelope"></i> Contact Us</a>
|
||||
<a href="premium_service.php"><i class="fas fa-crown"></i> Premium Service</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<header class="site-header">
|
||||
<nav aria-label="Top navigation">
|
||||
<a href="input.php">Input</a>
|
||||
<a href="index.php">Monitor</a>
|
||||
<a href="firewall.php">Firewall</a>
|
||||
<a href="firmware.php">Firmware</a>
|
||||
<a href="password.php">Password</a>
|
||||
<a href="logout.php">Logout</a>
|
||||
<a href="input.php"><i class="fas fa-file-upload"></i> Input</a>
|
||||
<a href="index.php"><i class="fas fa-tachometer-alt"></i> Monitor</a>
|
||||
<a href="firewall.php"><i class="fas fa-shield-alt"></i> Firewall</a>
|
||||
<a href="firmware.php"><i class="fas fa-microchip"></i> Firmware</a>
|
||||
<a href="password.php"><i class="fas fa-lock"></i> Password</a>
|
||||
<a href="logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
155
html/index.php
155
html/index.php
|
|
@ -1,3 +1,4 @@
|
|||
<!-- index.php -->
|
||||
<?php
|
||||
|
||||
/*
|
||||
|
|
@ -14,27 +15,27 @@ include 'header.php'; ?>
|
|||
<div class="containerindex">
|
||||
<div class="grid">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:12px; color:#9fb2d6; display:flex; justify-content:space-between;">
|
||||
<div>Last update: <span id="lastUpdate">—</span></div>
|
||||
<div>CPU: <span id="lastCpu">—</span>% · RAM: <span id="lastRam">—</span>% · In: <span id="lastIn">—</span>KB/s ·
|
||||
Out: <span id="lastOut">—</span>KB/s</div>
|
||||
<div style="margin-top:12px; color:#a9c7ff; display:flex; justify-content:space-between; font-size:14px;">
|
||||
<div>Last update: <span id="lastUpdate" class="pulse">—</span></div>
|
||||
<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" class="pulse">—</span>KB/s</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
|
|
@ -57,7 +58,11 @@ include 'header.php'; ?>
|
|||
label: 'CPU %',
|
||||
data: [],
|
||||
fill: false,
|
||||
tension: 0.2
|
||||
borderColor: '#00a8ff',
|
||||
backgroundColor: 'rgba(0, 168, 255, 0.1)',
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 6
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
|
|
@ -66,11 +71,33 @@ include 'header.php'; ?>
|
|||
scales: {
|
||||
y: {
|
||||
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'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
|
|
@ -79,7 +106,11 @@ include 'header.php'; ?>
|
|||
label: 'RAM %',
|
||||
data: [],
|
||||
fill: false,
|
||||
tension: 0.2
|
||||
borderColor: '#00b8ff',
|
||||
backgroundColor: 'rgba(0, 184, 255, 0.1)',
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 6
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
|
|
@ -88,11 +119,33 @@ include 'header.php'; ?>
|
|||
scales: {
|
||||
y: {
|
||||
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'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
|
|
@ -101,13 +154,21 @@ include 'header.php'; ?>
|
|||
label: 'Net In (KB/s)',
|
||||
data: [],
|
||||
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)',
|
||||
data: [],
|
||||
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,
|
||||
scales: {
|
||||
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'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
|
|
@ -129,20 +212,32 @@ include 'header.php'; ?>
|
|||
label: 'Disk Read (KB/s)',
|
||||
data: [],
|
||||
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)',
|
||||
data: [],
|
||||
fill: false,
|
||||
tension: 0.2
|
||||
borderColor: '#00b8ff',
|
||||
backgroundColor: 'rgba(0, 184, 255, 0.1)',
|
||||
tension: 0.4,
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 6
|
||||
},
|
||||
{
|
||||
label: 'Disk %',
|
||||
data: [],
|
||||
yAxisID: 'percent',
|
||||
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: {
|
||||
y: {
|
||||
position: 'left',
|
||||
beginAtZero: true
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(92, 158, 255, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: '#a9c7ff'
|
||||
}
|
||||
},
|
||||
percent: {
|
||||
position: 'right',
|
||||
|
|
@ -162,8 +263,24 @@ include 'header.php'; ?>
|
|||
display: false
|
||||
},
|
||||
ticks: {
|
||||
color: '#a9c7ff',
|
||||
callback: v => v + '%'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
color: 'rgba(92, 158, 255, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: '#a9c7ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#a9c7ff'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
442
html/style.css
442
html/style.css
|
|
@ -1,107 +1,136 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
/* style.css */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
background: linear-gradient(135deg, #0a1929, #0c1424);
|
||||
color: #e6f0ff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
:root {
|
||||
--header-h: 64px;
|
||||
--header-bg: linear-gradient(90deg, #1e293b, #0f172a);
|
||||
--header-color: #e6eef8;
|
||||
--header-bg: linear-gradient(90deg, #0a1929, #0c1424);
|
||||
--header-color: #e6f0ff;
|
||||
--footer-h: 52px;
|
||||
--footer-bg: linear-gradient(90deg, #1e293b, #0f172a);
|
||||
--footer-color: #e6eef8;
|
||||
}
|
||||
--footer-bg: linear-gradient(90deg, #0a1929, #0c1424);
|
||||
--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 {
|
||||
height: calc(100vh - var(--header-h) - var(--footer-h));
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 16px;
|
||||
padding-bottom: calc(var(--footer-h) + 16px);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: 12px auto;
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
|
||||
}
|
||||
background: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid var(--card-border);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.containerindex {
|
||||
.containerindex {
|
||||
max-width: 1100px;
|
||||
margin: 12px auto;
|
||||
padding: 12px;
|
||||
padding-top: 160px;
|
||||
/* Adjusted for multiple headers */
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
|
||||
}
|
||||
background: var(--card-bg);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid var(--card-border);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.grid {
|
||||
.grid {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
.card {
|
||||
flex: 1 1 43%;
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
background: var(--card-bg);
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
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.wide {
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 30px rgba(0, 168, 255, 0.25);
|
||||
}
|
||||
|
||||
.card.wide {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.card h3 {
|
||||
margin: 0 0 12px 0;
|
||||
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 {
|
||||
flex: 1 1 auto;
|
||||
min-height: 180px;
|
||||
height: 247px;
|
||||
position: relative;
|
||||
}
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card canvas {
|
||||
.card canvas {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.status-row {
|
||||
.status-row {
|
||||
margin-top: 12px;
|
||||
color: #9fb2d6;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (max-width: 640px) {
|
||||
:root {
|
||||
--header-h: 56px;
|
||||
--footer-h: 56px;
|
||||
|
|
@ -120,9 +149,9 @@
|
|||
height: 220px;
|
||||
min-height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
.site-footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -136,12 +165,13 @@
|
|||
background: var(--footer-bg);
|
||||
color: var(--footer-color);
|
||||
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;
|
||||
}
|
||||
border-top: 1px solid rgba(92, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* === MULTIPLE TOP HEADERS === */
|
||||
.top-header-1 {
|
||||
/* === MULTIPLE TOP HEADERS === */
|
||||
.top-header-1 {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -149,33 +179,42 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #e6eef8;
|
||||
color: var(--text-primary);
|
||||
font-size: 17px;
|
||||
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;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #e6eef8;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
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;
|
||||
background: #0f172a;
|
||||
background: linear-gradient(90deg, #0a1929, #0c1424);
|
||||
font-size: 20px;
|
||||
}
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.top-header-2 {
|
||||
.top-header-2 {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
|
|
@ -186,29 +225,45 @@
|
|||
justify-content: space-between;
|
||||
padding: 0 48px;
|
||||
margin-bottom: 57px;
|
||||
background: linear-gradient(90deg, #0f172a, #1e293b);
|
||||
color: #e6eef8;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
background: linear-gradient(90deg, #0a1929, #0c1424);
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 1px solid rgba(92, 158, 255, 0.2);
|
||||
z-index: 999;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.top-header-2 nav a {
|
||||
.top-header-2 nav a {
|
||||
margin-left: 28px;
|
||||
color: #e6eef8;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
font-weight: bold;
|
||||
}
|
||||
transition: all 0.3s ease;
|
||||
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;
|
||||
}
|
||||
|
||||
/* === MAIN NAV HEADER === */
|
||||
.site-header {
|
||||
.top-header-2 nav a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* === MAIN NAV HEADER === */
|
||||
.site-header {
|
||||
position: fixed;
|
||||
top: 90px;
|
||||
left: 0;
|
||||
|
|
@ -219,156 +274,180 @@
|
|||
justify-content: space-between;
|
||||
padding: 0 48px;
|
||||
margin-bottom: 57px;
|
||||
background: linear-gradient(90deg, #0f172a, #1e293b);
|
||||
color: #e6eef8;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
background: linear-gradient(90deg, #0a1929, #0c1424);
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 1px solid rgba(92, 158, 255, 0.2);
|
||||
z-index: 999;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.site-header nav a {
|
||||
.site-header nav a {
|
||||
margin-left: 28px;
|
||||
color: #e6eef8;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
font-weight: bold;
|
||||
}
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.site-header nav a:hover {
|
||||
color: #38bdf8;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
.site-header nav a:hover {
|
||||
color: var(--accent-blue-light);
|
||||
}
|
||||
|
||||
.site-header nav a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-label {
|
||||
.dropdown-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
}
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown select {
|
||||
.dropdown select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
color: black;
|
||||
color: var(--text-primary);
|
||||
padding: 12px 40px 12px 16px;
|
||||
border: none;
|
||||
border: 1px solid rgba(92, 158, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
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);
|
||||
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 {
|
||||
content: "▼";
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
color: white;
|
||||
color: var(--accent-blue-light);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown select option {
|
||||
background: #ffffff;
|
||||
color: #1e293b;
|
||||
.dropdown select option {
|
||||
background: #0a1929;
|
||||
color: var(--text-primary);
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
.input-container {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.input-group {
|
||||
position: relative;
|
||||
width: auto;
|
||||
min-width: 333px;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
padding: 11px 11px;
|
||||
font-size: 13px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border: 2px solid rgba(92, 158, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
background: white;
|
||||
transition: border-color 0.3s ease;
|
||||
background: rgba(13, 27, 45, 0.7);
|
||||
transition: all 0.3s ease;
|
||||
margin: 5px;
|
||||
}
|
||||
color: var(--text-primary);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
.input-group input:focus {
|
||||
border-color: var(--accent-blue-light);
|
||||
box-shadow: 0 0 10px rgba(0, 168, 255, 0.3);
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
.input-group label {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #64748b;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
pointer-events: none;
|
||||
transition: 0.3s ease all;
|
||||
background: white;
|
||||
background: rgba(13, 27, 45, 0.7);
|
||||
padding: 0 4px;
|
||||
}
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.input-group input:focus+label,
|
||||
.input-group input:not(:placeholder-shown)+label {
|
||||
.input-group input:focus+label,
|
||||
.input-group input:not(:placeholder-shown)+label {
|
||||
top: -6px;
|
||||
left: 8px;
|
||||
font-size: 12px;
|
||||
color: #3b82f6;
|
||||
}
|
||||
color: var(--accent-blue-light);
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
accent-color: #3b82f6;
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
accent-color: var(--accent-blue-light);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
.checkbox-group label {
|
||||
font-size: 13px;
|
||||
color: #1e293b;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.green-btn {
|
||||
background-color: green;
|
||||
.green-btn {
|
||||
background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-light));
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 10px 20px;
|
||||
|
|
@ -376,10 +455,12 @@
|
|||
width: 33%;
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 168, 255, 0.2);
|
||||
}
|
||||
|
||||
.red-btn {
|
||||
background-color: red;
|
||||
.red-btn {
|
||||
background: linear-gradient(90deg, #ff4757, #ff6b81);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
padding: 10px 20px;
|
||||
|
|
@ -387,50 +468,69 @@
|
|||
width: 33%;
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(255, 71, 87, 0.2);
|
||||
}
|
||||
|
||||
.red-btn:hover {
|
||||
background-color: darkred;
|
||||
}
|
||||
.red-btn:hover {
|
||||
background: linear-gradient(90deg, #ff6b81, #ff4757);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(255, 71, 87, 0.3);
|
||||
}
|
||||
|
||||
.form-center {
|
||||
.form-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.social-row {
|
||||
.social-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.social-btn {
|
||||
.social-btn {
|
||||
width: 67px;
|
||||
height: 67px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #f3f4f6;
|
||||
background: rgba(13, 27, 45, 0.7);
|
||||
text-decoration: none;
|
||||
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);
|
||||
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;
|
||||
height: 22px;
|
||||
display: block;
|
||||
}
|
||||
color: var(--accent-blue-light);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue