Pjotir
/
WordGame


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Single Input Multi-Box Visual</title>
        <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }

        .input-wrapper {
            position: relative;
            width: 250px; /* Adjust based on desired number of boxes and character width */
            height: 50px; /* Height of the overall input area */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden; /* Important to clip the text if it overflows slightly */
        }

        .single-char-input {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            border: none;
            background: transparent;
            font-size: 32px; /* Larger font size for visibility */
            letter-spacing: 25px; /* Adjust this to control spacing between characters */
            text-align: start;
            outline: none;
            font-family: 'Courier New', Courier, monospace; /* Crucial for fixed-width characters */
            color: #333;
            caret-color: #007bff; /* Color of the blinking cursor */
            box-sizing: border-box; /* Include padding/border in width/height */
        }

        /* Create the "boxes" using a pseudo-element and background-image */
        .input-wrapper::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Allows clicks to pass through to the input */
            background-image:
                linear-gradient(to right, #ccc 2px, transparent 2px); /* Vertical lines */
            background-size: calc(100% / 6) 100%; /* Divides the width into 6 equal parts for lines */
            background-repeat: repeat-x; /* Repeat the vertical lines */
            border: 2px solid #ccc; /* Outer border for the entire input area */
            border-radius: 8px;
            box-sizing: border-box; /* Match input's box-sizing */
            transition: border-color 0.2s ease-in-out;
        }

        /* Highlight the pseudo-element border on focus of the input */
        .single-char-input:focus + .input-wrapper::after {
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        }

        /* You might need to adjust letter-spacing and width/height more precisely
           based on the exact font and number of characters you expect.
           For example, if you want 6 characters:
           (width - (number_of_chars - 1) * letter_spacing) / number_of_chars
           This can get tricky quickly.
        */
    </style>
    </head>
    <body>

        <div class="input-wrapper">
            <input type="text" class="single-char-input" maxlength="6"
                pattern="[0-9]*" inputmode="numeric" placeholder="______">
        </div>

    </body>
</html>