GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mobile Ad Detail</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family:Helvetica,Arial,sans-serif;color:#212121;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;11    background:#7a7a7a; border-radius:0;12  }13 14  /* Status bar */15  .status-bar{16    height:110px;background:#000;color:#fff;padding:0 36px;display:flex;align-items:center;justify-content:space-between;17  }18  .status-left{font-size:42px;font-weight:600;letter-spacing:1px;}19  .status-right{display:flex;gap:18px;align-items:center;}20  .dot{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.8;}21  .tiny-icon{22    width:42px;height:42px;border-radius:9px;border:2px solid #fff;opacity:.9;23  }24 25  /* Top app-continue pill */26  .top-strip{padding:30px 36px 18px 36px;}27  .app-pill{28    background:#fff;border-radius:28px;box-shadow:0 8px 16px rgba(0,0,0,.25);29    display:flex;align-items:center;gap:28px;padding:28px 34px;30  }31  .note-icon{32    width:120px;height:120px;border-radius:24px;background:#FFC72C;display:flex;align-items:center;justify-content:center;33    box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);34    color:#6b4a00;font-weight:700;font-size:40px;35  }36  .pill-text{flex:1;}37  .pill-line-1{color:#6b6b6b;font-size:40px;}38  .pill-line-2{color:#111;font-size:56px;font-weight:800;margin-top:6px;}39  .chev{40    width:48px;height:48px;fill:#1a73e8;41  }42 43  /* Ad card */44  .card{45    background:#fff;border-radius:28px;margin:24px 24px 0 24px;box-shadow:0 8px 28px rgba(0,0,0,.25);overflow:hidden;46  }47  .card-header{48    text-align:center;color:#757575;font-size:44px;font-weight:600;padding:18px 0 12px 0;background:#f6f6f6;49  }50  .media{51    margin:0 18px 0 18px;border-radius:18px;overflow:hidden;border:1px solid #d0d0d0;52    height:520px;background:#E0E0E0;display:flex;align-items:center;justify-content:center;color:#757575;53    position:relative;54  }55  .volume{56    position:absolute;left:16px;top:16px;width:56px;height:56px;background:rgba(255,255,255,.9);57    border-radius:50%;display:flex;align-items:center;justify-content:center;58  }59  .content{padding:28px;}60  .title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}61  .title{font-size:68px;color:#1a73e8;font-weight:700;line-height:1.1;margin:8px 0 14px 0;flex:1;}62  .logo-place{63    width:180px;height:90px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:12px;64    display:flex;align-items:center;justify-content:center;color:#757575;font-size:36px;white-space:nowrap;65  }66  .rating{display:flex;align-items:center;gap:16px;font-size:44px;color:#f57c00;margin-bottom:18px;}67  .stars{display:flex;gap:10px;}68  .hr{height:2px;background:#e6e6e6;margin:12px 0 24px 0;}69 70  .headline{font-size:54px;font-weight:700;margin:10px 0 22px 0;color:#222;}71  .sub{font-size:42px;color:#8c8c8c;margin-bottom:24px;}72 73  .map{74    height:380px;border-radius:18px;border:1px solid #BDBDBD;background:#E0E0E0;75    display:flex;align-items:center;justify-content:center;color:#757575;font-size:40px;margin-bottom:24px;76    overflow:hidden;77  }78  .info-row{display:flex;align-items:center;gap:18px;font-size:44px;margin:8px 0 26px 0;}79  .city{font-weight:700;color:#222;}80  .open{color:#1e8e3e;font-weight:800;}81  .sep{height:42px;width:2px;background:#cfcfcf;}82  .hours{color:#555;}83 84  .btn-row{display:flex;gap:28px;margin:10px 0 24px 0;}85  .btn{86    flex:1;border-radius:46px;padding:34px 24px;font-size:46px;font-weight:700;border:2px solid #d7e3f5;87    display:flex;align-items:center;justify-content:center;88  }89  .btn.light{background:#eaf2ff;color:#1976d2;}90  .btn.primary{background:#1a73e8;color:#fff;border-color:#1a73e8;}91 92  .footer-line{height:2px;background:#e9e9e9;margin:6px 0 20px 0;}93  .info-icon{94    position:absolute;left:40px;bottom:120px;width:48px;height:48px;border-radius:50%;95    border:2px solid #9ec9ff;color:#1a73e8;display:flex;align-items:center;justify-content:center;background:#eaf6ff;font-weight:800;96  }97 98  /* Gesture bar */99  .gesture{100    position:absolute;bottom:28px;left:50%;transform:translateX(-50%);101    width:320px;height:12px;background:#fff;border-radius:12px;opacity:.9;102  }103</style>104</head>105<body>106<div id="render-target">107 108  <!-- Status bar -->109  <div class="status-bar">110    <div class="status-left">5:24</div>111    <div class="status-right">112      <div class="tiny-icon"></div>113      <div class="tiny-icon"></div>114      <div class="tiny-icon"></div>115      <div class="dot"></div>116      <div class="tiny-icon"></div>117      <div class="tiny-icon"></div>118    </div>119  </div>120 121  <!-- App continue pill -->122  <div class="top-strip">123    <div class="app-pill">124      <div class="note-icon">Note</div>125      <div class="pill-text">126        <div class="pill-line-1">Continue to app</div>127        <div class="pill-line-2">Super Note</div>128      </div>129      <svg class="chev" viewBox="0 0 24 24">130        <path d="M8 4l8 8-8 8" stroke="#1a73e8" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>131      </svg>132    </div>133  </div>134 135  <!-- Advertisement card -->136  <div class="card">137    <div class="card-header">Advertisement</div>138 139    <div class="media">140      <div style="font-size:42px;">[IMG: Adventure Park Video]</div>141      <div class="volume">142        <svg width="34" height="34" viewBox="0 0 24 24">143          <path d="M3 9v6h4l5 4V5L7 9H3z" fill="#333"/>144        </svg>145      </div>146    </div>147 148    <div class="content">149      <div class="title-row">150        <div class="title">E-O-D Adventure Park</div>151        <div class="logo-place">[e-o-d]</div>152      </div>153 154      <div class="rating">155        <div>4.0</div>156        <div class="stars">157          <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#ff8f00" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1L12 1.8l3.1 6 6.9 1-5 4.9 1.2 6.9z"/></svg>158          <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#ff8f00" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1L12 1.8l3.1 6 6.9 1-5 4.9 1.2 6.9z"/></svg>159          <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#ff8f00" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1L12 1.8l3.1 6 6.9 1-5 4.9 1.2 6.9z"/></svg>160          <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#ff8f00" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1L12 1.8l3.1 6 6.9 1-5 4.9 1.2 6.9z"/></svg>161          <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#bdbdbd" d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1L12 1.8l3.1 6 6.9 1-5 4.9 1.2 6.9z"/></svg>162        </div>163      </div>164 165      <div class="hr"></div>166 167      <div class="headline">Fun with Friends at e-o-d</div>168      <div class="sub">Fun in NCR</div>169 170      <div class="map">[IMG: Map of E-O-D Adventure Park]</div>171 172      <div class="info-row">173        <div class="city">New Delhi</div>174        <div class="open">OPEN</div>175        <div class="sep"></div>176        <div class="hours">11AM–8PM</div>177      </div>178 179      <div class="btn-row">180        <div class="btn light">Store info</div>181        <div class="btn primary">Directions</div>182      </div>183 184      <div class="footer-line"></div>185    </div>186  </div>187 188  <div class="info-icon">i</div>189 190  <!-- Gesture bar -->191  <div class="gesture"></div>192</div>193</body>194</html>