webtech/index.js at main · kiltaAQ/webtech · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
const body = document.querySelector("body");
const navbar = document.querySelector(".navbar");
const menu = document.querySelector(".menu-list");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = ()=>{
  menu.classList.add("active");
  menuBtn.classList.add("hide");
  cancelBtn.classList.add("show");
  body.classList.add("disabledScroll");
}
cancelBtn.onclick = ()=>{
  menu.classList.remove("active");
  menuBtn.classList.remove("hide");
  cancelBtn.classList.remove("show");
  body.classList.remove("disabledScroll");
}
menu.onclick = ()=>{
  menu.classList.remove("active");
  menuBtn.classList.remove("hide");
  cancelBtn.classList.remove("show");
  body.classList.remove("disabledScroll");
}


window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector('nav').classList.add('new-navbar-scroll');
  } else {
    document.querySelector('nav').classList.remove('new-navbar-scroll');
  }
}


function video1(){
  document.getElementsByTagName('body')[0].innerHTML='<video autoplay loop id="myVideo" ><source src="video/bogor.mp4" type="video/mp4"></video><nav><button class="myBtn myBtn-right" "><img src="images/arrow.png" alt=""></button></nav><style>#myVideo{position: fixed;right: 0;bottom: 0;min-width: 100%; min-height: 100%;} button{background-color: rgba(255, 254, 254, 0.5);color: white;position:fixed;width: 50px;height: 30px;border-radius: 5px;border: none;cursor: pointer;}button:hover{background: rgba(16, 172, 55, 0.959);}.myBtn-right{top: 8px;left: 18px;}img{width: 20px;color: #ddd;margin-top:5px;}</style>'
  const keluar = document.getElementsByTagName('button')[0];
  keluar.onclick=()=>{
    window.location.reload();
    console.log('berhasil keluar');
  }
}
function video2(){
  document.getElementsByTagName('body')[0].innerHTML='<video autoplay loop id="myVideo" ><source src="video/tangerang.mp4" type="video/mp4"></video><nav><button class="myBtn myBtn-right" "><img src="images/arrow.png" alt=""></button></nav><style>#myVideo{position: fixed;right: 0;bottom: 0;min-width: 100%; min-height: 100%;} button{background-color: rgba(255, 254, 254, 0.5);color: white;position:fixed;width: 50px;height: 30px;border-radius: 5px;border: none;cursor: pointer;}button:hover{background: rgba(16, 172, 55, 0.959);}.myBtn-right{top: 8px;left: 18px;}img{width: 20px;color: #ddd;margin-top:5px;}</style>'
  const keluar = document.getElementsByTagName('button')[0];
  keluar.onclick=()=>{
    window.location.reload();
    console.log('berhasil keluar');
  }
}
function video3(){
  document.getElementsByTagName('body')[0].innerHTML='<video autoplay loop id="myVideo" ><source src="video/bali.mp4" type="video/mp4"></video><nav><button class="myBtn myBtn-right" "><img src="images/arrow.png" alt=""></button></nav><style>#myVideo{position: fixed;right: 0;bottom: 0;min-width: 100%; min-height: 100%;} button{background-color: rgba(255, 254, 254, 0.5);color: white;position:fixed;width: 50px;height: 30px;border-radius: 5px;border: none;cursor: pointer;}button:hover{background: rgba(16, 172, 55, 0.959);}.myBtn-right{top: 8px;left: 18px;}img{width: 20px;color: #ddd;margin-top:5px;}</style>'
  const keluar = document.getElementsByTagName('button')[0];
  keluar.onclick=()=>{
    window.location.reload();
    console.log('berhasil keluar');
  }
}
function video4(){
  document.getElementsByTagName('body')[0].innerHTML='<video autoplay loop id="myVideo" ><source src="video/depok.mp4" type="video/mp4"></video><nav><button class="myBtn myBtn-right" "><img src="images/arrow.png" alt=""></button></nav><style>#myVideo{position: fixed;right: 0;bottom: 0;min-width: 100%; min-height: 100%;} button{background-color: rgba(255, 254, 254, 0.5);color: white;position:fixed;width: 50px;height: 30px;border-radius: 5px;border: none;cursor: pointer;}button:hover{background: rgba(16, 172, 55, 0.959);}.myBtn-right{top: 8px;left: 18px;}img{width: 20px;color: #ddd;margin-top:5px;}</style>'
  const keluar = document.getElementsByTagName('button')[0];
  keluar.onclick=()=>{
    window.location.reload();
    console.log('berhasil keluar');
  }
}
function video5(){
  document.getElementsByTagName('body')[0].innerHTML='<video autoplay loop id="myVideo" ><source src="video/aceh.mp4" type="video/mp4"></video><nav><button class="myBtn myBtn-right" "><img src="images/arrow.png" alt=""></button></nav><style>#myVideo{position: fixed;right: 0;bottom: 0;min-width: 100%; min-height: 100%;} button{background-color: rgba(255, 254, 254, 0.5);color: white;position:fixed;width: 50px;height: 30px;border-radius: 5px;border: none;cursor: pointer;}button:hover{background: rgba(16, 172, 55, 0.959);}.myBtn-right{top: 8px;left: 18px;}img{width: 20px;color: #ddd;margin-top:5px;}</style>'
  const keluar = document.getElementsByTagName('button')[0];
  keluar.onclick=()=>{
    window.location.reload();
    console.log('berhasil keluar');
  }
}
function video6(){
  document.getElementsByTagName('body')[0].innerHTML='<video autoplay loop id="myVideo" ><source src="video/jakarta.mp4" type="video/mp4"></video><nav><button class="myBtn myBtn-right" "><img src="images/arrow.png" alt=""></button></nav><style>#myVideo{position: fixed;right: 0;bottom: 0;min-width: 100%; min-height: 100%;} button{background-color: rgba(255, 254, 254, 0.5);color: white;position:fixed;width: 50px;height: 30px;border-radius: 5px;border: none;cursor: pointer;}button:hover{background: rgba(16, 172, 55, 0.959);}.myBtn-right{top: 8px;left: 18px;}img{width: 20px;color: #ddd;margin-top:5px;}</style>'
  const keluar = document.getElementsByTagName('button')[0];
  keluar.onclick=()=>{
    window.location.reload();
    console.log('berhasil keluar');
  }
}