Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{{ title }} - Complete</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
| <style> | |
| .code-box { | |
| background: var(--light-bg); | |
| border: 2px dashed var(--border); | |
| border-radius: var(--radius); | |
| padding: 1rem; | |
| font-family: var(--font-mono); | |
| font-size: 1.25rem; | |
| letter-spacing: 0.1em; | |
| color: var(--heading-color); | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| user-select: all; | |
| margin-bottom: 0.5rem; | |
| text-align: center; | |
| } | |
| .code-box:hover { | |
| border-color: var(--primary); | |
| background: rgba(110, 86, 207, 0.04); | |
| } | |
| .code-hint { | |
| font-size: 0.8rem; | |
| color: var(--muted-foreground); | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .platform-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: var(--radius); | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| font-family: var(--font-sans); | |
| text-decoration: none; | |
| transition: all 0.15s ease; | |
| border: none; | |
| cursor: pointer; | |
| margin-bottom: 0.75rem; | |
| } | |
| .platform-btn:active { transform: scale(0.98); } | |
| .platform-btn-prolific { background: #5c6ac4; color: white; } | |
| .platform-btn-prolific:hover { background: #4959bd; color: white; } | |
| .platform-btn-mturk { background: #ff9900; color: #111; } | |
| .platform-btn-mturk:hover { background: #e68a00; color: #111; } | |
| </style> | |
| </head> | |
| <body class="potato-page-center"> | |
| <div class="potato-page-card potato-page-card-wide" style="text-align: center;"> | |
| <div class="potato-page-icon potato-page-icon-success"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <h1 class="potato-page-title">Thank You!</h1> | |
| <p class="potato-page-subtitle"> | |
| You have successfully completed the annotation task. | |
| {% if completion_code %}Your responses have been recorded.{% endif %} | |
| </p> | |
| {% if completion_code %} | |
| <div class="mb-3"> | |
| <div class="code-box" id="completion-code" onclick="copyCode()" title="Click to copy"> | |
| {{ completion_code }} | |
| </div> | |
| <p class="code-hint"> | |
| <i class="fas fa-copy me-1"></i> Click to copy your completion code | |
| </p> | |
| </div> | |
| {% if mturk_submit_url and mturk_assignment_id %} | |
| <form id="mturk-form" action="{{ mturk_submit_url }}" method="POST"> | |
| <input type="hidden" name="assignmentId" value="{{ mturk_assignment_id }}"> | |
| {% if completion_code %} | |
| <input type="hidden" name="completionCode" value="{{ completion_code }}"> | |
| {% endif %} | |
| <button type="submit" class="platform-btn platform-btn-mturk"> | |
| <i class="fas fa-external-link-alt me-2"></i> Submit HIT to MTurk | |
| </button> | |
| </form> | |
| {% elif prolific_redirect_url %} | |
| <a href="{{ prolific_redirect_url }}" class="platform-btn platform-btn-prolific"> | |
| <i class="fas fa-external-link-alt me-2"></i> Return to Prolific | |
| </a> | |
| {% else %} | |
| <div class="potato-alert potato-alert-info" style="text-align: left;"> | |
| <i class="fas fa-info-circle me-2"></i> | |
| Copy the code above and paste it in your crowdsourcing platform to receive credit. | |
| </div> | |
| {% endif %} | |
| {% else %} | |
| <div class="potato-alert potato-alert-success" style="text-align: left;"> | |
| <i class="fas fa-check me-2"></i> | |
| Your annotations have been saved. You may close this window. | |
| </div> | |
| {% endif %} | |
| <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--muted-foreground);"> | |
| <i class="fas fa-shield-alt me-1"></i> Your responses have been securely recorded. | |
| </div> | |
| </div> | |
| <script> | |
| function copyCode() { | |
| var code = document.getElementById('completion-code').innerText.trim(); | |
| navigator.clipboard.writeText(code).then(function() { | |
| var codeBox = document.getElementById('completion-code'); | |
| var originalText = codeBox.innerText; | |
| codeBox.innerHTML = '<i class="fas fa-check me-2"></i>Copied!'; | |
| codeBox.style.borderColor = 'var(--success-color)'; | |
| codeBox.style.background = 'rgba(16, 185, 129, 0.08)'; | |
| codeBox.style.color = '#065f46'; | |
| setTimeout(function() { | |
| codeBox.innerText = originalText; | |
| codeBox.style.borderColor = ''; | |
| codeBox.style.background = ''; | |
| codeBox.style.color = ''; | |
| }, 2000); | |
| }).catch(function(err) { | |
| console.error('Failed to copy: ', err); | |
| alert('Failed to copy. Please select and copy manually.'); | |
| }); | |
| } | |
| {% if auto_redirect and prolific_redirect_url %} | |
| setTimeout(function() { | |
| window.location.href = "{{ prolific_redirect_url }}"; | |
| }, {{ auto_redirect_delay|default(5000) }}); | |
| {% endif %} | |
| </script> | |
| </body> | |
| </html> | |