notes/pass.html at main · jatinchahal2010/notes · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jatin</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }
    .hidden {
      display: none;
    }
    textarea {
      width: 80%;
      height: 300px;
      margin-top: 20px;
    }
    button {
      padding: 10px 20px;
      margin-top: 10px;
    }
    input[type="file"] {
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <!-- Title Section -->
  <h1>
    <span id="j">J</span>
    <span id="a">a</span>
    <span id="t">t</span>
    <span id="i">i</span>
    <span id="n">n</span>
  </h1>

  <!-- Password Section -->
  <div id="passwordSection" class="hidden">
    <h2>Enter Password</h2>
    <input type="password" id="password" placeholder="Enter password">
    <button onclick="validatePassword()">Submit</button>
    <p id="error" style="color: red;"></p>
  </div>

  <!-- Notes Section -->
  <div id="notesSection" class="hidden">
    <h2>Your Notes</h2>
    <textarea id="notes" placeholder="Write something..."></textarea>
    <br>
    <button onclick="saveNotes()">Save</button>
    <button onclick="logout()">Logout</button>
    <p id="savedMessage" style="color: green;"></p>
    <!-- Video Upload Section -->
    <input type="file" id="videoUpload" accept="video/*">
    <br>
    <video id="videoPreview" controls style="display: none; margin-top: 20px;"></video>
    <!-- Camera Photo Section -->
    <input type="file" id="photoCapture" accept="image/*" capture="camera">
    <br>
    <img id="photoPreview" style="display: none; margin-top: 20px;" width="300" />
  </div>

  <script>
    const title = document.querySelectorAll("h1 span");
    let currentIndex = 0;
    let passwordStore = {};

    // Handle clicking letters in sequence
    title.forEach((letter, index) => {
      letter.addEventListener("click", () => {
        if (index === currentIndex) {
          currentIndex++;
          if (currentIndex === title.length) {
            document.getElementById("passwordSection").classList.remove("hidden");
          }
        } else {
          alert("Click the letters in order!");
          currentIndex = 0;
        }
      });
    });

    // Validate password and store custom password
    function validatePassword() {
      const password = document.getElementById("password").value;
      if (password.startsWith("/") && !isNaN(password.slice(1))) {
        // This is a new password format: /number
        passwordStore[password] = passwordStore[password] || '';
        localStorage.setItem('passwordStore', JSON.stringify(passwordStore));
        document.getElementById("passwordSection").classList.add("hidden");
        document.getElementById("notesSection").classList.remove("hidden");
        document.getElementById("notes").value = passwordStore[password];
      } else if (password === "jatin") {
        document.getElementById("passwordSection").classList.add("hidden");
        document.getElementById("notesSection").classList.remove("hidden");
        document.getElementById("notes").value = localStorage.getItem("notes") || "";
      } else {
        document.getElementById("error").textContent = "Incorrect password!";
      }
    }

    // Save notes
    function saveNotes() {
      const notes = document.getElementById("notes").value;
      const password = document.getElementById("password").value;
      if (password.startsWith("/") && !isNaN(password.slice(1))) {
        passwordStore[password] = notes;
        localStorage.setItem('passwordStore', JSON.stringify(passwordStore));
      } else {
        localStorage.setItem("notes", notes);
      }
      document.getElementById("savedMessage").textContent = "Notes saved!";
      setTimeout(() => {
        document.getElementById("savedMessage").textContent = "";
      }, 2000);
    }

    // Logout
    function logout() {
      document.getElementById("notesSection").classList.add("hidden");
      document.getElementById("passwordSection").classList.remove("hidden");
      document.getElementById("password").value = "";
      currentIndex = 0;
    }

    // Handle video upload
    document.getElementById("videoUpload").addEventListener("change", function(event) {
      const videoFile = event.target.files[0];
      if (videoFile) {
        const videoURL = URL.createObjectURL(videoFile);
        const videoPreview = document.getElementById("videoPreview");
        videoPreview.src = videoURL;
        videoPreview.style.display = "block";
      }
    });

    // Handle photo capture
    document.getElementById("photoCapture").addEventListener("change", function(event) {
      const photoFile = event.target.files[0];
      if (photoFile) {
        const photoURL = URL.createObjectURL(photoFile);
        const photoPreview = document.getElementById("photoPreview");
        photoPreview.src = photoURL;
        photoPreview.style.display = "block";
      }
    });
  </script>
</body>
</html>