File size: 3,929 Bytes
6dc847a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Working Proxies</title>
<style>
/* Global base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Background style */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color: #ffffff;
background: linear-gradient(135deg, #e74c3c, #c0392b);
position: relative;
min-height: 100vh;
overflow-x: hidden;
}
/* Overlay gradient with animated shine effect */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(255, 255, 255, 0.1);
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
animation: shine 4s infinite linear;
pointer-events: none;
z-index: 0;
}
@keyframes shine {
0% { transform: translateX(-50%) translateY(-50%) rotate(-45deg); }
100% { transform: translateX(50%) translateY(50%) rotate(-45deg); }
}
/* Transparent content container centered on page with fade-in animation */
.container {
background-color: rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 8px;
max-width: 800px;
padding-top: 50px;
margin: 0 auto;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
text-align: center;
animation: fadeInUp 1s ease-in-out;
position: relative;
z-index: 1;
}
/* Header styles */
h1 {
font-size: 2.5em;
margin-bottom: 10px;
color: #f1f1f1;
}
/* Paragraph styles */
p {
font-size: 1.2em;
margin-bottom: 20px;
color: #f1f1f1;
}
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid #444;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
th {
background-color: rgba(0, 123, 255, 0.8);
color: #ffffff;
}
td {
background-color: rgba(255, 255, 255, 0.1);
color: #e6e6e6;
}
/* Row hover effect: scaling and shadow */
tr:hover td {
background-color: rgba(0, 123, 255, 0.2);
transform: scale(1.05);
box-shadow: 0px 4px 12px rgba(0, 123, 255, 0.4);
}
/* Fade-in animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="container">
<h1>Working Proxies</h1>
<p>Total Proxies Found: {{ proxies | length }}</p>
<table>
<thead>
<tr>
<th>Proxy Address</th>
<th>Response Time (seconds)</th>
<th>Country</th>
</tr>
</thead>
<tbody>
{% for proxy, response_time, country in proxies %}
<tr>
<td>{{ proxy }}</td>
<td>{{ response_time }}</td>
<td>{{ country }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</body>
</html> |