doqmeat.com
HTML template that looks like a passport
doqmeat.com/notebook/F2U/preview/yukika.html
html-template
web-template
doqmeat.tngl.sh
1// the important thing here is that it works tbh
2
3let passport = document.getElementById("cover");
4let passportOpened = document.getElementById("passport-opened");
5let page1 = document.getElementById("page-1");
6let page2 = document.getElementById("page-2");
7let btn1 = document.getElementById("beforeBtn");
8let btn2 = document.getElementById("afterBtn");
9let otherPages = document.getElementsByClassName("page");
10
11function passportOpen() {
12 btn1.style.display = "inline-block";
13 btn2.style.display = "inline-block";
14 passportOpened.style.display = "block";
15 page1.style.display = "block";
16 page2.style.display = "none";
17 passport.className = "passportANI";
18 passportOpened.className = "pageANI";
19 btn1.onclick = passportClose;
20 btn1.innerText = "close passport";
21 btn2.onclick = passportPage2;
22 btn2.innerText = "next page";
23}
24
25function passportPage1() {
26 page1.className = "pageTurnANI1";
27 passportOpened.style.display = "block";
28 page1.style.display = "block";
29 page2.style.display = "none";
30 passportOpened.classList.remove("pageANI");
31 btn1.onclick = passportClose;
32 btn1.innerText = "close passport";
33 btn2.onclick = passportPage2;
34 btn2.innerText = "next page";
35 passport.style.display = "none";
36}
37
38function passportPage2() {
39 page2.className = "pageTurnANI2";
40 page1.style.display = "none";
41 page2.style.display = "block";
42 btn1.onclick = passportPage1;
43 btn1.innerText = "previous page";
44 btn2.onclick = passportClose;
45 btn2.innerText = "close passport";
46 passport.style.display = "none";
47}
48
49function passportClose() {
50 passport.style.display = "block";
51 passport.className = "passportCloseANI";
52 passportOpened.style.display = "none";
53 btn1.style.display = "none";
54 btn2.style.display = "none";
55}