zkouška několik obrázků na pozadí

honzaflash · Oct 7, 2021 · 285101b · 285101b
1 parent 53101c6
commit 285101b
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 14 deletions.
diff --git a/dvz-migrace/migrace.html b/dvz-migrace/migrace.html
@@ -192,7 +192,7 @@
 &lt;/div&gt;\
 
 //Abychom se lépe orientovali v příběhu, pojď se naučit základní pojmy týkající se migrační problematiky.//
-[[Naučit se základní pojmy o migraci-&gt;Co je to migrace?]]</tw-passagedata><tw-passagedata pid="6" name="Na člunu" tags="boat" position="500,1875" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/More.m4a&quot;, true)&lt;/script&gt;\
+[[Naučit se základní pojmy o migraci-&gt;Co je to migrace?]]</tw-passagedata><tw-passagedata pid="6" name="Na člunu" tags="boat sea" position="500,1875" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/More.m4a&quot;, true)&lt;/script&gt;\
 \\
 U pobřeží Egejského moře na nás čeká motorový člun. Je však poměrně malý. Odhaduji to tak pro 7 lidí, přitom nás je 21.
 
@@ -245,7 +245,7 @@
     &lt;/div&gt;\
 &lt;/div&gt;\
 
-[[Jaké jsou důležité pojmy týkající se migrace?-&gt;Důležité pojmy]]</tw-passagedata><tw-passagedata pid="8" name="Ve vodě" tags="boat" position="375,2050" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Plavani-se-zadychanim.m4a&quot;)&lt;/script&gt;\
+[[Jaké jsou důležité pojmy týkající se migrace?-&gt;Důležité pojmy]]</tw-passagedata><tw-passagedata pid="8" name="Ve vodě" tags="boat sea" position="375,2050" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Plavani-se-zadychanim.m4a&quot;)&lt;/script&gt;\
 \\
 Třesu se celá strachy. Ale musím to udělat. Není čas déle přemýšlet, skáču to vody. Byla jsem sice zvyklá plavat závodně, stejně mám pocit, jako bych byla ve vodě poprvé. Tak moc je voda v moři slaná a studená. Ostatní lidi ze člunu na mě zděšeně koukají. Jednou rukou se držím lana a snažím se člun táhnout kupředu. 
 
@@ -271,7 +271,7 @@
 &lt;/div&gt;\
 
 [[Zachrání se Sarah v moři?-&gt;V Egejském moři]]
-</tw-passagedata><tw-passagedata pid="9" name="Potopení" tags="boat" position="225,2050" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Plavani-se-zadychanim.m4a&quot;)&lt;/script&gt;\
+</tw-passagedata><tw-passagedata pid="9" name="Potopení" tags="boat sea" position="225,2050" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Plavani-se-zadychanim.m4a&quot;)&lt;/script&gt;\
 \\
 Mám velký strach skočit do vody. Raději zůstávám sedět v člunu a snažím se z něj dostat přebytečnou. Motor stále hapruje a panika je čím dál silnější. Většina lidí v člunu zcela evidentně neumí plavat. Potápíme se, určitě se potopíme. 
 
@@ -298,7 +298,7 @@
 
 KONEC 
 
-[[Neskončilo to nějak brzy?-&gt;Předčasný konec]]</tw-passagedata><tw-passagedata pid="10" name="Předčasný konec" tags="bad-end" position="50,2175" size="100,100">&lt;script&gt;document.stopAAP()&lt;/script&gt;\
+[[Neskončilo to nějak brzy?-&gt;Předčasný konec]]</tw-passagedata><tw-passagedata pid="10" name="Předčasný konec" tags="bad-end sea" position="50,2175" size="100,100">&lt;script&gt;document.stopAAP()&lt;/script&gt;\
 V průběhu děje jsi učinil volbu, která zapříčila, že příběh skončil dříve, než mohl. Vrať se zpátky na začátek příběhu a projdi jím znovu.
 
 [[Vrátit se na začátek-&gt;Úvod - představení příběhu]]</tw-passagedata><tw-passagedata pid="11" name="Stěhování národů" tags="edu-intermezzo" position="700,2325" size="100,100">&lt;script&gt;document.stopAAP()&lt;/script&gt;\
@@ -312,7 +312,7 @@
 &lt;iframe width=&quot;660&quot; height=&quot;415&quot; src=&quot;https://www.youtube.com/embed/El5qIJWkeHc&quot; title=&quot;YouTube video player&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
 Video z youtube kanálu Edisco — videovýpisky.
 
