.header h1 font-size: 2rem; letter-spacing: 2px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TamilCube Thirukkural Feature</title> <style> * margin: 0; padding: 0; box-sizing: border-box; body font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px;
.search-box span color: #6c757d;
.meaning h3 color: #8B4513; margin-bottom: 10px; font-size: 1.2rem;
.kural-number display: inline-block; background: #D2691E; color: white; padding: 5px 15px; border-radius: 50px; font-size: 0.9rem; margin-bottom: 20px; tamilcube thirukkural
.controls padding: 30px; background: white; display: flex; gap: 15px; flex-wrap: wrap; justify-content: center;
button background: #8B4513; color: white; border: none; padding: 12px 25px; border-radius: 40px; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; font-weight: bold; .header h1 font-size: 2rem
<div class="controls"> <button id="randomBtn">🎲 Random Kural</button> <div class="search-box"> <span>குறள் #</span> <input type="number" id="kuralNumberInput" min="1" max="1330" placeholder="1-1330"> <button id="goBtn">Go</button> </div> </div> <footer> Source: TamilCube · Thirukkural with meaning </footer> </div>
function showError(msg) document.getElementById('tamilText').innerHTML = "❌ Error"; document.getElementById('meaning').innerHTML = msg; document.getElementById('transliteration').innerHTML = ""; document.getElementById('chapter').innerHTML = "N/A"; document.getElementById('coupletNo').innerHTML = "—"; document.getElementById('kuralNumber').innerHTML = "குறள் —"; meta name="viewport" content="width=device-width
<script> // Since direct TamilCube API might require key, using a reliable public dataset // This is a sample embedded dataset (first 10 kurals for demo, but API fallback to fetch full) // For production, you can use free API: https://api-thirukkural.vercel.app/api?num=1
footer text-align: center; padding: 15px; font-size: 0.8rem; background: #f8f9fa; color: #6c757d;