&lt;script&gt;
// Simulate a simple digital "door" application with interactive UI

let doors = [];
const NUM_DOORS = 10;

function initDoors() {
  const container = document.getElementById(&#39;doors-container&#39;);
  for (let i = 0; i &lt; NUM_DOORS; i++) {
    const door = document.createElement(&#39;div&#39;);
    door.classList.add(&#39;door&#39;, &#39;bg-white&#39;, &#39;hover:bg-gray-200&#39;, &#39;transition-all&#39;, &#39;shadow-lg&#39;, &#39;rounded-lg&#39;, &#39;cursor-pointer&#39;, &#39;relative&#39;);
    door.setAttribute(&#39;data-id&#39;, i);
    door.innerHTML = `
      &lt;div class=&quot;h-40 w-full flex flex-col items-center justify-center&quot;&gt;
        &lt;p class=&quot;text-lg font-bold&quot;&gt;Door ${i + 1}&lt;/p&gt;
        &lt;p class=&quot;mt-1&quot;&gt;Closed&lt;/p&gt;
      &lt;/div&gt;
    `;
    container.appendChild(door);
    doors.push(door);
  }
}

document.addEventListener(&#39;DOMContentLoaded&#39;, () => {
  initDoors();

  document.querySelectorAll(&#39;.door&#39;).forEach(door => {
    door.addEventListener(&#39;click&#39;, () => {
      const doorId = door.getAttribute(&#39;data-id&#39;);
      const currentStatus = door.querySelector(&#39;p&#39;).textContent;

      const title = door.querySelector(&#39;p&#39;);
      const status = door.querySelector(&#39;p&#39;.nextElementSibling);

      if (currentStatus === &quot;Closed&quot;) {
        title.textContent = `&lt;i&gt;Door ${doorId + 1}&lt;/i&gt;`;
        status.textContent = &quot;Open&quot;;
        title.classList.add(&#39;text-green-600&#39;');
      } else {
        title.textContent = `Door ${doorId + 1}`;
        status.textContent = &quot;Closed&quot;;
        title.classList.remove(&#39;text-green-600&#39;');
      }
    });
  });
});
&lt;/script&gt;

&lt;!-- UI: Doors2 App Home Page --&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot; /&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
  &lt;title&gt;Doors2 - Digital Access App&lt;/title&gt;
  &lt;link href=&quot;/doors2/styles.css&quot; rel=&quot;stylesheet&quot; /&gt;
  &lt;script src=&quot;/tailwindcss.js&quot; defer&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body class=&quot;bg-gray-50&quot;&gt;
  &lt;header class=&quot;bg-gradient-to-r from-blue-600 to-cyan-500 p-5 text-white text-center&quot;&gt;
    &lt;h1 class=&quot;text-4xl font-extrabold&quot;&gt;&lt;i&gt;Doors2&lt;/i&gt;&lt;/h1&gt;
    &lt;p class=&quot;mt-2&quot;&gt;Control digital access and security from anywhere. All doors at your fingertips. &lt;br&gt; Powered by Doors2&lt;/p&gt;
  &lt;/header&gt;

  &lt;main class=&quot;p-8&quot;&gt;
    &lt;section class=&quot;mb-12&quot;&gt;
      &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Your Doors &lt;/h2&gt;
      &lt;div id=&quot;doors-container&quot; class=&quot;grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-6&quot;&gt;&lt;/div&gt;
    &lt;/section&gt;

    &lt;section&gt;
      &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Features&lt;/h2&gt;
      &lt;p class=&quot;mt-4&quot;&gt;
        &lt;ul class=&quot;list-disc pl-5&quot;&gt;
          &lt;li&gt;Secure access control for smart buildings&lt;/li&gt;
          &lt;li&gt;Real-time status update from all connected doors&lt;/li&gt;
          &lt;li&gt;Instant door opening via mobile&lt;/li&gt;
          &lt;li&gt;Activity logs for all door interactions&lt;/li&gt;
          &lt;li&gt;Custom permissions across all doors&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/p&gt;
    &lt;/section&gt;
  &lt;/main&gt;

  &lt;footer class=&quot;text-center p-6 bg-gray-200 mt-10&quot;&gt;
    &lt;p&gt;&lt;i&gt;Made with 🔐 for better access management&lt;/i&gt;&lt;br&gt; &copy; 2025 Doors2 Inc.&lt;/p&gt;
  &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;