Hugging Face's logo

Spaces:
yx135790mg
/
httpp
Sleeping

App Files Community
yx135790mg commited on
Commit
71209b6
·
verified ·
1 Parent(s): 72e1850

Create templates/index.html

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