Off to Maintenance

Kragor’s stomping is deafening now, his metallic presence shaking the ground with every step. Tinker beeps frantically. “He’s too close! We only have minutes!” Sonya gives you a serious look. “There’s no way to beat him in a fight. But we can use his greatest weakness—bureaucracy.” Tinker projects a hologram that looks suspiciously like a complex form.

Send Kragor into the Desert

Tinker and Sonya are waiting impatiently as you adjust the form.
Your mission: lure Kragor into maintenance before he starts juggling wrenches again. For this to work, the form must be convincing and—well—unavoidable. Tinker has already forged the letterhead down to the last detail.
Now it’s up to you to craft the crucial commands.

Form Form Lexicon Styling Forms

Solve the task here in the console [–> Open in a new tab]

HTML

<!-- HTML -->

<!-- Main content starts -->
<main>

    <!-- Center the content with a div class "center" -->
    <div class="center">
        <!-- Insert an image -->
        <img src="img/machanoVault-logo.png" alt="Logo MechanoVault">
    </div>

    <!-- Large heading -->
    <h1>Urgent Maintenance Request</h1>

    <!-- Explanatory text with mark and strong -->
    <p>
        We have discovered a <mark>critical error</mark> in your programming. Please fill out the form
        <strong>immediately</strong> and proceed to the Mechanovault for repairs.
    </p>

    <!-- Open the form -->
    <form>

        <!-- Field for ID number -->
        <div>
            <label for="id">ID Number:</label>
            <input type="text" id="id" name="id" placeholder="12345-MECH" required>
        </div>

        <!-- Field for issue description -->
        <div>
            <label for="issue">Describe the Issue:</label>
            <textarea id="issue" name="issue" rows="4" placeholder="Describe the problem in detail..."
                required></textarea>
        </div>

        <!-- Dropdown for priority -->
        <div>
            <label for="priority">Priority Level:</label>
            <select id="priority" name="priority" required>
                <option value="critical">Critical</option>
                <option value="urgent">Urgent</option>
            </select>
            <small>For urgent or critical cases, immediate return to the workshop is required.</small>
        </div>

        <!-- Color picker -->
        <div>
            <label for="color">Select Warning Color:</label>
            <input type="color" id="color" name="color" value="#ff64ff">
        </div>

        <!-- Date-time field -->
        <div>
            <label for="maintenance">Maintenance Service Today at:</label>
            <input type="datetime-local" id="maintenance" name="maintenance" required>
        </div>

        <!-- Multi-select for spare parts -->
        <div>
            <label for="parts">Select Spare Parts:</label>
            <select id="parts" name="parts" size="3" multiple required>
                <option value="gears">Gears</option>
                <option value="oil">Oil</option>
                <option value="sensors">Sensors</option>
                <option value="wheels">Wheels</option>
                <option value="software">Software</option>
            </select>
        </div>

        <!-- Radio buttons for service mode -->
        <div>
            <label for="mode">Select Service Mode:</label><br>
            <input type="radio" id="basic" name="mode" value="basic">
            <strong>Critical Programming Error</strong><br>
            <input type="radio" id="advanced" name="mode" value="advanced">
            <strong>Mechanical Damage</strong>
        </div>

        <!-- Submit button -->
        <div class="center">
            <button type="submit">Start Overhaul</button>
        </div>

    </form>
</main>

CSS

/* CSS */
/* ----- General styling for the whole page ----- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #fff6d7;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

p {
    margin: 0;
}

/* ----- Main area of the form ----- */
main {
    max-width: 600px;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

form>div {
    margin-top: 1rem;
}

/* ----- Labels of form elements ----- */
label {
    text-align: left;
    font-weight: 600;
    font-size: 1.2rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* ----- Red asterisk for required fields after each label ----- */
label::after {
    content: ' *';
    color: orangered;
}

/* ----- Headline & placeholder text colored red ----- */
h1,
::placeholder {
    color: orangered;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ----- Input fields & textarea ----- */
input[type="text"],
textarea {
    width: 90%;
    padding: 10px;
    border: 1px solid orangered;
    border-radius: 5px;
}

/* ----- Dropdowns & date-time field ----- */
select,
input[type="datetime-local"] {
    width: 40%;
    padding: 10px;
    border: 1px solid orangered;
    border-radius: 5px;
}

.center {
    text-align: center;
}

/* ----- Button design ----- */
button {
    background-color: #ff4500;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    padding: 1rem 2rem;
    border-radius: 5px;
    transition: background-color 0.3s;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
}

/* ----- Hover effect for button: Background green ----- */
button:hover {
    background-color: green;
}