-[[Pokračovat-&gt;Další stěhování národů s Bednaříkovou]]</tw-passagedata><tw-passagedata pid="12" name="V Egejském moři" tags="boat" position="525,2125" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Obycejne-plavani.m4a&quot;)&lt;/script&gt;\
+[[Pokračovat-&gt;Další stěhování národů s Bednaříkovou]]</tw-passagedata><tw-passagedata pid="12" name="V Egejském moři" tags="boat sea" position="525,2125" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Obycejne-plavani.m4a&quot;)&lt;/script&gt;\
 \\
 Cítím, jak mi docházejí síly. Ruce mám samou modřinu. Mohamed se také tváří vyčerpaně. Ve vodě plaveme už několik hodin, nejsem si jistá kolik přesně. Slunce už zapadá a voda je čím dál studenější. 
 
@@ -358,7 +358,7 @@
 
 Následně zamíříme do obchodu s potravinami, kde nás již nikdo nevyhodí, ale lidé na nás koukají dost podezíravě. Jako by se báli, že jim jdeme vykrást obchod. Koupíme si rychle jídlo a vodu, nechceme se v obchodě příliš zdržovat. Poblíž vidíme nějaké stánky s oblečením, tak si jdu koupit nové oblečení a hlavně nové boty, jelikož tu stojím stále pouze v ponožkách a v rozedraném oblečení. Pevně doufám, že nejhorší část cesty máme za sebou a brzy z Řecka odejdeme.
 
-[[Jak pokračovala Sarah na cestě po Evropě?-&gt;Přes balkán]]</tw-passagedata><tw-passagedata pid="15" name="Přes balkán" tags="rail-tracks ferry" position="525,2650" size="100,100">&lt;div class=&quot;floating-clock-container&quot;&gt;&lt;div class=&quot;floating-clock&quot;&gt;29. srpen 2015&lt;/div&gt;&lt;/div&gt;\
+[[Jak pokračovala Sarah na cestě po Evropě?-&gt;Přes balkán]]</tw-passagedata><tw-passagedata pid="15" name="Přes balkán" tags="train-tracks ferry" position="525,2650" size="100,100">&lt;div class=&quot;floating-clock-container&quot;&gt;&lt;div class=&quot;floating-clock&quot;&gt;29. srpen 2015&lt;/div&gt;&lt;/div&gt;\
 &lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Chozeni-v-obili-v-trave.m4a&quot;)&lt;/script&gt;\
 \\
 &lt;img src=&quot;https://i.imgur.com/YtBpdKT.jpg&quot; width=&quot;950px&quot; height=&quot;550px&quot;&gt;
