|
|
<!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> |
|
|
|
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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, , |
|
|
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; |
|
|
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> |
|
|
`); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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> |
|
|
|
