| <!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> |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| |
| 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; |
| } |
| |
| 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); } |
| } |
| |
| .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; |
| } |
| |
| h1 { |
| font-size: 2.5em; |
| margin-bottom: 10px; |
| color: #f1f1f1; |
| } |
| |
| p { |
| font-size: 1.2em; |
| margin-bottom: 20px; |
| color: #f1f1f1; |
| } |
| |
| 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; |
| } |
| |
| 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); |
| } |
| |
| @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> |
