Spaces:

Coots
/

Tile

Sleeping

App Files Files Community

Coots commited on Jun 22

Commit

cef6a45

verified ·

1 Parent(s): 503b5f6

Update index.html

Browse files

Files changed (1) hide show

index.html +208 -142

index.html CHANGED Viewed

@@ -1,156 +1,222 @@
-<script>
-  const state = {
-    step: 'tileType',
-    tileType: null,
-    length: null,
-    width: null,
-    tileSize: 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.length = null;
-    state.width = null;
-    state.tileSize = 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 = 'length';
-    addMessage('user', type === 'floor' ? 'Floor tiles' : 'Wall tiles');
-    showTyping();
-    setTimeout(() => {
-      hideTyping();
-      addMessage('bot', `Great choice! Please enter the <strong>length</strong> of the area in feet (e.g. 10):`);
-    }, 800);
-  }
-  function sendMessage() {
-    const message = userInput.value.trim();
-    if (!message) return;
-    addMessage('user', message);
-    userInput.value = '';
-    processUserMessage(message);
-  }
-  function processUserMessage(message) {
-    showTyping();
-    setTimeout(() => {
-      hideTyping();
-      if (state.step === 'length') {
-        const length = parseFloat(message);
-        if (isNaN(length) || length <= 0) {
-          addMessage('bot', 'Please enter a valid number for the length in feet.');
-          return;
-        }
-        state.length = length;
-        state.step = 'width';
-        addMessage('bot', 'Now enter the <strong>width</strong> of the area in feet (e.g. 12):');
-      } else if (state.step === 'width') {
-        const width = parseFloat(message);
-        if (isNaN(width) || width <= 0) {
-          addMessage('bot', 'Please enter a valid number for the width in feet.');
-          return;
-        }
-        state.width = width;
-        state.step = 'tileSize';
-        addMessage('bot', 'What is the tile size? (e.g. "2x2", "600x600", or "300*300")');
-      } else if (state.step === 'tileSize') {
-        const tileArea = parseTileSize(message);
-        if (!tileArea) {
-          addMessage('bot', 'I couldn\'t understand that tile size. Try: "2x2", "600x600 mm", or "200*200".');
-          return;
         }
-        state.tileSize = tileArea;
-        calculateTiles();
-      }
-    }, 800);
-  }
-  function parseTileSize(input) {
-    input = input.toLowerCase().replace(/×|into|\*/g, 'x').replace(/ft|feet|mm/g, '').trim();
-    if (input.includes('x')) {
-      const [a, b] = input.split('x').map(s => parseFloat(s.replace(/[^\d.]/g, '')));
-      if (isNaN(a) || isNaN(b)) return null;
-      return (a > 20 ? (a * b) / 92903.04 : a * b);
-    } else if (/^\d+(\.\d+)?$/.test(input)) {
-      const val = parseFloat(input);
-      return val > 20 ? (val * val) / 92903.04 : val * val;
     }
-    return null;
-  }
-  function calculateTiles() {
-    const area = state.length * state.width;
-    const numTiles = Math.ceil((area / state.tileSize) * 1.1);
-    const numBoxes = Math.ceil(numTiles / 10);
-    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>📏 Length: ${state.length} ft</p>
-        <p>📐 Width: ${state.width} ft</p>
-        <p>📦 Area: ${area.toFixed(2)} sq.ft</p>
-        <p>🧮 Tile Size: ${state.tileSize.toFixed(2)} sq.ft per tile</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.innerHTML = 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>

+<!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>