GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Play Store - App Detail Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #121212;14 color: #FFFFFF;15 }16 .status-bar {17 position: absolute;18 top: 0; left: 0; right: 0;19 height: 80px;20 padding: 18px 32px;21 font-size: 30px;22 color: #E6E6E6;23 display: flex; align-items: center; justify-content: space-between;24 }25 .status-icons { display: flex; align-items: center; gap: 22px; }26 .icon {27 width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;28 color: #E6E6E6;29 }30 .top-appbar {31 position: absolute;32 top: 80px; left: 0; right: 0;33 height: 100px;34 display: flex; align-items: center; justify-content: space-between;35 padding: 0 24px;36 }37 .appbar-left { display: flex; align-items: center; gap: 16px; }38 .back-btn svg { width: 42px; height: 42px; fill: #E6E6E6; }39 .appbar-right { display: flex; align-items: center; gap: 28px; }40 .search-icon svg, .more-icon svg { width: 46px; height: 46px; fill: #E6E6E6; }41 42 .content {43 position: absolute;44 top: 180px; left: 0; right: 0;45 padding: 0 40px;46 }47 .app-header {48 display: grid;49 grid-template-columns: 160px 1fr;50 gap: 28px;51 align-items: center;52 }53 .app-icon {54 width: 150px; height: 150px; border-radius: 24px;55 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;56 display: flex; align-items: center; justify-content: center; text-align: center; font-size: 26px; padding: 10px;57 }58 .title { font-size: 56px; font-weight: 700; line-height: 1.12; margin-bottom: 14px; }59 .subline { font-size: 30px; color: #A9A9A9; }60 .chips { margin-top: 6px; font-size: 28px; color: #A9A9A9; }61 .cta-row {62 margin-top: 32px;63 display: flex; gap: 24px;64 }65 .btn {66 padding: 22px 36px; border-radius: 48px; font-size: 32px; font-weight: 600; cursor: default;67 }68 .btn-outline { border: 2px solid #3D3D3D; background: transparent; color: #E6E6E6; }69 .btn-primary { background: #9BB7FF; color: #0D1B3D; }70 71 .section {72 margin-top: 40px;73 border-top: 1px solid #1F1F1F;74 padding-top: 36px;75 }76 .section-title {77 font-size: 36px; font-weight: 600; color: #EDEDED; display: flex; align-items: center; justify-content: space-between;78 }79 .caret svg { width: 40px; height: 40px; fill: #BDBDBD; }80 81 .subheader {82 margin-top: 28px;83 font-size: 32px; color: #EDEDED; display: flex; align-items: center; justify-content: space-between;84 }85 .grid-row { margin-top: 24px; display: flex; gap: 28px; }86 .app-card {87 width: 300px;88 display: flex; flex-direction: column; gap: 14px;89 }90 .card-icon {91 width: 300px; height: 300px; border-radius: 40px;92 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;93 display: flex; align-items: center; justify-content: center; text-align: center; font-size: 26px; padding: 8px;94 }95 .card-title { font-size: 30px; color: #FFFFFF; line-height: 1.25; }96 .rating { font-size: 26px; color: #CFCFCF; }97 .dot { width: 8px; height: 8px; border-radius: 50%; background: #A9A9A9; display: inline-block; margin: 0 12px; }98 .arrow-right svg { width: 40px; height: 40px; fill: #BDBDBD; }99 .kebab svg { width: 32px; height: 32px; fill: #BDBDBD; }100 101 .about-row {102 margin-top: 60px; padding: 24px 0; border-top: 1px solid #1F1F1F;103 display: flex; align-items: center; justify-content: space-between;104 }105</style>106</head>107<body>108<div id="render-target">109 110 <!-- Status Bar -->111 <div class="status-bar">112 <div>12:50</div>113 <div class="status-icons">114 <div class="icon">70°</div>115 <!-- Location / alert icons simplified -->116 <div class="icon">117 <svg viewBox="0 0 24 24">118 <path fill="#E6E6E6" d="M12 2l6 6-6 14-6-14z"></path>119 </svg>120 </div>121 <div class="icon">122 <svg viewBox="0 0 24 24">123 <path fill="#E6E6E6" d="M4 4h16v4H4zm0 6h13v4H4zm0 6h10v4H4z"></path>124 </svg>125 </div>126 <div class="icon">127 <svg viewBox="0 0 24 24">128 <rect x="3" y="7" width="18" height="10" rx="2" ry="2" fill="#E6E6E6"></rect>129 <rect x="20.5" y="10" width="1.5" height="4" fill="#E6E6E6"></rect>130 </svg>131 </div>132 </div>133 </div>134 135 <!-- Top App Bar -->136 <div class="top-appbar">137 <div class="appbar-left">138 <div class="back-btn">139 <svg viewBox="0 0 24 24">140 <path d="M15 6l-6 6 6 6" stroke="#E6E6E6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>141 </svg>142 </div>143 </div>144 <div class="appbar-right">145 <div class="search-icon">146 <svg viewBox="0 0 24 24">147 <circle cx="11" cy="11" r="7" fill="none" stroke="#E6E6E6" stroke-width="2"></circle>148 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#E6E6E6" stroke-width="2"></line>149 </svg>150 </div>151 <div class="more-icon">152 <svg viewBox="0 0 24 24">153 <circle cx="12" cy="5" r="2"></circle>154 <circle cx="12" cy="12" r="2"></circle>155 <circle cx="12" cy="19" r="2"></circle>156 </svg>157 </div>158 </div>159 </div>160 161 <!-- Main Content -->162 <div class="content">163 <div class="app-header">164 <div class="app-icon">[IMG: App Icon]</div>165 <div>166 <div class="title">To Do List with<br>Reminder</div>167 <div class="subline">tact</div>168 <div class="chips">Contains ads</div>169 170 <div class="cta-row">171 <div class="btn btn-outline">Uninstall</div>172 <div class="btn btn-primary">Open</div>173 </div>174 </div>175 </div>176 177 <!-- "Available on more devices" -->178 <div class="section">179 <div class="section-title">180 <span>Available on more devices</span>181 <span class="caret">182 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>183 </span>184 </div>185 186 <!-- Suggested -->187 <div class="subheader">188 <span>Sponsored <span class="dot"></span> Suggested for you</span>189 <span class="kebab">190 <svg viewBox="0 0 24 24">191 <circle cx="5" cy="12" r="2"></circle>192 <circle cx="12" cy="12" r="2"></circle>193 <circle cx="19" cy="12" r="2"></circle>194 </svg>195 </span>196 </div>197 198 <div class="grid-row">199 <div class="app-card">200 <div class="card-icon">[IMG: PepTalk Icon]</div>201 <div class="card-title">PepTalk: Daily Motivation App</div>202 <div class="rating">4.7 ★</div>203 </div>204 205 <div class="app-card">206 <div class="card-icon">[IMG: MARKS & SPENCER Icon]</div>207 <div class="card-title">M&S India</div>208 <div class="rating">Installed</div>209 </div>210 211 <div class="app-card">212 <div class="card-icon">[IMG: The Hindu Icon]</div>213 <div class="card-title">The Hindu – News & more</div>214 <div class="rating">4.4 ★</div>215 </div>216 </div>217 218 <!-- More apps to try -->219 <div class="subheader" style="margin-top:44px;">220 <span>More apps to try</span>221 <span class="arrow-right">222 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>223 </span>224 </div>225 226 <div class="grid-row">227 <div class="app-card">228 <div class="card-icon">[IMG: Khan Academy Kids Icon]</div>229 <div class="card-title">Khan Academy Kids: Learning!</div>230 <div class="rating">4.5 ★</div>231 </div>232 233 <div class="app-card">234 <div class="card-icon">[IMG: adidas Running Icon]</div>235 <div class="card-title">adidas Running: Run Tracker</div>236 <div class="rating">4.5 ★</div>237 </div>238 239 <div class="app-card">240 <div class="card-icon">[IMG: Table Notes Icon]</div>241 <div class="card-title">Table Notes - Mobile Excel</div>242 <div class="rating">4.2 ★</div>243 </div>244 </div>245 </div>246 247 <!-- About this app -->248 <div class="about-row">249 <div style="font-size: 40px; font-weight: 600;">About this app</div>250 <div class="arrow-right">251 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>252 </div>253 </div>254 </div>255 256</div>257</body>258</html>