Project/index.html at main · BrianCarft/Project · 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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GROSST PIDR</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #000;
            position: relative;
            overflow: hidden;
        }
        img {
            position: absolute;
            object-fit: cover;
            transition: transform 0.3s ease, filter 0.3s ease, opacity 1s ease;
            opacity: 0;
        }
        #img1, #img2, #img3 {
            opacity: 0;
        }
        #img1 {
            width: 20%;
            left: 25%;
            top: 35%;
            scale: 0.3;
        }
        #img2 {
            width: 24%;
            left: 38%;
            top: 32%;
            scale: 0.3;
        }
        #img3 {
            width: 22%;
            left: 55%;
            top: 30%;
            scale: 0.3;
        }
        #img4 {
            width: 25%;
            left: 39.5%;
            top: 75%;
            transform: translate(-50%, -50%);
            scale: 0.15;
            opacity: 1;
        }
        .hover-zone {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px;
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        .hover-zone:hover img {
            transform: scale(1.1);
            filter: brightness(1.2);
        }

        /* Media Queries */
        @media (max-width: 1024px) {
            #img1, #img2, #img3, #img4 {
                scale: 0.25;
            }
            #img1 { left: 20%; top: 30%; }
            #img2 { left: 35%; top: 28%; }
            #img3 { left: 50%; top: 26%; }
            #img4 { left: 35%; top: 70%; }
        }

        @media (max-width: 768px) {
            #img1, #img2, #img3, #img4 {
                scale: 0.2;
            }
            #img1 { left: 15%; top: 25%; }
            #img2 { left: 30%; top: 23%; }
            #img3 { left: 45%; top: 21%; }
            #img4 { left: 30%; top: 65%; }
        }

        @media (max-width: 480px) {
            #img1, #img2, #img3, #img4 {
                scale: 0.15;
            }
            #img1 { left: 10%; top: 20%; }
            #img2 { left: 25%; top: 18%; }
            #img3 { left: 40%; top: 16%; }
            #img4 { left: 25%; top: 60%; }
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("img1").style.opacity = "1";
            document.getElementById("img2").style.opacity = "1";
            document.getElementById("img3").style.opacity = "1";
        });

        function redirectToAnimation(url) {
            window.location.replace(url);
        }
    </script>
</head>
<body>
    <div class="hover-zone" onclick="redirectToAnimation('https://t.me/shnirw')">
        <img id="img1" src="/animation.apng" alt="Анимация 1">
    </div>
    <div class="hover-zone" onclick="redirectToAnimation('https://www.faceit.com/ru/players/pepe_176')">
        <img id="img2" src="/animation2.apng" alt="Анимация 2">
    </div>
    <div class="hover-zone" onclick="redirectToAnimation('https://steamcommunity.com/profiles/76561199025673005/')">
        <img id="img3" src="/animation3.apng" alt="Анимация 3">
    </div>
    <div>
        <img id="img4" src="/animation4.apng" alt="Изображение 4">
    </div>
</body>
</html>