GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Lotus Temple - Mock UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body{margin:0;padding:0;background:transparent;font-family:Arial,Helvetica,sans-serif}8  #render-target{9    position:relative; overflow:hidden;10    width:1080px; height:2400px;11    background:#111317; color:#ECEFF1;12  }13  .status-bar{14    height:88px; padding:0 28px;15    display:flex; align-items:center; justify-content:space-between;16    color:#E6E6E6; font-weight:600; font-size:34px;17  }18  .top-icons{display:flex; gap:26px; align-items:center; opacity:.9}19  .chevron{20    width:40px;height:40px;border-left:4px solid #CFCFCF;border-bottom:4px solid #CFCFCF;21    transform:rotate(45deg); margin:16px 0 0 32px; opacity:.8;22  }23  .content{padding:8px 32px 0}24  .title{font-size:54px;font-weight:700;margin:8px 0 8px 0}25  .subline{display:flex; align-items:center; gap:18px; color:#B0BEC5; font-size:34px}26  .sound{27    width:34px;height:34px;border-radius:50%; border:2px solid #90CAF9; display:inline-flex;align-items:center;justify-content:center;color:#90CAF9;font-size:22px;28  }29  .rating{display:flex; align-items:center; gap:12px; margin-top:14px; font-size:34px}30  .stars svg{width:30px;height:30px;fill:#FFC107}31  .meta{display:flex; align-items:center; gap:18px; color:#AAB7C0; margin-top:8px; font-size:32px}32  .dot{width:6px;height:6px;background:#556; border-radius:50%}33  .chip-row{display:flex; gap:18px; margin:28px 0 22px}34  .chip{35    display:flex; align-items:center; gap:16px;36    padding:20px 34px; border-radius:40px; font-size:36px; border:1px solid #2B2F36; background:#1A1E24; color:#D7E3EB;37  }38  .chip.primary{background:#2C64F2;color:#fff;border-color:#2C64F2}39  .chip svg{width:34px; height:34px; fill:currentColor}40  .gallery{41    display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-top:8px;42  }43  .img{44    background:#E0E0E0; border:1px solid #BDBDBD; color:#555; display:flex; align-items:center; justify-content:center; text-align:center;45  }46  .left-img{height:820px}47  .right-col{display:grid; grid-template-rows:1fr 1fr; gap:20px}48  .img.small{height:400px}49  .tabs{display:flex; gap:38px; margin:26px 0 8px; padding-bottom:6px; border-bottom:1px solid #26303A}50  .tab{font-size:36px; color:#A8B2BA; padding:14px 10px}51  .tab.active{color:#CFE1FF; border-bottom:4px solid #5B8CFF}52  .section-header{display:flex; justify-content:space-between; align-items:center; margin:26px 0 6px}53  .section-header .title-sm{font-size:44px; font-weight:700}54  .muted{color:#96A2AE; font-size:30px}55  .card{border-top:1px solid #2A2F36; padding:18px 0}56  .row{display:flex; align-items:center; gap:18px; margin:16px 0; font-size:36px}57  .badge-free{margin-left:auto; color:#9CCC65; font-size:34px}58  .pin, .info, .clock{59    width:34px;height:34px; fill:#90A4AE60  }61  .open{color:#69F0AE; font-weight:700}62  .website{color:#7EB6FF; text-decoration:underline; font-size:32px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}63  /* small circular avatar on right of title line (as in screenshot) */64  .avatar{65    position:absolute; right:32px; top:300px;66    width:90px; height:90px; border-radius:50%; border:2px solid #2B2F36;67    background:#E0E0E0; color:#555; display:flex; align-items:center; justify-content:center; font-size:20px;68  }69</style>70</head>71<body>72<div id="render-target">73 74  <!-- Status bar -->75  <div class="status-bar">76    <div>1:52</div>77    <div class="top-icons">78      <span>•</span>79      <span>⬤</span>80      <span>◔</span>81      <span>📍</span>82      <span>📶</span>83      <span>🔋</span>84    </div>85  </div>86 87  <!-- tiny back/chevron -->88  <div class="chevron"></div>89 90  <div class="content">91    <div class="title">Lotus Temple</div>92    <div class="subline">93      <span>लोٹس मंदिर</span>94      <span class="sound">🔊</span>95    </div>96 97    <div class="rating">98      <span>4.5</span>99      <div class="stars">100        <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 .9-5 4.7 1.2 7L12 17l-6.2 3.6L7 13.6 2 8.9 9 8z"/></svg>101        <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 .9-5 4.7 1.2 7L12 17l-6.2 3.6L7 13.6 2 8.9 9 8z"/></svg>102        <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 .9-5 4.7 1.2 7L12 17l-6.2 3.6L7 13.6 2 8.9 9 8z"/></svg>103        <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 .9-5 4.7 1.2 7L12 17l-6.2 3.6L7 13.6 2 8.9 9 8z"/></svg>104        <svg viewBox="0 0 24 24" style="opacity:.6"><path d="M12 2l3 6 7 .9-5 4.7 1.2 7L12 17l-6.2 3.6L7 13.6 2 8.9 9 8z"/></svg>105      </div>106      <span style="color:#9FB0BA">(51,057)</span>107    </div>108 109    <div class="meta">110      <span>Bahá'í house of worship</span>111      <span class="dot"></span>112      <svg width="32" height="32" viewBox="0 0 24 24" fill="#9FB0BA"><path d="M5 12a7 7 0 1114 0c0 5-7 10-7 10S5 17 5 12zm7-4a4 4 0 100 8 4 4 0 000-8z"/></svg>113      <span class="dot"></span>114      <svg width="34" height="34" viewBox="0 0 24 24" fill="#9FB0BA"><path d="M5 20h14l-1-5H6l-1 5zM6 7h12l-2 6H8L6 7zm3-4h6l1 3H8l1-3z"/></svg>115      <span>59 min</span>116    </div>117 118    <div class="chip-row">119      <div class="chip primary">120        <svg viewBox="0 0 24 24"><path d="M12 2l7 8h-5v8H10v-8H5z"/></svg>121        <span>Directions</span>122      </div>123      <div class="chip">124        <svg viewBox="0 0 24 24"><path d="M12 2l9 9h-6v11H9V11H3z"/></svg>125        <span>Start</span>126      </div>127      <div class="chip">128        <svg viewBox="0 0 24 24"><path d="M4 4h16v14H4zM7 2h10v3H7z"/></svg>129        <span>Tickets</span>130      </div>131      <div class="chip">132        <svg viewBox="0 0 24 24"><path d="M6.6 10.2c.8 1.9 2.3 3.4 4.2 4.2l2-2c.2-.2.5-.2.8-.1 1 .3 2 .5 3.1.5.4 0 .7.3.7.7V17c0 .4-.3.7-.7.7C10.9 17.7 6.3 13.1 6.3 7.7c0-.4.3-.7.7-.7h3.5c.4 0 .7.3.7.7 0 1.1.2 2.1.5 3.1.1.3 0 .6-.1.8l-2 2z"/></svg>133        <span>Call</span>134      </div>135    </div>136 137    <div class="gallery">138      <div class="img left-img">[IMG: Lotus Temple Front View with Reflecting Pool]</div>139      <div class="right-col">140        <div class="img small">[IMG: Long garden walkway with visitors]</div>141        <div class="img small">[IMG: Inside hall rows of benches and arches]</div>142      </div>143    </div>144 145    <div class="tabs">146      <div class="tab active">OVERVIEW</div>147      <div class="tab">TICKETS</div>148      <div class="tab">DIRECTORY</div>149      <div class="tab">REVIEWS</div>150      <div class="tab">PHOTOS</div>151    </div>152 153    <div class="section-header">154      <div class="title-sm">Tickets</div>155      <div class="muted">About these results ⓘ</div>156    </div>157 158    <div class="card">159      <div class="row" style="border-top:1px solid #2A2F36;padding-top:18px;">160        <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a8 8 0 00-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 00-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z"/></svg>161        <div style="flex:1">162          <div style="font-size:40px">Lotus Temple</div>163        </div>164        <div class="badge-free">Free</div>165      </div>166 167      <div class="row">168        <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a8 8 0 00-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 00-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z"/></svg>169        <div>Lotus Temple Rd Bahapur, Kalkaji, New Delhi, Delhi 110019</div>170        <div style="margin-left:auto; color:#90CAF9">🔊</div>171      </div>172 173      <div class="row">174        <svg class="clock" viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/></svg>175        <div><span class="open">Open</span> • Closes 6 pm</div>176        <svg style="width:34px;height:34px;margin-left:auto;fill:#90A4AE" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>177      </div>178 179      <div class="row" style="margin-top:10px">180        <svg class="info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><rect x="11" y="10" width="2" height="7" fill="#111317"/><rect x="11" y="6" width="2" height="2" fill="#111317"/></svg>181        <div class="website">https://bahaihouseofworship.in/</div>182      </div>183    </div>184  </div>185 186  <div class="avatar">[IMG]</div>187 188</div>189</body>190</html>