GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Android Home Mock</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:11      radial-gradient(900px 900px at 80% 80%, rgba(0,0,0,0.25), transparent 60%),12      radial-gradient(1200px 1200px at 10% 20%, rgba(0,0,0,0.2), transparent 60%),13      linear-gradient(160deg, #708a79, #637b6e 60%, #4f675c);14  }15 16  /* Status bar */17  .status-bar{18    position:absolute; top:24px; left:28px; right:28px; height:80px; color:#fff;19    display:flex; align-items:center; justify-content:space-between; font-weight:600;20  }21  .status-left{ display:flex; align-items:center; gap:18px; font-size:40px; letter-spacing:1px; }22  .notif-dot{ width:20px; height:20px; border-radius:50%; background:#fff; opacity:0.85; }23  .status-right{ display:flex; align-items:center; gap:24px; }24  .sys-icon{ display:inline-flex; align-items:center; justify-content:center; }25  .sys-icon svg{ width:44px; height:44px; fill:#fff; }26 27  /* App grid */28  .app-grid{29    position:absolute; left:56px; right:56px; top:140px; 30    display:grid; grid-template-columns:repeat(4, 1fr);31    row-gap:110px; column-gap:60px;32  }33  .app{34    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;35  }36  .icon{37    width:156px; height:156px; border-radius:50%;38    display:flex; align-items:center; justify-content:center;39    color:#fff; font-weight:700; font-size:56px; box-shadow:0 8px 16px rgba(0,0,0,0.25);40  }41  .w{ background:#ffffff; color:#2c2c2c; } /* white type icon variant */42  .label{43    margin-top:18px; width:220px; text-align:center; color:#ffffff; font-size:32px;44    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;45    text-shadow:0 1px 2px rgba(0,0,0,0.35);46  }47 48  /* Dock row */49  .dock{50    position:absolute; left:0; right:0; bottom:430px;51    display:flex; justify-content:center; gap:120px;52  }53  .dock .icon{ width:150px; height:150px; font-size:50px; }54 55  /* Search bar */56  .search-bar{57    position:absolute; left:56px; right:56px; bottom:190px;58    height:120px; background:#1f1f1f; border-radius:60px; color:#bdbdbd;59    display:flex; align-items:center; padding:0 30px; box-shadow:0 10px 24px rgba(0,0,0,0.4);60  }61  .g-badge{62    width:74px; height:74px; border-radius:50%; background:#2b2b2b; 63    display:flex; align-items:center; justify-content:center; margin-right:22px;64    font-weight:800; font-size:40px; color:#fff;65    text-shadow:0 1px 0 rgba(0,0,0,0.35);66  }67  .g-badge span{ background: linear-gradient(90deg, #3cba54, #f4c20d, #db3236, #4885ed); -webkit-background-clip:text; color:transparent; }68  .search-spacer{ flex:1; }69  .circle-btn{70    width:74px; height:74px; border-radius:50%; background:#2b2b2b; margin-left:18px;71    display:flex; align-items:center; justify-content:center;72  }73  .circle-btn svg{ width:42px; height:42px; fill:#ffffff; }74 75  /* Bottom navigation pill */76  .nav-pill{77    position:absolute; left:50%; transform:translateX(-50%);78    bottom:96px; width:210px; height:12px; background:#9aa0a6; border-radius:8px; opacity:0.8;79  }80</style>81</head>82<body>83<div id="render-target">84 85  <!-- Status bar -->86  <div class="status-bar">87    <div class="status-left">88      <div>9:48</div>89      <div class="notif-dot" style="opacity:.9;"></div>90      <div class="notif-dot" style="opacity:.9;"></div>91      <div class="notif-dot" style="opacity:.9;"></div>92      <div class="notif-dot" style="width:26px; height:26px; border-radius:6px;"></div>93      <div class="notif-dot" style="width:10px; height:10px;"></div>94    </div>95    <div class="status-right">96      <span class="sys-icon">97        <svg viewBox="0 0 24 24">98          <path d="M12 18a1 1 0 0 1-.7-.3 6 6 0 0 0-8.5 0 1 1 0 0 1-1.4-1.4 8 8 0 0 1 12 0A1 1 0 0 1 12 18zM16.6 13.4a1 1 0 0 1-.7-.3 9.5 9.5 0 0 0-13.4 0 1 1 0 0 1-1.4-1.4 11.5 11.5 0 0 1 16.2 0 1 1 0 0 1-.7 1.7zM21.2 8.8a1 1 0 0 1-.7-.3 13 13 0 0 0-18.4 0 1 1 0 1 1-1.4-1.4 15 15 0 0 1 21.2 0 1 1 0 0 1-.7 1.7z"/>99        </svg>100      </span>101      <span class="sys-icon">102        <svg viewBox="0 0 24 24">103          <path d="M16 4H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 2v8H8V6h8z"/>104        </svg>105      </span>106    </div>107  </div>108 109  <!-- App grid -->110  <div class="app-grid">111    <!-- Row 1 -->112    <div class="app"><div class="icon" style="background:#ffd54f; color:#2b2b2b;">B</div><div class="label">RapidBox</div></div>113    <div class="app"><div class="icon" style="background:#5c6bc0;">G</div><div class="label">Translate</div></div>114    <div class="app"><div class="icon" style="background:#2bb673;">T</div><div class="label">Translator …</div></div>115    <div class="app"><div class="icon" style="background:#37a8e0;">A</div><div class="label">Translate AI</div></div>116 117    <!-- Row 2 -->118    <div class="app"><div class="icon" style="background:#7b1fa2;">F</div><div class="label">Shop Of Th…</div></div>119    <div class="app"><div class="icon" style="background:#d32f2f;">🎤</div><div class="label">All Languag..</div></div>120    <div class="app"><div class="icon w"> </div><div class="label">File Manager</div></div>121    <div class="app"><div class="icon" style="background:#139bd0;">e</div><div class="label">Solid Explor…</div></div>122 123    <!-- Row 3 -->124    <div class="app"><div class="icon" style="background:#35aaf2;">A</div><div class="label">GoApp Store</div></div>125    <div class="app"><div class="icon" style="background:#7ea9ff;">A.</div><div class="label">apphunt</div></div>126    <div class="app"><div class="icon" style="background:#ff7d2c;">M</div><div class="label">APKMirror I…</div></div>127    <div class="app"><div class="icon" style="background:#1abc9c;">A</div><div class="label">APKPure</div></div>128 129    <!-- Row 4 -->130    <div class="app"><div class="icon w" style="color:#ff6b6b;">🧠</div><div class="label">Nuclino</div></div>131    <div class="app"><div class="icon" style="background:#ff8a65;">Q</div><div class="label">Quip</div></div>132    <div class="app"><div class="icon" style="background:#66bb6a;">O</div><div class="label">ONLYOFFI…</div></div>133    <div class="app"><div class="icon" style="background:#2c6fb0;">C</div><div class="label">CARS24</div></div>134 135    <!-- Row 5 -->136    <div class="app"><div class="icon w" style="color:#2d9bf0;">🚗</div><div class="label">Edmunds</div></div>137    <div class="app"><div class="icon" style="background:#355c9c;">✔</div><div class="label">True Value</div></div>138    <div class="app"><div class="icon w" style="color:#4bb7e8;">📅</div><div class="label">FitNotes</div></div>139    <div class="app"><div class="icon" style="background:#5bb8f6;">J</div><div class="label">JEFIT</div></div>140  </div>141 142  <!-- Dock -->143  <div class="dock">144    <div class="icon w">📞</div>145    <div class="icon w">💬</div>146    <div class="icon" style="background:#ea4335;">G</div>147    <div class="icon w">📷</div>148  </div>149 150  <!-- Search bar -->151  <div class="search-bar">152    <div class="g-badge"><span>G</span></div>153    <div style="color:#9aa0a6; font-size:34px;">Search</div>154    <div class="search-spacer"></div>155    <div class="circle-btn" title="Voice">156      <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3zm-6-3a1 1 0 1 0-2 0 8 8 0 0 0 7 7.94V21H9a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2h-2v-2.06A8 8 0 0 0 18 11a1 1 0 1 0-2 0 6 6 0 0 1-12 0z"/></svg>157    </div>158    <div class="circle-btn" title="Lens">159      <svg viewBox="0 0 24 24"><path d="M10 4a6 6 0 0 0-6 6v6a4 4 0 0 0 4 4h6a6 6 0 0 0 6-6V8a4 4 0 0 0-4-4h-6zm0 2h6a2 2 0 0 1 2 2v6a4 4 0 0 1-4 4H8a2 2 0 0 1-2-2v-6a4 4 0 0 1 4-4zM8 12a4 4 0 1 0 8 0 4 4 0 0 0-8 0zm2 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/></svg>160    </div>161  </div>162 163  <!-- Bottom navigation pill -->164  <div class="nav-pill"></div>165 166</div>167</body>168</html>