← Return to FAU portfolio.

Sample code fix.

Code before:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 🛑 WCAG 2.4.2 Page Titled: Vague title -->
    <title>The Tech Place</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Define low-contrast colors based on FAU theme */
        .fau-low-contrast { color: #A9A9A9; } /* Light Slate Gray text on white */
        .awful-header-bg { background-color: #003366; } /* FAU Blue */
        .awful-header-text { color: #ADD8E6; } /* Light Blue text on FAU Blue (Fails contrast) */

        /* 🛑 WCAG 2.4.7 Focus Visible: Removes all focus indicators for keyboard users */
        a:focus, button:focus, input:focus, .nav-item:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        /* Non-semantic element styling for navigation */
        .nav-item {
            cursor: pointer;
            padding: 8px 16px;
            display: inline-block;
            transition: background-color 0.1s;
        }
        .nav-item:hover {
            background-color: #CC0033; /* FAU Red on hover */
            color: white;
        }

        /* Fixed-width container that forces horizontal scrolling on mobile */
        .fixed-layout-container {
            width: 1200px; 
            margin: 0 auto;
        }
        
        /* 🛑 WCAG 2.3.1 Three Flashes or Below Threshold: Rapid, distracting animation */
        @keyframes distracting-flash {
            0%   { background-color: #CC0033; } /* FAU Red */
            50%  { background-color: #FFD700; } /* Gold/Yellow */
            100% { background-color: #CC0033; }
        }
        .flashing-element {
            animation: distracting-flash 0.2s infinite; 
            color: black; /* Awful contrast on yellow */
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans overflow-x-hidden">
    
    <!-- Non-functional JS for non-semantic navigation and form -->
    <script>
        // These non-semantic elements are difficult or impossible to interact with via keyboard (WCAG 2.1.1)
        function goTo(page) {
            console.log("Navigating to: " + page);
        }
        function submitForm() {
            document.getElementById('form-status').innerText = 'Request Sent (check the console for the "success" message)';
            document.getElementById('form-status').classList.remove('hidden');
        }

        // Function to simulate a general keyboard trap failure (WCAG 2.1.2)
        function trapFocus(event) {
             // Prevents the user from tabbing out of the element, simulating a keyboard trap
            if (event.key === 'Tab' || event.keyCode === 9) {
                event.preventDefault(); 
                console.log("Keyboard trap activated: Cannot Tab out of this box.");
                // In a real trap, we would manually set focus back to an element inside the trap.
            }
        }
    </script>

    <!-- Header Section -->
    <header class="awful-header-bg text-center p-8 shadow-md">
        <!-- 🛑 WCAG 1.4.3 Contrast Minimum: Awful contrast ratio using Light Blue on FAU Blue -->
        <!-- 🛑 WCAG 1.3.1 Info and Relationships: No H1 heading used -->
        <span class="awful-header-text text-4xl font-extrabold tracking-widest uppercase block mb-2">
            IT SUPPORT HUB
        </span>
        <p class="fau-low-contrast text-sm italic">
            For FAU Students (maybe).
        </p>
    </header>

    <!-- Navigation Area (Non-Semantic Structure) -->
    <!-- 🛑 WCAG 1.3.1 Info and Relationships: Uses DIVs instead of <nav> or <ul>/<li> -->
    <div role="menubar" class="bg-gray-200 shadow-inner text-center py-2 mb-8">
        <div class="nav-item inline-block" onclick="goTo('home')">Start Here</div>
        <div class="nav-item inline-block" onclick="goTo('wifi')">Wi-Fi & Email</div>
        <div class="nav-item inline-block" onclick="goTo('software')">Software Issues</div>
        <div class="nav-item inline-block" onclick="goTo('help')">Get Help</div>
    </div>

    <!-- Main Content Area with Fixed Width (Breaks Reflow) -->
    <!-- 🛑 WCAG 1.4.10 Reflow: Fixed pixel width causes guaranteed horizontal scroll on smaller screens. -->
    <main id="main-content" class="fixed-layout-container p-4 md:p-8 space-y-12">
        
        <div class="flex flex-col md:flex-row gap-8">
            <div class="md:w-1/2">
                <!-- Image with Non-Descriptive Alt Text -->
                <img src="https://placehold.co/800x450/003366/FFFFFF?text=Device+Picture" 
                     alt="Picture" 
                     class="w-full h-auto rounded-lg shadow-xl"
                >
                <!-- 🛑 WCAG 1.1.1 Non-text Content: Alt text is too vague ("Picture"). -->
            </div>
            <div class="md:w-1/2">
                <!-- 🛑 WCAG 1.3.1 Info and Relationships: Broken heading structure (skipping H1 and H2) -->
                <h3 class="text-3xl font-serif text-gray-800 border-b pb-2 mb-4">
                    Welcome to Technical Support
                </h3>
                
                <!-- 🛑 WCAG 1.4.3 Contrast Minimum: Low contrast text is difficult to read -->
                <p class="fau-low-contrast mb-4 text-base">
                    This is the place to get help with technology problems, maybe. We have staff, somewhere, who know things, probably. The contact information changes often, so just try clicking links until something works. We do not provide specific instructions, as true problem-solving should be intuitive.
                </p>

                <!-- Vague Link Text using a non-semantic anchor -->
                <a href="#" onclick="goTo('details')" class="text-blue-600 underline font-bold" style="color: blue;">
                    Details Here
                </a> 
                <!-- 🛑 WCAG 2.4.4 Link Purpose: Vague link text provides no information about the destination. -->
                
                <p class="fau-low-contrast mt-4 text-xs italic">
                    For serious matters, check out our support forum: <a href="#" class="text-blue-600 underline font-bold" style="color: blue;">Read More</a>.
                </p>
            </div>
        </div>

        <hr class="border-gray-300">

        <!-- Non-Semantic Data Table for Hours -->
        <section id="hours">
            <h4 class="text-xl font-bold mt-8 mb-4">Current Tech Staff Schedule</h4>
            <!-- 🛑 WCAG 1.3.1 Info and Relationships: Using DIVs to simulate a table. Screen readers cannot interpret column/row headers. -->
            <div class="data-table-grid grid grid-cols-3 gap-0 border border-gray-300">
                <!-- Headers (no <th>) -->
                <div class="p-3 bg-gray-300 font-bold border-r border-b">Support Area</div>
                <div class="p-3 bg-gray-300 font-bold border-r border-b">Availability Status</div>
                <div class="p-3 bg-gray-300 font-bold border-b">Best Contact Time</div>
                
                <!-- Data Rows (no <tr>, <td>) -->
                <div class="p-3 border-r border-b bg-white">FAUNet IDs</div>
                <div class="p-3 border-r border-b bg-white">Offline</div>
                <div class="p-3 border-b bg-white">9:00 AM - 9:05 AM</div>
                
                <div class="p-3 border-r border-b bg-white">Canvas LMS</div>
                <div class="p-3 border-r border-b bg-white">Busy</div>
                <div class="p-3 border-b bg-white">1:00 PM - 1:30 PM (maybe)</div>
                
                <div class="p-3 border-r border-b bg-white">General Device Fixes</div>
                <div class="p-3 border-r border-b bg-white">Available</div>
                <div class="p-3 border-b bg-white">4:00 PM - 5:00 PM</div>
            </div>
            
            <p class="fau-low-contrast text-sm mt-4">
                *Availability is subject to the mood of the on-duty technician.
            </p>
        </section>

        <hr class="border-gray-300">

        <!-- Visual-Only Cues for Status -->
        <section id="guides">
            <h4 class="text-xl font-bold mt-8 mb-4">Quick Troubleshooting Status (Check the colors)</h4>
            <p class="fau-low-contrast mb-4">Follow the color to know if it's safe to proceed. If you cannot see colors, just guess which steps work!</p>
            <div class="space-y-3 p-4 bg-red-50 border border-red-200 rounded-lg">
                
                <!-- 🛑 WCAG 1.4.1 Use of Color: Status is indicated only by color (red/green dots) -->
                <div class="flex items-center space-x-3">
                    <span class="inline-block w-4 h-4 rounded-full bg-green-500" title="Green means Good!"></span>
                    <p class="text-gray-700">Step 1: Check if your password works.</p>
                </div>
                <div class="flex items-center space-x-3">
                    <span class="inline-block w-4 h-4 rounded-full bg-red-600" title="Red means stop"></span>
                    <p class="text-gray-700">Step 2: Try restarting your browser entirely.</p>
                </div>
                <div class="flex items-center space-x-3">
                    <span class="inline-block w-4 h-4 rounded-full bg-green-500" title="Green means Go!"></span>
                    <p class="text-gray-700">Step 3: Clear your cache and cookies.</p>
                </div>
            </div>
        </section>

        <hr class="border-gray-300">

        <!-- Distracting/Flashing Content -->
        <section id="emergency">
            <h4 class="text-xl font-bold mt-8 mb-4">EMERGENCY ALERT SYSTEM (DO NOT LOOK)</h4>
            <!-- 🛑 WCAG 2.3.1 Flashes: Rapidly flashing colors are distracting and dangerous for photosensitive epilepsy. -->
            <div class="flashing-element rounded-lg shadow-xl p-6 border-4 border-black">
                <p class="text-2xl">⚡ IMPORTANT UNSCHEDULED MAINTENANCE ⚡</p>
                <p class="text-sm mt-1">Check back later, or don't. The status is constantly changing.</p>
            </div>
        </section>

        <hr class="border-gray-300">

        <!-- Simulated Keyboard Trap -->
        <section id="trap-section" class="bg-gray-200 p-6 rounded-xl shadow-inner border border-gray-400">
            <h4 class="text-2xl font-bold text-red-700 mb-4">🔒 Data Acknowledgment Required 🔒</h4>
            <p class="text-gray-700 mb-4">You must interact with the fields in this box. **Try pressing the Tab key now.** You will not be able to leave!</p>
            <!-- 🛑 WCAG 2.1.2 No Keyboard Trap: The element has listeners preventing the user from leaving it. -->
            <div id="trap-container" onkeydown="trapFocus(event)" class="space-y-3 p-4 border border-red-500 bg-white">
                <input type="text" placeholder="Field 1: Name" class="w-full p-2 border rounded" tabindex="0">
                <textarea rows="2" placeholder="Field 2: Signature" class="w-full p-2 border rounded" tabindex="0"></textarea>
                <a href="#" class="inline-block bg-red-600 text-white font-bold p-2 rounded w-full text-center" onclick="console.log('Trapped button clicked.');" tabindex="0">
                    Acknowledge Data Loss
                </a>
                <p class="text-xs text-red-500">You are now trapped in this element!</p>
            </div>
        </section>

        <hr class="border-gray-300">


        <!-- Inaccessible Help Ticket Form (Original) -->
        <section class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
            <h4 class="text-2xl font-bold mb-4">Send a Message (Last Chance)</h4>
            
            <form onsubmit="event.preventDefault(); submitForm();" class="space-y-4">
                
                <!-- Input Field 1: Missing Label, relies on placeholder -->
                <div>
                    <!-- 🛑 WCAG 3.3.2 Labels or Instructions: No explicit <label> element associated with the input. -->
                    <input type="text" id="name" placeholder="Name (Vague)" 
                           class="w-full p-3 border border-gray-300 rounded focus:border-gray-500">
                </div>
                
                <!-- Input Field 2: Missing Label, Color-Only Required Indicator, relies on placeholder -->
                <div>
                    <span class="text-red-600 font-bold">*</span> 
                    <!-- 🛑 WCAG 1.4.1 Use of Color: Required status is indicated ONLY by the red asterisk (color/visual cue). -->
                    <!-- 🛑 WCAG 3.3.2 Labels: No <label> and no aria-required. -->
                    <input type="email" id="email" placeholder="Email (Must Provide)" 
                           class="w-full p-3 border border-gray-300 rounded focus:border-gray-500">
                </div>
                
                <!-- Textarea: Missing Label -->
                <div>
                    <!-- 🛑 WCAG 3.3.2 Labels: No <label> -->
                    <textarea id="issue" rows="4" placeholder="Briefly explain the issue... or not."
                              class="w-full p-3 border border-gray-300 rounded focus:border-gray-500"></textarea>
                </div>

                <!-- Non-Semantic Button -->
                <!-- 🛑 WCAG 2.1.1 Keyboard: Not a semantic button; cannot be reliably triggered with the keyboard. -->
                <a href="#" onclick="event.preventDefault(); submitForm();" 
                   class="inline-block px-6 py-3 bg-red-600 text-white font-bold rounded-full shadow-lg transition duration-300 hover:bg-red-700">
                    GO!
                </a>
                
                <p id="form-status" class="mt-4 text-sm text-green-600 font-bold hidden">Status will appear here.</p>
            </form>
        </section>

    </main>
    
    <!-- Footer Section -->
    <footer class="mt-12 bg-gray-800 text-white p-6 text-center">
        <!-- 🛑 WCAG 1.4.3 Contrast Minimum: Low contrast text is used for the footer -->
        <p class="fau-low-contrast text-xs">
            © 2024 Tech Ops. All rights reserved. 
            <a href="#" class="text-xs underline" style="color: #ADD8E6;">Privacy</a>
        </p>
    </footer>

</body>
</html>

Website before:

The Tech Place
IT SUPPORT HUB

For FAU Students (maybe).

Picture

Welcome to Technical Support

This is the place to get help with technology problems, maybe. We have staff, somewhere, who know things, probably. The contact information changes often, so just try clicking links until something works. We do not provide specific instructions, as true problem-solving should be intuitive.

Details Here

For serious matters, check out our support forum: Read More.

Current Tech Staff Schedule

Support Area
Availability Status
Best Contact Time
FAUNet IDs
Offline
9:00 AM - 9:05 AM
Canvas LMS
Busy
1:00 PM - 1:30 PM (maybe)
General Device Fixes
Available
4:00 PM - 5:00 PM

*Availability is subject to the mood of the on-duty technician.

Quick Troubleshooting Status (Check the colors)

Follow the color to know if it's safe to proceed. If you cannot see colors, just guess which steps work!

Step 1: Check if your password works.

Step 2: Try restarting your browser entirely.

Step 3: Clear your cache and cookies.

EMERGENCY ALERT SYSTEM (DO NOT LOOK)

⚡ IMPORTANT UNSCHEDULED MAINTENANCE ⚡

Check back later, or don't. The status is constantly changing.

🔒 Data Acknowledgment Required 🔒

You must interact with the fields in this box. **Try pressing the Tab key now.** You will not be able to leave!

Acknowledge Data Loss

You are now trapped in this element!

Send a Message (Last Chance)

*
GO!

Code after:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAU IT Support Hub – Technical Help for Students</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* ✅ High-contrast header */
        .header-bg {
            background-color: #003366; /* Dark blue */
        }
        .header-text {
            color: #ffffff; /* White on dark blue – passes AA */
        }

        /* ✅ Keep strong focus indicators */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        textarea:focus-visible {
            outline: 3px solid #ffbf47;
            outline-offset: 2px;
        }

        /* Navigation styling (text on light gray) */
        .nav-item {
            cursor: pointer;
            padding: 8px 16px;
            display: inline-block;
            transition: background-color 0.1s, color 0.1s;
            color: #111827; /* Very dark gray on #e5e7eb – AA compliant */
        }
        .nav-item:hover {
            background-color: #b91c1c; /* Dark red */
            color: #ffffff; /* White on dark red – AA compliant */
        }

        /* Responsive container – no forced horizontal scroll */
        .fixed-layout-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* ✅ Static alert style – high contrast */
        .alert-element {
            background-color: #FFD700; /* Gold */
            color: #000000;           /* Black text – very high contrast */
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-900">

    <script>
        function goToSection(id) {
            const el = document.getElementById(id);
            if (el) {
                el.scrollIntoView({ behavior: "smooth" });
            }
        }

        function submitForm() {
            const status = document.getElementById('form-status');
            status.innerText = 'Request sent. We will contact you soon.';
            status.classList.remove('hidden');
        }
    </script>

    <!-- Header -->
    <header class="header-bg text-center p-8 shadow-md">
        <h1 class="header-text text-4xl font-extrabold tracking-widest uppercase mb-2">
            IT Support Hub
        </h1>
        <p class="header-text text-sm italic">
            Technology support for FAU students.
        </p>
    </header>

    <!-- Navigation -->
    <nav aria-label="Main" class="bg-gray-200 shadow-inner text-center py-2 mb-8">
        <ul class="inline-flex gap-2">
            <li>
                <button type="button" class="nav-item" onclick="goToSection('main-content')">
                    Start Here
                </button>
            </li>
            <li>
                <button type="button" class="nav-item" onclick="goToSection('wifi-email')">
                    Wi-Fi &amp; Email
                </button>
            </li>
            <li>
                <button type="button" class="nav-item" onclick="goToSection('software')">
                    Software Issues
                </button>
            </li>
            <li>
                <button type="button" class="nav-item" onclick="goToSection('help-form')">
                    Get Help
                </button>
            </li>
        </ul>
    </nav>

    <!-- Main -->
    <main id="main-content" class="fixed-layout-container p-4 md:p-8 space-y-12">

        <!-- Intro / Hero -->
        <section class="flex flex-col md:flex-row gap-8" id="wifi-email">
            <div class="md:w-1/2">
                <img
                    src="https://placehold.co/800x450/003366/FFFFFF?text=Student+with+Laptop+and+Devices"
                    alt="Student using a laptop and mobile devices while accessing campus technology support"
                    class="w-full h-auto rounded-lg shadow-xl"
                >
            </div>
            <div class="md:w-1/2">
                <h2 class="text-3xl font-serif text-gray-900 border-b pb-2 mb-4">
                    Welcome to Technical Support
                </h2>

                <p class="mb-4 text-base">
                    This hub helps you with FAU technology issues such as FAUNet IDs, Wi-Fi, email, Canvas,
                    and software access. Use the sections below to find quick answers or send us a message
                    if you still need help.
                </p>

                <a href="#hours" class="text-blue-700 underline font-bold">
                    View current tech support schedule
                </a>

                <p class="mt-4 text-sm italic">
                    For detailed guides and FAQs, visit our support section:
                    <a href="#guides" class="text-blue-700 underline font-bold">
                        Browse troubleshooting guides
                    </a>.
                </p>
            </div>
        </section>

        <hr class="border-gray-300">

        <!-- Staff Schedule -->
        <section id="hours">
            <h2 class="text-xl font-bold mt-8 mb-4 text-gray-900">Current Tech Staff Schedule</h2>

            <div class="overflow-x-auto">
                <table class="min-w-full border border-gray-300 text-left text-sm">
                    <thead class="bg-gray-300 font-bold text-gray-900">
                        <tr>
                            <th scope="col" class="p-3 border-r border-b">Support Area</th>
                            <th scope="col" class="p-3 border-r border-b">Availability Status</th>
                            <th scope="col" class="p-3 border-b">Best Contact Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="bg-white text-gray-900">
                            <td class="p-3 border-r border-b">FAUNet IDs</td>
                            <td class="p-3 border-r border-b">Offline</td>
                            <td class="p-3 border-b">9:00 AM – 9:05 AM</td>
                        </tr>
                        <tr class="bg-white text-gray-900">
                            <td class="p-3 border-r border-b">Canvas LMS</td>
                            <td class="p-3 border-r border-b">Busy</td>
                            <td class="p-3 border-b">1:00 PM – 1:30 PM</td>
                        </tr>
                        <tr class="bg-white text-gray-900">
                            <td class="p-3 border-r border-b">General Device Fixes</td>
                            <td class="p-3 border-r border-b">Available</td>
                            <td class="p-3 border-b">4:00 PM – 5:00 PM</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <p class="text-sm mt-4 text-gray-900">
                Note: Availability may change during busy times such as the start of the semester.
            </p>
        </section>

        <hr class="border-gray-300">

        <!-- Troubleshooting Status -->
        <section id="guides">
            <h2 class="text-xl font-bold mt-8 mb-4 text-gray-900">Quick Troubleshooting Status</h2>
            <p class="mb-4 text-gray-900">
                Each step includes both a color indicator and text description so you can see whether it is
                recommended to proceed.
            </p>

            <div class="space-y-3 p-4 bg-red-50 border border-red-200 rounded-lg">
                <div class="flex items-center space-x-3">
                    <span
                        class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-600"
                        aria-label="Recommended step"
                    ></span>
                    <p class="text-gray-900">
                        <strong>Status: Recommended.</strong> Step 1: Check if your password works.
                    </p>
                </div>
                <div class="flex items-center space-x-3">
                    <span
                        class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-700"
                        aria-label="Use with caution"
                    ></span>
                    <p class="text-gray-900">
                        <strong>Status: Use with caution.</strong> Step 2: Restart your browser.
                    </p>
                </div>
                <div class="flex items-center space-x-3">
                    <span
                        class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-600"
                        aria-label="Recommended step"
                    ></span>
                    <p class="text-gray-900">
                        <strong>Status: Recommended.</strong> Step 3: Clear your cache and cookies.
                    </p>
                </div>
            </div>
        </section>

        <hr class="border-gray-300">

        <!-- Emergency Alert -->
        <section id="emergency">
            <h2 class="text-xl font-bold mt-8 mb-4 text-gray-900">Emergency Alert System</h2>
            <div class="alert-element rounded-lg shadow-xl p-6 border-4 border-black">
                <p class="text-2xl">
                    ⚡ Important Unscheduled Maintenance ⚡
                </p>
                <p class="text-sm mt-1">
                    Some systems may be temporarily unavailable. Please try again later or contact IT Support
                    using the form below if the issue persists.
                </p>
            </div>
        </section>

        <hr class="border-gray-300">

        <!-- Software / Data Section -->
        <section id="software" class="bg-gray-100 p-6 rounded-xl shadow-inner border border-gray-300">
            <h2 class="text-2xl font-bold text-red-800 mb-4">Software &amp; Data Acknowledgment</h2>
            <p class="text-gray-900 mb-4">
                Please provide your details if you are experiencing data or software issues.
            </p>

            <div class="space-y-3 p-4 border border-red-500 bg-white">
                <label for="ack-name" class="block text-sm font-medium text-gray-900">
                    Name
                </label>
                <input
                    type="text"
                    id="ack-name"
                    class="w-full p-2 border border-gray-300 rounded"
                >

                <label for="ack-signature" class="block text-sm font-medium text-gray-900">
                    Description of the issue
                </label>
                <textarea
                    id="ack-signature"
                    rows="2"
                    class="w-full p-2 border border-gray-300 rounded"
                ></textarea>

                <button
                    type="button"
                    class="inline-block bg-red-700 text-white font-bold p-2 rounded w-full text-center hover:bg-red-800"
                >
                    Submit Issue
                </button>
            </div>
        </section>

        <hr class="border-gray-300">

        <!-- Help Form -->
        <section
            id="help-form"
            class="bg-white p-6 rounded-xl shadow-lg border border-gray-200"
            aria-labelledby="help-form-heading"
        >
            <h2 id="help-form-heading" class="text-2xl font-bold mb-4 text-gray-900">Send a Message</h2>
            
            <form onsubmit="event.preventDefault(); submitForm();" class="space-y-4">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-900">
                        Name
                    </label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        class="w-full p-3 border border-gray-300 rounded focus:border-gray-500"
                    >
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-900">
                        Email <span class="text-red-700" aria-hidden="true">*</span>
                        <span class="sr-only">(required)</span>
                    </label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        required
                        class="w-full p-3 border border-gray-300 rounded focus:border-gray-500"
                    >
                </div>

                <div>
                    <label for="issue" class="block text-sm font-medium text-gray-900">
                        Briefly explain the issue
                    </label>
                    <textarea
                        id="issue"
                        name="issue"
                        rows="4"
                        class="w-full p-3 border border-gray-300 rounded focus:border-gray-500"
                    ></textarea>
                </div>

                <button
                    type="submit"
                    class="inline-block px-6 py-3 bg-red-700 text-white font-bold rounded-full shadow-lg transition duration-300 hover:bg-red-800"
                >
                    Submit Request
                </button>
                
                <p id="form-status" class="mt-4 text-sm text-green-700 font-bold hidden">
                    Status will appear here.
                </p>
            </form>
        </section>

    </main>

    <!-- Footer -->
    <footer class="mt-12 bg-gray-900 text-gray-100 p-6 text-center">
        <p class="text-xs">
            © 2024 Tech Ops. All rights reserved. 
            <a href="#" class="text-xs underline text-gray-100">
                Privacy policy
            </a>
        </p>
    </footer>

</body>
</html>

Website after:

The Tech Place
IT SUPPORT HUB

For FAU Students (maybe).

Picture

Welcome to Technical Support

This is the place to get help with technology problems, maybe. We have staff, somewhere, who know things, probably. The contact information changes often, so just try clicking links until something works. We do not provide specific instructions, as true problem-solving should be intuitive.

Details Here

For serious matters, check out our support forum: Read More.

Current Tech Staff Schedule

Support Area
Availability Status
Best Contact Time
FAUNet IDs
Offline
9:00 AM - 9:05 AM
Canvas LMS
Busy
1:00 PM - 1:30 PM (maybe)
General Device Fixes
Available
4:00 PM - 5:00 PM

*Availability is subject to the mood of the on-duty technician.

Quick Troubleshooting Status (Check the colors)

Follow the color to know if it's safe to proceed. If you cannot see colors, just guess which steps work!

Step 1: Check if your password works.

Step 2: Try restarting your browser entirely.

Step 3: Clear your cache and cookies.

EMERGENCY ALERT SYSTEM (DO NOT LOOK)

⚡ IMPORTANT UNSCHEDULED MAINTENANCE ⚡

Check back later, or don't. The status is constantly changing.

🔒 Data Acknowledgment Required 🔒

You must interact with the fields in this box. **Try pressing the Tab key now.** You will not be able to leave!

Acknowledge Data Loss

You are now trapped in this element!

Send a Message (Last Chance)

*
GO!