Embed

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600&display=swap" rel="stylesheet">

<style>
  :root {
    --lcd-red:#c8102e;
    --lcd-text:#1f1f1f;
    --lcd-muted:#777;
    --lcd-line:#e6e6e6;
    --lcd-bg:#f7f5f2;
  }

  body {
    margin:0;
    font-family:'Space Grotesk', sans-serif;
    background:var(--lcd-bg);
    color:var(--lcd-text);
  }

  .lcd-upload-wrap {
    max-width:980px;
    margin:0 auto;
    padding:70px 22px;
  }

  .lcd-upload-card {
    background:#fff;
    border:1px solid var(--lcd-line);
    border-radius:24px;
    padding:42px;
    box-shadow:0 20px 60px rgba(0,0,0,.06);
  }

  .lcd-kicker {
    color:var(--lcd-red);
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:12px;
    font-weight:600;
    margin-bottom:14px;
  }

  h1 {
    font-size:clamp(34px,5vw,62px);
    line-height:.95;
    margin:0 0 18px;
    letter-spacing:-.05em;
    font-weight:500;
  }

  .lcd-intro {
    font-size:17px;
    color:var(--lcd-muted);
    max-width:720px;
    line-height:1.6;
    margin-bottom:35px;
  }

  .lcd-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
  }

  .lcd-field {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
  }

  .lcd-field.full {
    grid-column:1 / -1;
  }

  label {
    font-size:13px;
    font-weight:600;
    letter-spacing:.03em;
  }

  input, textarea, select {
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--lcd-line);
    border-radius:14px;
    padding:14px 15px;
    font-family:'Space Grotesk', sans-serif;
    font-size:15px;
    background:#fafafa;
    color:#111;
  }

  textarea {
    min-height:130px;
    resize:vertical;
  }

  input[type="file"] {
    padding:18px;
    background:#fff;
    border-style:dashed;
  }

  .lcd-help {
    font-size:12px;
    color:#888;
  }

  .lcd-submit {
    margin-top:18px;
    background:var(--lcd-red);
    color:#fff;
    border:0;
    border-radius:999px;
    padding:16px 28px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.25s ease;
  }

  .lcd-submit:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(200,16,46,.25);
  }

  .lcd-toast {
    position:fixed;
    bottom:24px;
    right:24px;
    background:#111;
    color:#fff;
    padding:16px 20px;
    border-radius:16px;
    font-size:14px;
    box-shadow:0 18px 40px rgba(0,0,0,.25);
    opacity:0;
    transform:translateY(15px);
    pointer-events:none;
    transition:.35s ease;
    z-index:9999;
  }

  .lcd-toast.show {
    opacity:1;
    transform:translateY(0);
  }

  @media(max-width:700px) {
    .lcd-upload-card {
      padding:28px 20px;
    }

    .lcd-grid {
      grid-template-columns:1fr;
    }
  }
</style>

<div class="lcd-upload-wrap">
  <div class="lcd-upload-card">
    <div class="lcd-kicker">LifeCare Design</div>
    <h1>Project Upload Portal</h1>

    <p class="lcd-intro">
      Please use this form to send project information, cover images, gallery images, and notes for the new Projects page.
      This helps us organize each project clearly before adding it to the website.
    </p>

    <form 
      action="https://formsubmit.co/studio55bog@gmail.com" 
      method="POST" 
      enctype="multipart/form-data"
      target="hiddenFrame"
      onsubmit="showLCDToast()"
    >

      <input type="hidden" name="_subject" value="New LifeCare Project Upload">
      <input type="hidden" name="_captcha" value="false">
      <input type="hidden" name="_template" value="table">

      <div class="lcd-grid">

        <div class="lcd-field">
          <label>Project Name</label>
          <input type="text" name="Project Name" placeholder="Example: The Laurel" required>
        </div>

        <div class="lcd-field">
          <label>Preferred Order</label>
          <input type="number" name="Preferred Order" placeholder="Example: 1, 2, 3">
        </div>

        <div class="lcd-field">
          <label>Project Category</label>
          <select name="Project Category">
            <option value="">Select category</option>
            <option>Residential</option>
            <option>Commercial</option>
            <option>Interior Design</option>
            <option>Historic Restoration</option>
            <option>Planning</option>
            <option>Repurposing</option>
            <option>Other</option>
          </select>
        </div>

        <div class="lcd-field">
          <label>Location</label>
          <input type="text" name="Location" placeholder="Example: Hartford, CT">
        </div>

        <div class="lcd-field">
          <label>Project Year</label>
          <input type="text" name="Project Year" placeholder="Example: 2024 / 2025">
        </div>

        <div class="lcd-field">
          <label>Project Status</label>
          <select name="Project Status">
            <option value="">Select status</option>
            <option>Completed</option>
            <option>In Progress</option>
            <option>Concept / Proposal</option>
            <option>Under Review</option>
          </select>
        </div>

        <div class="lcd-field full">
          <label>Short Project Description</label>
          <textarea name="Short Description" placeholder="Write a short description of the project. What was done? What makes it important?"></textarea>
        </div>

        <div class="lcd-field full">
          <label>LifeCare Services Provided</label>
          <textarea name="Services Provided" placeholder="Example: Architectural design, historic restoration, interior planning, adaptive reuse, etc."></textarea>
        </div>

        <div class="lcd-field full">
          <label>Cover Image / Thumbnail</label>
          <input type="file" name="Cover Image" accept="image/*">
          <div class="lcd-help">Please upload the main image you want used as the project thumbnail.</div>
        </div>

        <div class="lcd-field full">
          <label>Additional Project Images</label>
          <input type="file" name="Gallery Images" accept="image/*" multiple>
          <div class="lcd-help">You can select multiple images at once.</div>
        </div>

        <div class="lcd-field full">
          <label>Extra Notes</label>
          <textarea name="Extra Notes" placeholder="Any notes about image order, project title, captions, or what should be highlighted?"></textarea>
        </div>

      </div>

      <button class="lcd-submit" type="submit">Send Project Info</button>

    </form>

    <iframe name="hiddenFrame" style="display:none;"></iframe>
  </div>
</div>

<div class="lcd-toast" id="lcdToast">
  Project information received. Thank you — we’ll review and add it to the Projects page.
</div>

<script>
  function showLCDToast() {
    const toast = document.getElementById('lcdToast');
    toast.classList.add('show');

    setTimeout(() => {
      toast.classList.remove('show');
    }, 4200);
  }
</script>