GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Play Store Mock - ToDodo</title>5<style>6  body { margin:0; padding:0; background:transparent; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#121212; color:#ffffff; font-family: Arial, Helvetica, sans-serif;10  }11  .status-bar {12    height:90px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;13    color:#e0e0e0; font-size:34px;14  }15  .status-left, .status-right { display:flex; align-items:center; gap:22px; }16  .top-actions {17    position:absolute; top:90px; left:0; right:0; height:110px;18    display:flex; align-items:center; justify-content:space-between; padding:0 28px;19  }20  .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }21  .content { padding:0 44px; margin-top:170px; }22  .app-header { display:flex; gap:28px; align-items:center; }23  .app-icon {24    width:170px; height:170px; border-radius:36px; background:#E0E0E0; border:1px solid #BDBDBD;25    display:flex; align-items:center; justify-content:center; color:#757575; font-weight:bold;26  }27  .app-title { font-size:56px; line-height:64px; font-weight:700; margin-bottom:12px; }28  .dev-line { font-size:36px; color:#AECBFA; margin-top:8px; }29  .subtle { font-size:30px; color:#bdbdbd; margin-top:8px; }30  .cta-row { margin-top:34px; display:flex; gap:22px; }31  .btn-outline {32    flex:0 0 455px; height:118px; border-radius:60px; border:2px solid #3a3a3a; color:#ffffff;33    display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:600; background:#1e1e1e;34  }35  .btn-primary {36    flex:1; height:118px; border-radius:60px; background:#AECBFA; color:#0f172a;37    display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:700;38  }39  .section-line {40    margin-top:46px; display:flex; align-items:center; justify-content:space-between;41    font-size:40px; color:#ffffff;42  }43  .section-subtle { color:#bdbdbd; font-size:32px; }44  .cards-row { margin-top:28px; display:flex; gap:36px; }45  .app-card { width:300px; }46  .card-icon {47    width:300px; height:300px; border-radius:38px; background:#E0E0E0; border:1px solid #BDBDBD;48    display:flex; align-items:center; justify-content:center; color:#757575; text-align:center; padding:10px; font-size:26px;49  }50  .card-title { margin-top:18px; font-size:34px; line-height:42px; }51  .rating { margin-top:10px; font-size:30px; color:#bdbdbd; }52  .section-header {53    margin-top:56px; display:flex; align-items:center; justify-content:space-between; font-size:46px;54  }55  .footer-line {56    position:absolute; bottom:40px; left:44px; right:44px;57    display:flex; align-items:center; justify-content:space-between; font-size:52px; color:#ffffff;58  }59  /* Simple inline SVG styling */60  svg { fill:#e0e0e0; }61  .right-icon svg { fill:#bdbdbd; }62</style>63</head>64<body>65<div id="render-target">66 67  <!-- Status bar -->68  <div class="status-bar">69    <div class="status-left">70      <span>10:14</span>71      <span>🔔</span>72      <span>⛁</span>73      <span>88°</span>74      <span>▲</span>75      <span>•</span>76    </div>77    <div class="status-right">78      <span>📶</span>79      <span>🔋</span>80    </div>81  </div>82 83  <!-- Top actions: back, search, kebab -->84  <div class="top-actions">85    <div class="icon-btn">86      <svg width="40" height="40" viewBox="0 0 24 24">87        <path d="M15.5 5l-7 7 7 7 1.5-1.5L11 12l6-6-1.5-1z"></path>88      </svg>89    </div>90    <div style="display:flex; gap:22px;">91      <div class="icon-btn">92        <svg width="40" height="40" viewBox="0 0 24 24">93          <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm9.7 1.3-4.4-4.4 1.4-1.4 4.4 4.4-1.4 1.4z"></path>94        </svg>95      </div>96      <div class="icon-btn">97        <svg width="40" height="40" viewBox="0 0 24 24">98          <path d="M12 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path>99        </svg>100      </div>101    </div>102  </div>103 104  <div class="content">105 106    <!-- App header -->107    <div class="app-header">108      <div class="app-icon">[IMG: App Icon "Do"]</div>109      <div>110        <div class="app-title">ToDodo: To Do List &amp; Reminder</div>111        <div class="dev-line">MDev Mobile Apps</div>112        <div class="subtle">In-app purchases</div>113      </div>114    </div>115 116    <div class="cta-row">117      <div class="btn-outline">Uninstall</div>118      <div class="btn-primary">Open</div>119    </div>120 121    <div class="section-line">122      <div>Available on more devices</div>123      <div class="right-icon">124        <svg width="40" height="40" viewBox="0 0 24 24">125          <path d="M7 10l5 5 5-5H7z"></path>126        </svg>127      </div>128    </div>129 130    <div class="section-line" style="margin-top:40px;">131      <div><span class="section-subtle">Sponsored</span> · Suggested for you</div>132      <div class="right-icon">133        <svg width="40" height="40" viewBox="0 0 24 24">134          <path d="M12 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 10a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"></path>135        </svg>136      </div>137    </div>138 139    <!-- Suggested apps row -->140    <div class="cards-row">141      <div class="app-card">142        <div class="card-icon">[IMG: Economist App Icon]</div>143        <div class="card-title">Economist</div>144        <div class="rating">4.4 ★</div>145      </div>146      <div class="app-card">147        <div class="card-icon">[IMG: MultiNotes Sticky Notes Icon]</div>148        <div class="card-title">MultiNotes -<br>Reminder Notes</div>149        <div class="rating">4.6 ★</div>150      </div>151      <div class="app-card">152        <div class="card-icon">[IMG: M&amp;S India Icon]</div>153        <div class="card-title">M&amp;S India</div>154        <div class="rating">Installed</div>155      </div>156    </div>157 158    <!-- More apps to try -->159    <div class="section-header">160      <div>More apps to try</div>161      <div class="right-icon">162        <svg width="44" height="44" viewBox="0 0 24 24">163          <path d="M8 4l8 8-8 8-1.4-1.4L13.2 12 6.6 5.4 8 4z"></path>164        </svg>165      </div>166    </div>167 168    <div class="cards-row" style="margin-top:28px;">169      <div class="app-card">170        <div class="card-icon">[IMG: Face Yoga Exercises Icon]</div>171        <div class="card-title">Face Yoga Exercises,<br>Skin Care</div>172        <div class="rating">4.8 ★</div>173      </div>174      <div class="app-card">175        <div class="card-icon">[IMG: Khan Academy Kids Bear Icon]</div>176        <div class="card-title">Khan Academy Kids:<br>Learning!</div>177        <div class="rating">4.5 ★</div>178      </div>179      <div class="app-card">180        <div class="card-icon">[IMG: Webfic - Fantastic Reading Icon]</div>181        <div class="card-title">Webfic - Fantastic<br>Reading</div>182        <div class="rating">4.0 ★</div>183      </div>184    </div>185 186  </div>187 188  <!-- Footer About section -->189  <div class="footer-line">190    <div>About this app</div>191    <div class="right-icon">192      <svg width="52" height="52" viewBox="0 0 24 24">193        <path d="M8 4l8 8-8 8-1.4-1.4L13.2 12 6.6 5.4 8 4z"></path>194      </svg>195    </div>196  </div>197 198</div>199</body>200</html>