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>Forward Message UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #111;12  }13 14  /* Status bar */15  .status-bar { height: 90px; display: flex; align-items: center; padding: 0 32px; font-size: 34px; color:#111; }16  .status-bar .time { flex: 1; }17  .status-icons { display:flex; align-items:center; gap: 22px; }18  .icon { display: inline-flex; align-items: center; justify-content: center; }19  .icon svg { display:block; }20 21  /* App bar */22  .app-bar { height: 120px; display:flex; align-items:center; padding: 0 12px; border-bottom: 1px solid #eaeaea; }23  .back-btn { width: 96px; height: 96px; display:flex; align-items:center; justify-content:center; }24  .back-btn svg { width: 46px; height: 46px; stroke:#222; stroke-width: 6; fill:none; }25  .title { font-size: 56px; font-weight: 700; color:#222; }26 27  /* Content area */28  .content { position: absolute; left: 0; right: 0; top: 210px; bottom: 0; overflow: auto; padding: 28px 36px 220px; }29 30  /* Forward box */31  .forward-box { background:#edf3f9; border-radius: 26px; padding: 28px; }32  .msg-preview {33    position: relative; background:#fff; border:1px solid #e9e9e9; border-radius: 24px;34    padding: 36px 36px 44px 48px; box-shadow: 0 2px 6px rgba(0,0,0,0.06);35  }36  .msg-preview .accent { position:absolute; left:0; top:0; bottom:0; width:10px; background:#1677ff; border-radius: 24px 0 0 24px; }37  .msg-preview .reply-icon { position:absolute; left:20px; top:18px; }38  .msg-text { font-size: 44px; color:#333; margin-top: 10px; margin-left: 18px; }39  .optional { margin-top: 28px; color:#8a8a8a; font-size: 40px; }40 41  /* Search field */42  .search-field {43    margin-top: 24px; height: 110px; background:#f1f1f1; border-radius: 28px;44    display:flex; align-items:center; padding: 0 28px; color:#8a8a8a; font-size: 40px;45  }46  .search-field .search-icon { margin-right: 18px; }47  .search-field .search-icon svg { width: 44px; height: 44px; stroke:#9e9e9e; stroke-width: 6; fill:none; }48 49  .section-title { margin: 28px 0 14px; color:#777; font-weight: 700; font-size: 36px; }50 51  /* Contacts */52  .contact-row { display:flex; align-items:center; padding: 26px 6px; }53  .avatar {54    width: 112px; height: 112px; background:#E0E0E0; border:1px solid #BDBDBD;55    display:flex; align-items:center; justify-content:center; color:#757575; font-size: 26px; position: relative;56  }57  .avatar.circle { border-radius: 50%; }58  .avatar.square { border-radius: 22px; }59  .status-dot { position:absolute; right:6px; bottom:6px; width:18px; height:18px; background:#2ecc71; border-radius:50%; border:2px solid #fff; }60  .contact-info { flex: 1; margin-left: 26px; }61  .name { font-size: 44px; font-weight: 700; color:#222; display:flex; align-items:center; gap: 10px; }62  .verified-icon { width: 34px; height: 34px; display:inline-flex; }63  .divider { height:1px; background:#e6e6e6; margin-left: 160px; }64 65  /* Buttons */66  .btn { border:none; height: 86px; padding: 0 44px; border-radius: 50px; font-size: 36px; font-weight: 600; }67  .btn-blue { color:#fff; background: linear-gradient(135deg, #2DB6F7, #0C75D7); }68  .btn-outline { color:#0C75D7; background: transparent; border:2px solid #A9D1FF; display:flex; align-items:center; gap:10px; justify-content:center; }69 70  /* Bottom actions */71  .done-btn {72    position: absolute; bottom: 148px; left: 50%; transform: translateX(-50%);73    width: 320px; height: 112px; border-radius: 60px; border:none;74    background: linear-gradient(135deg, #2DB6F7, #0C75D7); color:#fff; font-size: 44px; font-weight:700;75  }76  .home-indicator { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); width: 360px; height: 12px; background:#8d8d8d; border-radius: 6px; opacity: .8; }77</style>78</head>79<body>80<div id="render-target">81 82  <!-- Status bar -->83  <div class="status-bar">84    <div class="time">3:13</div>85    <div class="status-icons">86      <span class="icon" title="wifi">87        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">88          <path d="M2 8c5-5 15-5 20 0"></path>89          <path d="M5 11c3.5-3.5 10.5-3.5 14 0"></path>90          <path d="M8 14c2-2 6-2 8 0"></path>91          <circle cx="12" cy="18" r="1.6" fill="#444"></circle>92        </svg>93      </span>94      <span class="icon" title="battery">95        <svg width="46" height="46" viewBox="0 0 30 18" fill="none" stroke="#444" stroke-width="2">96          <rect x="1" y="3" width="24" height="12" rx="2"></rect>97          <rect x="25" y="6" width="3" height="6" rx="1" fill="#444" stroke="#444"></rect>98          <rect x="3" y="5" width="18" height="8" rx="1" fill="#444" stroke="#444"></rect>99        </svg>100      </span>101    </div>102  </div>103 104  <!-- Top app bar -->105  <div class="app-bar">106    <div class="back-btn" aria-label="Back">107      <svg viewBox="0 0 24 24">108        <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"></path>109      </svg>110    </div>111    <div class="title">Forward Message</div>112  </div>113 114  <!-- Scrollable content -->115  <div class="content">116 117    <!-- Forward box with preview -->118    <div class="forward-box">119      <div class="msg-preview">120        <div class="accent"></div>121        <div class="reply-icon">122          <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#1d66d2" stroke-width="2.2">123            <path d="M10 7 L6 11 L10 15" stroke-linecap="round" stroke-linejoin="round"></path>124            <path d="M6 11h7a5 5 0 015 5" stroke-linecap="round"></path>125          </svg>126        </div>127        <div class="msg-text">How are you doing?</div>128      </div>129      <div class="optional">Type a message here (optional)</div>130    </div>131 132    <!-- Search -->133    <div class="search-field">134      <span class="search-icon">135        <svg viewBox="0 0 24 24">136          <circle cx="11" cy="11" r="7"></circle>137          <path d="M20 20 L16 16"></path>138        </svg>139      </span>140      <span>Search people and groups</span>141    </div>142 143    <div class="section-title">Suggested</div>144 145    <!-- Contact 1 -->146    <div class="contact-row">147      <div class="avatar square">[IMG: Avatar]</div>148      <div class="contact-info">149        <div class="name">150          Natalie Larson (You)151          <span class="verified-icon" aria-label="verified">152            <svg viewBox="0 0 24 24">153              <circle cx="12" cy="12" r="11" fill="#1da1f2"></circle>154              <path d="M7 12l3 3 6-6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>155            </svg>156          </span>157        </div>158      </div>159      <button class="btn btn-blue">Send</button>160    </div>161    <div class="divider"></div>162 163    <!-- Contact 2 -->164    <div class="contact-row">165      <div class="avatar circle">[IMG: Avatar RW]<span class="status-dot"></span></div>166      <div class="contact-info">167        <div class="name">Richard Wagner</div>168      </div>169      <button class="btn btn-blue">Send</button>170    </div>171    <div class="divider"></div>172 173    <!-- Contact 3 -->174    <div class="contact-row">175      <div class="avatar circle">[IMG: Avatar]</div>176      <div class="contact-info">177        <div class="name">Amelia miller</div>178      </div>179      <button class="btn btn-outline">180        <svg class="check" viewBox="0 0 24 24">181          <path d="M6 12l4 4 8-8" stroke="#0C75D7" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>182        </svg>183        Sent184      </button>185    </div>186    <div class="divider"></div>187 188    <!-- Contact 4 -->189    <div class="contact-row">190      <div class="avatar circle">[IMG: Group]</div>191      <div class="contact-info">192        <div class="name">Friends</div>193      </div>194      <button class="btn btn-blue">Send</button>195    </div>196    <div class="divider"></div>197 198    <!-- Contact 5 -->199    <div class="contact-row">200      <div class="avatar square">[IMG: Bing logo]</div>201      <div class="contact-info">202        <div class="name">203          Bing204          <span class="verified-icon" aria-label="verified">205            <svg viewBox="0 0 24 24">206              <circle cx="12" cy="12" r="11" fill="#1da1f2"></circle>207              <path d="M7 12l3 3 6-6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>208            </svg>209          </span>210        </div>211      </div>212      <button class="btn btn-blue">Send</button>213    </div>214    <div class="divider"></div>215 216    <!-- Contact 6 -->217    <div class="contact-row">218      <div class="avatar square">[IMG: Skype logo]</div>219      <div class="contact-info">220        <div class="name">221          Skype222          <span class="verified-icon" aria-label="verified">223            <svg viewBox="0 0 24 24">224              <circle cx="12" cy="12" r="11" fill="#1da1f2"></circle>225              <path d="M7 12l3 3 6-6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>226            </svg>227          </span>228        </div>229      </div>230      <button class="btn btn-blue">Send</button>231    </div>232 233    <div class="section-title" style="margin-top: 28px;">People</div>234 235  </div>236 237  <!-- Bottom Done button -->238  <button class="done-btn">Done</button>239  <div class="home-indicator"></div>240</div>241</body>242</html>