kamalsystem/frontstart.html at main · KAMAL3887/kamalsystem · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Animated Website</title>
    <style>
        body {
            margin: 0;
            overflow-x: hidden;
            font-family: Arial, sans-serif;
            background: #1a1a1a;
            color: #fff; /* This sets default text color, but we'll override it below */
        }

        #canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        video#bg-video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            filter: brightness(0.7); /* Slightly darken the video for text readability */
        }

        .overlay {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 50px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #00ffff; /* Changed text color to bright cyan for all text in overlay */
        }

        h1 {
            font-size: 3em;
            margin: 0;
            text-shadow: 0 0 10px rgba(178, 233, 89, 0.5); /* Adjusted shadow */
            color: #091111; /* Dark teal for h1 */
        }

        p {
            font-size: 1.2em;
            opacity: 0.8;
            color: #050504; /* Near-black for p */
            text-shadow: 0 0 10px rgba(152, 208, 62, 0.5); /* Adjusted shadow */
        }

        /* Button styling for Visit Us */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #00ffff; /* Cyan background */
            color: #fff; /* White text */
            text-decoration: none;
            border: none;
            border-radius: 25px; /* Increased for a rounder border */
            font-size: 1.5em;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #00cccc; /* Slightly darker cyan on hover */
        }
    </style>
</head>
<body>
    <video id="bg-video" autoplay muted loop>
        <source src="startvideo.mp4" type="video/mp4">
        Your browser does not support the video tag. Please use a modern browser.
    </video>
    <div class="overlay">
        <h1>Welcome to Your Parking</h1>
        <p>Experience the future of parking with our innovative solutions.</p>
        <br>
        <a href="index.html" class="btn">Visit Us</a>
    </div>
    <canvas id="canvas"></canvas>
    <script type="module" src="script.js"></script>
    <script>
        (function() {
            function c() {
                var b = a.contentDocument || a.contentWindow.document;
                if (b) {
                    var d = b.createElement('script');
                    d.innerHTML = "window.__CF$cv$params={r:'92d3af0ffa7ecd16',t:'MTc0NDEzNTQzMi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";
                    b.getElementsByTagName('head')[0].appendChild(d);
                }
            }
            if (document.body) {
                var a = document.createElement('iframe');
                a.height = 1;
                a.width = 1;
                a.style.position = 'absolute';
                a.style.top = 0;
                a.style.left = 0;
                a.style.border = 'none';
                a.style.visibility = 'hidden';
                document.body.appendChild(a);
                if ('loading' !== document.readyState) c();
                else if (window.addEventListener) document.addEventListener('DOMContentLoaded', c);
                else {
                    var e = document.onreadystatechange || function() {};
                    document.onreadystatechange = function(b) {
                        e(b);
                        'loading' !== document.readyState && (document.onreadystatechange = e, c());
                    }
                }
            }
        })();
    </script>
</body>
</html>