aebrs/anycoder-8e5726b3
0
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>Retry Application</title>7 <style>8 :root {9 --primary-color: #4a6bff;10 --error-color: #ff4757;11 --success-color: #2ed573;12 --text-color: #2f3542;13 --bg-color: #f1f2f6;14 --card-bg: #ffffff;15 --transition: all 0.3s ease;16 }17 18 * {19 margin: 0;20 padding: 0;21 box-sizing: border-box;22 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;23 }24 25 body {26 background-color: var(--bg-color);27 color: var(--text-color);28 min-height: 100vh;29 display: flex;30 flex-direction: column;31 align-items: center;32 justify-content: center;33 padding: 20px;34 }35 36 header {37 position: fixed;38 top: 0;39 width: 100%;40 padding: 15px 20px;41 background-color: var(--card-bg);42 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);43 display: flex;44 justify-content: space-between;45 align-items: center;46 z-index: 100;47 }48 49 .logo {50 font-weight: 700;51 font-size: 1.2rem;52 color: var(--primary-color);53 }54 55 .anycoder-link {56 color: var(--text-color);57 text-decoration: none;58 font-size: 0.9rem;59 transition: var(--transition);60 }61 62 .anycoder-link:hover {63 color: var(--primary-color);64 }65 66 .container {67 background-color: var(--card-bg);68 border-radius: 12px;69 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);70 padding: 30px;71 width: 100%;72 max-width: 500px;73 text-align: center;74 margin-top: 60px;75 }76 77 h1 {78 margin-bottom: 20px;79 color: var(--primary-color);80 font-size: 1.8rem;81 }82 83 .status {84 margin: 20px 0;85 padding: 15px;86 border-radius: 8px;87 font-weight: 500;88 display: none;89 }90 91 .error {92 background-color: rgba(255, 71, 87, 0.1);93 color: var(--error-color);94 display: block;95 }96 97 .success {98 background-color: rgba(46, 213, 115, 0.1);99 color: var(--success-color);100 display: block;101 }102 103 .retry-btn {104 background-color: var(--primary-color);105 color: white;106 border: none;107 padding: 12px 24px;108 border-radius: 8px;109 font-size: 1rem;110 font-weight: 600;111 cursor: pointer;112 transition: var(--transition);113 display: flex;114 align-items: center;115 justify-content: center;116 gap: 8px;117 margin: 0 auto;118 }119 120 .retry-btn:hover {121 background-color: #3a5bef;122 transform: translateY(-2px);123 }124 125 .retry-btn:active {126 transform: translateY(0);127 }128 129 .retry-btn.loading {130 background-color: #a4b0be;131 cursor: not-allowed;132 }133 134 .retry-count {135 margin-top: 20px;136 font-size: 0.9rem;137 color: #747d8c;138 }139 140 @keyframes spin {141 0% { transform: rotate(0deg); }142 100% { transform: rotate(360deg); }143 }144 145 .spinner {146 width: 18px;147 height: 18px;148 border: 3px solid rgba(255, 255, 255, 0.3);149 border-radius: 50%;150 border-top-color: white;151 animation: spin 1s ease-in-out infinite;152 display: none;153 }154 155 .spinner.active {156 display: inline-block;157 }158 159 @media (max-width: 600px) {160 .container {161 padding: 20px;162 }163 164 h1 {165 font-size: 1.5rem;166 }167 }168 </style>169</head>170<body>171 <header>172 <div class="logo">Retry App</div>173 <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>174 </header>175 176 <div class="container">177 <h1>Operation Failed</h1>178 <div class="status error">The last operation failed. Please try again.</div>179 <div class="status success">Operation completed successfully!</div>180 181 <button class="retry-btn" id="retryButton">182 <span class="spinner" id="spinner"></span>183 <span id="buttonText">Retry Now</span>184 </button>185 186 <div class="retry-count" id="retryCount">Retry attempts: 0</div>187 </div>188 189 <script>190 document.addEventListener('DOMContentLoaded', function() {191 const retryButton = document.getElementById('retryButton');192 const spinner = document.getElementById('spinner');193 const buttonText = document.getElementById('buttonText');194 const retryCount = document.getElementById('retryCount');195 const errorStatus = document.querySelector('.status.error');196 const successStatus = document.querySelector('.status.success');197 198 let attempts = 0;199 let isProcessing = false;200 201 retryButton.addEventListener('click', function() {202 if (isProcessing) return;203 204 isProcessing = true;205 retryButton.classList.add('loading');206 spinner.classList.add('active');207 buttonText.textContent = 'Processing...';208 errorStatus.style.display = 'none';209 successStatus.style.display = 'none';210 211 // Simulate an API call or operation that might fail212 setTimeout(() => {213 attempts++;214 retryCount.textContent = `Retry attempts: ${attempts}`;215 216 // Randomly determine success (30% chance)217 const isSuccess = Math.random() < 0.3;218 219 if (isSuccess) {220 successStatus.style.display = 'block';221 buttonText.textContent = 'Success!';222 retryButton.classList.remove('loading');223 spinner.classList.remove('active');224 retryButton.disabled = true;225 retryButton.style.backgroundColor = '#2ed573';226 } else {227 errorStatus.style.display = 'block';228 buttonText.textContent = 'Retry Again';229 retryButton.classList.remove('loading');230 spinner.classList.remove('active');231 }232 233 isProcessing = false;234 }, 1500);235 });236 });237 </script>238</body>239</html>