password protected notes

89

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Password Protection with Notes</title> <style> /* Existing CSS styles */ body, h2, input, button, textarea { transition: color 1s ease, border-color 1s ease, background-color 1s ease; color: white; } 
    body {
        background-color: black;
    }

    input, button, textarea {
        padding: 10px;
        margin: 10px 0;
        font-size: 16px;
        border: 2px solid #fff;
        border-radius: 5px;
        background-color: black;
        color: white;
    }

    .error {
        color: red;
        font-weight: bold;
    }

    #savedNotesContainer {
        margin-top: 20px;
        padding: 10px;
        background-color: #000;
        border: 2px solid white;
        border-radius: 5px;
        display: none;
        max-width: 90%;
    }

    #noteSection {
        display: none;
        margin-bottom: 20px;
    }

    #savedNotes {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .note-item {
        background-color: black;
        padding: 10px;
        border: 2px solid white;
        border-radius: 5px;
        color: white;
        font-size: 16px;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        display: flex;
        justify-content: space-between;
    }

    .remove-note-btn {
        background-color: #FF4500;
        border: none;
        color: white;
        cursor: pointer;
        padding: 5px;
        font-size: 12px;
        border-radius: 5px;
    }

    .remove-note-btn:hover {
        background-color: #FF6347;
    }
</style>
<script>
    var currentPassword = "renoisbetter";
    var savedNotes = [];
    var colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A6", "#33FFF6", "#FFD700", "#ADFF2F", "#FF4500"];
    var colorIndex = 0;

    function changeColors() {
        var elements = document.querySelectorAll('h2, input, button, textarea, .note-item');

        setInterval(function() {
            elements.forEach(function(element) {
                element.style.borderColor = colors[colorIndex];
                element.style.color = colors[(colorIndex + 1) % colors.length];
            });
            document.getElementById("savedNotesContainer").style.borderColor = colors[colorIndex];
            colorIndex = (colorIndex + 1) % colors.length;
        }, 2000);
    }

    function checkPassword() {
        var inputPassword = document.getElementById("password").value;
        var errorMessage = document.getElementById("error-message");

        if (inputPassword === currentPassword) {
            errorMessage.textContent = "";
            document.getElementById("noteSection").style.display = "block";
            document.getElementById("savedNotesContainer").style.display = "block";
            alert("Welcome! You entered the correct password.");
            document.getElementById("password").value = "";
            document.getElementById("newPasswordSection").style.display = "none";
        } else {
            errorMessage.textContent = "Incorrect password. Please try again.";
        }
    }

    function saveNewPassword() {
        var newPassword = document.getElementById("new-password").value;
        if (newPassword.trim() === "") {
            alert("Please enter a valid new password.");
            return;
        }
        currentPassword = newPassword; // Update the current password
        document.getElementById("new-password").value = ""; // Clear the input
        alert("New password saved successfully.");
    }

    function saveNote() {
        var note = document.getElementById("note").value;
        if (note.trim() === "") {
            alert("Please enter a valid note.");
            return;
        }

        savedNotes.push(note);
        updateSavedNotes();
        document.getElementById("note").value = "";
    }

    function updateSavedNotes() {
        var savedNotesContainer = document.getElementById("savedNotes");
        savedNotesContainer.innerHTML = "";
        savedNotes.forEach(function(note, index) {
            var noteDiv = document.createElement("div");
            noteDiv.className = "note-item";
            noteDiv.textContent = note;

            var removeButton = document.createElement("button");
            removeButton.textContent = "Remove";
            removeButton.className = "remove-note-btn";
            removeButton.onclick = function() {
                savedNotes.splice(index, 1);
                updateSavedNotes();
            };

            noteDiv.appendChild(removeButton);
            savedNotesContainer.appendChild(noteDiv);
        });
        document.getElementById("savedNotesContainer").style.display = savedNotes.length > 0 ? "block" : "none";
    }

    function saveAndExit() {
        alert("Notes saved. You are now exiting.");
        document.getElementById("noteSection").style.display = "none";
        document.getElementById("savedNotesContainer").style.display = "none";
        document.getElementById("password").value = "";
        document.getElementById("error-message").textContent = "";
        
        // Make the Save New Password section visible
        document.getElementById("newPasswordSection").style.display = "block";
    }

    window.onload = function() {
        changeColors();
    };
</script>
</head> <body> <h2 id="title">Enter Password to Continue</h2> <input type="password" id="password" placeholder="Enter password" /> <button onclick="checkPassword()">Enter</button> <p id="error-message" class="error"></p> 
<!-- New Password input -->
<div id="newPasswordSection">
    <h2>Set New Password</h2>
    <input type="password" id="new-password" placeholder="Enter new password" />
    <button class="save-new-password-btn" onclick="saveNewPassword()">Save New Password</button>
</div>

<!-- Notes section -->
<div id="noteSection">
    <h2>Notes</h2>
    <textarea id="note" placeholder="Enter your notes here"></textarea><br>
    <button onclick="saveNote()">Save Note</button>
    <button onclick="saveAndExit()">Save and Exit</button>
</div>

<!-- Saved notes container (below the note section) -->
<div id="savedNotesContainer">
    <h2>Saved Notes</h2>
    <div id="savedNotes"></div>
</div>
</body> </html>