WEBstart-website/script.js at main · MODIMOLOLG/WEBstart-website · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
setTimeout(() => {
    document.getElementById("AllContainer").style.display = "flex";
}, 1550);

setTimeout(() => {
    document.getElementById("bg").style.opacity = "100%";

    document.getElementById("AllContainer").style.opacity = "100%";
}, 1600);

var IsTopbarOpen = false
document.getElementById("menu").addEventListener("click", () => {
    if(!IsTopbarOpen){
        IsTopbarOpen=true;
        document.getElementById("SideBar").style.marginLeft="1rem";
        document.getElementById("globalBlur").style.backdropFilter = "blur(5px)";
        document.getElementById("globalBlur").style.pointerEvents = "all";
        document.getElementById("globalBlur").addEventListener("click", () => {
            closeTopbar();
        });
    }
    else{
        closeTopbar();
    }
});
function closeTopbar() {
    document.getElementById("SideBar").style.marginLeft="-22rem";
    document.getElementById("globalBlur").style.backdropFilter = "none";
    document.getElementById("globalBlur").style.pointerEvents = "none";
    IsTopbarOpen=false;
}

document.getElementById("form").addEventListener("click", () => {
    FormOpen();
    window.scroll({
        top: document.getElementById("formAct").getBoundingClientRect().top + window.scrollY,
        behavior: 'smooth'
    });
});
document.getElementById("formAct").addEventListener("click", () => {
    FormOpen();
});

var IsFormOpen = false;
function FormOpen() {
    if(!IsFormOpen){
        setTimeout(() => {
            window.scroll({
                top: document.getElementById("formAct").getBoundingClientRect().top + window.scrollY - 100,
                behavior: 'smooth'
            });
        }, 500);

        document.getElementById("inv").classList.remove("ImagePictureBackAnim");
        document.getElementById("formAct").classList.remove("ImageCardBackAnim");

        document.getElementById("inv").style.filter = "blur(15px) brightness(30%)";
        document.getElementById("formAct").style.height = "44rem";
        document.getElementById("formAct").style.cursor = "auto";
        document.getElementById("infoForm").style.height = "0";

        document.getElementById("formContainer").style.top = "0";

        IsFormOpen = true;
    }
}

document.getElementById("submit").addEventListener("click", () => {

    document.getElementById("inv").style.filter = "blur(0) brightness(30%)";
    document.getElementById("infoForm").textContent = "Your enquery was succesfully sent!";
    document.getElementById("formAct").style.height = "20rem";


    document.getElementById("infoForm").style.height = "100%";

    document.getElementById("formContainer").style.top = "20rem";
});

document.getElementById("n1").addEventListener("click", () => {
    window.scroll({
        top: 0,
        behavior: 'smooth'
    });
    closeTopbar();
});
document.getElementById("n2").addEventListener("click", () => {
    window.scroll({
        top: document.getElementById("p2").getBoundingClientRect().top + window.scrollY,
        behavior: 'smooth'
    });
    closeTopbar();
});
document.getElementById("n3").addEventListener("click", () => {
    window.scroll({
        top: document.getElementById("p3").getBoundingClientRect().top + window.scrollY,
        behavior: 'smooth'
    });
    closeTopbar();
});
document.getElementById("n4").addEventListener("click", () => {
    window.scroll({
        top: document.getElementById("p4").getBoundingClientRect().top + window.scrollY,
        behavior: 'smooth'
    });
    closeTopbar();
});
document.getElementById("n5").addEventListener("click", () => {
    window.scroll({
        top: document.getElementById("p5").getBoundingClientRect().top + window.scrollY,
        behavior: 'smooth'
    });
    closeTopbar();
});
document.getElementById("n6").addEventListener("click", () => {
    window.scroll({
        top: document.getElementById("p6").getBoundingClientRect().top + window.scrollY - 200,
        behavior: 'smooth'
    });
    closeTopbar();
});
document.getElementById("n7").addEventListener("click", () => {
    window.scroll({
        top: 9999999,
        behavior: 'smooth'
    });
    closeTopbar();
});