Spaces:

OPEN-ACCESS-BIODATA
/

mtDNAclassifier_flask

Sleeping

App Files Files Community

mtDNAclassifier_flask / templates /Home.html

linh-hk

fix socketIO connection and find huggingface working space of the app, updated in README

55788de 6 months ago

raw

history blame contribute delete

8.34 kB

	<!DOCTYPE html>
	<html style="font-size: 16px;" lang="en"><head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta name="keywords" content="🧬 mtDNA Location Classifier">
	<meta name="description" content="">
	<!-- meta name="generator" content="Nicepage 7.12.8, nicepage.com"-->
	<title>Home</title>
	<link rel="stylesheet" href="{{ url_for('static', filename='nicepage.css') }}">
	<link rel="stylesheet" href="{{ url_for('static', filename='Home.css') }}">
	<link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css2?display=swap&family=Roboto:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Lobster:wght@400&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900">
	<meta name="theme-color" content="#478ac9">
	<meta property="og:title" content="Home">
	<meta property="og:type" content="website">
	</head>
	<body data-home-page="Home.html" data-home-page-title="Home" data-path-to-root="./" data-include-products="false" class="u-body u-clearfix u-stick-footer u-xl-mode" data-lang="en">
	<header class="u-clearfix u-custom-color-1 u-header u-header" id="header">
	<div class="u-clearfix u-sheet u-sheet-1">
	<p class="u-align-center u-custom-font u-font-roboto-slab u-text u-text-1">{% if isvip %}Premium{% else %}Freemium{% endif %}</p>
	<h1 class="u-custom-font u-font-roboto-slab u-text u-text-color-var u-title u-text-2" spellcheck="false"> 🧬 mtDNA Location Classifier</h1>
	<nav class="u-menu u-menu-one-level u-menu-1" role="navigation">
	<div class="u-custom-menu u-nav-container">
	<ul role="menubar" class="u-nav u-unstyled">
	<li role="none" class="u-nav-item"><a tabindex="-1" role="menuitem" class="u-button-style u-nav-link" href={{ url_for('home') }} aria-haspopup="true">Home</a></li>
	<li role="none" class="u-nav-item"><a role="menuitem" class="u-button-style u-nav-link" href={{ url_for('about') }}>About</a></li>
	<li role="none" class="u-nav-item"><a role="menuitem" class="u-button-style u-nav-link" href={{ url_for('pricing') }}>Pricing</a></li>
	<li role="none" class="u-nav-item"><a role="menuitem" class="u-button-style u-nav-link" href={{ url_for('contact') }}>Contact</a></li>
	</ul>
	</div>
	</nav>
	</div>
	</header>
	<section class="u-clearfix u-section-1" id="content">
	<div class="u-clearfix u-sheet u-sheet-1">
	<a href="{% if isvip %}#{% else %}{{ url_for('pricing') }}{% endif %}" class="u-active-color-var u-border-grey-75 u-border-hover-grey-75 u-border-none u-btn u-btn-round u-button-style u-color-var u-custom-font u-font-lobster u-hover-custom-color-1 u-radius u-text-white u-btn-1">{% if isvip %}Thank you <br>For Your <br>Support{% else %}Be our <br>Premium <br>supporter{% endif %}
	</a>
	<p class="u-custom-font u-font-open-sans u-text u-text-1">Enter the accession numbers of your mitochondrial DNAs, we will help you extract its location from the NCBI meta-maze.</p>
	<p class="u-custom-font u-font-open-sans u-text u-text-2">Run your first 30 free IDs </p>
	<div class="u-form u-form-1">
	<form id="mtForm" action="{{ url_for('submit') }}" method="post" enctype="multipart/form-data" class="u-clearfix u-form-spacing-10 u-form-vertical u-inner-form" name="form" style="padding: 10px;" >
	<div class="u-form-group u-form-name u-form-partition-factor-2">
	<label for="name-deac" class="u-custom-font u-font-roboto-slab u-label u-label-1">Input accession number(s)</label>
	<input type="text" placeholder="single (KU131308) or comma-separated (e.g., MF362736.1, MF362738.1, KU131308, etc.)" id="name-deac" name="raw_text" class="u-input u-input-rectangle">
	</div>
	<div class="u-form-group u-form-partition-factor-2">
	<label for="email-deac" class="u-custom-font u-font-roboto-slab u-label u-label-2">Upload .xlsx File</label>
	<input type="file" id="file-upload" name="file_upload" accept=".xlsx" class="u-input u-input-rectangle" spellcheck="false" aria-label="check out the template">
	</div>
	<p class="u-align-right u-form-group u-form-text u-text u-text-3">
	<a class="u-active-none u-border-none u-btn u-button-link u-button-style u-custom-font u-font-roboto-slab u-hover-none u-none u-text-palette-1-base u-btn-2" href="https://docs.google.com/spreadsheets/d/1lKqPp17EfHsshJGZRWEpcNOZlGo3F5qU/edit?usp=sharing" target="_blank">(template) </a>
	</p>
	<div class="u-form-email u-form-group">
	<label for="message-deac" class="u-custom-font u-font-roboto-slab u-label u-label-3">Email</label>
	<input placeholder="Enter your email address to get extra 20 free IDs" rows="4" cols="50" id="message-deac" name="user_email" class="u-input u-input-rectangle" spellcheck="false" aria-label="Thank you" type="email">
	</div>
	<div class="u-align-center u-form-group u-form-submit">
	<button type="submit" class="u-btn u-btn-submit u-button-style u-custom-font u-font-roboto-slab u-btn-3">Submit</button>
	<!--a href="{{ url_for('submit') }}" class="u-btn u-btn-submit u-button-style u-custom-font u-font-roboto-slab u-btn-3">Submit</a>
	<input type="submit" value="submit" class="u-form-control-hidden"-->
	</div>
	</form>
	</div>
	</div>
	</section>



	<footer class="u-align-center u-clearfix u-color-var u-container-align-center u-footer u-valign-top-lg u-valign-top-md u-valign-top-sm u-valign-top-xs u-footer" id="footer"><div class="u-clearfix u-sheet u-sheet-1">
	<p class="u-align-right u-custom-font u-font-roboto-slab u-small-text u-text u-text-variant u-text-white u-text-1">Contact<br>
	</p>
	</div>
	</footer>
	<section class="u-backlink u-clearfix u-grey-80"></section>



	<script>
	document.getElementById('mtForm').addEventListener('submit', function (e) {
	const text = (document.getElementById('name-deac').value \|\| '').trim();
	const fileInput = document.getElementById('file-upload');
	const hasFile = fileInput && fileInput.files && fileInput.files.length > 0;
	const msgBox = document.getElementById('mtMsg');

	// reset message box
	if (msgBox) { msgBox.style.display = 'none'; msgBox.textContent = ''; }

	// 1) must provide either text OR file
	if (!text && !hasFile) {
	e.preventDefault();
	if (msgBox) { msgBox.textContent = 'Please enter ID(s) or submit an Excel file.'; msgBox.style.display = 'block'; }
	return;
	}

	// 2) not both
	if (text && hasFile) {
	e.preventDefault();
	if (msgBox) { msgBox.textContent = 'Please choose ONE method: either enter ID(s) OR upload an Excel (.xlsx) file.'; msgBox.style.display = 'block'; }
	return;
	}

	// 3) file must be .xlsx
	if (hasFile) {
	const name = fileInput.files[0].name \|\| '';
	if (!/\.xlsx$/i.test(name)) {
	e.preventDefault();
	if (msgBox) { msgBox.textContent = 'Only .xlsx is supported.'; msgBox.style.display = 'block'; }
	return;
	}
	}

	// allow submit; Flask will do final validation + flash messages
	});

	document.addEventListener('click', function (e) {
	const a = e.target.closest('a[href]');
	if (!a) return;

	const href = a.getAttribute('href');
	// Only adjust internal links (not http/https or mailto/etc.)
	if (!href \|\| /^(?:[a-z]+:)?\/\//i.test(href) \|\| href.startsWith('#')) return;

	// Preserve the current ?__sign=... and any other params
	const qs = window.location.search; // includes "?__sign=..."
	// If the link already has a query, merge them
	const joined = href + (href.includes('?') ? '&' + qs.slice(1) : qs);

	e.preventDefault();
	window.location.href = joined;
	});
	</script>
	</body></html>