GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android Home Screen Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    border-radius: 32px;13    box-shadow: 0 10px 30px rgba(0,0,0,0.25);14    background: #c9c1b6;15  }16  /* Wallpaper placeholder */17  .wallpaper {18    position: absolute;19    left: 0; top: 0;20    width: 1080px; height: 2400px;21    background: #E0E0E0;22    border: 1px solid #BDBDBD;23    color: #757575;24    display: flex; align-items: center; justify-content: center;25    font-size: 32px; letter-spacing: 0.3px;26  }27 28  /* Status bar */29  .time {30    position: absolute; top: 26px; left: 28px;31    color: #ffffff; font-size: 48px; font-weight: 600;32    text-shadow: 0 1px 2px rgba(0,0,0,0.35);33  }34  .status-icons {35    position: absolute; top: 30px; right: 28px;36    display: flex; align-items: center; gap: 18px;37    color: #fff;38  }39  .status-icons svg { width: 34px; height: 34px; fill: #fff; opacity: 0.95; }40 41  /* Date text */42  .date {43    position: absolute; top: 160px; left: 40px;44    color: #ffffff; font-size: 64px; font-weight: 600;45    text-shadow: 0 2px 4px rgba(0,0,0,0.35);46  }47 48  /* App icon + label */49  .app {50    position: absolute;51    width: 150px; height: 150px;52    background: #ffffff; border-radius: 50%;53    box-shadow: 0 8px 18px rgba(0,0,0,0.25);54    display: flex; align-items: center; justify-content: center;55  }56  .label {57    position: absolute;58    width: 300px;59    color: #ffffff; font-size: 40px; font-weight: 600;60    text-shadow: 0 2px 3px rgba(0,0,0,0.35);61  }62  .app svg { width: 92px; height: 92px; }63 64  /* Google search bar */65  .search-bar {66    position: absolute; left: 70px; top: 2060px;67    width: 940px; height: 130px;68    background: #ffffff; border-radius: 70px;69    box-shadow: 0 8px 18px rgba(0,0,0,0.25);70    display: flex; align-items: center; justify-content: space-between;71    padding: 0 28px;72  }73  .g-logo {74    display: inline-block; width: 72px; height: 72px; border-radius: 50%;75    position: relative;76  }77  .g-logo::before, .g-logo::after { content: ""; position: absolute; }78  .g-logo { background: linear-gradient(90deg,#4285F4 0 25%,#34A853 25% 50%,#FBBC05 50% 75%,#EA4335 75%); }79 80  .search-actions {81    display: flex; align-items: center; gap: 26px;82  }83  .action {84    width: 84px; height: 84px; border-radius: 50%;85    display: flex; align-items: center; justify-content: center;86    background: #f3f3f3;87  }88  /* Home gesture pill */89  .home-pill {90    position: absolute; left: 350px; top: 2280px;91    width: 380px; height: 12px; border-radius: 12px; background: rgba(0,0,0,0.45);92  }93</style>94</head>95<body>96<div id="render-target">97 98  <div class="wallpaper">[IMG: Colorful abstract wallpaper]</div>99 100  <div class="time">9:35</div>101 102  <div class="status-icons">103    <!-- Do Not Disturb icon -->104    <svg viewBox="0 0 24 24">105      <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"></circle>106      <rect x="6" y="11" width="12" height="2" fill="#fff"></rect>107    </svg>108    <!-- Diamond/Location-ish icon -->109    <svg viewBox="0 0 24 24">110      <polygon points="12,3 21,12 12,21 3,12" fill="none" stroke="#fff" stroke-width="2"></polygon>111    </svg>112    <!-- Battery icon -->113    <svg viewBox="0 0 36 24">114      <rect x="1" y="5" width="28" height="14" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"></rect>115      <rect x="30" y="9" width="4" height="6" rx="1" fill="#fff"></rect>116      <rect x="4" y="8" width="22" height="8" fill="#fff"></rect>117    </svg>118    <span style="color:#fff;font-size:28px;font-weight:600;">100%</span>119  </div>120 121  <div class="date">Fri, Dec 1</div>122 123  <!-- Row 1: Play Store, Gmail, YouTube -->124  <div class="app" style="left: 100px; top: 1450px;">125    <!-- Play Store -->126    <svg viewBox="0 0 100 100">127      <polygon points="20,20 80,50 20,80" fill="#4CAF50"></polygon>128      <polygon points="25,25 55,50 25,75" fill="#2196F3" opacity="0.9"></polygon>129      <polygon points="30,30 50,50 30,70" fill="#FFC107" opacity="0.9"></polygon>130    </svg>131  </div>132  <div class="label" style="left: 20px; top: 1610px; text-align:center;">Play Store</div>133 134  <div class="app" style="left: 465px; top: 1450px;">135    <!-- Gmail -->136    <svg viewBox="0 0 100 100">137      <rect x="18" y="26" width="64" height="48" rx="10" fill="#fff" stroke="#E0E0E0" stroke-width="4"></rect>138      <path d="M18,34 L50,56 L82,34" fill="none" stroke="#EA4335" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"></path>139      <path d="M18,34 L18,74" stroke="#34A853" stroke-width="10"></path>140      <path d="M82,34 L82,74" stroke="#4285F4" stroke-width="10"></path>141    </svg>142  </div>143  <div class="label" style="left: 385px; top: 1610px; text-align:center;">Gmail</div>144 145  <div class="app" style="left: 830px; top: 1450px;">146    <!-- YouTube -->147    <svg viewBox="0 0 100 100">148      <rect x="18" y="28" width="64" height="44" rx="12" fill="#FF0000"></rect>149      <polygon points="42,50 58,58 58,42" fill="#fff"></polygon>150    </svg>151  </div>152  <div class="label" style="left: 750px; top: 1610px; text-align:center;">YouTube</div>153 154  <!-- Row 2: Phone, Messages, Amazon, Camera -->155  <div class="app" style="left: 90px; top: 1810px;">156    <!-- Phone -->157    <svg viewBox="0 0 100 100">158      <path d="M32,26 C44,42 58,56 74,68 C70,74 64,78 58,74 C49,68 40,60 32,50 C26,44 26,34 32,26 Z" fill="#1E88E5"></path>159    </svg>160  </div>161  <div class="label" style="left: 10px; top: 1970px; text-align:center;">Phone</div>162 163  <div class="app" style="left: 360px; top: 1810px;">164    <!-- Messages -->165    <svg viewBox="0 0 100 100">166      <rect x="18" y="22" width="64" height="46" rx="12" fill="#1976D2"></rect>167      <polygon points="40,68 44,54 18,54" fill="#1976D2"></polygon>168      <circle cx="38" cy="44" r="6" fill="#fff"></circle>169      <circle cx="54" cy="44" r="6" fill="#fff"></circle>170      <circle cx="70" cy="44" r="6" fill="#fff"></circle>171    </svg>172  </div>173  <div class="label" style="left: 280px; top: 1970px; text-align:center;">Messages</div>174 175  <div class="app" style="left: 630px; top: 1810px; background:#e9d4b4;">176    <!-- Amazon (smile) -->177    <svg viewBox="0 0 100 100">178      <path d="M24,60 C40,70 60,70 76,60" fill="none" stroke="#000" stroke-width="6" stroke-linecap="round"></path>179      <rect x="62" y="30" width="16" height="8" rx="2" fill="#2E7D32" transform="rotate(20 70 34)"></rect>180    </svg>181  </div>182  <div class="label" style="left: 550px; top: 1970px; text-align:center;">Amazon</div>183 184  <div class="app" style="left: 900px; top: 1810px;">185    <!-- Camera -->186    <svg viewBox="0 0 100 100">187      <rect x="20" y="30" width="60" height="40" rx="8" fill="#455A64"></rect>188      <circle cx="50" cy="50" r="12" fill="#90CAF9"></circle>189      <rect x="32" y="22" width="12" height="8" rx="3" fill="#78909C"></rect>190    </svg>191  </div>192  <div class="label" style="left: 820px; top: 1970px; text-align:center;">Camera</div>193 194  <!-- Google Search Bar -->195  <div class="search-bar">196    <div class="g-logo"></div>197    <div class="search-actions">198      <!-- Mic -->199      <div class="action">200        <svg viewBox="0 0 24 24">201          <rect x="9" y="5" width="6" height="10" rx="3" fill="#4285F4"></rect>202          <path d="M6 11 C6 15 9 17 12 17 C15 17 18 15 18 11" fill="none" stroke="#EA4335" stroke-width="2"></path>203          <rect x="11" y="17" width="2" height="4" fill="#34A853"></rect>204          <rect x="8" y="21" width="8" height="2" rx="1" fill="#FBBC05"></rect>205        </svg>206      </div>207      <!-- Google Lens/Camera -->208      <div class="action">209        <svg viewBox="0 0 24 24">210          <rect x="5" y="6" width="14" height="12" rx="3" fill="#4285F4"></rect>211          <circle cx="12" cy="12" r="4" fill="#fff"></circle>212          <circle cx="12" cy="12" r="2" fill="#34A853"></circle>213        </svg>214      </div>215    </div>216  </div>217 218  <div class="home-pill"></div>219 220</div>221</body>222</html>