@@ -734,7 +734,7 @@
 
 (link-goto: &quot;Zpět&quot;, (history:)&#39;s last)</tw-passagedata><tw-passagedata pid="54" name="c1" tags="" position="2875,1725" size="100,100">Špatná odpověď. Vrať se zpátky na otázku a zkus odpovědět znovu a správně.
 
-(link-goto: &quot;Zpět&quot;, (history:)&#39;s last)</tw-passagedata><tw-passagedata pid="55" name="Na člunu 2" tags="boat" position="800,1875" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/More.m4a&quot;, true)&lt;/script&gt;\
+(link-goto: &quot;Zpět&quot;, (history:)&#39;s last)</tw-passagedata><tw-passagedata pid="55" name="Na člunu 2" tags="boat sea" position="800,1875" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/More.m4a&quot;, true)&lt;/script&gt;\
 \\
 U pobřeží Egejského moře na nás čeká motorový člun. Je však poměrně malý. Odhaduji to tak pro 7 lidí, přitom nás je 21.
 
@@ -754,7 +754,7 @@
 Co bych tak mohl udělat? Jak jen celou situaci zachránit? Plavat umím, ale ne tak dobře jako moje sestra a v takto rozbouřeném moři jsem nikdy neplaval. Pokud skočím do vody, pomůžu tím někomu?
 
 [[Skočit do vody-&gt;Ve vodě 2]]
-[[Raději zůstat sedět v člunu-&gt;Potopení 2]]</tw-passagedata><tw-passagedata pid="56" name="Ve vodě 2" tags="boat" position="1175,2050" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Plavani-se-zadychanim.m4a&quot;)&lt;/script&gt;\
+[[Raději zůstat sedět v člunu-&gt;Potopení 2]]</tw-passagedata><tw-passagedata pid="56" name="Ve vodě 2" tags="boat sea" position="1175,2050" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Plavani-se-zadychanim.m4a&quot;)&lt;/script&gt;\
 \\
 Mé tělo se střese strachy. Ale musím to udělat. Není čas déle přemýšlet, skáču do vody. I když jsem v dětství plaval pravidelně, stejně mám pocit, jako bych byl ve vodě poprvé. Tak moc je voda v moři slaná a studená. Ostatní lidi ze člunu na mě zděšeně koukají. Jednou rukou se držím lana a snažím se člun táhnout kupředu. 
 
@@ -769,7 +769,7 @@
 &lt;img src=&quot;https://i.imgur.com/GPp8u90.png&quot; width=&quot;850px&quot; height=&quot;450px&quot;&gt;
 Uprchlíci na člunu v Egejském moři. Dostupné z: www.shutterstock.com
 
-[[Zachrání se Mohamed se Sarah v moři?-&gt;V Egejském moři 2]]</tw-passagedata><tw-passagedata pid="57" name="Potopení 2" tags="boat" position="1450,2050" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Plavani-se-zadychanim.m4a&quot;)&lt;/script&gt;\
+[[Zachrání se Mohamed se Sarah v moři?-&gt;V Egejském moři 2]]</tw-passagedata><tw-passagedata pid="57" name="Potopení 2" tags="boat sea" position="1450,2050" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Plavani-se-zadychanim.m4a&quot;)&lt;/script&gt;\
 \\
 Mám velký strach skočit do vody. Raději zůstávám sedět v člunu a snažím se z něj dostat přebytečnou vodu. Motor stále hapruje a panika je čím dál silnější. Většina lidí v člunu zcela evidentně neumí plavat. Potápíme se, určitě se potopíme. 
 
@@ -785,10 +785,10 @@
 
 KONEC 
 
-[[Neskončilo to nějak brzy?-&gt;Předčasný konec 2]]</tw-passagedata><tw-passagedata pid="58" name="Předčasný konec 2" tags="bad-end" position="1625,2175" size="100,100">&lt;script&gt;document.stopAAP()&lt;/script&gt;\
+[[Neskončilo to nějak brzy?-&gt;Předčasný konec 2]]</tw-passagedata><tw-passagedata pid="58" name="Předčasný konec 2" tags="bad-end sea" position="1625,2175" size="100,100">&lt;script&gt;document.stopAAP()&lt;/script&gt;\
 V průběhu děje jsi učinil volbu, která zapříčila, že příběh skončil dříve, než mohl. Vrať se zpátky na začátek příběhu a projdi jím znovu.
 
-[[Vrátit se na začátek-&gt;Úvod - představení příběhu]]</tw-passagedata><tw-passagedata pid="59" name="V Egejském moři 2" tags="boat" position="1325,2125" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Obycejne-plavani.m4a&quot;)&lt;/script&gt;\
+[[Vrátit se na začátek-&gt;Úvod - představení příběhu]]</tw-passagedata><tw-passagedata pid="59" name="V Egejském moři 2" tags="boat sea" position="1325,2125" size="100,100">&lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Obycejne-plavani.m4a&quot;)&lt;/script&gt;\
 \\
 Cítím, jak mi docházejí síly. Ruce mám samou modřinu. Sarah se také tváří vyčerpaně. Ve vodě plaveme už několik hodin, nejsem si jistý kolik přesně. Slunce už zapadá a voda je čím dál studenější. 
 
@@ -843,7 +843,7 @@
 
 Následně zamíříme do obchodu s potravinami, kde nás již nikdo nevyhodí, ale lidé na nás koukají dost podezíravě. Jako by se báli, že jim jdeme vykrást obchod. Koupíme si rychle jídlo a vodu, nechceme se v obchodě příliš zdržovat. Poblíž vidíme nějaké stánky s oblečením. Sarah se tam chce jít podívat, ráda by si koupila nové oblečení a hlavně nové boty. Jdu s ní si také vybrat něco lepšího na sebe. Pevně doufám, že nejhorší část cesty máme za sebou a brzy z Řecka odejdeme.
 
