GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Phonebook UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #3b3b3b;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0;16    height: 120px; background: #c86f2c; color: #fff;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 36px; font-size: 40px; letter-spacing: 1px;19  }20  .status-icons { display: flex; align-items: center; gap: 26px; }21  .status-icons .dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.9; }22  .wifi-battery { display: flex; align-items: center; gap: 22px; font-size: 38px; }23  .battery { display: inline-flex; align-items: center; gap: 10px; }24  /* Simple wifi icon */25  .wifi svg, .battery svg { display: block; }26 27  /* App bar */28  .app-bar {29    position: absolute; top: 120px; left: 0; right: 0;30    height: 200px; background: #e27a2e; color: #fff;31    display: flex; align-items: center; justify-content: space-between;32    padding: 0 40px;33  }34  .title { font-size: 72px; font-weight: 700; }35  .app-actions { display: flex; align-items: center; gap: 40px; }36  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }37 38  /* Tabs */39  .tabs {40    position: absolute; top: 320px; left: 0; right: 0;41    height: 120px; background: #3b3b3b; color: #fff;42    display: flex; align-items: center; justify-content: center; gap: 220px;43  }44  .tab { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }45  .tab.active::after {46    content:""; position: absolute; bottom: -18px; left: 10%; right: 10%;47    height: 8px; background: #e27a2e; border-radius: 8px;48  }49 50  /* List area */51  .list {52    position: absolute; top: 440px; left: 0; right: 0; bottom: 200px;53    padding: 10px 40px 40px 40px; overflow: hidden;54  }55  .contact-item {56    display: flex; align-items: center;57    height: 150px; border-bottom: 1px solid rgba(255,255,255,0.06);58    color: #fff;59  }60  .avatar {61    width: 100px; height: 100px; border-radius: 50%;62    display: flex; align-items: center; justify-content: center;63    color: #fff; font-size: 48px; font-weight: 700; margin-right: 34px;64  }65  .name { font-size: 48px; }66 67  /* Alphabet index */68  .alpha-index {69    position: absolute; top: 520px; right: 24px;70    display: flex; flex-direction: column; gap: 46px;71    color: #c7c7c7; font-size: 44px; letter-spacing: 2px;72  }73 74  /* Floating buttons */75  .fab {76    position: absolute; bottom: 180px; right: 60px;77    width: 160px; height: 160px; background: #f28a33; color: #fff;78    border-radius: 50%; box-shadow: 0 12px 24px rgba(0,0,0,0.3);79    display: flex; align-items: center; justify-content: center;80  }81  .dial-fab {82    position: absolute; bottom: 180px; left: 50%; transform: translateX(-50%);83    width: 170px; height: 170px; background: #f28a33; color: #fff;84    border-radius: 50%; box-shadow: 0 12px 24px rgba(0,0,0,0.3);85    display: flex; align-items: center; justify-content: center;86  }87 88  /* Inserting pill */89  .pill {90    position: absolute; bottom: 320px; left: 50%; transform: translateX(-50%);91    background: #24343a; color: #fff; border-radius: 60px;92    padding: 22px 36px; display: flex; align-items: center; gap: 18px;93    box-shadow: 0 10px 20px rgba(0,0,0,0.35);94    font-size: 44px;95  }96  .pill .mini-avatar {97    width: 64px; height: 64px; border-radius: 50%;98    background: #f0b163; display: flex; align-items: center; justify-content: center;99  }100 101  /* Home bar */102  .home-indicator {103    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);104    width: 720px; height: 16px; background: #fff; border-radius: 16px; opacity: 0.85;105  }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status Bar -->112  <div class="status-bar">113    <div style="display:flex; align-items:center; gap:24px;">114      <div>1:17</div>115      <div class="status-icons">116        <div class="dot"></div>117        <div class="dot"></div>118        <div class="dot"></div>119      </div>120    </div>121    <div class="wifi-battery">122      <div class="wifi">123        <svg width="48" height="40" viewBox="0 0 48 40">124          <path d="M4 12c10-8 30-8 40 0" stroke="#fff" stroke-width="4" fill="none"/>125          <path d="M10 20c7-5 21-5 28 0" stroke="#fff" stroke-width="4" fill="none"/>126          <circle cx="24" cy="28" r="4" fill="#fff"/>127        </svg>128      </div>129      <div class="battery">130        <svg width="72" height="36" viewBox="0 0 72 36">131          <rect x="2" y="6" width="60" height="24" rx="4" ry="4" stroke="#fff" stroke-width="4" fill="none"/>132          <rect x="64" y="12" width="6" height="12" fill="#fff"/>133          <rect x="6" y="10" width="44" height="16" fill="#fff"/>134        </svg>135        <span>100%</span>136      </div>137    </div>138  </div>139 140  <!-- App Bar -->141  <div class="app-bar">142    <div class="title">Phonebook</div>143    <div class="app-actions">144      <!-- Search -->145      <div class="icon-btn">146        <svg width="64" height="64" viewBox="0 0 64 64">147          <circle cx="28" cy="28" r="16" stroke="#fff" stroke-width="6" fill="none"/>148          <line x1="42" y1="42" x2="58" y2="58" stroke="#fff" stroke-width="6" stroke-linecap="round"/>149        </svg>150      </div>151      <!-- Sort lines -->152      <div class="icon-btn">153        <svg width="64" height="64" viewBox="0 0 64 64">154          <line x1="12" y1="18" x2="52" y2="18" stroke="#fff" stroke-width="6" stroke-linecap="round"/>155          <line x1="22" y1="32" x2="52" y2="32" stroke="#fff" stroke-width="6" stroke-linecap="round"/>156          <line x1="32" y1="46" x2="52" y2="46" stroke="#fff" stroke-width="6" stroke-linecap="round"/>157        </svg>158      </div>159      <!-- List lines -->160      <div class="icon-btn">161        <svg width="64" height="64" viewBox="0 0 64 64">162          <circle cx="16" cy="18" r="6" fill="#fff"/>163          <line x1="28" y1="18" x2="52" y2="18" stroke="#fff" stroke-width="6" stroke-linecap="round"/>164          <circle cx="16" cy="34" r="6" fill="#fff"/>165          <line x1="28" y1="34" x2="52" y2="34" stroke="#fff" stroke-width="6" stroke-linecap="round"/>166          <circle cx="16" cy="50" r="6" fill="#fff"/>167          <line x1="28" y1="50" x2="52" y2="50" stroke="#fff" stroke-width="6" stroke-linecap="round"/>168        </svg>169      </div>170      <!-- More (vertical dots) -->171      <div class="icon-btn">172        <svg width="64" height="64" viewBox="0 0 64 64">173          <circle cx="32" cy="16" r="6" fill="#fff"/>174          <circle cx="32" cy="32" r="6" fill="#fff"/>175          <circle cx="32" cy="48" r="6" fill="#fff"/>176        </svg>177      </div>178    </div>179  </div>180 181  <!-- Tabs -->182  <div class="tabs">183    <div class="tab active">184      <!-- Person icon -->185      <svg width="76" height="76" viewBox="0 0 76 76">186        <circle cx="38" cy="24" r="14" fill="#fff"/>187        <path d="M12 64c0-14 14-22 26-22s26 8 26 22" fill="#fff"/>188      </svg>189    </div>190    <div class="tab">191      <!-- Star -->192      <svg width="76" height="76" viewBox="0 0 76 76">193        <polygon points="38,8 46,30 70,30 50,44 58,66 38,52 18,66 26,44 6,30 30,30" fill="#cfd2d6"/>194      </svg>195    </div>196    <div class="tab">197      <!-- Group icon -->198      <svg width="92" height="76" viewBox="0 0 92 76">199        <circle cx="28" cy="24" r="12" fill="#cfd2d6"/>200        <circle cx="64" cy="24" r="12" fill="#cfd2d6" opacity="0.9"/>201        <path d="M10 64c0-12 12-18 20-18s20 6 20 18" fill="#cfd2d6"/>202        <path d="M46 64c0-12 12-18 20-18s20 6 20 18" fill="#cfd2d6" opacity="0.9"/>203      </svg>204    </div>205  </div>206 207  <!-- Contacts List -->208  <div class="list">209    <div class="contact-item">210      <div class="avatar" style="background:#2f6db5;">A</div>211      <div class="name">Andreas Wagner</div>212    </div>213    <div class="contact-item">214      <div class="avatar" style="background:#2f6db5;">C</div>215      <div class="name">Clara</div>216    </div>217    <div class="contact-item">218      <div class="avatar" style="background:#2f6db5;">C</div>219      <div class="name">Clara Wagner</div>220    </div>221    <div class="contact-item">222      <div class="avatar" style="background:#2f6db5;">C</div>223      <div class="name">Contacts+ Support</div>224    </div>225    <div class="contact-item">226      <div class="avatar" style="background:#2f6db5;">J</div>227      <div class="name">JJJ</div>228    </div>229    <div class="contact-item">230      <div class="avatar" style="background:#a11c47;">M</div>231      <div class="name">MMM</div>232    </div>233    <div class="contact-item">234      <div class="avatar" style="background:#196c64;">M</div>235      <div class="name">Monu</div>236    </div>237    <div class="contact-item">238      <div class="avatar" style="background:#a11c47;">S</div>239      <div class="name">Sonu</div>240    </div>241    <div class="contact-item">242      <div class="avatar" style="background:#c85a28;">S</div>243      <div class="name">SSS</div>244    </div>245  </div>246 247  <!-- Alphabet Index -->248  <div class="alpha-index">249    <div>A</div>250    <div>C</div>251    <div>J</div>252    <div>M</div>253    <div>S</div>254  </div>255 256  <!-- Floating Action Button (Plus) -->257  <div class="fab">258    <svg width="96" height="96" viewBox="0 0 96 96">259      <line x1="48" y1="16" x2="48" y2="80" stroke="#fff" stroke-width="12" stroke-linecap="round"/>260      <line x1="16" y1="48" x2="80" y2="48" stroke="#fff" stroke-width="12" stroke-linecap="round"/>261    </svg>262  </div>263 264  <!-- Center Dialer FAB -->265  <div class="dial-fab">266    <svg width="120" height="120" viewBox="0 0 120 120">267      <!-- 3x3 keypad dots -->268      <circle cx="40" cy="40" r="8" fill="#fff"/>269      <circle cx="60" cy="40" r="8" fill="#fff"/>270      <circle cx="80" cy="40" r="8" fill="#fff"/>271      <circle cx="40" cy="60" r="8" fill="#fff"/>272      <circle cx="60" cy="60" r="8" fill="#fff"/>273      <circle cx="80" cy="60" r="8" fill="#fff"/>274      <circle cx="40" cy="80" r="8" fill="#fff"/>275      <circle cx="60" cy="80" r="8" fill="#fff"/>276      <circle cx="80" cy="80" r="8" fill="#fff"/>277    </svg>278  </div>279 280  <!-- Inserting pill -->281  <div class="pill">282    <div class="mini-avatar">283      <svg width="36" height="36" viewBox="0 0 36 36">284        <circle cx="18" cy="12" r="8" fill="#fff"/>285        <path d="M6 32c0-8 8-12 12-12s12 4 12 12" fill="#fff"/>286      </svg>287    </div>288    <div>Inserting...</div>289  </div>290 291  <!-- Home indicator -->292  <div class="home-indicator"></div>293 294</div>295</body>296</html>