Spaces:

Coots
/

Tile

Sleeping

App Files Files Community

Coots commited on Jun 22

Commit

1cbee68

verified ·

1 Parent(s): 0b2ad96

Update index.html

Browse files

Files changed (1) hide show

index.html +120 -64

index.html CHANGED Viewed

@@ -1,69 +1,125 @@
-<script>
-  const state={step:'tileType',tileType:null,area:null,length:null,width:null};
-  function selectTileType(t){
-    state.tileType=t;state.step='area';
-    addMessage('user',t+' tiles'); ask('area');
-  }
-  function ask(field){
-    showTyping();
-    setTimeout(()=>{
-      hideTyping();
-      addMessage('bot',
-         field==='area' ? "Total area (sq.ft)?" :
-         field==='length' ? "Tile length (ft)?" : "Tile width (ft)?"
-      );
-      state.step=field;
-    },1000);
-  }
-  function sendMessage(){
-    const m=userInput.value.trim(); if(!m)return;
-    addMessage('user',m);userInput.value='';
-    handleUser(m);
-  }
-  function handleUser(msg){
-    if(state.step==='area'){
-      const v=parseFloat(msg);
-      return isNaN(v)? addBot("Enter valid area.") : (state.area=v,ask('length'));
     }
-    if(state.step==='length'){
-      const v=parseFloat(msg);
-      return isNaN(v)? addBot("Enter valid length.") : (state.length=v,ask('width'));
     }
-    if(state.step==='width'){
-      const v=parseFloat(msg);
-      return isNaN(v)? addBot("Enter valid width.") : (
-        state.width=v,
-        showResults()
-      );
     }
-  }
-  function showResults(){
-    const c = state.length * state.width;
-    const tiles = Math.ceil((state.area/c)*1.1);
-    addBot(`📦 You need ${tiles} tiles (~10% buffer).`);
-    fetch('/recommend', {
-      method:'POST', headers:{'Content-Type':'application/json'},
-      body:JSON.stringify({
-        tile_type: state.tileType,
-        area: state.area,
-        length: state.length,
-        width: state.width,
-        price_range: [3,10]
       })
-    })
-    .then(r=>r.json())
-    .then(r=>{
-      if(r.recommended_products && r.recommended_products.length){
-        recommendations.innerHTML = '';
-        r.recommended_products.forEach(p=>{
-          recommendations.innerHTML += `
-            <div class="card">
-              <h4>${p.name}</h4>
-              <p>${p.size} — ₹${p.price}/box</p>
-            </div>`;
-        });
-      } else addBot("No recommendations.");
     });
-  }
-  // Helper functions: addBot, addMessage, showTyping, hideTyping (as before)...
-</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>
+    /* Your existing styles… */
+  </style>
+</head>
+<body class="bg-gray-100">
+  <!-- (Header + Chat Area + Input Area omitted for brevity) -->
+  <div id="chat-area" class="chat-container p-4 overflow-y-auto">
+    <div class="bot-message bg-gray-100 rounded-lg p-4 max-w-xs mb-3">
+      <p>Hello! 👋 Floor or wall tiles?</p>
+      <button onclick="selectTileType('floor')" class="quick-reply">Floor</button>
+      <button onclick="selectTileType('wall')" class="quick-reply">Wall</button>
+    </div>
+  </div>
+  <!-- Recommendations Section -->
+  <div id="recommendations" class="grid grid-cols-2 md:grid-cols-4 gap-4 p-4 border-t bg-gray-50"></div>
+  <script>
+    const state = { step: 'tileType', tileType: null, length: null, width: null };
+    const chatArea = document.getElementById('chat-area'),
+          userInput = null, /* we won't use user text input here for simplicity */,
+          recommendations = document.getElementById('recommendations');
+    function selectTileType(type){
+      state.tileType = type;
+      state.step = 'length';
+      appendBot(`Great. What's the length of the area in ft?`);
     }
+    function appendBot(text) {
+      chatArea.insertAdjacentHTML('beforeend', `
+        <div class="bot-message bg-gray-100 rounded-lg p-4 mb-3">${text}</div>
+      `);
+      chatArea.scrollTop = chatArea.scrollHeight;
     }
+    function appendUser(text) {
+      chatArea.insertAdjacentHTML('beforeend', `
+        <div class="user-message ml-auto bg-indigo-600 text-white rounded-lg p-4 mb-3">${text}</div>
+      `);
+      chatArea.scrollTop = chatArea.scrollHeight;
     }
+    function askValue(val){
+      const answer = prompt(val);
+      if (!answer) return appendBot('Input canceled.');
+      appendUser(answer);
+      processValue(parseFloat(answer));
+    }
+    function processValue(num){
+      if (state.step === 'length'){
+        state.length = num;
+        state.step = 'width';
+        appendBot("And the width (ft)?");
+        askValue("Width in ft:");
+      } else if (state.step === 'width'){
+        state.width = num;
+        calculate();
+      }
+    }
+    function calculate(){
+      const area = state.length * state.width;
+      const coverage = 1; // tile covers 1 sq ft default
+      const numTiles = Math.ceil(area * 1.1 / coverage);
+      appendBot(`📐 Area: ${area.toFixed(2)} ft²<br>🧮 Tiles needed (incl. 10%): ${numTiles}`);
+      fetchRecommendations(coverage, area);
+    }
+    function fetchRecommendations(coverage, area){
+      fetch('/recommend', {
+        method: 'POST',
+        headers:{'Content-Type':'application/json'},
+        body: JSON.stringify({
+          tile_type: state.tileType,
+          coverage,
+          area,
+          price_range: [3,10]
+        })
       })
+      .then(r=>r.json())
+      .then(d=> {
+        if (d.recommended_products?.length){
+          showProducts(d.recommended_products);
+        } else {
+          appendBot("No recommendations found for your specs.");
+        }
+      });
+    }
+    function showProducts(products){
+      recommendations.innerHTML = '';
+      products.forEach(p => {
+        recommendations.insertAdjacentHTML('beforeend', `
+          <div class="bg-white shadow rounded-lg p-4">
+            <h4 class="font-medium">${p.name}</h4>
+            <p class="text-sm">₹${p.price}/box</p>
+            <a href="${p.link}" target="_blank" class="text-indigo-600 hover:underline">View</a>
+          </div>
+        `);
+      });
+    }
+    // start logic: after selecting tile type, ask length
+    document.addEventListener('DOMContentLoaded', ()=> {
+      if(state.step!=='tileType') return;
+      document.querySelectorAll('.quick-reply').forEach(btn=>{
+        btn.onclick = ()=> {
+          const type = btn.getAttribute('onclick').match(/'(\w+)'/)[1];
+          appendUser(type);
+          selectTileType(type);
+          askValue("Length in ft:");
+        }
+      });
     });
+  </script>
+</body>
+</html>