Spaces:
Running on Zero
Running on Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>🚀 AutoRepo Deployer Pro - Real GitHub & Deployment Integration</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); | |
| overflow: hidden; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); | |
| color: white; | |
| padding: 40px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .header h1 { | |
| font-size: 2.8em; | |
| margin-bottom: 10px; | |
| background: linear-gradient(45deg, #fff, #64b5f6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .header p { | |
| font-size: 1.3em; | |
| opacity: 0.9; | |
| } | |
| .api-status { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background: rgba(255,255,255,0.1); | |
| padding: 10px 15px; | |
| border-radius: 20px; | |
| font-size: 0.9em; | |
| } | |
| .api-status.connected { | |
| background: rgba(76, 175, 80, 0.2); | |
| color: #4caf50; | |
| } | |
| .main-content { | |
| padding: 40px; | |
| } | |
| .setup-section { | |
| background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); | |
| padding: 30px; | |
| border-radius: 15px; | |
| margin-bottom: 30px; | |
| border: 2px solid #dee2e6; | |
| } | |
| .setup-section h3 { | |
| color: #2c3e50; | |
| margin-bottom: 20px; | |
| font-size: 1.4em; | |
| } | |
| .token-input { | |
| width: 100%; | |
| padding: 15px; | |
| border: 2px solid #dee2e6; | |
| border-radius: 8px; | |
| font-family: monospace; | |
| font-size: 14px; | |
| margin-bottom: 15px; | |
| } | |
| .token-input:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| } | |
| .api-help { | |
| background: white; | |
| padding: 15px; | |
| border-radius: 8px; | |
| border-left: 4px solid #667eea; | |
| margin-bottom: 20px; | |
| } | |
| .input-section { | |
| margin-bottom: 30px; | |
| } | |
| .input-tabs { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .tab { | |
| padding: 15px 25px; | |
| background: #f8f9fa; | |
| border: none; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| font-size: 1em; | |
| } | |
| .tab:hover { | |
| background: #e9ecef; | |
| transform: translateY(-1px); | |
| } | |
| .tab.active { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .code-input { | |
| width: 100%; | |
| min-height: 400px; | |
| padding: 20px; | |
| border: 2px solid #e9ecef; | |
| border-radius: 12px; | |
| font-family: 'Courier New', monospace; | |
| font-size: 14px; | |
| resize: vertical; | |
| background: #fafbfc; | |
| } | |
| .code-input:focus { | |
| outline: none; | |
| border-color: #667eea; | |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); | |
| } | |