| | <!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> |
