🎨 Format of the code

This commit is contained in:
Maxim Lebedev 2018-11-13 16:06:18 +05:00
parent d1dc04719d
commit 086470d973
No known key found for this signature in database
GPG Key ID: F8978F46FF0FFA4F
1 changed files with 120 additions and 228 deletions

348
ru.html
View File

@ -58,20 +58,15 @@ Good luck, and many thanks again!
<meta property="og:image" content="https://ncase.me/remember/sharing/thumbnail.png">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
<meta name="viewport" content="width=600">
<link href="https://fonts.googleapis.com/css?family=Neucha" rel="stylesheet">
<style>
body {
font-family: 'Neucha', Helvetica, Arial;
}
</style>
</head>
<body>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- CHAPTER 0: INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<link rel="stylesheet" type="text/css" href="css/comic.css"/>
<meta name="viewport" content="width=600">
<link href="https://fonts.googleapis.com/css?family=Neucha" rel="stylesheet">
<style> body { font-family: 'Neucha', Helvetica, Arial; } </style>
</head>
<body>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- CHAPTER 0: INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
@ -92,35 +87,23 @@ Good luck, and many thanks again!
<!-- TRANSLATOR NOTE: when you update translations.txt, your name will appear here! -->
</div>
</div>
</div>
</div>
<div class="comic">
<div class="comic">
<div id="language_options"></div>
<!-- TRANSLATOR NOTE:
There may already be "official" translations for terms like "Spaced Repetition" or "Forgetting Curve"!
Go to their Wikipedia pages, scroll down to "Languages" in the left sidebar, and if your language is there,
click on that Wikipedia page, and use the "official" translated term there.
<div id="language_options"></div>
Spaced Repetition: https://en.wikipedia.org/wiki/Spaced_repetition
Forgetting Curve: https://en.wikipedia.org/wiki/Forgetting_curve -->
<!--
TRANSLATOR NOTE:
There may already be "official" translations for terms like "Spaced Repetition" or "Forgetting Curve"!
Go to their Wikipedia pages, scroll down to "Languages" in the left sidebar, and if your language is there,
click on that Wikipedia page, and use the "official" translated term there.
Spaced Repetition: https://en.wikipedia.org/wiki/Spaced_repetition
Forgetting Curve: https://en.wikipedia.org/wiki/Forgetting_curve
-->
<!--
TRANSLATOR NOTE:
Try to make your translated text about the same length or shorter as the original text.
If that's not possible, and your text doesn't fit in its box, you can modify attributes
"x", "y", "w", "h" to change the box, or add your own custom CSS style to make the font fit.
(CSS properties like "font-size" are very helpful)
-->
<!-- TRANSLATOR NOTE:
Try to make your translated text about the same length or shorter as the original text.
If that's not possible, and your text doesn't fit in its box, you can modify attributes
"x", "y", "w", "h" to change the box, or add your own custom CSS style to make the font fit.
(CSS properties like "font-size" are very helpful) -->
<panel w=400 h=650>
<pic src="pics/intro0.png" sx=0 sy=0></pic>
@ -185,10 +168,9 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
</words>
</panel>
<panel w=500 h=30 style="margin-top:-5px">
<words w=500 x=-15 y=-15 no-bg style="width: 500px; font-size:0.8em; text-align: right; color:#999;">
* пока ты не умрёшь
<words w=500 x=-15 y=-15 no-bg style="width: 500px; font-size:0.8em; text-align: right; color:#999;">
* пока ты не умрёшь
</words>
</panel>
@ -329,15 +311,11 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
Давай начнем.
</words>
</panel>
</div>
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- CHAPTER 1: THE SCIENCE OF SPACED REPETITION - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- CHAPTER 1: THE SCIENCE OF SPACED REPETITION - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
@ -356,7 +334,6 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
</div>
<div class="comic">
<panel w=500 h=450>
<pic src="pics/sci0.png" sx=0 sy=0></pic>
<words x=10 y=10 w=400 h=60>
@ -728,17 +705,8 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
...using a <i>shoebox.</i>
</words>
</panel>
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- CHAPTER 2: THE ART OF SPACED REPETITION - - - - - - - - - - - - - - - - - - - - - - - - - -->
@ -760,8 +728,7 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
</div>
<div class="comic">
<panel w=500 h=450>
<panel w=500 0>
<pic src="pics/leit0.png" sx=0 sy=0></pic>
<words x=10 y=10 w=430 h=60>
You don't <i>have</i> to use a shoebox for Spaced Repetition,
@ -775,12 +742,10 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
</words>
<words x=246 y=118 w=120 no-bg class="comic_text smaller" style="font-size:22px">
they're TRAINERS
<!--
TRANSLATOR NOTE:
this is a pun that may not work in all languages.
<!-- TRANSLATOR NOTE:
this is a pun that may not work in all languages.
If it doesn't translate to your language, try coming up with your own pun!
Or, replace this line with: "they help me go far"
-->
Or, replace this line with: "they help me go far" -->
</words>
<words x=367 y=116 w=120 no-bg class="comic_text smaller" style="font-size:22px">
we're not friends anymore
@ -945,8 +910,7 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
</words>
<words x=38 y=517 w=200 no-bg class="comic_text smaller" style="text-align:right">
katamari damacy
<!-- TRANSLATOR NOTE: leave this in its japanese.
i don't know what it means, actually. it's a videogame song. -->
<!-- TRANSLATOR NOTE: leave this in its japanese. i don't know what it means, actually. it's a videogame song. -->
</words>
</panel>
@ -1119,17 +1083,15 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
</panel>
<panel w=450 h=110>
<words w=450 x=-15 no-bg>
This card is... alright.
It's an English word on the front, French word on the back.
<!--
TRANSLATOR NOTE:
If the language you're translating for is NOT French,
replace "English" with [your language]
-->
It's the standard for most language-learning flashcards:
</words>
</panel>
<words w=450 x=-15 no-bg>
This card is... alright.
It's an English word on the front, French word on the back.
<!-- TRANSLATOR NOTE:
If the language you're translating for is NOT French,
replace "English" with [your language] -->
It's the standard for most language-learning flashcards:
</words>
</panel>
<panel w=600 h=300 bg="#e0e0e0">
<sim x=80 y=0 w=440 h=300 src="sims/singlecard/?card=cat"></sim>
@ -1169,12 +1131,12 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
</words>
<words w=330 x=250 y=225 no-bg fontsize=20>
* Obviously, paper cards can't play sounds.
But apps like Anki/Tinycards can!
</words>
<audio controls style="position: absolute; top: 105px; left: 280px; transform: scale(0.4) rotate(4deg);">
<source src="audio/chat.mp3" type="audio/mpeg">
</audio>
</panel>
But apps like Anki/Tinycards can!
</words>
<audio controls style="position: absolute; top: 105px; left: 280px; transform: scale(0.4) rotate(4deg);">
<source src="audio/chat.mp3" type="audio/mpeg"/>
</audio>
</panel>
<panel w=450 h=90>
<words w=450 x=-15 no-bg>
@ -1282,19 +1244,14 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
<panel w=400 h=400>
<pic src="pics/leit3.png" sx=800 sy=450></pic>
<words x=0 y=10 w=230 fontsize=150 no-bg color="#ffffff">
YOU
</words>
</panel>
YOU
</words>
</panel>
</div>
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- CHAPTER 3: GET STARTED TODAY! - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- CHAPTER 3: GET STARTED TODAY! - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
@ -1312,17 +1269,13 @@ If that's not possible, and your text doesn't fit in its box, you can modify att
</div>
<div class="comic">
<panel w=500 h=350>
<pic src="pics/end0.png" sx=0 sy=0></pic>
<words x=10 y=10 w=450 h=60>
To help you get started with Spaced Repetition <i>today</i>,
you need to answer four questions:
</words>
<!--
TRANSLATOR NOTE:
Remember, if your translated word is too big, you can modify the CSS! (especially font-size)
-->
<!-- TRANSLATOR NOTE: Remember, if your translated word is too big, you can modify the CSS! (especially font-size) -->
<words x=8 y=237 w=120 no-bg style="color:#fff; font-size:40px">
WHAT?
</words>
@ -1774,33 +1727,25 @@ Remember, if your translated word is too big, you can modify the CSS! (especiall
<panel fadeInOn="flip_the_end" w=600 h=80>
<words w=600 x=-15 y=0 no-bg>
(Want to learn/play more? Further reading &amp; credits below!)
<br>
&darr; &darr; &darr; &darr; &darr;
</b>
</words>
</panel>
(Want to learn/play more? Further reading &amp; credits below!)
<br>
&darr; &darr; &darr; &darr; &darr;
</words>
</panel>
</div>
</div>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- CREDITS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- CREDITS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<a name="bye"></a>
<div id="credits">
<div>
<div style="font-size:30px; margin-bottom:0; overflow: hidden;">
<img src="pics/nicky_credits.png" width="100" height="100" style="display: block; float: left;" />
<div style="display: block; position: relative; left: 14px; width: 390px; height: 130px; float: left;">
<a name="bye"></a>
<div id="credits">
<div>
<div style="font-size:30px; margin-bottom:0; overflow: hidden;">
<img src="pics/nicky_credits.png" width="100" height="100" style="display: block; float: left;" />
<div style="display: block; position: relative; left: 14px; width: 390px; height: 130px; float: left;">
Written, drawn, and programmed by
<br>
<a target="_blank" href="https://ncase.me" style="font-size:2em; display:inline-block; line-height:1em">
@ -1975,34 +1920,23 @@ Remember, if your translated word is too big, you can modify the CSS! (especiall
~ Nicky Case
</p>
<!-- Share buttons, text generated from labels -->
<div id="share_buttons"></div>
<!-- Share buttons, text generated from labels -->
<div id="share_buttons"></div>
</div>
</div>
</div>
<!-- TRANSLATOR NOTE:
HA HA YOU THOUGHT YOU WERE DONE?!
NOPE
WE'VE STILL GOT THE INTERFACE LABELS & FLASHCARDS TO TRANSLATE -->
</div>
<!--
TRANSLATOR NOTE:
HA HA YOU THOUGHT YOU WERE DONE?!
NOPE
WE'VE STILL GOT THE INTERFACE LABELS & FLASHCARDS TO TRANSLATE
-->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- LABELS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- LABELS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div id="labels">
<!-- Chapter Links -->
<span id="label_chapter_links">
<a href="#0">Intro</a>
@ -2068,11 +2002,7 @@ WE'VE STILL GOT THE INTERFACE LABELS & FLASHCARDS TO TRANSLATE
</span>
<!-- Leitner Calendar -->
<!--
TRANSLATOR NOTE:
The exact three characters [N] is how the code knows where to put the number.
When you translate, make sure the [N] is there if it was there in the original.
-->
<!-- TRANSLATOR NOTE: The exact three characters [N] is how the code knows where to put the number. When you translate, make sure the [N] is there if it was there in the original. -->
<span id="calendar_day">
On Day [N]...
</span>
@ -2127,11 +2057,7 @@ When you translate, make sure the [N] is there if it was there in the original.
<!-- Typing Cards -->
<span id="type_question">
Q:
<!--
TRANSLATOR NOTE: "Q" short for Question.
Dunno if other languages have similar one-letter abbreviations.
If not, just type the full translated word for "Question"
-->
<!-- TRANSLATOR NOTE: "Q" short for Question. Dunno if other languages have similar one-letter abbreviations. If not, just type the full translated word for "Question" -->
</span>
<span id="type_placeholder">
type your answer here
@ -2192,15 +2118,14 @@ When you translate, make sure the [N] is there if it was there in the original.
</span>
<span id="gift_app_leitner">
a video, by my dear friend Chris Walker, on how to craft your very own Leitner Box!
<br><br>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/uvF1XuseZFE?rel=0"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
style="display:block; margin:0 auto"></iframe>
<br>
<br/><br/>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/uvF1XuseZFE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen style="display:block; margin:0 auto"></iframe>
<br/>
(And here's a similar tutorial, in IKEA form:)
<br><br>
<br/><br/>
<a target="_blank" href="./pdf/leitner.pdf" style="display: block; text-align: center;">
<img src="./pdf/thumbnail.png" width="450"/><br>click to download PDF</a>
<img src="./pdf/thumbnail.png" width="450"/><br/>click to download PDF
</a>
</span>
<span id="gift_app_anki">
a link to
@ -2251,32 +2176,18 @@ When you translate, make sure the [N] is there if it was there in the original.
an interactive comic on the art & science of memory
</span>
<!--
TRANSLATOR NOTE:
One more section to go!
-->
<!-- TRANSLATOR NOTE: One more section to go! -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- FLASHCARDS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!--
TRANSLATOR NOTE:
The CSS for the flashcards is really touchy, so DO NOT MODIFY THE CSS.
That means, try as much as possible to make your text shorter or the same length as the original text.
Good luck!
-->
<!-- TRANSLATOR NOTE: The CSS for the flashcards is really touchy, so DO NOT MODIFY THE CSS. That means, try as much as possible to make your text shorter or the same length as the original text. Good luck! -->
<!-- - - - - - - - - - - - -->
<!-- INTRO - - - - - - - - -->
<!-- - - - - - - - - - - - -->
<!-- INTRO - - - - - - - - -->
<!-- - - - - - - - - - - - -->
<span id="flashcard_spaced_rep_front">
@ -2559,25 +2470,17 @@ Good luck!
<div class="fcard_center" style="height:100px">
<div style="font-size:120px; height:75px;">
cat
<!--
TRANSLATOR NOTE:
If your language is NOT French, then change this to "cat" in YOUR language
-->
<!-- TRANSLATOR NOTE: If your language is NOT French, then change this to "cat" in YOUR language -->
</div>
<div>
(english)
<!--
TRANSLATOR NOTE:
If your language is NOT French, then change this to YOUR language
-->
<!-- TRANSLATOR NOTE: If your language is NOT French, then change this to YOUR language -->
</div>
</div>
</span>
<span id="flashcard_cat_back">
<div class="fcard_center" style="height:100px">
<!--
TRANSLATOR NOTE: DO NOT TRANSLATE. Leave as French!
-->
<!-- TRANSLATOR NOTE: DO NOT TRANSLATE. Leave as French! -->
<div style="font-size:120px; height:75px;">
chat
</div>
@ -2591,13 +2494,13 @@ Good luck!
<div class="fcard_center"></div>
</span>
<span id="flashcard_cat2_back">
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=0></div>
<div class="fcard_center">
<audio controls id="HACK_audio" style="position: absolute; top: 115px; left: 30px; transform: scale(0.5);">
<source gotosrc="../../audio/chat.mp3" type="audio/mpeg">
</audio>
</div>
</span>
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=0></div>
<div class="fcard_center">
<audio controls id="HACK_audio" style="position: absolute; top: 115px; left: 30px; transform: scale(0.5);">
<source gotosrc="../../audio/chat.mp3" type="audio/mpeg"/>
</audio>
</div>
</span>
<span id="flashcard_learndo_front">
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=0 sy=240></div>
@ -2609,14 +2512,12 @@ Good luck!
<div class="fcard_bg" src="pics/fcards_ch2.png" sx=400 sy=240></div>
<div class="fcard_center" style="height:195px; font-size:33px;">
then back to learning... ↻
</div>
</span>
</div>
</span>
<!-- - - - - - - - - - - - -->
<!-- Chapter 3: Get Started -->
<!-- - - - - - - - - - - - -->
<!-- - - - - - - - - - - - -->
<!-- Chapter 3: Get Started -->
<!-- - - - - - - - - - - - -->
<span id="flashcard_you_what_front">
<div class="fcard_bg" src="pics/fcards_ch3.png" sx=0 sy=0></div>
@ -2672,14 +2573,9 @@ Good luck!
THE END
</div>
</span>
</div>
<!--
TRANSLATOR NOTE:
<!-- TRANSLATOR NOTE:
Congrats! NOW you've translated everything!
Again, from the deepest part of my heart, I want to sincerely thank you
@ -2688,17 +2584,13 @@ for helping spread this page to more people, in more languages.
Oh wait, just one more thing: go to translations.txt,
and add your translation there so this project "knows" your page exists.
And once that's done, send a Pull Request, and your translation will go live!
And once that's done, send a Pull Request, and your translation will go live!
THANK YOU! <3
~ Nicky Case
-->
THANK YOU! <3
~ Nicky Case -->
<script src="js/howler.core.min.js"></script>
<script src="js/minpubsub.src.js"></script>
<script src="js/comic.js"></script>
</body>
</html>
<script src="js/howler.core.min.js"></script>
<script src="js/minpubsub.src.js"></script>
<script src="js/comic.js"></script>
</html>