File size: 4,175 Bytes
1cbee68 0b2ad96 1cbee68 0b2ad96 1cbee68 0b2ad96 1cbee68 0b2ad96 1cbee68 0b2ad96 1cbee68 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<!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>
|