add basic homepage
This commit is contained in:
Wolfang Torres
467
src/anki_creator_flask/templates/index.html
Normal file
467
src/anki_creator_flask/templates/index.html
Normal file
@@ -0,0 +1,467 @@
|
||||
<!DOCTYPE HTML>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>HSK card creator</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="" />
|
||||
<link rel="stylesheet" href="static/assets/css/main.css" />
|
||||
</head>
|
||||
<body class="is-preload">
|
||||
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Intro -->
|
||||
<section class="intro">
|
||||
<header>
|
||||
<h1>HSK card creator</h1>
|
||||
<p>A free Anki/quizlet HSK card creator by <a href="wolfang.info.ve">Wolfang Torres</a> </p>
|
||||
<ul class="actions">
|
||||
<li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<div class="content">
|
||||
<span class="image fill" data-position="center"><img src="static/images/pic01.jpg" alt="" /></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section -->
|
||||
<section id="first">
|
||||
<header>
|
||||
<h2>Just copy the <strong>Words</strong>, <strong>Phases</strong> or <strong>Paragraphes</strong> that you want to study</h2>
|
||||
</header>
|
||||
<div class="content">
|
||||
<p><strong>HSK Card Creator</strong> Can interpret it and create cards for both <a href="apps.ankiweb.net/">Anki</a> and
|
||||
<a href="https://quizlet.com/latest">Quizlet</a> for you. That way you can easily create customs decks per lesson and
|
||||
use the advantages of these systems for learning at your rhythm.</p>
|
||||
<p>It creates cards that have sound and images, so you can more easilly not only memorise but undertands the new information</p>
|
||||
<span class="image main"><img src="static/images/pic02.jpg" alt="" /></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section -->
|
||||
<section>
|
||||
<header>
|
||||
<h2>Its like your own personalized duolingo, but feed with not only the oficial HSK books, but every book you'd like.</h2>
|
||||
</header>
|
||||
<div class="content">
|
||||
<p><strong>HSK Card Creator</strong> is not made of simple character / piying sets, but can be used in 3 ways:</p>
|
||||
<ul class="feature-icons">
|
||||
<li class="icon solid fa-book">Dictionary: Traduces a 汉字 into your language, so you can memorize the caracters looks, sounds, writing and meaning</li>
|
||||
<li class="icon solid fa-note">Phrases: Traduces 中文 into your languange, useful for practicing the words you just memorized</li>
|
||||
<li class="icon solid fa-person-chalkboard">Dictation: Paste a Paragraph and it will be rendered into sentences and dictated to you, and you can also speak the chinese version of the trasnlated sentence</li>
|
||||
</ul>
|
||||
<p>This Methodology allows you not only to memorize characters, but pratice the reading, writing, listening and speaking.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section -->
|
||||
<section>
|
||||
<header>
|
||||
<h2></h2>
|
||||
</header>
|
||||
<div class="content">
|
||||
<p></p>
|
||||
|
||||
<!-- Section -->
|
||||
<section>
|
||||
<header>
|
||||
<h3>Erat aliquam</h3>
|
||||
<p>Vehicula ultrices dolor amet ultricies et condimentum. Magna sed etiam consequat, et lorem adipiscing sed dolor sit amet, consectetur amet do eiusmod tempor incididunt ipsum suspendisse ultrices gravida.</p>
|
||||
</header>
|
||||
<div class="content">
|
||||
<div class="gallery">
|
||||
<a href="static/images/gallery/fulls/01.jpg" class="landscape"><img src="static/images/gallery/thumbs/01.jpg" alt="" /></a>
|
||||
<a href="static/images/gallery/fulls/02.jpg"><img src="static/images/gallery/thumbs/02.jpg" alt="" /></a>
|
||||
<a href="static/images/gallery/fulls/03.jpg"><img src="static/images/gallery/thumbs/03.jpg" alt="" /></a>
|
||||
<a href="static/images/gallery/fulls/04.jpg" class="landscape"><img src="static/images/gallery/thumbs/04.jpg" alt="" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section -->
|
||||
<section>
|
||||
<header>
|
||||
<h3>Nisl consequat</h3>
|
||||
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam sed facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet mauris. Ut magna finibus nisi nec lacinia ipsum maximus.</p>
|
||||
</header>
|
||||
<div class="content">
|
||||
<div class="gallery">
|
||||
<a href="static/images/gallery/fulls/05.jpg" class="landscape"><img src="static/images/gallery/thumbs/05.jpg" alt="" /></a>
|
||||
<a href="static/images/gallery/fulls/06.jpg"><img src="static/images/gallery/thumbs/06.jpg" alt="" /></a>
|
||||
<a href="static/images/gallery/fulls/07.jpg"><img src="static/images/gallery/thumbs/07.jpg" alt="" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section -->
|
||||
<section>
|
||||
<header>
|
||||
<h3>Lorem gravida</h3>
|
||||
<p>Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aenean ornare velit lacus, ac varius sed enim lorem ullamcorper dolore. ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis.</p>
|
||||
</header>
|
||||
<div class="content">
|
||||
<div class="gallery">
|
||||
<a href="static/images/gallery/fulls/08.jpg" class="portrait"><img src="static/images/gallery/thumbs/08.jpg" alt="" /></a>
|
||||
<a href="static/images/gallery/fulls/09.jpg" class="portrait"><img src="static/images/gallery/thumbs/09.jpg" alt="" /></a>
|
||||
<a href="static/images/gallery/fulls/10.jpg" class="landscape"><img src="static/images/gallery/thumbs/10.jpg" alt="" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section -->
|
||||
<section>
|
||||
<header>
|
||||
<h2>Duis sed adpiscing veroeros amet</h2>
|
||||
</header>
|
||||
<div class="content">
|
||||
<p><strong>Proin tempus feugiat</strong> sed varius enim lorem ullamcorper dolore aliquam aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore.</p>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary large">Get Started</a></li>
|
||||
<li><a href="#" class="button large">Learn More</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Elements -->
|
||||
<!--
|
||||
<section>
|
||||
<header>
|
||||
<h2>Elements</h2>
|
||||
</header>
|
||||
<div class="content">
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h3>Text</h3>
|
||||
</header>
|
||||
<div class="content">
|
||||
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
|
||||
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
|
||||
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
|
||||
<hr />
|
||||
<h2>Heading Level 2</h2>
|
||||
<h3>Heading Level 3</h3>
|
||||
<h4>Heading Level 4</h4>
|
||||
<h5>Heading Level 5</h5>
|
||||
<hr />
|
||||
<h5>Blockquote</h5>
|
||||
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
|
||||
<h5>Preformatted</h5>
|
||||
<pre><code>i = 0;
|
||||
|
||||
while (!deck.isInOrder()) {
|
||||
print 'Iteration ' + i;
|
||||
deck.shuffle();
|
||||
i++;
|
||||
}
|
||||
|
||||
print 'Sorted in ' + i + ' iterations.';</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h3>Lists</h3>
|
||||
</header>
|
||||
<div class="content">
|
||||
|
||||
<h4>Unordered</h4>
|
||||
<ul>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Sagittis adipiscing.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Alternate</h4>
|
||||
<ul class="alt">
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Sagittis adipiscing.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Ordered</h4>
|
||||
<ol>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Etiam vel felis viverra.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Etiam vel felis lorem.</li>
|
||||
<li>Felis enim et feugiat.</li>
|
||||
</ol>
|
||||
<h4>Icons</h4>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
|
||||
</ul>
|
||||
|
||||
<h4>Actions</h4>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions stacked">
|
||||
<li><a href="#" class="button primary">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h3>Table</h3>
|
||||
</header>
|
||||
<div class="content">
|
||||
<h4>Default</h4>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h4>Alternate</h4>
|
||||
<div class="table-wrapper">
|
||||
<table class="alt">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h3>Buttons</h3>
|
||||
</header>
|
||||
<div class="content">
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary">Primary</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button large">Large</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
|
||||
<li><a href="#" class="button icon solid fa-download">Icon</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><span class="button primary disabled">Disabled</span></li>
|
||||
<li><span class="button disabled">Disabled</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h3>Form</h3>
|
||||
</header>
|
||||
<div class="content">
|
||||
<form method="post" action="#">
|
||||
<div class="fields">
|
||||
<div class="field half">
|
||||
<label for="demo-name">Name</label>
|
||||
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
|
||||
</div>
|
||||
<div class="field half">
|
||||
<label for="demo-email">Email</label>
|
||||
<input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="demo-category">Category</label>
|
||||
<select name="demo-category" id="demo-category">
|
||||
<option value="">-</option>
|
||||
<option value="1">Manufacturing</option>
|
||||
<option value="1">Shipping</option>
|
||||
<option value="1">Administration</option>
|
||||
<option value="1">Human Resources</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
|
||||
<label for="demo-priority-low">Low</label>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="radio" id="demo-priority-high" name="demo-priority">
|
||||
<label for="demo-priority-high">High</label>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="checkbox" id="demo-copy" name="demo-copy">
|
||||
<label for="demo-copy">Email me a copy</label>
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="checkbox" id="demo-human" name="demo-human" checked>
|
||||
<label for="demo-human">Not a robot</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="demo-message">Message</label>
|
||||
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send Message" class="primary" /></li>
|
||||
<li><input type="reset" value="Reset" /></li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
|
||||
<!-- Section -->
|
||||
<section>
|
||||
<header>
|
||||
<h2>Get in touch</h2>
|
||||
</header>
|
||||
<div class="content">
|
||||
<p><strong>Auctor commodo</strong> interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis.</p>
|
||||
<form>
|
||||
<div class="fields">
|
||||
<div class="field half">
|
||||
<input type="text" name="name" id="name" placeholder="Name" />
|
||||
</div>
|
||||
<div class="field half">
|
||||
<input type="email" name="email" id="email" placeholder="Email" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<textarea name="message" id="message" placeholder="Message" rows="7"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send Message" class="button primary" /></li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
<footer>
|
||||
<ul class="items">
|
||||
<li>
|
||||
<h3>Email</h3>
|
||||
<a href="#">information@untitled.ext</a>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Phone</h3>
|
||||
<a href="#">(000) 000-0000</a>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Address</h3>
|
||||
<span>1234 Somewhere Road, Nashville, TN 00000</span>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Elsewhere</h3>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
|
||||
<li><a href="#" class="icon brands fa-codepen"><span class="label">Codepen</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<!-- Copyright -->
|
||||
<div class="copyright">© Untitled. All rights reserved. Design: <a href="https://html5up.net">HTML5 UP</a>.</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="static/assets/js/jquery.min.js"></script>
|
||||
<script src="static/assets/js/jquery.scrolly.min.js"></script>
|
||||
<script src="static/assets/js/browser.min.js"></script>
|
||||
<script src="static/assets/js/breakpoints.min.js"></script>
|
||||
<script src="static/assets/js/util.js"></script>
|
||||
<script src="static/assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user