User should be ... - Tailwind AI

Alexey Metelev
<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex items-center justify-center">
  <div class="bg-white shadow-lg rounded-lg p-6 sm:p-8 max-w-md w-full">
    <h1 class="text-2xl font-bold mb-6 text-center">Select Your Options</h1>
    <div class="mb-4 flex items-center">
      <label for="heat-press" class="mr-2 text-gray-700">Heat Press:</label>
      <input type="checkbox" id="heat-press" class="hidden" onchange="toggleOptions()">
      <div class="relative">
        <div class="w-14 h-8 bg-gray-300 rounded-full cursor-pointer transition duration-300 ease-in-out" onclick="document.getElementById('heat-press').click()">
          <div id="toggle-dot" class="absolute left-1 top-1 w-6 h-6 bg-white rounded-full shadow transition-transform duration-300 ease-in-out"></div>
        </div>
      </div>
    </div>
    <div id="options" class="hidden">
      <form onsubmit="return validateForm()">
        <div class="mb-4">
          <label class="block text-gray-700 mb-2">Image</label>
          <input type="file" id="image-upload" class="hidden" accept="image/*" onchange="previewImage(event)">
          <div id="dropzone" class="border-dashed border-2 border-gray-300 rounded-lg p-4 text-center cursor-pointer" onclick="document.getElementById('image-upload').click()">
            <span class="text-gray-500 hover:text-gray-700">Drag and drop an image here or click to upload</span>
          </div>
        </div>
        <div class="mb-4 hidden" id="image-container">
          <img id="image-preview" src="https://www.tailwindai.dev/placeholder.svg" alt="Image Preview" class="w-full h-64 object-cover rounded-lg mb-4">
          <div class="flex items-center mb-2">
            <input type="checkbox" id="remove-background" class="mr-2">
            <label for="remove-background" class="text-gray-700">Remove Background</label>
          </div>
          <div class="flex items-center">
            <input type="checkbox" id="optimize" class="mr-2">
            <label for="optimize" class="text-gray-700">Optimize</label>
          </div>
        </div>
        <div class="mb-4">
          <label class="block text-gray-700 mb-2">Position</label>
          <select id="position" class="w-full p-2 border rounded">
            <option value="front-center">Front Center</option>
            <option value="back-center">Back Center</option>
            <option value="left-chest">Left Chest</option>
          </select>
        </div>
        <div class="mb-4">
          <div class="flex flex-col sm:flex-row mb-4">
            <div class="sm:w-1/2 pr-0 sm:pr-2 mb-4 sm:mb-0">
              <label for="width" class="block text-gray-700 mb-2">Width (inches)</label>
              <input type="number" id="width" class="w-full p-2 border rounded" placeholder="Enter width in inches">
              <p id="width-error" class="text-red-500 text-sm hidden">The size should be bigger than 1 inch</p>
            </div>
            <div class="sm:w-1/2 pl-0 sm:pl-2">
              <label for="height" class="block text-gray-700 mb-2">Height (inches)</label>
              <input type="number" id="height" class="w-full p-2 border rounded" placeholder="Enter height in inches">
              <p id="height-error" class="text-red-500 text-sm hidden">The size should be bigger than 1 inch</p>
            </div>
          </div>
        </div>
        <div class="mb-4">
          <h2 class="text-lg font-semibold mb-2">Your Creation</h2>
          <img src="https://www.tailwindai.dev/placeholder.svg" alt="Creation Stub" class="w-full h-64 object-cover rounded-lg mb-4">
          <p class="text-xl font-bold text-center mt-2">$29.99</p>
        </div>
        <button type="submit" class="w-full bg-red-500 text-white p-2 rounded hover:bg-red-400">Add to Cart</button>
      </form>
    </div>
  </div>
  <script>
    function toggleOptions() {
      const options = document.getElementById('options');
      const heatPress = document.getElementById('heat-press');
      const toggleDot = document.getElementById('toggle-dot');
      options.classList.toggle('hidden', !heatPress.checked);
      if (heatPress.checked) {
        toggleDot.classList.remove('left-1');
        toggleDot.classList.add('right-1');
      } else {
        toggleDot.classList.remove('right-1');
        toggleDot.classList.add('left-1');
      }
    }

    function validateForm() {
      const width = document.getElementById('width').value;
      const height = document.getElementById('height').value;
      const widthError = document.getElementById('width-error');
      const heightError = document.getElementById('height-error');
      let isValid = true;

      if (width <= 1) {
        widthError.classList.remove('hidden');
        isValid = false;
      } else {
        widthError.classList.add('hidden');
      }

      if (height <= 1) {
        heightError.classList.remove('hidden');
        isValid = false;
      } else {
        heightError.classList.add('hidden');
      }

      return isValid;
    }

    function previewImage(event) {
      const imagePreview = document.getElementById('image-preview');
      const imageContainer = document.getElementById('image-container');
      const dropzone = document.getElementById('dropzone');
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = function(e) {
        imagePreview.src = e.target.result;
        dropzone.classList.add('hidden');
        imageContainer.classList.remove('hidden');
      }
      reader.readAsDataURL(file);
    }
  </script>
</body>
Add price under "your creation"
