| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AutoFS - Submit Data/Method</title> |
| <style> |
| :root { |
| --primary-color: #3498db; |
| --secondary-color: #2c3e50; |
| --background-color: #f8f9fa; |
| --text-color: #333; |
| --border-color: #dee2e6; |
| --hover-color: #f1f1f1; |
| --accent-color: #e67e22; |
| --sidebar-width: 280px; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| margin: 0; |
| padding: 0; |
| background-color: var(--background-color); |
| color: var(--text-color); |
| display: flex; |
| min-height: 100vh; |
| } |
| |
| |
| .sidebar { |
| width: var(--sidebar-width); |
| background-color: var(--secondary-color); |
| color: white; |
| position: fixed; |
| height: 100vh; |
| overflow-y: auto; |
| padding: 20px; |
| box-sizing: border-box; |
| left: 0; |
| top: 0; |
| z-index: 100; |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| } |
| |
| .sidebar h2 { |
| font-size: 1.2em; |
| margin-bottom: 10px; |
| color: #ecf0f1; |
| border-bottom: 1px solid #34495e; |
| padding-bottom: 5px; |
| } |
| |
| .nav-links { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
| |
| .nav-links li a { |
| display: block; |
| padding: 10px; |
| color: #bdc3c7; |
| text-decoration: none; |
| border-radius: 4px; |
| transition: background 0.2s; |
| } |
| |
| .nav-links li a:hover, .nav-links li a.active { |
| background: rgba(255,255,255,0.1); |
| color: white; |
| } |
| |
| |
| .main-content { |
| margin-left: var(--sidebar-width); |
| flex: 1; |
| padding: 40px; |
| max-width: calc(100% - var(--sidebar-width)); |
| box-sizing: border-box; |
| min-width: 0; |
| } |
| |
| header { |
| margin-bottom: 30px; |
| border-bottom: 2px solid var(--primary-color); |
| padding-bottom: 10px; |
| } |
| |
| .subtitle { |
| font-size: 0.9em; |
| color: #7f8c8d; |
| margin-top: 5px; |
| } |
| |
| |
| .submission-container { |
| background: white; |
| border-radius: 8px; |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| overflow: hidden; |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| |
| .tabs { |
| display: flex; |
| background: #f1f1f1; |
| border-bottom: 1px solid var(--border-color); |
| } |
| |
| .tab-btn { |
| flex: 1; |
| padding: 15px; |
| border: none; |
| background: none; |
| cursor: pointer; |
| font-size: 1.1em; |
| font-weight: 600; |
| color: #7f8c8d; |
| transition: all 0.3s; |
| } |
| |
| .tab-btn:hover { |
| background: #e9ecef; |
| color: var(--secondary-color); |
| } |
| |
| .tab-btn.active { |
| background: white; |
| color: var(--primary-color); |
| border-bottom: 3px solid var(--primary-color); |
| } |
| |
| .form-content { |
| padding: 30px; |
| display: none; |
| } |
| |
| .form-content.active { |
| display: block; |
| animation: fadeIn 0.5s; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .form-group { |
| margin-bottom: 20px; |
| } |
| |
| .form-group label { |
| display: block; |
| margin-bottom: 8px; |
| font-weight: 600; |
| color: var(--secondary-color); |
| } |
| |
| .form-group input[type="text"], |
| .form-group input[type="email"], |
| .form-group input[type="url"], |
| .form-group textarea, |
| .form-group select { |
| width: 100%; |
| padding: 10px; |
| border: 1px solid var(--border-color); |
| border-radius: 4px; |
| font-size: 1em; |
| box-sizing: border-box; |
| transition: border-color 0.2s; |
| } |
| |
| .form-group input:focus, |
| .form-group textarea:focus, |
| .form-group select:focus { |
| outline: none; |
| border-color: var(--primary-color); |
| } |
| |
| .form-group textarea { |
| resize: vertical; |
| min-height: 100px; |
| } |
| |
| .file-upload { |
| border: 2px dashed var(--border-color); |
| padding: 20px; |
| text-align: center; |
| border-radius: 4px; |
| cursor: pointer; |
| transition: border-color 0.2s; |
| position: relative; |
| } |
| |
| .file-upload:hover { |
| border-color: var(--primary-color); |
| background: #f8f9fa; |
| } |
| |
| .file-upload input[type="file"] { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| opacity: 0; |
| cursor: pointer; |
| } |
| |
| .submit-btn { |
| background-color: var(--primary-color); |
| color: white; |
| border: none; |
| padding: 12px 24px; |
| font-size: 1.1em; |
| border-radius: 4px; |
| cursor: pointer; |
| transition: background 0.3s; |
| display: block; |
| width: 100%; |
| margin-top: 30px; |
| } |
| |
| .submit-btn:hover { |
| background-color: #2980b9; |
| } |
| |
| .helper-text { |
| font-size: 0.85em; |
| color: #7f8c8d; |
| margin-top: 5px; |
| } |
| |
| .success-message { |
| display: none; |
| background: #d4edda; |
| color: #155724; |
| padding: 15px; |
| border-radius: 4px; |
| margin-top: 20px; |
| text-align: center; |
| border: 1px solid #c3e6cb; |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <aside class="sidebar"> |
| <div style="text-align: center; margin-bottom: 20px;"> |
| <h1 style="font-size: 1.5em; margin: 0; color: white;">AutoFS</h1> |
| <div style="font-size: 0.8em; color: #bdc3c7;">Feature Selection Leaderboard</div> |
| </div> |
|
|
| <div> |
| <h2>Navigation</h2> |
| <ul class="nav-links"> |
| <li><a href="/">📊 Overview</a></li> |
| <li><a href="/#main-table">🏆 Leaderboard</a></li> |
| <li><a href="/#charts">📈 Charts</a></li> |
| <li><a href="/#details">ℹ️ Details</a></li> |
| <li><a href="/global">🌍 Global Rankings</a></li> |
| <li><a href="/submit" class="active">📤 Submit Data/Method</a></li> |
| </ul> |
| </div> |
| |
| <div style="margin-top: auto; padding-top: 20px; border-top: 1px solid #34495e;"> |
| <p style="font-size: 0.8em; color: #bdc3c7; text-align: center;"> |
| Need help?<br> |
| <a href="mailto:support@autofs.com" style="color: var(--primary-color);">Contact Support</a> |
| </p> |
| </div> |
| </aside> |
|
|
| <main class="main-content"> |
| <header> |
| <h1 style="color: var(--secondary-color); margin: 0;">📤 Submission Center</h1> |
| <div class="subtitle">Contribute to the leaderboard by submitting new datasets or feature selection methods.</div> |
| </header> |
|
|
| <div class="submission-container"> |
| <div class="tabs"> |
| <button class="tab-btn active" onclick="switchTab('dataset')">Dataset Submission</button> |
| <button class="tab-btn" onclick="switchTab('method')">Method Submission</button> |
| </div> |
|
|
| |
| <div id="dataset-form" class="form-content active"> |
| <form onsubmit="handleSubmit(event, 'Dataset')"> |
| <div class="form-group"> |
| <label>Dataset Name *</label> |
| <input type="text" placeholder="e.g., GeneExpression_v2" required> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Domain/Category</label> |
| <select> |
| <option>Biology/Medical</option> |
| <option>Image Processing</option> |
| <option>Text/NLP</option> |
| <option>Finance</option> |
| <option>Other</option> |
| </select> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Description</label> |
| <textarea placeholder="Briefly describe the dataset, its origin, and the target variable..." required></textarea> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Dataset File (.mat, .csv) *</label> |
| <div class="file-upload"> |
| <input type="file" accept=".mat,.csv,.zip" required onchange="updateFileName(this)"> |
| <span id="file-name-dataset">Drag & drop or click to upload file</span> |
| </div> |
| <div class="helper-text">Max file size: 50MB. For larger files, please provide a link below.</div> |
| </div> |
| |
| <div class="form-group"> |
| <label>External Download Link (Optional)</label> |
| <input type="url" placeholder="https://..."> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Contact Email *</label> |
| <input type="email" placeholder="researcher@university.edu" required> |
| </div> |
|
|
| <button type="submit" class="submit-btn">Submit Dataset</button> |
| </form> |
| </div> |
|
|
| |
| <div id="method-form" class="form-content"> |
| <form onsubmit="handleSubmit(event, 'Method')"> |
| <div class="form-group"> |
| <label>Algorithm Name *</label> |
| <input type="text" placeholder="e.g., FastCorr-FS" required> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Complexity Class (Big O)</label> |
| <input type="text" placeholder="e.g., O(n*d^2)"> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Description & Key Innovation</label> |
| <textarea placeholder="Describe the core idea, advantages, and theoretical basis..." required></textarea> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Code Implementation (.py, .zip) *</label> |
| <div class="file-upload"> |
| <input type="file" accept=".py,.zip,.rar" required onchange="updateFileName(this)"> |
| <span id="file-name-method">Drag & drop or click to upload code</span> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Paper/Preprint Link (Optional)</label> |
| <input type="url" placeholder="https://arxiv.org/abs/..."> |
| </div> |
|
|
| <div class="form-group"> |
| <label>Contact Email *</label> |
| <input type="email" placeholder="developer@lab.com" required> |
| </div> |
|
|
| <button type="submit" class="submit-btn">Submit Method</button> |
| </form> |
| </div> |
| |
| <div id="success-msg" class="success-message"> |
| <h3>✅ Submission Received!</h3> |
| <p>Thank you for your contribution. Our team will review your submission and update the leaderboard shortly.</p> |
| <button onclick="resetForm()" style="background:none; border:none; color:#155724; text-decoration:underline; cursor:pointer;">Submit another</button> |
| </div> |
| </div> |
| </main> |
|
|
| <script> |
| function switchTab(tab) { |
| |
| document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active')); |
| event.target.classList.add('active'); |
| |
| |
| document.querySelectorAll('.form-content').forEach(content => content.classList.remove('active')); |
| document.getElementById(tab + '-form').classList.add('active'); |
| |
| |
| document.getElementById('success-msg').style.display = 'none'; |
| } |
| |
| function updateFileName(input) { |
| const spanId = input.parentElement.querySelector('span').id; |
| if (input.files && input.files.length > 0) { |
| document.getElementById(spanId).textContent = input.files[0].name; |
| document.getElementById(spanId).style.color = 'var(--primary-color)'; |
| document.getElementById(spanId).style.fontWeight = 'bold'; |
| } |
| } |
| |
| function handleSubmit(e, type) { |
| e.preventDefault(); |
| |
| |
| |
| const btn = e.target.querySelector('.submit-btn'); |
| const originalText = btn.innerText; |
| |
| btn.innerText = 'Submitting...'; |
| btn.disabled = true; |
| |
| setTimeout(() => { |
| document.querySelectorAll('.form-content').forEach(c => c.style.display = 'none'); |
| document.getElementById('success-msg').style.display = 'block'; |
| |
| |
| btn.innerText = originalText; |
| btn.disabled = false; |
| e.target.reset(); |
| const spans = document.querySelectorAll('.file-upload span'); |
| spans[0].textContent = "Drag & drop or click to upload file"; |
| spans[1].textContent = "Drag & drop or click to upload code"; |
| spans.forEach(s => { s.style.color = ''; s.style.fontWeight = ''; }); |
| |
| }, 1500); |
| } |
| |
| function resetForm() { |
| document.getElementById('success-msg').style.display = 'none'; |
| document.querySelector('.tab-btn.active').click(); |
| } |
| </script> |
|
|
| </body> |
| </html> |
