Spaces:

Coots
/

Tile

Sleeping

File size: 9,557 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Tile Calculator AI</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .chat-container {
      height: 80vh;
      background-image: radial-gradient(circle at 1px 1px, #e5e7eb 1px, transparent 0);
      background-size: 20px 20px;
    }
    .typing-indicator span {
      animation: bounce 1.5s infinite ease-in-out;
    }
    @keyframes bounce {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-5px); }
    }
  </style>
</head>
<body class="bg-gray-100">
  <div class="max-w-4xl mx-auto p-4">
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
      <!-- Header -->
      <div class="bg-indigo-600 text-white p-4 flex justify-between items-center">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
            </svg>
          </div>
          <div>
            <h1 class="font-bold text-xl">Tile Calculator AI</h1>
            <p class="text-xs opacity-80">Powered by your models</p>
          </div>
        </div>
        <button id="reset-btn" class="p-2 rounded-full hover:bg-indigo-700 transition">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Chat Area -->
      <div class="chat-container p-4 overflow-y-auto" id="chat-area">
        <div class="bot-message bg-gray-100 rounded-lg p-4 max-w-xs mb-3">
          <p>Hello! 👋 I'm your Tile Calculator Assistant. Let's estimate how many tiles you need.</p>
          <p class="mt-2">Are you looking for <span class="font-semibold">floor</span> or <span class="font-semibold">wall</span> tiles?</p>
          <div class="flex gap-2 mt-3">
            <button onclick="selectTileType('floor')" class="quick-reply bg-white text-indigo-600 border border-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50">Floor</button>
            <button onclick="selectTileType('wall')" class="quick-reply bg-white text-indigo-600 border border-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50">Wall</button>
          </div>
        </div>
      </div>

      <!-- Input Area -->
      <div class="border-t p-4 bg-white">
        <div class="flex gap-2">
          <input type="text" id="user-input" placeholder="Type your message..." class="flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
          <button onclick="sendMessage()" class="bg-indigo-600 text-white rounded-full p-2 hover:bg-indigo-700 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Recommendations Section -->
      <div class="bg-gray-50 p-4 border-t">
        <h3 class="font-semibold text-gray-800 mb-3">Recommended Products</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4" id="recommendations"></div>
      </div>
    </div>
  </div>

  <!-- Main chatbot script -->
  <script>
    const state = {
      step: 'tileType',
      tileType: null,
      area: null,
      tileLength: null,
      tileWidth: null
    };

    const chatArea = document.getElementById('chat-area');
    const userInput = document.getElementById('user-input');
    const recommendations = document.getElementById('recommendations');
    const resetBtn = document.getElementById('reset-btn');

    resetBtn.addEventListener('click', resetConversation);
    userInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') sendMessage();
    });

    function resetConversation() {
      state.step = 'tileType';
      state.tileType = null;
      state.area = null;
      state.tileLength = null;
      state.tileWidth = null;

      chatArea.innerHTML = `
        <div class="bot-message bg-gray-100 rounded-lg p-4 max-w-xs mb-3">
          <p>Hello! 👋 I'm your Tile Calculator Assistant. Let's estimate how many tiles you need.</p>
          <p class="mt-2">Are you looking for <span class="font-semibold">floor</span> or <span class="font-semibold">wall</span> tiles?</p>
          <div class="flex gap-2 mt-3">
            <button onclick="selectTileType('floor')" class="quick-reply bg-white text-indigo-600 border border-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50">Floor</button>
            <button onclick="selectTileType('wall')" class="quick-reply bg-white text-indigo-600 border border-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50">Wall</button>
          </div>
        </div>
      `;
      recommendations.innerHTML = '';
    }

    function selectTileType(type) {
      state.tileType = type;
      state.step = 'area';

      addMessage('user', type === 'floor' ? 'Floor tiles' : 'Wall tiles');
      showTyping();

      setTimeout(() => {
        hideTyping();
        addMessage('bot', `Great choice for ${type} tiles! What's the total area you need to cover (in sq.ft)?`);
      }, 1000);
    }

    function sendMessage() {
      const message = userInput.value.trim();
      if (!message) return;

      addMessage('user', message);
      userInput.value = '';

      processUser Message(message);
    }

    function processUser Message(message) {
      showTyping();

      setTimeout(() => {
        hideTyping();

        if (state.step === 'area') {
          const area = parseFloat(message);
          if (isNaN(area)) {
            addMessage('bot', 'Please enter a valid number for the area (e.g. 120).');
            return;
          }

          state.area = area;
          state.step = 'tileLength';
          addMessage('bot', 'Now, please enter the tile length (e.g. "2" for 2 feet):');

        } else if (state.step === 'tileLength') {
          const length = parseFloat(message);
          if (isNaN(length) || length <= 0) {
            addMessage('bot', 'Please enter a valid positive number for the tile length.');
            return;
          }

          state.tileLength = length;
          state.step = 'tileWidth';
          addMessage('bot', 'Now, please enter the tile width (e.g. "2" for 2 feet):');

        } else if (state.step === 'tileWidth') {
          const width = parseFloat(message);
          if (isNaN(width) || width <= 0) {
            addMessage('bot', 'Please enter a valid positive number for the tile width.');
            return;
          }

          state.tileWidth = width;
          calculateTiles();
        }
      }, 1000);
    }

    function calculateTiles() {
      const tileArea = state.tileLength * state.tileWidth; // Calculate tile area
      const numTiles = Math.ceil((state.area / tileArea) * 1.1); // 10% buffer
      const numBoxes = Math.ceil(numTiles / 10); // Assuming 10 tiles per box

      chatArea.insertAdjacentHTML('beforeend', `
        <div class="bot-message bg-gray-100 rounded-lg p-4 mb-3">
          <p class="font-semibold">Calculation Results:</p>
          <p>🧱 Tile Type: ${state.tileType}</p>
          <p>📐 Area to Cover: ${state.area} sq.ft</p>
          <p>🧮 Tile Size: ${state.tileLength} ft x ${state.tileWidth} ft</p>
          <p class="mt-2">🔢 <span class="font-bold">Tiles Needed:</span> ${numTiles} (${numBoxes} boxes)</p>
        </div>
      `);
      state.step = 'complete';
    }

    function addMessage(sender, message) {
      const messageDiv = document.createElement('div');
      messageDiv.className = `${sender}-message ${sender === 'user' ? 'ml-auto bg-indigo-600 text-white' : 'bg-gray-100'} rounded-lg p-4 max-w-xs mb-3`;
      messageDiv.textContent = message;
      chatArea.appendChild(messageDiv);
      chatArea.scrollTop = chatArea.scrollHeight;
    }

    function showTyping() {
      const typingDiv = document.createElement('div');
      typingDiv.className = 'typing-indicator bg-gray-100 rounded-lg p-4 max-w-xs mb-3 flex gap-1';
      typingDiv.id = 'typing-indicator';
      typingDiv.innerHTML = '<span class="w-2 h-2 bg-gray-400 rounded-full"></span><span class="w-2 h-2 bg-gray-400 rounded-full"></span><span class="w-2 h-2 bg-gray-400 rounded-full"></span>';
      chatArea.appendChild(typingDiv);
      chatArea.scrollTop = chatArea.scrollHeight;
    }

    function hideTyping() {
      const typingIndicator = document.getElementById('typing-indicator');
      if (typingIndicator) typingIndicator.remove();
    }
  </script>
</body>
</html>