Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F100125713
index.html
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Tue, Jan 28, 08:43
Size
14 KB
Mime Type
text/html
Expires
Thu, Jan 30, 08:43 (2 d)
Engine
blob
Format
Raw Data
Handle
23904879
Attached To
rCOUGHVIDWEB Coughvid_web
index.html
View Options
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="theme" content="Syna">
<meta name="theme-version" content="v0.16.2">
<meta name="theme-url" content="https://syna.okkur.org">
<meta name="theme-description" content="Highly customizable open source theme for Hugo based static websites">
<meta name="theme-author" content="Okkur Labs">
<meta name="theme-author-url" content="https://about.okkur.org">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="google" content="notranslate" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="Cough-based screening for COVID-19">
<meta property="og:title" content="Coughvid" />
<meta property="og:description" content="Cough-based screening for COVID-19" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<meta property="og:updated_time" content="2020-04-02T00:00:00+00:00" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Coughvid" />
<meta name="twitter:description" content="Cough-based screening for COVID-19">
<meta name="twitter:url" content="/" />
<meta property="og:image" content="/images/favicon.svg">
<meta name="twitter:image" content="/images/favicon.svg">
<meta name="author" content="Embedded Systems Laboratory">
<meta name="generator" content="Hugo 0.68.3" />
<title>Coughvid</title>
<!-- Theme Styles -->
<style>
.mx-0 {
margin-left: 0 !important;
margin-right: 0 !important; }
@-ms-viewport {
width: device-width; }
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar; }
*,
*::before,
*::after {
box-sizing: inherit; }
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 540px;
max-width: 720px;
max-width: 960px;
max-width: 1140px; }
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto; }
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px; }
.no-gutters {
margin-right: 0;
margin-left: 0; }
.no-gutters > .col,
.no-gutters > [class*="col-"] {
padding-right: 0;
padding-left: 0; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; }
.col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
.col-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
.col-1 {
flex: 0 0 8.33333%;
max-width: 8.33333%; }
.col-2 {
flex: 0 0 16.66667%;
max-width: 16.66667%; }
.col-3 {
flex: 0 0 25%;
max-width: 25%; }
.col-4 {
flex: 0 0 33.33333%;
max-width: 33.33333%; }
.col-5 {
flex: 0 0 41.66667%;
max-width: 41.66667%; }
.col-6 {
flex: 0 0 50%;
max-width: 50%; }
.col-7 {
flex: 0 0 58.33333%;
max-width: 58.33333%; }
.col-8 {
flex: 0 0 66.66667%;
max-width: 66.66667%; }
.col-9 {
flex: 0 0 75%;
max-width: 75%; }
.col-10 {
flex: 0 0 83.33333%;
max-width: 83.33333%; }
.col-11 {
flex: 0 0 91.66667%;
max-width: 91.66667%; }
.col-12 {
flex: 0 0 100%;
max-width: 100%; }
.order-first {
order: -1; }
.order-last {
order: 13; }
.order-0 {
order: 0; }
.order-1 {
order: 1; }
.order-2 {
order: 2; }
.order-3 {
order: 3; }
.order-4 {
order: 4; }
.order-5 {
order: 5; }
.order-6 {
order: 6; }
.order-7 {
order: 7; }
.order-8 {
order: 8; }
.order-9 {
order: 9; }
.order-10 {
order: 10; }
.order-11 {
order: 11; }
.order-12 {
order: 12; }
.offset-1 {
margin-left: 8.33333%; }
.offset-2 {
margin-left: 16.66667%; }
.offset-3 {
margin-left: 25%; }
.offset-4 {
margin-left: 33.33333%; }
.offset-5 {
margin-left: 41.66667%; }
.offset-6 {
margin-left: 50%; }
.offset-7 {
margin-left: 58.33333%; }
.offset-8 {
margin-left: 66.66667%; }
.offset-9 {
margin-left: 75%; }
.offset-10 {
margin-left: 83.33333%; }
.offset-11 {
margin-left: 91.66667%; }
.d-none {
display: none !important; }
.d-inline {
display: inline !important; }
.d-inline-block {
display: inline-block !important; }
.d-block {
display: block !important; }
.d-table {
display: table !important; }
.d-table-row {
display: table-row !important; }
.d-table-cell {
display: table-cell !important; }
.d-flex {
display: flex !important; }
.d-inline-flex {
display: inline-flex !important; }
@media print {
.d-print-none {
display: none !important; }
.d-print-inline {
display: inline !important; }
.d-print-inline-block {
display: inline-block !important; }
.d-print-block {
display: block !important; }
.d-print-table {
display: table !important; }
.d-print-table-row {
display: table-row !important; }
.d-print-table-cell {
display: table-cell !important; }
.d-print-flex {
display: flex !important; }
.d-print-inline-flex {
display: inline-flex !important; } }
.flex-row {
flex-direction: row !important; }
.flex-column {
flex-direction: column !important; }
.flex-row-reverse {
flex-direction: row-reverse !important; }
.flex-column-reverse {
flex-direction: column-reverse !important; }
.flex-wrap {
flex-wrap: wrap !important; }
.flex-nowrap {
flex-wrap: nowrap !important; }
.flex-wrap-reverse {
flex-wrap: wrap-reverse !important; }
.flex-fill {
flex: 1 1 auto !important; }
.flex-grow-0 {
flex-grow: 0 !important; }
.flex-grow-1 {
flex-grow: 1 !important; }
.flex-shrink-0 {
flex-shrink: 0 !important; }
.flex-shrink-1 {
flex-shrink: 1 !important; }
.justify-content-start {
justify-content: flex-start !important; }
.justify-content-end {
justify-content: flex-end !important; }
.justify-content-center {
justify-content: center !important; }
.justify-content-between {
justify-content: space-between !important; }
.justify-content-around {
justify-content: space-around !important; }
.align-items-start {
align-items: flex-start !important; }
.align-items-end {
align-items: flex-end !important; }
.align-items-center {
align-items: center !important; }
.align-items-baseline {
align-items: baseline !important; }
.align-items-stretch {
align-items: stretch !important; }
.align-content-start {
align-content: flex-start !important; }
.align-content-end {
align-content: flex-end !important; }
.align-content-center {
align-content: center !important; }
.align-content-between {
align-content: space-between !important; }
.align-content-around {
align-content: space-around !important; }
.align-content-stretch {
align-content: stretch !important; }
.align-self-auto {
align-self: auto !important; }
.align-self-start {
align-self: flex-start !important; }
.align-self-end {
align-self: flex-end !important; }
.align-self-center {
align-self: center !important; }
.align-self-baseline {
align-self: baseline !important; }
.align-self-stretch {
align-self: stretch !important; }
.alert {
display: inline-block;
margin-top: 30px;
}
.overlayed-link {
position: absolute;
top: 1.5rem;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
#progressBar {
margin: 0 auto;
padding: 20px;
width: 80%;
height: 4px;
}
</style>
<link href="/style.min.014e4a32d10797bc5893d8a3b6327895b2143f43ebf649ab9b974a9e5b3c53f9.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32" type="image/x-icon" href="/favicon.ico">
<link rel="icon" href="/favicon.png">
<link rel="apple-touch-icon-precomposed" href="/favicon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<script>
window.syna = {
};
</script>
<script src="/scripts/syna-head.min.0757f18970a0a32d5acac5a2accc5fe82f787821866c545d9ed17ca765f291a3.js"></script>
</head>
<body class="bg-secondary">
<!-- Navigation --><nav class="overlay fragment navbar navbar-expand-lg py-2 scroll-spy bg-light navbar-light" id="nav" role="navigation">
<div class="container">
<a class="navbar-brand py-0" href="https://www.epfl.ch/">
<img src="/images/epfl-logo.svg" height="35" class="d-inline-block align-top" alt="EPFL">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse justify-content-end collapse show" id="navbarCollapse">
<ul class="navbar-nav"><li class="nav-item">
<a href="/"
class="nav-link active default-active">
Home
</a>
</li><li class="nav-item">
<a href="/instructions"
class="nav-link">
Instructions
</a>
</li><li class="nav-item">
<a href="/about"
class="nav-link">
About Us
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="scroll-to-top bg-primary has-font-icon"
title="Back to top"
><i class="fas fa-angle-up"></i><span class="sr-only">Back to top</span>
</div>
<!-- Hero -->
<header id="hero" class="fragment hero">
<div class="jumbotron text-center mb-0 bg-light">
<div class="hero-image-container row justify-content-center align-items-start">
<img
class="hero-image overlay img-fluid"
src="/images/main_logo.svg"
alt="Coughvid" width="400px"></img>
</div>
<div class="hero-subtitle-container row justify-content-center align-items-start">
<h1 class="hero-subtitle overlay jumbotron-heading my-4 text-body">Send us a recording of a cough sound and help research on COVID-19</h1>
</div>
<div class="hero-buttons" style="margin-bottom:1em">
<a href="/instructions">Safe coughing instructions</a>
</div>
<div class="hero-buttons">
<div id="recordButton" class="overlay btn btn-lg m-2 btn-dark ">
<div id="recordText" class="column justify-content-center align-content-center">◉ Record</div>
</div>
<div id="progressBar"></div>
</div>
<div id="thanks" class="alert alert-success" style="opacity:0">
<strong>Thank you!</strong>
</div>
<!-- Additional form -->
<div id="form-wrapper" style="display:none">
<form id="form-metadata">
<div class="form-group">
<label for="status">What is your current condition?</label>
<select id="status" name="status" class="form-control">
<option value="0">I am healthy</option>
<option value="1">I have symptoms, but no diagnosis</option>
<option value="2">I've been diagnosed with COVID-19</option>
</select>
</div>
<div class="form-group" style="margin-left:auto; margin-right:auto; margin-bottom:0; display:table;">
<label>Do you have any of the following?</label>
<ul style="text-align:left; list-style-type:none">
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="respiratory_condition" name="respiratory_condition">
<label class="form-check-label" for="respiratory_condition">Other respiratory conditions.</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="fever" name="fever">
<label class="form-check-label" for="fever">Fever or muscle pain.</label>
</div>
</li>
</ul>
</div>
<div class="form-row">
<div class="col">
<label for="age">Age:</label>
<input type="number" id="age" name="age" style="width:4em" aria-required="true">
<label for="sex">Gender:</label>
<select id="gender" name="gender">
<option value="female">Female</option>
<option value="male">Male</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div id="submitButton" class="overlay btn btn-lg m-2 btn-dark ">
<div id="recordText" class="column justify-content-center align-content-center">Submit</div>
</div>
</form>
</div>
</div>
</header>
<!-- Footer -->
<section id="footer" class="fragment ">
<div class="container-fluid bg-light ">
<div class="container py-5 ">
<div class="row">
<div class="col-md m-2 text-body">
<h4></h4>
<a href="#">
<img src="/images/corner_logo.svg" class="img-fluid w-50" alt="Logo Subtext">
</a>
</div>
<div class="col-md m-2 text-body">
</div>
<div class="col-md m-2 text-body">
<div><h4 id="cough-based-covid-19-fast-screening-project">Cough-based COVID-19 fast screening project</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Copyright -->
<footer class="overlay fragment container-fluid bg-light" id="copyright">
<div class="container">
<div class="row py-3">
<div class="col-md">
<div class="row mx-0 my-2 justify-content-center text-center text-lg-none text-black-50">
<div class="row mx-0 mr-lg-auto justify-content-center">
<div class="col-auto copyright-notice">2020 Embedded Systems Laboratory</div>
</div>
</div>
</div>
<div class="col-auto mx-auto">
<div class="row mx-0 navbar-text text-center text-black-50">Website based on<a href="https://syna.okkur.org" class="ml-1">Syna</a>
</div>
</div>
<div class="col-md">
<div class="row mx-0 my-2 justify-content-center">
<ul class="nav ml-lg-auto">
<li class="nav-item">
<a class="nav-link py-0" href="/about"
>About Us</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="https://www.epfl.ch/labs/esl/"
>ESL Laboratory</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<div id="react"></div>
<!-- Theme Code -->
<script src="/js/progressbar.min.js"></script>
<script src="/js/uuidv4.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script async defer src="/scripts/syna-main.min.68ae1ae47948304c9c224cfc1a97ffe16c57514bc587dd6140dcb82389a8d299.js"></script>
<script src='/js/app.js'></script>
</body>
</html>
Event Timeline
Log In to Comment