diff --git a/templates/index.html b/templates/index.html index 80358bd..82cc22d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -12,11 +12,10 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; - flex-direction: column; align-items: center; justify-content: center; padding: 20px; @@ -24,161 +23,30 @@ .container { background: white; + border-radius: 20px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); padding: 40px; - border-radius: 15px; - box-shadow: 0 20px 60px rgba(0,0,0,0.3); + max-width: 600px; width: 100%; - max-width: 700px; - animation: fadeIn 0.5s ease-out; } - @keyframes fadeIn { - from { - opacity: 0; - transform: scale(0.95); - } - to { - opacity: 1; - transform: scale(1); - } - } - - .header { - text-align: center; - margin-bottom: 30px; - } - - .header h1 { - font-size: 32px; + h1 { color: #333; margin-bottom: 10px; + font-size: 28px; } - .header p { + .subtitle { color: #666; + margin-bottom: 30px; font-size: 14px; } - .form-group { - margin-bottom: 20px; - } - - label { - display: block; - margin-bottom: 8px; - color: #555; - font-weight: 500; - font-size: 14px; - } - - .input-wrapper { - position: relative; - display: flex; - gap: 10px; - } - - input[type="url"] { - flex: 1; - padding: 14px 16px; - border: 2px solid #e0e0e0; - border-radius: 8px; - font-size: 15px; - transition: all 0.3s; - } - - input[type="url"]:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); - } - - button { - padding: 14px 30px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - border-radius: 8px; - font-size: 15px; - font-weight: 600; - cursor: pointer; - transition: all 0.3s; - white-space: nowrap; - } - - button:hover { - transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); - } - - button:active { - transform: translateY(0); - } - - .info-box { - background: #f8f9fa; - border-left: 4px solid #667eea; - padding: 15px; - border-radius: 5px; - margin-top: 20px; - } - - .info-box h3 { - font-size: 14px; - color: #333; - margin-bottom: 8px; - } - - .info-box ul { - list-style: none; - padding-left: 0; - } - - .info-box li { - font-size: 13px; - color: #666; - margin-bottom: 5px; - padding-left: 20px; - position: relative; - } - - .info-box li:before { - content: "✓"; - position: absolute; - left: 0; - color: #667eea; - font-weight: bold; - } - - .footer { - margin-top: 20px; - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - gap: 10px; - } - - .footer a { - color: #667eea; - text-decoration: none; - font-size: 14px; - transition: color 0.3s; - } - - .footer a:hover { - color: #764ba2; - } - - .stats { - font-size: 12px; - color: #999; - } - .error-message { background: #fee; color: #c33; padding: 12px; - border-radius: 5px; + border-radius: 10px; margin-bottom: 20px; text-align: center; font-size: 14px; @@ -197,65 +65,136 @@ 75% { transform: translateX(10px); } } - @media (max-width: 600px) { - .container { - padding: 25px; - } - - .header h1 { - font-size: 24px; - } - - .input-wrapper { - flex-direction: column; - } - - button { - width: 100%; - } + form { + display: flex; + flex-direction: column; + gap: 15px; + } + + input[type="url"] { + padding: 15px; + border: 2px solid #e0e0e0; + border-radius: 10px; + font-size: 16px; + transition: border-color 0.3s; + } + + input[type="url"]:focus { + outline: none; + border-color: #667eea; + } + + button { + padding: 15px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border: none; + border-radius: 10px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: transform 0.2s, box-shadow 0.2s; + } + + button:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4); + } + + button:active { + transform: translateY(0); + } + + .features { + margin-top: 30px; + padding-top: 30px; + border-top: 1px solid #e0e0e0; + } + + .features h2 { + font-size: 18px; + color: #333; + margin-bottom: 15px; + } + + .features ul { + list-style: none; + color: #666; + font-size: 14px; + } + + .features li { + padding: 8px 0; + padding-left: 25px; + position: relative; + } + + .features li:before { + content: "✓"; + position: absolute; + left: 0; + color: #667eea; + font-weight: bold; + } + + .nav { + margin-top: 20px; + text-align: center; + display: flex; + justify-content: space-between; + align-items: center; + } + + .nav a { + color: #667eea; + text-decoration: none; + font-size: 14px; + } + + .nav a:hover { + text-decoration: underline; + } + + .stats { + font-size: 12px; + color: #999; }
Access websites securely through encrypted proxy
-Access websites securely and privately
- -