"Maishiy texnikalarni tuzatish uchun intellektual yordamchi" deb qisqacha yozib qo'ying.
<!DOCTYPE html> <html lang="uz"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TehnoFix AI Assistant</title> <style> / Asosiy dizayn sozlamalari / body { background-color: #121212; / To'q kulrang/qora fon / color: #e0e0e0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; height: 100vh; margin: 0; }
/ Yuqori qism (Header) / header { padding: 20px; text-align: center; border-bottom: 1px solid #333; }
header h1 { color: #2ecc71; / Yorqin yashil / font-size: 1.5rem; margin: 0; }
/ Chat maydoni / .chat-container { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
/ AI javob berish uslubi / .ai-message { max-width: 80%; background: #1e1e1e; padding: 15px; border-radius: 15px; border-left: 4px solid #2ecc71; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
/ Rasm ramkasi (AI aniqlagan qism) / .image-analysis { border: 2px dashed #2ecc71; border-radius: 10px; padding: 10px; margin-top: 10px; background: rgba(46, 204, 113, 0.05); text-align: center; }
/ Pastki yozish qismi / .input-area { padding: 20px; background: #181818; display: flex; align-items: center; gap: 10px; }
.input-box { flex: 1; background: #252525; border: 1px solid #333; padding: 12px 20px; border-radius: 25px; color: white; outline: none; }
.input-box:focus { border-color: #2ecc71; }
.icon-btn { background: none; border: none; color: #2ecc71; font-size: 20px; cursor: pointer; transition: 0.3s; }
.icon-btn:hover { transform: scale(1.1); }
.solution-list { margin: 10px 0 0 20px; padding: 0; }
.solution-list li { margin-bottom: 8px; } </style> </head> <body>
<header> <h1>TehnoFix AI</h1> </header>
<div class="chat-container"> <div class="ai-message"> Salom! Men sizning raqamli yordamchingizman. Texnikangiz modelini yozing yoki nosozlik aks etgan rasmni yuklang. </div>
<div class="ai-message"> <strong>Model: Artel WF60</strong> bo'yicha tavsiyalar: <ul class="solution-list"> <li>Filtrni tekshiring va tozalang.</li> <li>Suv bosimi yetarli ekanligiga ishonch hosil qiling.</li> <li>Elektron platani qayta yuklang (prizradan uzib turing).</li> </ul>
<div class="image-analysis"> <small style="color: #888;">AI tahlili:</small><br> ✨ Suv quyish klapanida nosozlik aniqlandi. </div> </div> </div>
<div class="input-area"> <button class="icon-btn">📷</button> <input type="text" class="input-box" placeholder="Modelni yoki muammoni yozing..."> <button class="icon-btn">➤</button> </div>
</body> </html>
0 Comments