STARK-web/templates/index.html
2023-10-04 17:24:40 +02:00

293 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="static/css/nouislider.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="grey darken-2" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">STARK</a>
<!-- <ul class="right hide-on-med-and-down">-->
<!-- <li><a href="#">Navbar Link</a></li>-->
<!-- </ul>-->
<!-- <ul id="nav-mobile" class="sidenav">-->
<!-- <li><a href="#">Navbar Link</a></li>-->
<!-- </ul>-->
<!-- <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>-->
</div>
</nav>
<!-- <div class="section no-pad-bot" id="index-banner">-->
<!-- <div class="container">-->
<!-- <br><br>-->
<!-- <h1 class="header center orange-text">Starter Template</h1>-->
<!-- <div class="row center">-->
<!-- <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>-->
<!-- </div>-->
<!-- <div class="row center">-->
<!-- <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>-->
<!-- </div>-->
<!-- <br><br>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="container">-->
<!-- <div class="section">-->
<!-- &lt;!&ndash; Icon Section &ndash;&gt;-->
<!-- <div class="row">-->
<!-- <div class="col s12 m4">-->
<!-- <div class="icon-block">-->
<!-- <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>-->
<!-- <h5 class="center">Speeds up development</h5>-->
<!-- <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col s12 m4">-->
<!-- <div class="icon-block">-->
<!-- <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>-->
<!-- <h5 class="center">User Experience Focused</h5>-->
<!-- <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col s12 m4">-->
<!-- <div class="icon-block">-->
<!-- <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>-->
<!-- <h5 class="center">Easy to work with</h5>-->
<!-- <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <br><br>-->
<div class="container">
<br>
<div class="row">
<div class="col s12">
<form>
<h4>General settings</h4>
<div class="card">
<div class="card-content">
<label>Treebank</label>
<div class = "file-field input-field">
<div class = "btn">
<span>Browse</span>
<input type = "file" />
</div>
<div class = "file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload"/>
</div>
<span class="helper-text" data-error="wrong" data-success="right">Upload a treebank in CONLL-U format.</span>
</div>
<div class="row">
<div class="input-field col s12">
<input id="input_url" name="input_url" type="text" class="validate">
<label for="input_url">Treebank url</label>
<span class="helper-text" data-error="wrong" data-success="right">Insert a link to treebank in CONLL-U format.</span>
</div>
</div>
</div>
</div>
<br>
<h4>Tree specifications</h4>
<div class="card">
<div class="card-content">
<label>Tree size</label>
<div class="row">
<div class="input-field col s12">
<br />
<div id="slider"></div>
<span class="helper-text" data-error="wrong" data-success="right">Specify the number of nodes in the trees to be extracted.</span>
</div>
</div>
<label>Node type</label>
<div class="row">
<div class="input-field col s12">
<p>
<label>
<input type="checkbox" class="filled-in" checked="checked" />
<span>UPOS</span>
</label>
</p>
<p>
<label>
<input type="checkbox" class="filled-in" />
<span>form</span>
</label>
</p>
<p>
<label>
<input type="checkbox" class="filled-in" />
<span>lemma</span>
</label>
</p>
<span class="helper-text" data-error="wrong" data-success="right">Should extracted trees be differentiated based on the surface word order?</span>
</div>
</div>
</div>
</div>
<br>
<h4>Advanced tree specifications</h4>
<div class="card">
<div class="card-content">
<label>Fixed order</label>
<div class="row">
<div class="input-field col s12">
<div class="switch">
<label>
No
<input type="checkbox" checked="checked">
<span class="lever"></span>
Yes
</label>
</div>
<span class="helper-text" data-error="wrong" data-success="right">Should extracted trees be differentiated based on the surface word order?</span>
</div>
</div>
<label>Labeled trees</label>
<div class="row">
<div class="input-field col s12">
<div class="switch">
<label>
No
<input type="checkbox" checked="checked">
<span class="lever"></span>
Yes
</label>
</div>
<span class="helper-text" data-error="wrong" data-success="right">Should the extracted trees contain names of dependency relations?</span>
</div>
</div>
<label>Complete trees</label>
<div class="row">
<div class="input-field col s12">
<div class="switch">
<label>
No
<input type="checkbox" checked="checked">
<span class="lever"></span>
Yes
</label>
</div>
<span class="helper-text" data-error="wrong" data-success="right">Should only full subtrees be extracted (rather than all possible subtrees)?</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="root_restriction" name="root_restriction" type="text" class="validate">
<label for="root_restriction">Root restriction</label>
<span class="helper-text" data-error="wrong" data-success="right">Specify potential restrictions on the root of the trees to be extracted (e.g. upos=NOUN if you are interested in nominal trees only)</span>
</div>
</div>
</div>
</div>
<h4>Output settings</h4>
<div class="card">
<div class="card-content">
<label>Association measures</label>
<div class="row">
<div class="input-field col s12">
<div class="switch">
<label>
No
<input type="checkbox">
<span class="lever"></span>
Yes
</label>
</div>
<span class="helper-text" data-error="wrong" data-success="right">Include measures of statistical association between nodes of the tree (MI, MI3, Dice, logDice, t-score, simple-LL) in the output?</span>
</div>
</div>
<label>Grew-match patterns</label>
<div class="row">
<div class="input-field col s12">
<div class="switch">
<label>
No
<input type="checkbox">
<span class="lever"></span>
Yes
</label>
</div>
<span class="helper-text" data-error="wrong" data-success="right">Map the structure of the trees to the grew-match formalism used by https://universal.grew.fr?</span>
</div>
</div>
</div>
</div>
<button class="btn waves-effect waves-light btn-large" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</form>
</div>
</div>
</div>
<footer class="page-footer light-blue">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Credits</h5>
<p class="grey-text text-lighten-4">Add some logos here?</p>
</div>
<!-- <div class="col l3 s12">-->
<!-- <h5 class="white-text">Settings</h5>-->
<!-- <ul>-->
<!-- <li><a class="white-text" href="#!">Link 1</a></li>-->
<!-- <li><a class="white-text" href="#!">Link 2</a></li>-->
<!-- <li><a class="white-text" href="#!">Link 3</a></li>-->
<!-- <li><a class="white-text" href="#!">Link 4</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- <div class="col l3 s12">-->
<!-- <h5 class="white-text">Connect</h5>-->
<!-- <ul>-->
<!-- <li><a class="white-text" href="#!">Link 1</a></li>-->
<!-- <li><a class="white-text" href="#!">Link 2</a></li>-->
<!-- <li><a class="white-text" href="#!">Link 3</a></li>-->
<!-- <li><a class="white-text" href="#!">Link 4</a></li>-->
<!-- </ul>-->
<!-- </div>-->
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/wNumb.js"></script>
<script src="static/js/nouislider.min.js"></script>
<script src="static/js/init.js"></script>
</body>
</html>