wolfang/anki-creator-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add basic page template

Browse Source
This commit is contained in:
Wolfang Torres
2026-06-06 17:56:42 +08:00
parent 12487d7cba
commit 64380d2942
11 changed files with 11267 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.editorconfig
View File

@@ -14,6 +14,10 @@ trim_trailing_whitespace = true
indent_style = space indent_style = space
indent_size = 4 indent_size = 4
[*.html]
indent_style = space
indent_size = 2
[Makefile] [Makefile]
indent_style = tab indent_style = tab

10879
src/anki_creator_flask/static/assets/css/all.css Normal file
View File

File diff suppressed because it is too large Load Diff

101
src/anki_creator_flask/static/assets/css/fontawesome-all.min.css vendored
View File

File diff suppressed because one or more lines are too long

23
src/anki_creator_flask/static/assets/css/main.css
View File

@@ -1,4 +1,4 @@
@import url(fontawesome-all.min.css); @import url(all.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,700,300i,600i,700i|Raleway:600,800"); @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600,700,300i,600i,700i|Raleway:600,800");
/* /*
@@ -2226,7 +2226,7 @@ input, select, textarea {
text-rendering: auto; text-rendering: auto;
line-height: 1; line-height: 1;
text-transform: none !important; text-transform: none !important;
font-family: 'Font Awesome 5 Free'; font-family: 'Font Awesome 7 Free';
font-weight: 900; font-weight: 900;
} }
@@ -2331,7 +2331,7 @@ input, select, textarea {
text-rendering: auto; text-rendering: auto;
line-height: 1; line-height: 1;
text-transform: none !important; text-transform: none !important;
font-family: 'Font Awesome 5 Free'; font-family: 'Font Awesome 7 Free';
font-weight: 400; font-weight: 400;
} }
@@ -2339,12 +2339,16 @@ input, select, textarea {
display: none; display: none;
} }
.icon.solid:before { .icon.fa-solid:before {
font-weight: 900; font-weight: 900;
} }
.icon.fa-solid:after {
font-weight: 400;
}
.icon.brands:before { .icon.brands:before {
font-family: 'Font Awesome 5 Brands'; font-family: 'Font Awesome 7 Brands';
} }
/* Image */ /* Image */
@@ -3170,10 +3174,15 @@ input, select, textarea {
} }
ul.feature-icons li { ul.feature-icons li {
margin: 2.5rem 0 0 0; /* margin: 2.5rem 0 0 0; */
padding: 0.5rem 0 0 4.5rem; padding: 0.5rem 0 0 4.5rem;
position: relative; position: relative;
width: 50%; width: 100%;
}
ul.feature-icons li.icon p {
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-weight: initial;
} }
ul.feature-icons li:before { ul.feature-icons li:before {

2
src/anki_creator_flask/static/assets/sass/components/_icon.scss
View File

@@ -15,7 +15,7 @@
display: none; display: none;
} }
&.solid { &.fa-solid {
&:before { &:before {
font-weight: 900; font-weight: 900;
} }

BIN
src/anki_creator_flask/static/assets/webfonts/fa-brands-400.woff2
View File

Binary file not shown.

BIN
src/anki_creator_flask/static/assets/webfonts/fa-regular-400.woff2
View File

Binary file not shown.

BIN
src/anki_creator_flask/static/assets/webfonts/fa-solid-900.woff2
View File

Binary file not shown.

BIN
src/anki_creator_flask/static/assets/webfonts/fa-v4compatibility.woff2 Normal file
View File

Binary file not shown.

131
src/anki_creator_flask/templates/app.html Normal file
View File

@@ -0,0 +1,131 @@
<!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">
<!-- 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">
&copy; 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>

233
src/anki_creator_flask/templates/index.html
View File

@@ -1,130 +1,128 @@
<!DOCTYPE HTML> <!doctype html>
<html> <html>
<head> <head>
<title>HSK card creator</title> <title>HSK card creator</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
<meta name="description" content="" /> <meta name="description" content="" />
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<link rel="stylesheet" href="static/assets/css/main.css" /> <link rel="stylesheet" href="static/assets/css/main.css" />
</head> </head>
<body class="is-preload"> <body class="is-preload">
<!-- Wrapper --> <!-- Wrapper -->
<div id="wrapper"> <div id="wrapper">
<!-- Intro --> <!-- Intro -->
<section class="intro"> <section class="intro">
<header> <header>
<h1>HSK card creator</h1> <h1>HSK card creator</h1>
<p>A free Anki/quizlet HSK card creator by <a href="wolfang.info.ve">Wolfang Torres</a> </p> <p>
A free Anki/quizlet HSK card creator by
<a href="wolfang.info.ve">Wolfang Torres</a>
</p>
<ul class="actions"> <ul class="actions">
<li><a href="#first" class="arrow scrolly"><span class="label">Next</span></a></li> <li>
<a href="#first" class="arrow scrolly"
><span class="label">Next</span></a
>
</li>
</ul> </ul>
</header> </header>
<div class="content"> <div class="content">
<span class="image fill" data-position="center"><img src="static/images/pic01.jpg" alt="" /></span> <span class="image fill" data-position="center"
><img src="static/images/pic01.jpg" alt=""
/></span>
</div> </div>
</section> </section>
<!-- Section --> <!-- Section -->
<section id="first"> <section id="first">
<header> <header>
<h2>Just copy the <strong>Words</strong>, <strong>Phases</strong> or <strong>Paragraphes</strong> that you want to study</h2> <h2>
Just copy the <strong>Words</strong>, <strong>Phases</strong> or
<strong>Paragraphes</strong> that you want to study
</h2>
</header> </header>
<div class="content"> <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 <p>
<a href="https://quizlet.com/latest">Quizlet</a> for you. That way you can easily create customs decks per lesson and <strong>HSK Card Creator</strong> Can interpret it and create cards
use the advantages of these systems for learning at your rhythm.</p> for both <a href="apps.ankiweb.net/">Anki</a> and
<p>It creates cards that have sound and images, so you can more easilly not only memorise but undertands the new information</p> <a href="https://quizlet.com/latest">Quizlet</a> for you. That way
<span class="image main"><img src="static/images/pic02.jpg" alt="" /></span> 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> </div>
</section> </section>
<!-- Section --> <!-- Section -->
<section> <section>
<header> <header>
<h2>Its like your own personalized duolingo, but feed with not only the oficial HSK books, but every book you'd like.</h2> <h2>
Its like your own personalized duolingo, but feed with not only the
oficial HSK books, but every book you'd like.
</h2>
</header> </header>
<div class="content"> <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> <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"> <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 fa-solid fa-book">
<li class="icon solid fa-note">Phrases: Traduces 中文 into your languange, useful for practicing the words you just memorized</li> <p>
<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> <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> </ul>
<p>This Methodology allows you not only to memorize characters, but pratice the reading, writing, listening and speaking.</p> <p>
This Methodology allows you not only to memorize characters, but
pratice the reading, writing, listening and speaking.
</p>
</div> </div>
</section> </section>
<!-- Section --> <!-- Section -->
<section> <section>
<header> <header>
<h2></h2> <h2>Start creating customs decks now:</h2>
</header> </header>
<div class="content"> <div class="content">
<p></p> <p>
<strong>HSK Card creator</strong> will allow you to upgrade your
<!-- Section --> chinese learning skills.
<section> </p>
<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"> <ul class="actions">
<li><a href="#" class="button primary large">Get Started</a></li> <li><a href="/app" class="button primary large">Get Started</a></li>
<li><a href="#" class="button large">Learn More</a></li> <li>
<a href="https://www.wolfang.info.ve" class="button large"
>return</a
>
</li>
</ul> </ul>
</div> </div>
</section> </section>
@@ -398,26 +396,46 @@ print 'Sorted in ' + i + ' iterations.';</code></pre>
--> -->
<!-- Section --> <!-- Section -->
<section> <!-- <section>
<header> <header>
<h2>Get in touch</h2> <h2>Get in touch</h2>
</header> </header>
<div class="content"> <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> <p>
<strong>Auctor commodo</strong> interdum et malesuada fames ac ante
ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet
dolor mattis sagittis.
</p>
<form> <form>
<div class="fields"> <div class="fields">
<div class="field half"> <div class="field half">
<input type="text" name="name" id="name" placeholder="Name" /> <input type="text" name="name" id="name" placeholder="Name" />
</div> </div>
<div class="field half"> <div class="field half">
<input type="email" name="email" id="email" placeholder="Email" /> <input
type="email"
name="email"
id="email"
placeholder="Email"
/>
</div> </div>
<div class="field"> <div class="field">
<textarea name="message" id="message" placeholder="Message" rows="7"></textarea> <textarea
name="message"
id="message"
placeholder="Message"
rows="7"
></textarea>
</div> </div>
</div> </div>
<ul class="actions"> <ul class="actions">
<li><input type="submit" value="Send Message" class="button primary" /></li> <li>
<input
type="submit"
value="Send Message"
class="button primary"
/>
</li>
</ul> </ul>
</form> </form>
</div> </div>
@@ -438,21 +456,47 @@ print 'Sorted in ' + i + ' iterations.';</code></pre>
<li> <li>
<h3>Elsewhere</h3> <h3>Elsewhere</h3>
<ul class="icons"> <ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li> <li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li> <a href="#" class="icon brands fa-twitter"
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li> ><span class="label">Twitter</span></a
<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>
<li><a href="#" class="icon brands fa-codepen"><span class="label">Codepen</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> </ul>
</li> </li>
</ul> </ul>
</footer> </footer>
</section> </section> -->
<!-- Copyright --> <!-- Copyright -->
<div class="copyright">&copy; Untitled. All rights reserved. Design: <a href="https://html5up.net">HTML5 UP</a>.</div> <div class="copyright">
&copy; HSK creator. Wolfang Torres. All rights reserved 2026. Design:
<a href="https://html5up.net">HTML5 UP</a>.
</div>
</div> </div>
<!-- Scripts --> <!-- Scripts -->
@@ -462,6 +506,5 @@ print 'Sorted in ' + i + ' iterations.';</code></pre>
<script src="static/assets/js/breakpoints.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/util.js"></script>
<script src="static/assets/js/main.js"></script> <script src="static/assets/js/main.js"></script>
</body> </body>
</html> </html>