Spaces:
Sleeping
Sleeping
| <html lang="en" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Predict RNA alternative splicing outcomes (PSI) using an interpretable deep learning model"> | |
| <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> | |
| <title>{% block title %}{{ settings.app_name }}{% endblock %}</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eff6ff', | |
| 100: '#dbeafe', | |
| 200: '#bfdbfe', | |
| 300: '#93c5fd', | |
| 400: '#60a5fa', | |
| 500: '#3b82f6', | |
| 600: '#2563eb', | |
| 700: '#1d4ed8', | |
| 800: '#1e40af', | |
| 900: '#1e3a8a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <!-- Plotly for charts --> | |
| <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script> | |
| <!-- Custom CSS --> | |
| <link rel="stylesheet" href="/static/css/custom.css"> | |
| {% block head %}{% endblock %} | |
| </head> | |
| <body class="h-full bg-gray-50"> | |
| <div class="min-h-full flex flex-col"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm border-b border-gray-200"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <!-- Logo and brand --> | |
| <div class="flex items-center"> | |
| <a href="/" class="flex items-center space-x-2"> | |
| <svg class="h-8 w-8 text-primary-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> | |
| </svg> | |
| <span class="text-xl font-semibold text-gray-900">Splicing Predictor</span> | |
| </a> | |
| </div> | |
| <!-- Desktop navigation --> | |
| <div class="hidden md:flex md:items-center md:space-x-4"> | |
| <a href="/" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md {% if request.url.path == '/' %}text-primary-600 bg-primary-50{% endif %}"> | |
| Home | |
| </a> | |
| <!-- Tools Dropdown --> | |
| <div class="relative" id="tools-dropdown-container"> | |
| <button onclick="toggleToolsDropdown()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md flex items-center {% if request.url.path in ['/input', '/mutagenesis', '/comparative-analysis'] %}text-primary-600 bg-primary-50{% endif %}"> | |
| Tools | |
| <svg class="ml-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </button> | |
| <div id="tools-dropdown" class="hidden absolute left-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50"> | |
| <a href="/input" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {% if request.url.path == '/input' %}bg-primary-50 text-primary-600{% endif %}"> | |
| Model visualizations | |
| </a> | |
| <a href="/mutagenesis" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {% if request.url.path == '/mutagenesis' %}bg-primary-50 text-primary-600{% endif %}"> | |
| Variant analysis | |
| </a> | |
| <a href="/comparative-analysis" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {% if request.url.path == '/comparative-analysis' %}bg-primary-50 text-primary-600{% endif %}"> | |
| Comparative analysis | |
| </a> | |
| </div> | |
| </div> | |
| <a href="/help" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md {% if request.url.path == '/help' %}text-primary-600 bg-primary-50{% endif %}"> | |
| Help | |
| </a> | |
| <!-- About Dropdown --> | |
| <div class="relative" id="about-dropdown-container"> | |
| <button onclick="toggleAboutDropdown()" class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md flex items-center {% if request.url.path in ['/methodology', '/publications', '/history', '/download'] %}text-primary-600 bg-primary-50{% endif %}"> | |
| About | |
| <svg class="ml-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </button> | |
| <div id="about-dropdown" class="hidden absolute left-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50"> | |
| <a href="/methodology" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {% if request.url.path == '/methodology' %}bg-primary-50 text-primary-600{% endif %}"> | |
| Scientific methodology | |
| </a> | |
| <a href="/publications" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {% if request.url.path == '/publications' %}bg-primary-50 text-primary-600{% endif %}"> | |
| Relevant publications | |
| </a> | |
| <a href="/history" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {% if request.url.path == '/history' %}bg-primary-50 text-primary-600{% endif %}"> | |
| Site history | |
| </a> | |
| <a href="/download" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {% if request.url.path == '/download' %}bg-primary-50 text-primary-600{% endif %}"> | |
| Download | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <div class="flex items-center md:hidden"> | |
| <button type="button" onclick="toggleMobileMenu()" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"> | |
| <svg class="h-6 w-6" id="menu-icon-open" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| <svg class="h-6 w-6 hidden" id="menu-icon-close" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1"> | |
| <a href="/" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md">Home</a> | |
| <!-- Mobile Tools Section --> | |
| <div class="border-t border-gray-200 pt-2 mt-2"> | |
| <button onclick="toggleMobileToolsMenu()" class="w-full flex items-center justify-between px-3 py-2 text-base font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md"> | |
| <span>Tools</span> | |
| <svg id="mobile-tools-chevron" class="h-5 w-5 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </button> | |
| <div id="mobile-tools-menu" class="hidden pl-4 space-y-1"> | |
| <a href="/input" class="block px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50 rounded-md">Model visualizations</a> | |
| <a href="/mutagenesis" class="block px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50 rounded-md">Variant analysis</a> | |
| <a href="/comparative-analysis" class="block px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50 rounded-md">Comparative analysis</a> | |
| </div> | |
| </div> | |
| <a href="/help" class="block px-3 py-2 text-base font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md">Help</a> | |
| <!-- Mobile About Section --> | |
| <div class="border-t border-gray-200 pt-2 mt-2"> | |
| <button onclick="toggleMobileAboutMenu()" class="w-full flex items-center justify-between px-3 py-2 text-base font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-50 rounded-md"> | |
| <span>About</span> | |
| <svg id="mobile-about-chevron" class="h-5 w-5 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> | |
| </svg> | |
| </button> | |
| <div id="mobile-about-menu" class="hidden pl-4 space-y-1"> | |
| <a href="/methodology" class="block px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50 rounded-md">Scientific methodology</a> | |
| <a href="/publications" class="block px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50 rounded-md">Relevant publications</a> | |
| <a href="/history" class="block px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50 rounded-md">Site history</a> | |
| <a href="/download" class="block px-3 py-2 text-sm font-medium text-gray-600 hover:text-primary-600 hover:bg-gray-50 rounded-md">Download</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main content --> | |
| <main class="flex-grow"> | |
| {% block content %}{% endblock %} | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 mt-auto"> | |
| <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-center"> | |
| <a href="https://github.com/Sachin1801/interpretable-splicing-model" target="_blank" class="text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">GitHub</span> | |
| <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"> | |
| <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" /> | |
| </svg> | |
| </a> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-center text-xs text-gray-400"> | |
| Version {{ settings.app_version }} | | |
| <a href="/help" class="hover:text-gray-500">Help</a> | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Navigation scripts --> | |
| <script> | |
| // Mobile menu toggle | |
| function toggleMobileMenu() { | |
| const menu = document.getElementById('mobile-menu'); | |
| const iconOpen = document.getElementById('menu-icon-open'); | |
| const iconClose = document.getElementById('menu-icon-close'); | |
| menu.classList.toggle('hidden'); | |
| iconOpen.classList.toggle('hidden'); | |
| iconClose.classList.toggle('hidden'); | |
| } | |
| // Desktop dropdown functions | |
| function toggleToolsDropdown() { | |
| const dropdown = document.getElementById('tools-dropdown'); | |
| const aboutDropdown = document.getElementById('about-dropdown'); | |
| // Close about dropdown if open | |
| aboutDropdown.classList.add('hidden'); | |
| dropdown.classList.toggle('hidden'); | |
| } | |
| function toggleAboutDropdown() { | |
| const dropdown = document.getElementById('about-dropdown'); | |
| const toolsDropdown = document.getElementById('tools-dropdown'); | |
| // Close tools dropdown if open | |
| toolsDropdown.classList.add('hidden'); | |
| dropdown.classList.toggle('hidden'); | |
| } | |
| // Mobile dropdown functions | |
| function toggleMobileToolsMenu() { | |
| const menu = document.getElementById('mobile-tools-menu'); | |
| const chevron = document.getElementById('mobile-tools-chevron'); | |
| menu.classList.toggle('hidden'); | |
| chevron.classList.toggle('rotate-180'); | |
| } | |
| function toggleMobileAboutMenu() { | |
| const menu = document.getElementById('mobile-about-menu'); | |
| const chevron = document.getElementById('mobile-about-chevron'); | |
| menu.classList.toggle('hidden'); | |
| chevron.classList.toggle('rotate-180'); | |
| } | |
| // Close dropdowns when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const toolsContainer = document.getElementById('tools-dropdown-container'); | |
| const aboutContainer = document.getElementById('about-dropdown-container'); | |
| const toolsDropdown = document.getElementById('tools-dropdown'); | |
| const aboutDropdown = document.getElementById('about-dropdown'); | |
| if (toolsContainer && !toolsContainer.contains(event.target)) { | |
| toolsDropdown.classList.add('hidden'); | |
| } | |
| if (aboutContainer && !aboutContainer.contains(event.target)) { | |
| aboutDropdown.classList.add('hidden'); | |
| } | |
| }); | |
| // Close dropdowns on Escape key | |
| document.addEventListener('keydown', function(event) { | |
| if (event.key === 'Escape') { | |
| document.getElementById('tools-dropdown').classList.add('hidden'); | |
| document.getElementById('about-dropdown').classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| <!-- Auth utilities (loaded on all pages) --> | |
| <script src="/static/js/auth.js"></script> | |
| {% block scripts %}{% endblock %} | |
| </body> | |
| </html> | |