<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
    <title>人格 完成に 努める こと</title>
    <style>

        /** Start Inline Style */

        @charset "UTF-8";

        :root {
            font-size: 16px;
            --hn-primary-color: #1a56db;
            --hn-primary-state-color: #1346b7;
            --hn-danger-color: #f04438;
            --hn-success-color: #00aa4a;
            --hn-body-bg: #f5f5f5;
            --hn-white: #ffffff;
            --hn-border-color: #d1d5db;
            --hn-border-radius: 0.5rem;
            --hn-border-stroke-color: #60a5fa;
            --hn-border-shadow-color: #92c5fd;
            --hn-border-error-color: #fda29b;
            --hn-btn-padding-x: 1.25rem;
            --hn-btn-padding-y: 0.625rem;
            --hn-font-family: "Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            --hn-base-color: #111928;
            --hn-focus-state-color: #6b7280;
        }

        *,
        ::after,
        ::before {
            box-sizing: border-box;
        }

        body {
            background-color: var(--hn-body-bg);
            color: var(--hn-base-color);
            display: flex;
            font-family: var(--hn-font-family);
            font-size: 1rem;
            height: 100vh;
            line-height: 1.5;
            margin:0;
            padding-left: 1rem;
            padding-right: 1rem;
            text-rendering: optimizeSpeed;
        }

        #app {
            align-self: center;
            background-color: var(--hn-white);
            border-radius: var(--hn-border-radius);
            display:flex;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            max-width: 449px;
        }

        form {
            width: 100%;
            padding: 1.5rem 1.75rem;
        }

        label {
            display: inline-block;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: .5rem;
        }

        button {
            appearance: button;
            -webkit-appearance: button;
            background-color: var(--hn-primary-color);
            border: 1px solid var(--hn-primary-color);
            border-radius: var(--hn-border-radius);
            color: var(--hn-white);
            cursor: pointer;
            display: block;
            font-family: var(--hn-font-family);
            font-size: 0.875rem;
            font-weight: 500;
            margin-top: 1.5rem;
            padding: var(--hn-btn-padding-y) var(--hn-btn-padding-x);
            text-align: center;
            text-decoration: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            width: 100%;
        }

        button:hover {
            background-color: var(--hn-primary-state-color);
            border-color: var(--hn-primary-state-color);
        }

        .btn {
            --bs-btn-font-size: 1rem;
            --bs-btn-font-weight: 400;
            --bs-btn-line-height: 1.5;
            --bs-btn-color: var(--bs-body-color);
            --bs-btn-bg: transparent;
            --bs-btn-border-width: var(--bs-border-width);
            --bs-btn-border-color: transparent;
            --bs-btn-border-radius: var(--hn-border-radius);
            --bs-btn-hover-border-color: transparent;
            --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
            --bs-btn-disabled-opacity: 0.65;
            --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
        }

        [type="email"] {
            display: block;
            width: 100%;
            padding: .375rem .75rem;
            font-family: var(--hn-font-family); 
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: var(--bs-body-color);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: var(--bs-body-bg);
            background-clip: padding-box;
            border: 1px solid var(--hn-border-color);
            border-radius: var(--hn-border-radius);
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        }

        [type="email"]:hover {
            border-color: var(--hn-focus-state-color);
        }

        input[type="email"]:focus::placeholder {
            color: transparent;
        }

        [type="email"]:focus {
            border-color: var(--hn-border-stroke-color);
            outline: 0;
            box-shadow: 0 0 0 .25rem var(--hn-border-shadow-color);
        }

        .has-error [type="email"],
        .has-error [type="email"]:focus {
            border-color: var(--hn-border-error-color);
        }

        .has-error [type="email"]:focus {
            outline: 0;
            box-shadow: 0 0;
        }

        .has-error span {
            color: var(--hn-danger-color);
        }
        
        .is-success span {
            color: var(--hn-success-color);
        }

        .has-error span,
        .is-success span{
            font-size: 0.875rem;
            line-height: 20px;
            margin-top: .875rem;
            margin-bottom: .875rem;
        }
    </style>
</head>
<body>
    <div id="app">
        <form id="signupForm" class="form-signup">
            <label for="exampleInputEmail1">Email</label>
            <input type="email" id="email" placeholder="enter your email address">
            <button type="submit">Sign up</button>
        </form>
    </div>
    <script>
        // Get form and elements
        const form = document.getElementById('signupForm');
        const emailInput = document.getElementById('email');
    
        form.addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent form from submitting to the server
    
            // Get the email value from the input
            const emailValue = emailInput.value.trim();
    
            // Reset form and remove any previous messages
            form.classList.remove('has-error', 'is-success');
            removeAllMessages();
    
            // Validate and display appropriate message
            if (emailValue === '') {
                // If email is empty
                showMessage('Email is required', 'error');
                form.classList.add('has-error');
            } else if (emailValue === 'harry@potter.com') {
                // If email is the restricted email
                showMessage('This email address already exists in our records', 'error');
                form.classList.add('has-error');
            } else if (validateEmail(emailValue)) {
                // If email is valid and does not match restricted email
                showMessage('Thank you! You have been added to our records.', 'success');
                form.classList.add('is-success');
            } else {
                // If email is not valid
                showMessage('Please enter a valid email address.', 'error');
                form.classList.add('has-error');
            }
        });
    
        // Function to validate the email format (basic validation)
        function validateEmail(email) {
            const re = /^[a-zA-Z0-9._%+-]+@[a-zAZ0-9.-]+\.[a-zA-Z]{2,}$/;
            return re.test(email);
        }
    
        // Function to dynamically create and show message
        function showMessage(message, type) {
            const messageSpan = document.createElement('span');
            messageSpan.textContent = message;
            messageSpan.style.display = 'block';
    
            // Insert the message before the submit button
            form.insertBefore(messageSpan, form.querySelector('button'));
        }
    
        // Function to remove all previous messages
        function removeAllMessages() {
            const existingMessages = form.querySelectorAll('span');
            existingMessages.forEach(message => message.remove());
        }
    </script>
</body>
</html>