519 lines
16 KiB
HTML
519 lines
16 KiB
HTML
<!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" />
|
|
<link
|
|
rel="shortcut icon"
|
|
href="{{ url_for('static', filename='favicon.ico') }}"
|
|
/>
|
|
</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 memorize, 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
|
|
official 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 fa-solid fa-book">
|
|
<p>
|
|
<strong>Dictionary:</strong> Traduces a 汉字 into your language,
|
|
so you can memorize the caracters looks, sounds, writing and
|
|
meaning
|
|
</p>
|
|
</li>
|
|
<li class="icon fa-solid fa-note-sticky">
|
|
<p>
|
|
<strong>Phrases:</strong> Traduces 中文 into your languange,
|
|
useful for practicing the words you just memorized
|
|
</p>
|
|
</li>
|
|
<li class="icon fa-solid fa-person-chalkboard">
|
|
<p>
|
|
<strong>Dictation:</strong> 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
|
|
</p>
|
|
</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>Start creating customs decks now:</h2>
|
|
</header>
|
|
<div class="content">
|
|
<p>
|
|
<strong>HSK Card creator</strong> will allow you to upgrade your
|
|
chinese learning skills.
|
|
</p>
|
|
<ul class="actions">
|
|
<li>
|
|
<a
|
|
href="{{ url_for('mainapp.app') }}"
|
|
class="button primary large"
|
|
>Get Started</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="/" class="button large">return</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">
|
|
© HSK creator. Wolfang Torres. All rights reserved 2026. 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>
|