<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WordPop | Text Behind Image</title>
  <link rel="stylesheet" href="./style.css">
  <script src="https://cdn.tailwindcss.com"></script>
 

  <style>
#sidebar {
  position: fixed;
  top: 96px; /* Adjust based on the height of the navbar (24 x 4 = 96px) */
  right: 0;
  width: 500px;
  max-height: calc(100vh - 96px); /* Ensure it doesn't exceed the viewport height */
  background: #fff;
  z-index: 1000;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  padding: 20px;
  overflow-y: auto; /* Enable scrolling */
}



@media (max-width: 768px) {
  #sidebar {
    width: 100%; /* Full screen width on smaller devices */
    max-height: 100vh; /* Ensure it still fits within the viewport */
    position: fixed; /* Keep it in place */
  }
}



    @media (max-width: 480px) {
      #app {
        width: 90%; /* Make the app take up 90% width on very small screens */
        height: auto;
      }
    }
  </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">

<!-- Navbar -->
<nav class="fixed top-0 left-0 w-full bg-black text-white shadow-lg z-50 mb-4 pb-2">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex items-center">
        <span class="text-xl font-bold"> <a href="/">WordPop</a> </span>
      </div>

      <!-- Right Section -->
      <div class="flex items-center space-x-6">
        <!-- Theme Toggle -->
        <button id="themeToggle" class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 focus:outline-none">
          <svg id="lightIcon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M12 3v2m0 14v2m9-9h-2M3 12H1m16.364 7.364l-1.414-1.414m-11.314 0l1.414-1.414m11.314-11.314l-1.414 1.414m-11.314 0l1.414 1.414M12 7a5 5 0 100 10a5 5 0 000-10z" />
          </svg>
          <svg id="darkIcon" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path d="M17.293 17.293a8 8 0 11-11.314-11.314a8.001 8.001 0 0011.314 11.314z" />
          </svg>
        </button>

        <!-- User Dropdown -->
        <div class="relative">
          <button id="userMenuButton" class="flex items-center space-x-2 focus:outline-none">
            <img src="https://via.placeholder.com/32" alt="User" class="w-8 h-8 rounded-full">
          </button>
          <div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white text-black rounded-md shadow-lg">
            <a href="#" class="block px-4 py-2 hover:bg-gray-200">Profile</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-200">Settings</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-200">Logout</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>
  
<div id="app" class="p-4 bg-white shadow-lg rounded-md w-1/3 h-1/3 mt-2 ml-6 mx-auto relative md:w-1/2 lg:w-1/3 mt-24">
  <input id="fileInput" type="file" accept=".jpg, .jpeg, .png" class="hidden" />
  <button id="uploadButton" class="btn bg-black text-white px-4 py-2 rounded-md">
    Upload Image
  </button>
  
  <div
  id="imageContainer"
  class="mt-4 w-full h-full flex items-center justify-center border-2 border-dashed border-gray-300 rounded-md relative">
  <span class="text-gray-400">Drag and drop an image here, or click "Upload Image"</span>
 </div>


  <!-- <div mt-6 w-full h-64 
    id="imageContainer"
    class="mt-4 w-full h-full flex items-center justify-center border-2 border-dashed border-gray-300 rounded-md relative">
    <span class="text-gray-400">No image selected</span>

  </div> -->
    <!-- Ad Image Container -->
    <div id="adUnderImage" class="mt-1 w-full h-auto ">
      <a href="https://www.linkedin.com/in/mohamed-aziz-aydi/" target=”_blank”>
        <img src="https://images.squarespace-cdn.com/content/v1/62187da97bc36e351d2ac925/565f3852-50b1-4fe8-9517-0c79573835a8/ad.jpg?format=500w" alt="Ad Image" class="w-full h-auto rounded-md shadow-md object-cover">

      </a>
  </div>
  <div id="progressContainer" class="hidden absolute inset-0 flex justify-center items-center bg-black bg-opacity-50 z-10">
    <div class="flex flex-col items-center">
      <div class="loader border-t-4 border-b-4 border-blue-500 rounded-full w-12 h-12 animate-spin"></div>
      <p class="text-white mt-2 font-semibold">Working to make your photo fu*** cool</p>
    </div>
  </div>
</div>

<!-- // here the ad image -->
<!-- // Ad image -->

<div id="adContainer" class="absolute top-0 right-[540px] mt-24 w-[300px] h-[50px]">
<a href="https://www.linkedin.com/in/mohamed-aziz-aydi/" target=”_blank”>
  <img src="https://hairlossblog.zenagen.com/wp-content/uploads/2012/10/vertical-ad-160x600.gif" alt="Ad Image" class="rounded-md shadow-md w-full h-auto object-cover">

</a>
</div>


<!-- Sidebar for Text Customization -->
<div id="sidebar" class="hidden fixed top-0 right-0 bg-white shadow-lg p-4 w-64 overflow-y-auto">
  <h2 class="text-lg font-semibold mb-4">Customize Text</h2>

  <label class="block mb-4">
    <span class="text-sm font-medium">X Position:</span>
    <input id="textX" type="range" min="0" max="700" value="100" class="w-full accent-blue-500">
  </label>

  <label class="block mb-4">
    <span class="text-sm font-medium">Y Position:</span>
    <input id="textY" type="range" min="0" max="430" value="50" class="w-full accent-blue-500">
  </label>

  <label class="block mb-4">
    <span class="text-sm font-medium">Text:</span>
    <input id="textInput" type="text" class="w-full border border-gray-300 rounded px-2 py-1 focus:ring focus:ring-blue-300 focus:outline-none" value="Your Text Here" />
  </label>

  <label class="block mb-4">
    <span class="text-sm font-medium">Font:</span>
    <select id="fontSelector" class="w-full border border-gray-300 rounded px-2 py-1 focus:ring focus:ring-blue-300 focus:outline-none">
      <option value="Verdana" default>Verdana</option>
    </select>
  </label>

  <label class="block mb-4">
    <span class="text-sm font-medium">Text Color:</span>
    <input id="textColor" type="color" class="w-full h-10 border border-gray-300 rounded focus:ring focus:ring-blue-300 focus:outline-none" value="#000000" />
  </label>

  <label class="block mb-4">
    <span class="text-sm font-medium">Text Size:</span>
    <input id="textSize" type="range" min="8" max="800" value="70" class="w-full accent-blue-500">
  </label>

  <label class="block mb-4">
    <span class="text-sm font-medium">Text Opacity:</span>
    <input id="textOpacity" type="range" min="0" max="1" step="0.1" value="1" class="w-full accent-blue-500">
  </label>

  <label class="block mb-4">
    <span class="text-sm font-medium">Font Weight:</span>
    <input id="fontWeight" type="range" min="100" max="900" step="100" value="400" class="w-full accent-blue-500">
  </label>

  <label class="block mb-4">
    <span class="text-sm font-medium">Rotation:</span>
    <input id="rotation" type="range" min="0" max="360" value="0" class="w-full accent-blue-500">
  </label>
  <label class="block mb-4">
  <button id="downloadButton" class="btn bg-black text-white px-4 py-2 rounded-md mt-2">
    Download Image
  </button>
</label>
</div>

<script type="module" src="/src/app/app.ts"></script>
</body>
</html>
