jcseto.github.io/index.html at master · jcseto/jcseto.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>TOP SECRET ACCESS</title>
  <style>
    body {
      background-color: #0b0c10;
      color: #66fcf1;
      font-family: 'Courier New', Courier, monospace;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    h1 {
      font-size: 2.5em;
      margin-bottom: 0.5em;
    }

    #passwordPrompt, #content {
      background-color: #1f2833;
      padding: 30px;
      border: 2px solid #45a29e;
      border-radius: 10px;
      text-align: center;
      width: 500px;
      box-shadow: 0 0 15px #45a29e;
    }

    input[type="password"] {
      padding: 10px;
      width: 80%;
      margin-top: 10px;
      font-size: 1em;
      background-color: #0b0c10;
      color: #c5c6c7;
      border: 1px solid #45a29e;
    }

    button {
      margin-top: 15px;
      padding: 10px 20px;
      background-color: #45a29e;
      border: none;
      color: #0b0c10;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #66fcf1;
    }

    .top-secret {
      color: red;
      font-size: 1.2em;
      margin-bottom: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    #error {
      margin-top: 10px;
      color: #ff4c4c;
    }
  </style>
</head>
<body>

<div id="passwordPrompt">
  <div class="top-secret">TOP SECRET</div>
  <h1>CSIS Access Portal</h1>
  <img width="150" height="150" src="assets/images/chloe.png">
  <p>Enter clearance code to proceed:</p>
  <input type="password" id="passwordInput" />
  <br />
  <button onclick="checkPassword()">Authenticate</button>
  <p id="error"></p>
</div>

<div id="content" style="display: none;">
  <h1>🔓 Hello, Agent SC & GC.</h1>
  <img width="150" height="150" src="assets/images/fika.jpeg">
  <img width="150" height="150" src="assets/images/nicky.png">
  <p> For now, stand down. Rest, refuel, but only something light.
Stay sharp. Your final mission is imminent.
You’ll want to be ready.</p>
  				<div class="profileImage">
					<img width="300" height="300" src="assets/images/finalclue.png">
				</div>
</div>

<script>
  const correctPassword = "A#1DFG4D0+";

  function checkPassword() {
    const input = document.getElementById("passwordInput").value;
    const error = document.getElementById("error");

    if (input === correctPassword) {
      document.getElementById("passwordPrompt").style.display = "none";
      document.getElementById("content").style.display = "block";
    } else {
      error.textContent = "ACCESS DENIED. Invalid clearance code.";
    }
  }
</script>

</body>
</html>