GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Phonebook UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #3f3f3f;13  }14 15  /* Header */16  .header {17    position: absolute; top: 0; left: 0; width: 1080px;18    background: #d9720a;19    box-shadow: 0 4px 12px rgba(0,0,0,0.35);20  }21  .status-bar {22    height: 88px; display: flex; align-items: center; justify-content: space-between;23    padding: 0 28px; color: #fff; font-size: 36px;24  }25  .status-left { display: flex; align-items: center; gap: 22px; }26  .status-right { display: flex; align-items: center; gap: 26px; }27  .status-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }28  .title-bar {29    height: 170px; display: flex; align-items: flex-end;30    padding: 0 40px 26px; color: #fff; font-weight: 700; font-size: 72px;31  }32 33  /* Content area */34  .content { position: absolute; top: 258px; left: 0; right: 0; bottom: 0; }35  .tab-row {36    height: 120px; display: flex; align-items: center; padding-left: 44px; color: #f5f5f5;37    position: relative;38  }39  .tab-row .underline {40    position: absolute; left: 44px; bottom: 0; width: 240px; height: 6px; background: #f28c28;41  }42  .tab-icon {43    width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;44    margin-right: 18px;45  }46  .list {47    padding-top: 12px;48  }49  .item {50    display: flex; align-items: center;51    padding: 26px 40px;52  }53  .avatar {54    width: 110px; height: 110px; border-radius: 55px; background: #0d86b3;55    color: #fff; font-size: 60px; font-weight: 700; display: flex; align-items: center; justify-content: center;56    margin-right: 34px;57    box-shadow: 0 4px 10px rgba(0,0,0,0.35);58  }59  .name { font-size: 50px; color: #eaeaea; white-space: nowrap; }60 61  /* Overflow menu */62  .menu {63    position: absolute; top: 180px; right: 32px;64    width: 640px; background: #424242; color: #e8e8e8;65    border-radius: 6px; box-shadow: 0 12px 22px rgba(0,0,0,0.5);66    overflow: hidden;67  }68  .menu-item {69    padding: 34px 36px; font-size: 44px; border-bottom: 1px solid rgba(255,255,255,0.08);70  }71  .menu-item:last-child { border-bottom: none; }72 73  /* Floating action buttons */74  .fab {75    position: absolute; bottom: 190px; width: 150px; height: 150px; border-radius: 75px;76    background: #f28c28; box-shadow: 0 10px 16px rgba(0,0,0,0.45);77    display: flex; align-items: center; justify-content: center;78  }79  .fab.grid { left: 430px; }80  .fab.plus { right: 80px; }81 82  /* Gesture bar */83  .gesture-bar {84    position: absolute; left: 0; bottom: 0; width: 1080px; height: 130px; background: #000;85  }86  .gesture-pill {87    position: absolute; left: 50%; transform: translateX(-50%);88    bottom: 44px; width: 260px; height: 12px; border-radius: 6px; background: #e6e6e6;89  }90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Orange header -->96  <div class="header">97    <div class="status-bar">98      <div class="status-left">99        <div>2:28</div>100        <!-- search icon -->101        <div class="status-icon">102          <svg width="36" height="36" viewBox="0 0 24 24">103            <circle cx="10" cy="10" r="6" stroke="white" stroke-width="2" fill="none"></circle>104            <line x1="14.5" y1="14.5" x2="21" y2="21" stroke="white" stroke-width="2"></line>105          </svg>106        </div>107        <!-- filter icon -->108        <div class="status-icon">109          <svg width="36" height="36" viewBox="0 0 24 24">110            <path d="M3 5h18M6 12h12M10 19h4" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"></path>111          </svg>112        </div>113      </div>114      <div class="status-right">115        <!-- Do not identify devices, approximate shapes -->116        <div class="status-icon">117          <svg width="36" height="36" viewBox="0 0 24 24">118            <circle cx="12" cy="12" r="9" stroke="white" stroke-width="2" fill="none"></circle>119            <circle cx="12" cy="12" r="2" fill="white"></circle>120          </svg>121        </div>122        <div class="status-icon">123          <svg width="36" height="36" viewBox="0 0 24 24">124            <path d="M3 10c3-3 15-3 18 0" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"></path>125            <path d="M6 13c2-2 10-2 12 0" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"></path>126          </svg>127        </div>128        <div class="status-icon">129          <svg width="36" height="36" viewBox="0 0 24 24">130            <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="white" stroke-width="2" fill="none"></rect>131            <rect x="4" y="8" width="10" height="8" fill="white"></rect>132          </svg>133        </div>134      </div>135    </div>136    <div class="title-bar">Phonebook</div>137  </div>138 139  <!-- Content -->140  <div class="content">141    <div class="tab-row">142      <div class="tab-icon">143        <svg width="56" height="56" viewBox="0 0 24 24">144          <circle cx="12" cy="8" r="4" fill="#f28c28"></circle>145          <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#f28c28"></path>146        </svg>147      </div>148      <div class="underline"></div>149    </div>150 151    <div class="list">152      <div class="item">153        <div class="avatar">A</div>154        <div class="name">Abdul Karim</div>155      </div>156      <div class="item">157        <div class="avatar" style="background:#0a77a6;">D</div>158        <div class="name">Dad Gregory Van Loon</div>159      </div>160      <div class="item">161        <div class="avatar" style="background:#0a77a6;">M</div>162        <div class="name">Mom Violet Van Loon</div>163      </div>164    </div>165  </div>166 167  <!-- Overflow menu -->168  <div class="menu">169    <div class="menu-item">Import contacts from a .vcf file</div>170    <div class="menu-item">Export contacts to a .vcf file</div>171    <div class="menu-item">Settings</div>172    <div class="menu-item">Privacy Policy</div>173  </div>174 175  <!-- Floating action buttons -->176  <div class="fab grid">177    <div style="display:grid; grid-template-columns: repeat(3, 18px); gap:12px;">178      <span style="width:18px;height:18px;background:#fff;border-radius:50%;"></span>179      <span style="width:18px;height:18px;background:#fff;border-radius:50%;"></span>180      <span style="width:18px;height:18px;background:#fff;border-radius:50%;"></span>181      <span style="width:18px;height:18px;background:#fff;border-radius:50%;"></span>182      <span style="width:18px;height:18px;background:#fff;border-radius:50%;"></span>183      <span style="width:18px;height:18px;background:#fff;border-radius:50%;"></span>184      <span style="width:18px;height:18px;background:#fff;border-radius:50%;"></span>185      <span style="width:18px;height:18px;background:#fff;border-radius:50%;"></span>186      <span style="width:18px;height:18px;background:#fff;border-radius:50%;"></span>187    </div>188  </div>189  <div class="fab plus">190    <svg width="70" height="70" viewBox="0 0 24 24">191      <path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="3" stroke-linecap="round"></path>192    </svg>193  </div>194 195  <!-- Bottom gesture area -->196  <div class="gesture-bar">197    <div class="gesture-pill"></div>198  </div>199 200</div>201</body>202</html>