-[[Jak pokračoval Mohamed na cestě po Evropě?-&gt;Přes balkán 2]]</tw-passagedata><tw-passagedata pid="63" name="Přes balkán 2" tags="rail-tracks ferry" position="1325,2650" size="100,100">&lt;div class=&quot;floating-clock-container&quot;&gt;&lt;div class=&quot;floating-clock&quot;&gt;29. srpen 2015&lt;/div&gt;&lt;/div&gt;\
+[[Jak pokračoval Mohamed na cestě po Evropě?-&gt;Přes balkán 2]]</tw-passagedata><tw-passagedata pid="63" name="Přes balkán 2" tags="train-tracks ferry" position="1325,2650" size="100,100">&lt;div class=&quot;floating-clock-container&quot;&gt;&lt;div class=&quot;floating-clock&quot;&gt;29. srpen 2015&lt;/div&gt;&lt;/div&gt;\
 &lt;script&gt;document.setupAAP(&quot;https://digikult.phil.muni.cz/wp-content/uploads/2021/06/Chozeni-v-obili-v-trave.m4a&quot;)&lt;/script&gt;\
 \\
 &lt;img src=&quot;https://i.imgur.com/YtBpdKT.jpg&quot; width=&quot;950px&quot; height=&quot;550px&quot;&gt;

diff --git a/dvz-migrace/style-migrace.css b/dvz-migrace/style-migrace.css
@@ -46,19 +46,98 @@ tw-story {
     background-position: center;
     background-attachment: fixed;
     background-color: rgb(119, 105, 76);
-    /* background-image: url("https://digikult.phil.muni.cz/wp-content/uploads/2020/09/AkK_jidelna.jpg"); */
+    /* background-image: url(""); */
     background-size: cover;
-
+    
     font-family: "Roboto Slab", serif;
 }
+
 /* 
 tw-story[tags ~= "TAG"] {
     background-image: url("");
 } */
 
+/* thematic backgrounds */
+tw-story[tags ~= "edu-intermezzo"] {
+    background-image: url("https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
+}
+
+/* beginning */
+tw-story[tags ~= "intro"],
+tw-story[tags ~= "character-choice"],
+tw-story[tags ~= "about-mohamed"],
+tw-story[tags ~= "about-sarah"] {
+    background-image: url("https://images.unsplash.com/photo-1589262804704-c5aa9e6def89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2071&q=80");
+}
+
+/* tw-story[tags ~= "character-choice"] {
+    background-image: url("");
+}
+tw-story[tags ~= "about-mohamed"] {
+    background-image: url("");
+}
+tw-story[tags ~= "about-sarah"] {
+    background-image: url("");
+} */
+
+/* endings */
+tw-story[tags ~= "conclusion"] {
+    background-image: url("");
+}
+
+tw-story[tags ~= "bad-end"] {
+    background-image: url("");
+}
+
+tw-story[tags ~= "credits"] {
+    background-image: url("");
+}
+
+/* storyline backgrounds */
 tw-story[tags ~= "sea"] {
     background-image: url("https://images.unsplash.com/photo-1470115209269-18dd2d7285cd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80");
 }
+tw-story[tags ~= "boat"] {
+    /* maybe? */
+    background-image: url("https://i.imgur.com/c0bBo7L.png");
+}
+tw-story[tags ~= "turkey-coast"] {
+    background-image: url("");
+    background-image: url("https://images.unsplash.com/photo-1470115209269-18dd2d7285cd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80");
+}
+tw-story[tags ~= "close-to-greece"] {
+    background-image: url("https://images.unsplash.com/photo-1470115209269-18dd2d7285cd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80");
+}
+tw-story[tags ~= "greece-beach"] {
+    background-image: url("");
+}
+tw-story[tags ~= "ferry"] {
+    background-image: url("");
+}
+tw-story[tags ~= "hungary-border"] {
+    background-image: url("");
+}
+tw-story[tags ~= "corn"] {
+    background-image: url("https://images.unsplash.com/photo-1567547921486-f280c2f53b5d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80");
+}
+tw-story[tags ~= "van"],
+tw-story[tags ~= "van2"] {
+    background-image: url("https://images.unsplash.com/photo-1588758167582-5c1021c30e0a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1304&q=80");
+}
+tw-story[tags ~= "camp"] {
+    background-image: url("");
+}
+tw-story[tags ~= "train-tracks"] {
+    background-image: url("https://i.imgur.com/YtBpdKT.jpeg");
+}
+tw-story[tags ~= "train-station"] {
+    background-image: url("https://i.imgur.com/a6nD3OW.png");
+}
+tw-story[tags ~= "germany"] {
+    background-image: url("");
+}
+
+
 
 
 /*============================