input.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome Page</title>
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js" defer></script>
</head>
<body>
    <main class="fade">
     <div class = "page-container"> 
    <div class="container-xxbig">
        <div class="container-small">
        <h1>It's not an existed hanzi...</h1>
        <p class="paragraphs">But now you get the chance to define your unique creation! Your definition will be added to our digital archive and shared with other audiences. 
            And you’ll be able to see what others' made later.
        </p>
        </div>
        
        <div class="container-xbig">
            <div class = "capturedImg">
                <img id = 'captured-image' alt = 'captured image'>
            </div>

        <div class='container-med'>
            <form id = 'form'>


                <div class='input-group'>
                <label for='user-name'></label>
                <input type='text' id='user-name' name="name" placeholder="enter your name (not the hanzi's name) here.">
                </div>
    
                <div class="input-group">
                <label for = 'user-message'> </label>
                <textarea id ='user-message' name="message" placeholder="Craft your Hanzi's story: what does it represent?"></textarea>
                </div>

            </div>
        </div>
        </div>
    </div>
                <button type ='submit' id="submit" class = 'button orange'>Submit</button>
               
            </form>
                <button id="toDetection2" class = 'button grey' >Play Again</button>

        
    </main>
    
    <footer>
      
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
        // Retrieve image data URL from local storage or global variable
        const imageDataUrl = localStorage.getItem('image');
    
        if (imageDataUrl) {
            const imageElement = document.getElementById('captured-image');
            if (imageElement) {
                imageElement.src = imageDataUrl;
                imageElement.style.display = 'block'; // Display the image
            }
        }
    });

    if(toDetection2){
    toDetection2.addEventListener('click',()=>{
        window.location.href = 'assembleNew.html';
    })
    }


    </script>

</body>
</html>