Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>STEL Network / IT Request Form</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f4f7fb;
      color: #1f2937;
    }
    .wrap {
      max-width: 860px;
      margin: 40px auto;
      padding: 20px;
    }
    .card {
      background: #fff;
      border-radius: 14px;
      padding: 24px;
      box-shadow: 0 10px 30px rgba(0,0,0,.08);
      margin-bottom: 20px;
    }
    h1, h2, h3 { margin-top: 0; }
    p { line-height: 1.5; }
    label {
      display: block;
      font-weight: 600;
      margin: 14px 0 6px;
    }
    input, select, textarea, button {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #d1d5db;
      border-radius: 10px;
      font-size: 15px;
      background: #fff;
      color: #111827;
    }
    textarea {
      min-height: 120px;
      resize: vertical;
    }
    button {
      background: #111827;
      color: white;
      border: none;
      font-weight: 700;
      cursor: pointer;
      margin-top: 18px;
    }
    button:hover { opacity: .95; }
    button:disabled {
      opacity: .65;
      cursor: not-allowed;
    }
    .hidden { display: none; }
    .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .row-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
    }
    .note, .warning, .success, .error, .pill {
      padding: 12px 14px;
      border-radius: 10px;
      margin-top: 14px;
      font-size: 14px;
    }
    .note { background: #eef2ff; color: #3730a3; }
    .warning { background: #fff7ed; color: #9a3412; }
    .success { background: #ecfdf5; color: #065f46; }
    .error { background: #fef2f2; color: #991b1b; }
    .pill {
      background: #f3f4f6;
      color: #111827;
      display: inline-block;
      margin: 0 8px 0 0;
      padding: 8px 12px;
    }
    .topbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .small {
      font-size: 13px;
      color: #6b7280;
    }
    @media (max-width: 640px) {
      .row, .row-3 { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="card" id="loginCard">
      <h1>STEL Sign In</h1>
      <p>Enter the shared STEL access password to open the Network / IT Request Form.</p>

      <label for="clientPassword">Password</label>
      <input type="password" id="clientPassword" placeholder="Enter password" />
      <button type="button" onclick="checkPassword()">Sign In</button>

      <div class="warning">
        This is a shared-password entry screen, not a true secure client portal. For sensitive data, use full account-based authentication.
      </div>

      <div id="loginMessage"></div>
    </div>

    <div class="card hidden" id="formCard">
      <div class="topbar">
        <span class="pill">STEL IT Request</span>
        <span class="pill" id="displayTicketRef">Reference: Pending</span>
      </div>

      <h2>Network / IT Service Request</h2>
      <p>Please complete the form below. Once submitted, your request will be sent to your support inbox.</p>

      <form id="itForm" action="https://api.staticforms.dev/submit" method="POST">
        <input type="hidden" name="accessKey" value="sf_6f2b0cfda9d5946400e372c5">
        <input type="hidden" name="subject" value="New Network / IT Request from Website">
        <input type="hidden" name="fromName" value="Safety and Security Solutions LLC Website">
        <input type="hidden" name="replyTo" value="@">
        <input type="hidden" name="redirectTo" value="">
        <input type="hidden" name="Ticket Reference" id="ticketReferenceField" value="">
        <input type="text" name="honeypot" style="display:none">

        <div class="row">
          <div>
            <label for="company">Facility Address</label>
            <input type="text" id="company" name="Company Name" required />
          </div>
          <div>
            <label for="contact">Contact Name</label>
            <input type="text" id="contact" name="Contact Name" required />
          </div>
        </div>

        <div class="row">
          <div>
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required />
          </div>
          <div>
            <label for="phone">Phone</label>
            <input type="text" id="phone" name="Phone" />
          </div>
        </div>

        <div class="row-3">
          <div>
            <label for="site">Site / Location</label>
            <input type="text" id="site" name="Site / Location" />
          </div>
          <div>
            <label for="priority">Priority</label>
            <select id="priority" name="Priority" required>
              <option value="">Select priority</option>
              <option>Low</option>
              <option>Normal</option>
              <option>High</option>
              <option>Critical</option>
            </select>
          </div>
          <div>
            <label for="type">Request Type</label>
            <select id="type" name="Request Type" required>
              <option value="">Select request type</option>
              <option>Network Issue</option>
              <option>Internet Problem</option>
              <option>Wi-Fi Issue</option>
              <option>Server / PC Support</option>
              <option>Printer / Peripheral</option>
              <option>Phone System</option>
              <option>New User / Access</option>
              <option>Security / Camera / Access Control</option>
              <option>Other</option>
            </select>
          </div>
        </div>

        <div class="row">
          <div>
            <label for="bestTime">Best Time to Reach You</label>
            <input type="text" id="bestTime" name="Best Time to Reach You" placeholder="Example: 8 AM - 12 PM" />
          </div>
          <div>
            <label for="equipment">Affected Equipment / Device</label>
            <input type="text" id="equipment" name="Affected Equipment / Device" placeholder="Example: Front office PC, switch, AP, camera NVR" />
          </div>
        </div>
 <div class="row-3">
  <div>
    <label for="startDate">When did this start?</label>
    <input type="date" id="startDate" name="Issue Start Date" required />
  </div>

  <div>
    <label for="issueType">Is the issue constant or intermittent?</label>
    <select id="issueType" name="Issue Frequency" required>
      <option value="">Select</option>
      <option>Constant</option>
      <option>Intermittent</option>
    </select>
  </div>

  <div>
    <label for="errorSeen">Are there any error messages?</label>
    <select id="errorSeen" name="Error Messages Present" required>
      <option value="">Select</option>
      <option>Yes</option>
      <option>No</option>
    </select>
  </div>
</div>
        <label for="issueSummary">Issue Summary</label>
        <input type="text" id="issueSummary" name="Issue Summary" required />

        <label for="details">Problem Details</label>
        <textarea id="details" name="Problem Details" placeholder="Describe the issue, affected devices, error messages, and any troubleshooting already completed." required></textarea>

        <label for="impact">Business Impact</label>
        <textarea id="impact" name="Business Impact" placeholder="Explain how this issue is affecting operations."></textarea>

        <label for="onsite">On-Site Access Notes</label>
        <textarea id="onsite" name="On-Site Access Notes" placeholder="Door codes, escort required, hours available, point of contact on site, etc."></textarea>

        

        <button type="submit" id="submitBtn">Submit Request</button>
        <div id="formMessage"></div>
        <p class="small">Reference numbers are generated on-page for easier tracking in your email inbox.</p>
      </form>
    </div>
  </div>

  <script>
    const SHARED_PASSWORD = "1234";

    function generateTicketReference() {
      const now = new Date();
      const year = now.getFullYear().toString().slice(-2);
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const random = Math.floor(1000 + Math.random() * 9000);
      return `IT-${year}${month}${day}-${random}`;
    }

    function setTicketReference() {
      const ticketRef = generateTicketReference();
      document.getElementById('ticketReferenceField').value = ticketRef;
      document.getElementById('displayTicketRef').textContent = `Reference: ${ticketRef}`;
    }

    function checkPassword() {
      const entered = document.getElementById('clientPassword').value;
      const msg = document.getElementById('loginMessage');

      if (entered === SHARED_PASSWORD) {
        document.getElementById('loginCard').classList.add('hidden');
        document.getElementById('formCard').classList.remove('hidden');
        setTicketReference();
      } else {
        msg.innerHTML = '<div class="error">Incorrect password. Please try again.</div>';
      }
    }

    const form = document.getElementById('itForm');
    const formMessage = document.getElementById('formMessage');
    const submitBtn = document.getElementById('submitBtn');

    form.addEventListener('submit', async function (e) {
      e.preventDefault();
      formMessage.innerHTML = '';
      submitBtn.disabled = true;
      submitBtn.textContent = 'Submitting...';

      try {
        const formData = new FormData(form);
        const response = await fetch(form.action, {
          method: 'POST',
          body: formData,
          headers: { Accept: 'application/json' }
        });

        const result = await response.json();

        if (response.ok) {
          const ref = document.getElementById('ticketReferenceField').value;
          formMessage.innerHTML = `<div class="success"><strong>Request submitted successfully.</strong><br>Your reference number is <strong>${ref}</strong>. Please save this for follow-up.</div>`;
          form.reset();
          setTicketReference();
        } else {
          formMessage.innerHTML = `<div class="error"><strong>Submission failed.</strong><br>${result.message || 'Please check your StaticForms setup and try again.'}</div>`;
        }
      } catch (error) {
        formMessage.innerHTML = '<div class="error"><strong>Submission failed.</strong><br>Please verify your StaticForms access key and your site connection, then try again.</div>';
      } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = 'Submit Request';
      }
    });
  </script>
</body>
</html>