Skip to content

Commit 9ab3480

Browse files
KirillliveKirilllive
committed
Update index.html
1 parent f536e1a commit 9ab3480

File tree

1 file changed

+182
-2
lines changed

1 file changed

+182
-2
lines changed

‎index.html‎

Lines changed: 182 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -404,8 +404,9 @@
404404
<div class="panel">
405405
<div class="catalog">
406406
<a class="menu" href='#about' >About</a>
407-
<a class="menu" href='#multi_page'>Multi-page site</a>
408407
<a class="menu" href='#identify_browser'>Identify browser</a>
408+
<a class="menu" href='#multi_page'>Multi-page site</a>
409+
<a class="menu" href='#interactive_fiction'>Interactive fiction</a>
409410
<details open>
410411
<summary>Components</summary>
411412
<a class="menu" href='#gallery'>Gallery</a>
@@ -1041,6 +1042,184 @@ <h1>SVG</h1>
10411042
&lt;/svg></div>
10421043
</div>
10431044

1045+
1046+
1047+
1048+
1049+
1050+
1051+
<!-- interactive_fiction -->
1052+
<div class="page" id="interactive_fiction">
1053+
<h1>Interactive Fiction / Visual Novel</h1>
1054+
<p>CSS capabilities are sufficient to create a simple interactive story with the ability to choose a storyline. For more complex genres, such as dating sims, the capabilities of CSS HTML are not sufficient.</p>
1055+
<h1><a href='data:text/html;base64,PGh0bWw+Cgk8aGVhZD4KCQk8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgICAgICAgPHN0eWxlPgogICAgICAgIAogICAgICAgICAgICAvKiBzY2VuZSBzd2l0Y2hpbmcgKi8KICAgICAgICAgICAgQHN1cHBvcnRzIHNlbGVjdG9yKDpoYXMoKikpezpub3QoOmhhcyguc2Nlbjp0YXJnZXQpKSAjc2Nlbl8xe2Rpc3BsYXk6YmxvY2s7fX0KICAgICAgICAgICAgI3Zpc3VhbF9ub3ZlbCAuc2Nlbjp0YXJnZXR7ZGlzcGxheTpibG9jazt9CiAgICAgICAgICAgIAogICAgICAgICAgICAvKiBlbGVtZW50IGZvciBzaG93IGhpc3RvcnkgKi8KICAgICAgICAgICAgI3Zpc3VhbF9ub3ZlbHsKICAgICAgICAgICAgICAgIG92ZXJmbG93OmhpZGRlbjsKICAgICAgICAgICAgICAgIGhlaWdodDo0ODBweDt3aWR0aDo4MDBweDsKICAgICAgICAgICAgfQogICAgICAgICAgICAjdmlzdWFsX25vdmVsICp7CiAgICAgICAgICAgICAgICBmb250LWZhbWlseTogbW9ub3NwYWNlOwogICAgICAgICAgICAgICAgZm9udC1zaXplOiAxOHB4OwogICAgICAgICAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDsKICAgICAgICAgICAgfQogICAgICAgICAgICAKICAgICAgICAgICAgLyogc2NlbmUgZWxlbWVudCAqLwogICAgICAgICAgICAjdmlzdWFsX25vdmVsIC5zY2VuewogICAgICAgICAgICAgICAgaGVpZ2h0OjEwMCU7d2lkdGg6MTAwJTsKICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IG5vLXJlcGVhdCBjZW50ZXIgLyBjb3ZlciB1cmwoJycpOwogICAgICAgICAgICAgICAgZGlzcGxheTpub25lOwogICAgICAgICAgICAgICAgcG9zaXRpb246cmVsYXRpdmU7CiAgICAgICAgICAgIH0KICAgICAgICAgICAgCiAgICAgICAgICAgIC8qIHN3aXRjaGluZyBkaWFsb2d1ZXMgaW4gYSBzY2VuZSAqLwogICAgICAgICAgICAjdmlzdWFsX25vdmVsIGlucHV0IHtkaXNwbGF5OiBub25lOyB9CiAgICAgICAgICAgICN2aXN1YWxfbm92ZWwgaW5wdXQ6Y2hlY2tlZCArIGxhYmVsIHsKICAgICAgICAgICAgICAgIGRpc3BsYXk6YmxvY2s7CiAgICAgICAgICAgICAgICBwb2ludGVyLWV2ZW50czogYXV0bzsKICAgICAgICAgICAgfQogICAgICAgICAgICAvKiBzaG93IGEgZGlhbG9nKi8KICAgICAgICAgICAgI3Zpc3VhbF9ub3ZlbCBsYWJlbCB7CiAgICAgICAgICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTsKICAgICAgICAgICAgICAgIHdpZHRoOjEwMCU7CiAgICAgICAgICAgICAgICBoZWlnaHQ6MTAwJTsKICAgICAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7CiAgICAgICAgICAgICAgICBjb2xvcjpBRkY7CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIC8qIGxpbmsgdG8gdGhlIG5leHQgc2NlbmUgKi8KICAgICAgICAgICAgI3Zpc3VhbF9ub3ZlbCBhOm5vdCguY2hvaWNlKSB7CiAgICAgICAgICAgICAgICB0ZXh0LWRlY29yYXRpb246bm9uZTsKICAgICAgICAgICAgICAgIGhlaWdodDoxMDAlOwogICAgICAgICAgICAgICAgd2lkdGg6MTAwJTsKICAgICAgICAgICAgICAgIGRpc3BsYXk6YmxvY2s7CiAgICAgICAgICAgICAgICBjdXJzb3I6IGRlZmF1bHQ7CiAgICAgICAgICAgIH0KICAgICAgICAgICAgCiAgICAgICAgICAgIC8qICBzaG93aW5nIGVsZW1lbnQgdGV4dCAqLwogICAgICAgICAgICAjdmlzdWFsX25vdmVsIC50ZXh0X2Jsb2NrewogICAgICAgICAgICAgICAgaGVpZ2h0OjEyOHB4OwogICAgICAgICAgICAgICAgd2lkdGg6Y2FsYygxMDAlIC0gMzJweCk7CiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiNmZmY7CiAgICAgICAgICAgICAgICBwYWRkaW5nOjhweDsKICAgICAgICAgICAgICAgIGJvdHRvbToxNnB4OwogICAgICAgICAgICAgICAgbGVmdDoxNnB4OwogICAgICAgICAgICAgICAgcG9zaXRpb246YWJzb2x1dGU7CiAgICAgICAgICAgIH0KICAgICAgICAgICAgCiAgICAgICAgICAgIC8qIGNob2ljZSBidXR0b25zICovCiAgICAgICAgICAgICN2aXN1YWxfbm92ZWwgLmNob2ljZXsKICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6I2ZmZjsKICAgICAgICAgICAgICAgIG1pbi13aWR0aDo2NHB4OwogICAgICAgICAgICAgICAgcG9zaXRpb246YWJzb2x1dGU7CiAgICAgICAgICAgICAgICBkaXNwbGF5OmZsZXg7CiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyOwogICAgICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgICAgICAgICAgICAgICB0ZXh0LWRlY29yYXRpb246bm9uZTsKICAgICAgICAgICAgICAgIHBhZGRpbmc6OHB4OwogICAgICAgICAgICB9CiAgICAgICAgCiAgICAgICAgICAgIC8qIHRleHQgYW5pbWF0aW9uICovCiAgICAgICAgICAgICN2aXN1YWxfbm92ZWwgLnR5cGVfd3JpdGVyIHsKICAgICAgICAgICAgICAgIGNvbG9yOiB0cmFuc3BhcmVudDsKICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6bm8tcmVwZWF0IGxlZnQgdG9wIC8gY2FsYyh2YXIoLS1uKSoxY2gpIDEwMCUgbGluZWFyLWdyYWRpZW50KCMwMDApOwogICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jbGlwOiB0ZXh0OwogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBzaG93X3N5bWJvbHMgY2FsYyh2YXIoLS1uKSouMXMpIHN0ZXBzKHZhcigtLW4pKSBmb3J3YXJkczsKICAgICAgICAgICAgfQogICAgICAgICAgICBAa2V5ZnJhbWVzIHNob3dfc3ltYm9sc3tmcm9te2JhY2tncm91bmQtc2l6ZTowIDEwMCV9fQogICAgICAgICAgICAKICAgICAgICAgICAgLyogc3ByaXRlcyBpbiB0aGUgc2NlbmUgKi8KICAgICAgICAgICAgI3Zpc3VhbF9ub3ZlbCAuc3ByaXRlewogICAgICAgICAgICAgICAgaGVpZ2h0OjEwMCU7CiAgICAgICAgICAgICAgICB3aWR0aDo1MCU7CiAgICAgICAgICAgICAgICBkaXNwbGF5OmJsb2NrOwogICAgICAgICAgICAgICAgYmFja2dyb3VuZDpuby1yZXBlYXQgY2VudGVyIGJvdHRvbSAvIGNvbnRhaW4gdXJsKCJkYXRhOmltYWdlL3N2Zyt4bWwsJTNjP3htbCB2ZXJzaW9uPScxLjAnIGVuY29kaW5nPSdVVEYtOCcgc3RhbmRhbG9uZT0nbm8nPyUzZSUzY3N2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIGhlaWdodD0nMTMyLjI0cHgnIHdpZHRoPScxMjQuMTlweCcgdmVyc2lvbj0nMS4xJyB4PScwcHgnIHk9JzBweCcgeG1sbnM6bnM9JyZhbXA7JTIzMzg7bnNfYWk7JyBlbmFibGUtYmFja2dyb3VuZD0nbmV3IDAgMCAxMjQuMTg5IDEzMi4yNDMnIHZpZXdCb3g9JzAgMCAxMjQuMTg5IDEzMi4yNDMnJTNlJTNjZyBuczpleHRyYW5lb3VzPSdzZWxmJyUzZSUzY3BhdGggc3Ryb2tlLXdpZHRoPScxLjI1JyBkPSdtNjIuMDk2IDguNTg1OWMtNS4yMDggMC05LjQyNCA0LjIxOTEtOS40MjQgOS40MjYxIDAuMDAxIDUuMjAzIDQuMjE3IDkuNDI0IDkuNDI0IDkuNDI0IDUuMjAyIDAgOS40MjItNC4yMjEgOS40MjItOS40MjQgMC01LjIwOC00LjIyLTkuNDI2MS05LjQyMi05LjQyNjF6bS0xMC40MSAyMS4yNjhjLTYuNjcyIDAtMTIuMTMxIDUuNDA3LTEyLjEzMSAxMi4wN3YyOS4yM2MwIDIuMjc1IDEuNzkxIDQuMTIzIDQuMDcgNC4xMjMgMi4yOCAwIDQuMTI3LTEuODQ2IDQuMTI3LTQuMTIzdi0yNi4zNTVoMi4xMDJzMC4wNDggNjguODExIDAuMDQ4IDczLjMzMWMwIDMuMDUgMi40NzggNS41MyA1LjUzMiA1LjUzIDMuMDUyIDAgNS41MjUtMi40OCA1LjUyNS01LjUzdi00Mi41ODFoMi4yN3Y0Mi41ODFjMCAzLjA1IDIuNDczIDUuNTMgNS41MzEgNS41MyAzLjA1NCAwIDUuNTQ5LTIuNDggNS41NDktNS41M3YtNzMuMzMxaDIuMTI3djI2LjM1NWMwIDIuMjc1IDEuODUgNC4xMjMgNC4xMjYgNC4xMjMgMi4yOCAwIDQuMDczLTEuODQ2IDQuMDczLTQuMTIzdi0yOS4yM2MwLTYuNjYzLTUuNDYzLTEyLjA3LTEyLjEyOS0xMi4wN2gtMjAuODJ6Jy8lM2UlM2MvZyUzZSUzYy9zdmclM2UiKTsKICAgICAgICAgICAgICAgIHBvc2l0aW9uOmFic29sdXRlOwogICAgICAgICAgICB9CiAgICAgICAgPC9zdHlsZT4KCTwvaGVhZD4KPGJvZHk+Cgo8ZGl2IGlkPSJ2aXN1YWxfbm92ZWwiPgogICAgPGRpdiBpZD0ic2Nlbl8xIiBjbGFzcz0ic2NlbiIgc3R5bGU9ImJhY2tncm91bmQtaW1hZ2U6bGluZWFyLWdyYWRpZW50KCM5MTk4ZTUgLCAjZTY2NDY1KSI+CiAgICAgICAgPGlucHV0IHR5cGU9InJhZGlvIiBpZD0idGV4dF8xIiBuYW1lPSJzY2VuXzEiIGNoZWNrZWQ+CiAgICAgICAgPGxhYmVsIGZvcj0idGV4dF8yIj4KICAgICAgICAgICAgPGRpdiBjbGFzcz0ic3ByaXRlIiBzdHlsZT0idG9wOi0xMCU7IGxlZnQ6NCU7Ij48L2Rpdj4KICAgICAgICAgICAgPGRpdiBjbGFzcz0idGV4dF9ibG9jayI+CiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0idHlwZV93cml0ZXIiIHN0eWxlPSItLW46OCI+dGV4dCAxPC9zcGFuPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgaWQ9InRleHRfMiIgbmFtZT0ic2Nlbl8xIj4KICAgICAgICA8bGFiZWwgZm9yPSJ0ZXh0XzMiPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJzcHJpdGUiIHN0eWxlPSJ0b3A6LTEwJTsgbGVmdDo4JTsiPjwvZGl2PgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJ0ZXh0X2Jsb2NrIj4KICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPSJ0eXBlX3dyaXRlciIgc3R5bGU9Ii0tbjo4Ij50ZXh0IDI8L3NwYW4+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvbGFiZWw+CgogICAgICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgaWQ9InRleHRfMyIgbmFtZT0ic2Nlbl8xIj4KICAgICAgICA8bGFiZWw+CiAgICAgICAgICAgIDxhIGhyZWY9JyNzY2VuXzInPgogICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0ic3ByaXRlIiBzdHlsZT0idG9wOi0xMCU7IGxlZnQ6MTIlOyI+PC9kaXY+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJ0ZXh0X2Jsb2NrIj4KICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0idHlwZV93cml0ZXIiIHN0eWxlPSItLW46OCI+dGV4dCAzPC9zcGFuPgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDwvYT4KICAgICAgICA8L2xhYmVsPgogICAgPC9kaXY+CiAgICA8ZGl2IGlkPSJzY2VuXzIiIGNsYXNzPSJzY2VuIiBzdHlsZT0iYmFja2dyb3VuZC1pbWFnZTpsaW5lYXItZ3JhZGllbnQoIzkxOThlNSAsICNlNjY0NjUpIj4KICAgICAgICA8aW5wdXQgdHlwZT0icmFkaW8iIGlkPSJ0ZXh0XzQiIG5hbWU9InNjZW5fMiIgY2hlY2tlZD4KICAgICAgICA8bGFiZWwgZm9yPSJ0ZXh0XzUiPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJzcHJpdGUiIHN0eWxlPSJ0b3A6LTEwJTsgbGVmdDoxNiU7Ij48L2Rpdj4KICAgICAgICAgICAgPGRpdiBjbGFzcz0idGV4dF9ibG9jayI+CiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0idHlwZV93cml0ZXIiIHN0eWxlPSItLW46OCI+dGV4dCA0PC9zcGFuPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgaWQ9InRleHRfNSIgbmFtZT0ic2Nlbl8yIj4KICAgICAgICA8bGFiZWwgZm9yPSJ0ZXh0XzYiPgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJzcHJpdGUiIHN0eWxlPSJ0b3A6LTEwJTsgbGVmdDoyMCU7Ij48L2Rpdj4KICAgICAgICAgICAgPGRpdiBjbGFzcz0idGV4dF9ibG9jayI+CiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0idHlwZV93cml0ZXIiIHN0eWxlPSItLW46OCI+dGV4dCA1PC9zcGFuPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJyYWRpbyIgaWQ9InRleHRfNiIgbmFtZT0ic2Nlbl8yIj4KICAgICAgICA8bGFiZWw+CiAgICAgICAgICAgIDxhIGhyZWY9JyNzY2VuX3llcycgY2xhc3M9ImNob2ljZSIgc3R5bGU9InRvcDoxMDBweDtsZWZ0OjEwMHB4OyI+eWVzPC9hPgogICAgICAgICAgICA8YSBocmVmPScjc2Nlbl9ubycgY2xhc3M9ImNob2ljZSIgc3R5bGU9InRvcDoxMDBweDtyaWdodDoxMDBweDsiPm5vPC9hPgogICAgICAgICAgICA8ZGl2PgogICAgICAgICAgICAgICAgPGRpdiBjbGFzcz0ic3ByaXRlIiBzdHlsZT0idG9wOi0xMCU7IGxlZnQ6MjQlOyI+PC9kaXY+CiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPSJ0ZXh0X2Jsb2NrIj4KICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0idHlwZV93cml0ZXIiIHN0eWxlPSItLW46OCI+dGV4dCA2PC9zcGFuPgogICAgICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvbGFiZWw+CiAgICA8L2Rpdj4KICAgIDxkaXYgaWQ9InNjZW5feWVzIiBjbGFzcz0ic2NlbiIgc3R5bGU9ImJhY2tncm91bmQtaW1hZ2U6bGluZWFyLWdyYWRpZW50KCM5MTk4ZTUgLCAjZTY2NDY1KSI+CiAgICAgICAgPGRpdj4KICAgICAgICAgICAgPGRpdiBjbGFzcz0ic3ByaXRlIiBzdHlsZT0idG9wOi0xMCU7IGxlZnQ6MjglOyI+PC9kaXY+CiAgICAgICAgICAgIDxkaXYgY2xhc3M9InRleHRfYmxvY2siPgogICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9InR5cGVfd3JpdGVyIiBzdHlsZT0iLS1uOjE2Ij5jaG9pY2UgeWVzPC9zcGFuPgogICAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgIDwvZGl2PgogICAgPGRpdiBpZD0ic2Nlbl9ubyIgY2xhc3M9InNjZW4iIHN0eWxlPSJiYWNrZ3JvdW5kLWltYWdlOmxpbmVhci1ncmFkaWVudCgjOTE5OGU1ICwgI2U2NjQ2NSkiPj0KICAgICAgICA8ZGl2PgogICAgICAgICAgICA8ZGl2IGNsYXNzPSJzcHJpdGUiIHN0eWxlPSJ0b3A6LTEwJTsgbGVmdDoyOCU7Ij48L2Rpdj4KICAgICAgICAgICAgPGRpdiBjbGFzcz0idGV4dF9ibG9jayI+CiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0idHlwZV93cml0ZXIiIHN0eWxlPSItLW46MTYiPmNob2ljZSBubzwvc3Bhbj4KICAgICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KPC9kaXY+Cgo8L2JvZHk+CjwvaHRtbD4K' download='interactive_fiction.html'><span class="save"></span> Download interactive fiction</a></h1>
1056+
<h1>HTML</h1>
1057+
<div class="show_code">&lt;html>
1058+
&lt;head>
1059+
&lt;style>
1060+
/* scene switching */
1061+
@supports selector(:has(*)){:not(:has(.scen:target)) #scen_1{display:block;}}
1062+
#visual_novel .scen:target{display:block;}
1063+
/* element for show history */
1064+
#visual_novel{
1065+
overflow:hidden;
1066+
height:480px;width:800px;
1067+
}
1068+
#visual_novel *{
1069+
font-family: monospace;
1070+
font-size: 18px;
1071+
box-sizing: border-box;
1072+
}
1073+
/* scene element */
1074+
#visual_novel .scen{
1075+
height:100%;width:100%;
1076+
background: no-repeat center / cover url('');
1077+
display:none;
1078+
position:relative;
1079+
}
1080+
/* switching dialogues in a scene */
1081+
#visual_novel input {display: none; }
1082+
#visual_novel input:checked + label {
1083+
display:block;
1084+
pointer-events: auto;
1085+
}
1086+
/* show a dialog*/
1087+
#visual_novel label {
1088+
pointer-events: none;
1089+
width:100%;
1090+
height:100%;
1091+
display: none;
1092+
color:AFF;
1093+
}
1094+
/* link to the next scene */
1095+
#visual_novel a:not(.choice) {
1096+
text-decoration:none;
1097+
height:100%;
1098+
width:100%;
1099+
display:block;
1100+
cursor: default;
1101+
}
1102+
/* showing element text */
1103+
#visual_novel .text_block{
1104+
height:128px;
1105+
width:calc(100% - 32px);
1106+
background:#fff;
1107+
padding:8px;
1108+
bottom:16px;
1109+
left:16px;
1110+
position:absolute;
1111+
}
1112+
/* choice buttons */
1113+
#visual_novel .choice{
1114+
background:#fff;
1115+
min-width:64px;
1116+
position:absolute;
1117+
display:flex;
1118+
align-items: center;
1119+
justify-content: center;
1120+
text-decoration:none;
1121+
padding:8px;
1122+
}
1123+
/* text animation */
1124+
#visual_novel .type_writer {
1125+
color: transparent;
1126+
background:no-repeat left top / calc(var(--n)*1ch) 100% linear-gradient(#000);
1127+
background-clip: text;
1128+
animation: show_symbols calc(var(--n)*.1s) steps(var(--n)) forwards;
1129+
}
1130+
@keyframes show_symbols{from{background-size:0 100%}}
1131+
/* sprites in the scene */
1132+
#visual_novel .sprite{
1133+
height:100%;
1134+
width:50%;
1135+
display:block;
1136+
background:no-repeat center bottom / contain url("data:image/svg+xml,%3c?xml version='1.0' encoding='UTF-8' standalone='no'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' height='132.24px' width='124.19px' version='1.1' x='0px' y='0px' xmlns:ns='&amp;%2338;ns_ai;' enable-background='new 0 0 124.189 132.243' viewBox='0 0 124.189 132.243'%3e%3cg ns:extraneous='self'%3e%3cpath stroke-width='1.25' d='m62.096 8.5859c-5.208 0-9.424 4.2191-9.424 9.4261 0.001 5.203 4.217 9.424 9.424 9.424 5.202 0 9.422-4.221 9.422-9.424 0-5.208-4.22-9.4261-9.422-9.4261zm-10.41 21.268c-6.672 0-12.131 5.407-12.131 12.07v29.23c0 2.275 1.791 4.123 4.07 4.123 2.28 0 4.127-1.846 4.127-4.123v-26.355h2.102s0.048 68.811 0.048 73.331c0 3.05 2.478 5.53 5.532 5.53 3.052 0 5.525-2.48 5.525-5.53v-42.581h2.27v42.581c0 3.05 2.473 5.53 5.531 5.53 3.054 0 5.549-2.48 5.549-5.53v-73.331h2.127v26.355c0 2.275 1.85 4.123 4.126 4.123 2.28 0 4.073-1.846 4.073-4.123v-29.23c0-6.663-5.463-12.07-12.129-12.07h-20.82z'/%3e%3c/g%3e%3c/svg%3e");
1137+
position:absolute;
1138+
}
1139+
&lt;/style>
1140+
&lt;/head>
1141+
&lt;body>
1142+
&lt;div id="visual_novel">
1143+
&lt;div id="scen_1" class="scen" style="background-image:linear-gradient(#9198e5 , #e66465)">
1144+
&lt;input type="radio" id="text_1" name="scen_1" checked>
1145+
&lt;label for="text_2">
1146+
&lt;div class="sprite" style="top:-10%; left:4%;">&lt;/div>
1147+
&lt;div class="text_block">
1148+
&lt;span class="type_writer" style="--n:8">text 1&lt;/span>
1149+
&lt;/div>
1150+
&lt;/label>
1151+
&lt;input type="radio" id="text_2" name="scen_1">
1152+
&lt;label for="text_3">
1153+
&lt;div class="sprite" style="top:-10%; left:8%;">&lt;/div>
1154+
&lt;div class="text_block">
1155+
&lt;span class="type_writer" style="--n:8">text 2&lt;/span>
1156+
&lt;/div>
1157+
&lt;/label>
1158+
&lt;input type="radio" id="text_3" name="scen_1">
1159+
&lt;label>
1160+
&lt;a href='#scen_2'>
1161+
&lt;div class="sprite" style="top:-10%; left:12%;">&lt;/div>
1162+
&lt;div class="text_block">
1163+
&lt;span class="type_writer" style="--n:8">text 3&lt;/span>
1164+
&lt;/div>
1165+
&lt;/a>
1166+
&lt;/label>
1167+
&lt;/div>
1168+
&lt;div id="scen_2" class="scen" style="background-image:linear-gradient(#9198e5 , #e66465)">
1169+
&lt;input type="radio" id="text_4" name="scen_2" checked>
1170+
&lt;label for="text_5">
1171+
&lt;div class="sprite" style="top:-10%; left:16%;">&lt;/div>
1172+
&lt;div class="text_block">
1173+
&lt;span class="type_writer" style="--n:8">text 4&lt;/span>
1174+
&lt;/div>
1175+
&lt;/label>
1176+
&lt;input type="radio" id="text_5" name="scen_2">
1177+
&lt;label for="text_6">
1178+
&lt;div class="sprite" style="top:-10%; left:20%;">&lt;/div>
1179+
&lt;div class="text_block">
1180+
&lt;span class="type_writer" style="--n:8">text 5&lt;/span>
1181+
&lt;/div>
1182+
&lt;/label>
1183+
&lt;input type="radio" id="text_6" name="scen_2">
1184+
&lt;label>
1185+
&lt;a href='#scen_yes' class="choice" style="top:100px;left:100px;">yes&lt;/a>
1186+
&lt;a href='#scen_no' class="choice" style="top:100px;right:100px;">no&lt;/a>
1187+
&lt;div>
1188+
&lt;div class="sprite" style="top:-10%; left:24%;">&lt;/div>
1189+
&lt;div class="text_block">
1190+
&lt;span class="type_writer" style="--n:8">text 6&lt;/span>
1191+
&lt;/div>
1192+
&lt;/div>
1193+
&lt;/label>
1194+
&lt;/div>
1195+
&lt;div id="scen_yes" class="scen" style="background-image:linear-gradient(#9198e5 , #e66465)">
1196+
&lt;div>
1197+
&lt;div class="sprite" style="top:-10%; left:28%;">&lt;/div>
1198+
&lt;div class="text_block">
1199+
&lt;span class="type_writer" style="--n:16">choice yes&lt;/span>
1200+
&lt;/div>
1201+
&lt;/div>
1202+
&lt;/div>
1203+
&lt;div id="scen_no" class="scen" style="background-image:linear-gradient(#9198e5 , #e66465)">=
1204+
&lt;div>
1205+
&lt;div class="sprite" style="top:-10%; left:28%;">&lt;/div>
1206+
&lt;div class="text_block">
1207+
&lt;span class="type_writer" style="--n:16">choice no&lt;/span>
1208+
&lt;/div>
1209+
&lt;/div>
1210+
&lt;/div>
1211+
&lt;/div>
1212+
&lt;/body>
1213+
&lt;/html>
1214+
</div>
1215+
</div>
1216+
1217+
1218+
1219+
1220+
1221+
1222+
10441223
<!-- typing_text -->
10451224
<div class="page" id="identify_browser">
10461225
<h1>Identify browser</h1>
@@ -1057,14 +1236,15 @@ <h1>CSS</h1>
10571236
body { background-color:#afa;}
10581237
body:after{content:"FireFox";}
10591238
}</div>
1060-
1239+
<br>
10611240
<p>Additionally, you can check in CSS whether a property, rule, or selector is supported by the browser. If the condition is met, the CSS code written within the curly braces will be executed.</p>
10621241
<h1>CSS</h1>
10631242
<div class="show_code">@supports (display: grid) and (grid-template-columns: subgrid) {
10641243
body:after{
10651244
content:"\"Display: Grid\" is supported.";
10661245
}
10671246
}</div>
1247+
<h1><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@supports" target='_blank'><span class="link"></span> Full guide @supports: https://developer.mozilla.org/</a></h1>
10681248
</div>
10691249

10701250
</div>

0 commit comments

Comments
 (0)