Update templates/index.html
Browse files- templates/index.html +9 -9
templates/index.html
CHANGED
|
@@ -5,14 +5,14 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Working Proxies</title>
|
| 7 |
<style>
|
| 8 |
-
/*
|
| 9 |
* {
|
| 10 |
margin: 0;
|
| 11 |
padding: 0;
|
| 12 |
box-sizing: border-box;
|
| 13 |
}
|
| 14 |
|
| 15 |
-
/*
|
| 16 |
body {
|
| 17 |
font-family: Arial, sans-serif;
|
| 18 |
margin: 0;
|
|
@@ -24,7 +24,7 @@
|
|
| 24 |
overflow-x: hidden;
|
| 25 |
}
|
| 26 |
|
| 27 |
-
/*
|
| 28 |
body::before {
|
| 29 |
content: '';
|
| 30 |
position: absolute;
|
|
@@ -44,7 +44,7 @@
|
|
| 44 |
100% { transform: translateX(50%) translateY(50%) rotate(-45deg); }
|
| 45 |
}
|
| 46 |
|
| 47 |
-
/*
|
| 48 |
.container {
|
| 49 |
background-color: rgba(0, 0, 0, 0.6);
|
| 50 |
padding: 20px;
|
|
@@ -59,21 +59,21 @@
|
|
| 59 |
z-index: 1;
|
| 60 |
}
|
| 61 |
|
| 62 |
-
/*
|
| 63 |
h1 {
|
| 64 |
font-size: 2.5em;
|
| 65 |
margin-bottom: 10px;
|
| 66 |
color: #f1f1f1;
|
| 67 |
}
|
| 68 |
|
| 69 |
-
/*
|
| 70 |
p {
|
| 71 |
font-size: 1.2em;
|
| 72 |
margin-bottom: 20px;
|
| 73 |
color: #f1f1f1;
|
| 74 |
}
|
| 75 |
|
| 76 |
-
/*
|
| 77 |
table {
|
| 78 |
width: 100%;
|
| 79 |
border-collapse: collapse;
|
|
@@ -94,14 +94,14 @@
|
|
| 94 |
color: #e6e6e6;
|
| 95 |
}
|
| 96 |
|
| 97 |
-
/*
|
| 98 |
tr:hover td {
|
| 99 |
background-color: rgba(0, 123, 255, 0.2);
|
| 100 |
transform: scale(1.05);
|
| 101 |
box-shadow: 0px 4px 12px rgba(0, 123, 255, 0.4);
|
| 102 |
}
|
| 103 |
|
| 104 |
-
/*
|
| 105 |
@keyframes fadeInUp {
|
| 106 |
from {
|
| 107 |
opacity: 0;
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
<title>Working Proxies</title>
|
| 7 |
<style>
|
| 8 |
+
/* Global base styles */
|
| 9 |
* {
|
| 10 |
margin: 0;
|
| 11 |
padding: 0;
|
| 12 |
box-sizing: border-box;
|
| 13 |
}
|
| 14 |
|
| 15 |
+
/* Background style */
|
| 16 |
body {
|
| 17 |
font-family: Arial, sans-serif;
|
| 18 |
margin: 0;
|
|
|
|
| 24 |
overflow-x: hidden;
|
| 25 |
}
|
| 26 |
|
| 27 |
+
/* Overlay gradient with animated shine effect */
|
| 28 |
body::before {
|
| 29 |
content: '';
|
| 30 |
position: absolute;
|
|
|
|
| 44 |
100% { transform: translateX(50%) translateY(50%) rotate(-45deg); }
|
| 45 |
}
|
| 46 |
|
| 47 |
+
/* Transparent content container centered on page with fade-in animation */
|
| 48 |
.container {
|
| 49 |
background-color: rgba(0, 0, 0, 0.6);
|
| 50 |
padding: 20px;
|
|
|
|
| 59 |
z-index: 1;
|
| 60 |
}
|
| 61 |
|
| 62 |
+
/* Header styles */
|
| 63 |
h1 {
|
| 64 |
font-size: 2.5em;
|
| 65 |
margin-bottom: 10px;
|
| 66 |
color: #f1f1f1;
|
| 67 |
}
|
| 68 |
|
| 69 |
+
/* Paragraph styles */
|
| 70 |
p {
|
| 71 |
font-size: 1.2em;
|
| 72 |
margin-bottom: 20px;
|
| 73 |
color: #f1f1f1;
|
| 74 |
}
|
| 75 |
|
| 76 |
+
/* Table styling */
|
| 77 |
table {
|
| 78 |
width: 100%;
|
| 79 |
border-collapse: collapse;
|
|
|
|
| 94 |
color: #e6e6e6;
|
| 95 |
}
|
| 96 |
|
| 97 |
+
/* Row hover effect: scaling and shadow */
|
| 98 |
tr:hover td {
|
| 99 |
background-color: rgba(0, 123, 255, 0.2);
|
| 100 |
transform: scale(1.05);
|
| 101 |
box-shadow: 0px 4px 12px rgba(0, 123, 255, 0.4);
|
| 102 |
}
|
| 103 |
|
| 104 |
+
/* Fade-in animation */
|
| 105 |
@keyframes fadeInUp {
|
| 106 |
from {
|
| 107 |
opacity: 0;
|