XPF / docs /index.html
niobures's picture
XPF
4a08ba7 verified
<!DOCTYPE html>
<html lang="en">
<head>
<title>The XPF Corpus </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel = "stylesheet" href="./css/header.css">
<link rel = "stylesheet" href="./css/index.css">
<link rel = "stylesheet" href="./css/index_media.css">
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid h-100">
<button id="display_sidenav" class="navbar-toggler" data-toggle="collapse" data-target="#websitenav">
<div class="icon-bar"></div>
<div class="icon-bar"></div>
<div class="icon-bar"></div>
</button>
<div class="collapse navbar-collapse" id="websitenav">
<ul class="navbar-nav ml-auto">
<li class="nav-item p-2">
<a href="index.html" class="nav-link active">The XPF Corpus</a>
</li>
<li class="nav-item p-2">
<a href="About.html" class="nav-link">About</a>
</li>
<li class="nav-item p-2">
<a href="Convert-to-IPA.html" class="nav-link">Convert to IPA</a>
</li>
<li class="nav-item p-2">
<a href="Word-Clouds.html" class="nav-link">Word Clouds</a>
</li>
<li class="nav-item p-2">
<a href="Special-Thanks.html" class="nav-link">Special Thanks</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="website-sidenav" class="sidenav">
<a href="javascript:void(0)" id="close_sidenav">X</a>
<a href="index.html" class="active">The XPF Corpus</a>
<a href="About.html">About</a>
<a href="Convert-to-IPA.html">Convert to IPA</a>
<a href="Word-Clouds.html">Word Clouds</a>
<a href="Special-Thanks.html">Special Thanks</a>
</div>
<div class="jumbotron vertical-center m-0">
<div id="content" class="container-fluid px-0">
<div class="h-100 d-flex flex-column">
<div class="row h-100 mx-0">
<div class="col-3 text-right lang" style="padding-top: 20px; color: #2cccc4">Piapoco</div>
<div class="col-5 text-center lang" style="color: #858e99">Mamasa</div>
<div class="col-4 lang" style="padding-top: 10px; color: #77aad9">Basque</div>
</div>
<div class="row h-100 mx-0">
<div class="col-1 text-left lang" style="padding-top: 45px; color: #77aad9">Hindi</div>
<div class="col-5 text-center lang" style="padding-top: 15px; color: #e68387">Kannada</div>
<div class="col-4 text-left lang" style="padding-top: 40px; color: #f5d654">Rikbaktsa</div>
<div class="col-2 text-center lang" style="padding-top: 5px; color: #e68387">Tamil</div>
</div>
<div class="row h-100 mx-0">
<div class="col-3 text-right lang" style="padding-top: 55px; color: #858e99">Choctaw</div>
<div class="col-4 text-center lang" style="padding-top: 5px; color: #77aad9">Mwani</div>
<div class="col-5 text-center lang" style="padding-top: 40px; color: #2cccc4">Yuracare</div>
</div>
<div class="row h-100 mx-0">
<div class="col-2 text-right lang" style="padding-top: 50px; color: #e68387">Yakut</div>
<div class="col-8 text-center"><h1 style="margin: 0;">The XPF Corpus</h1></div>
<div class="col-2 text-left lang" style="padding-top: 15px; padding-left: 0; color: #858e99">Swahili</div>
</div>
<div class="row h-100 mx-0">
<div class="col-4 text-left lang" style="padding-top: 40px; padding-left: 0; color: #77aad9">Tok Pisin</div>
<div class="col-3 text-center lang" style="padding-top: 20px; color: #f5d654">Georgian</div>
<div class="col-5 text-center lang" style="padding-top: 30px; color: #e68387">Arabic</div>
</div>
<div class="row h-100 mx-0">
<div class="col-6 text-center lang" style="padding-top: 25px; color: #2cccc4">Hungarian</div>
<div class="col-2 text-center lang" style="padding-top: 15px; color: #77aad9">Ixil</div>
<div class="col-4 text-right lang" style="padding-top: 30px; color: #f5d654">Guarani</div>
</div>
<div class="row h-100 mx-0">
<div class="col-4 text-center lang" style="padding-top: 65px; color: #f5d654">Hmong</div>
<div class="col-4 text-center lang" style="padding-top: 30px; color: #858e99">Azerbaijani</div>
<div class="col-4 text-center lang" style="padding-top: 55px; color: #2cccc4">Zaza</div>
</div>
</div>
</div>
</div>
<div class="container-fluid footer"></div>
<div id="overlay"></div>
<script>
// Randomize initial display
var divs = document.getElementsByClassName('lang');
var langs = [];
for (let i = 0; i < divs.length; i++) {
langs.push(divs[i].innerHTML);
}
window.onload = random_lang();
function random_lang() {
for (var i = langs.length - 1; i >= 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var new_lang = langs[j];
langs[j] = langs[i];
langs[i] = new_lang;
document.getElementById('content').getElementsByClassName('lang')[i].innerHTML = new_lang;
}
}
</script>
<script src="./js/sidenav.js"></script>
</body>
</html>