GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Text UI</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;10    position: relative; overflow: hidden;11    background: #000000;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 110px;18    padding: 0 36px;19    display: flex; align-items: center; justify-content: space-between;20    color: #ffffff; font-size: 38px; font-weight: 600;21  }22  .status-right { display: flex; align-items: center; gap: 26px; }23  .status-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3; }24 25  /* Header with tabs */26  .header {27    position: absolute; top: 120px; left: 0; right: 0;28    padding: 0 40px;29    height: 120px;30    display: flex; align-items: center;31  }32  .close-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin-right: 10px; }33  .close-icon svg { width: 40px; height: 40px; stroke: #ffffff; stroke-width: 6; }34  .tab-list { display: flex; align-items: center; gap: 40px; }35  .tab { color: #8f8f8f; font-size: 48px; font-weight: 800; }36  .tab.active { color: #ffffff; position: relative; }37  .tab.active::after {38    content: ""; position: absolute; left: 0; right: 0; bottom: -16px;39    height: 8px; border-radius: 4px; background: #3D7AF7;40  }41 42  /* Hide Markdown option */43  .option {44    position: absolute; top: 235px; left: 40px;45    display: flex; align-items: center; gap: 18px;46    color: #bdbdbd; font-size: 40px; font-weight: 600;47  }48  .radio {49    width: 42px; height: 42px; border-radius: 50%;50    border: 4px solid #8a8a8a;51  }52 53  /* Card */54  .card {55    position: absolute; top: 360px; left: 40px;56    width: 1000px; background: #2f2f2f; border-radius: 26px;57    padding: 48px 40px;58    box-shadow: 0 8px 20px rgba(0,0,0,0.5);59    color: #fff;60  }61  .card-title { font-size: 64px; font-weight: 800; margin-bottom: 18px; }62  .card-sub { font-size: 42px; color: #cfcfcf; margin-bottom: 60px; }63  .card-source { font-size: 38px; color: #9c9c9c; line-height: 1.5; }64 65  /* Share bar at bottom */66  .share-bar {67    position: absolute; left: 0; right: 0; bottom: 120px;68    height: 280px; background: #1f1f1f;69    display: flex; align-items: center; justify-content: space-around;70    padding: 30px 40px;71    border-top: 1px solid #2b2b2b;72  }73  .share-item { width: 18%; display: flex; flex-direction: column; align-items: center; color: #d7d7d7; font-size: 34px; gap: 18px; }74  .icon-circle { width: 120px; height: 120px; border-radius: 60px; display: flex; align-items: center; justify-content: center; }75  .icon-circle svg { width: 64px; height: 64px; }76 77  .twitter-bg { background: #1DA1F2; }78  .google-bg { background: #ffffff; }79  .email-bg { background: #3b5bfd; }80  .copy-bg { background: #f2b84b; }81  .more-bg { background: #63e6b6; }82 83  /* Bottom gesture pill */84  .gesture {85    position: absolute; left: 50%; transform: translateX(-50%);86    bottom: 42px; width: 220px; height: 12px; border-radius: 8px; background: #eaeaea;87  }88</style>89</head>90<body>91<div id="render-target">92 93  <!-- Status Bar -->94  <div class="status-bar">95    <div class="status-left">8:17</div>96    <div class="status-right">97      <div class="status-icon">98        <!-- Simple WiFi icon -->99        <svg viewBox="0 0 24 24">100          <path d="M2 8c5-4 15-4 20 0" />101          <path d="M5 12c3-3 11-3 14 0" />102          <path d="M8 16c2-2 6-2 8 0" />103          <circle cx="12" cy="19" r="2" fill="#fff" stroke="none"/>104        </svg>105      </div>106      <div class="status-icon">107        <!-- Battery icon -->108        <svg viewBox="0 0 28 24">109          <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="3"/>110          <rect x="4" y="7" width="16" height="10" fill="#ffffff"/>111          <rect x="23" y="9" width="3" height="6" fill="#ffffff" stroke="none"/>112        </svg>113      </div>114    </div>115  </div>116 117  <!-- Header Tabs -->118  <div class="header">119    <div class="close-icon">120      <svg viewBox="0 0 24 24">121        <path d="M4 4 L20 20 M20 4 L4 20" />122      </svg>123    </div>124    <div class="tab-list">125      <div class="tab active">Text</div>126      <div class="tab">Image</div>127    </div>128  </div>129 130  <!-- Hide Markdown -->131  <div class="option">132    <div class="radio"></div>133    <div>Hide Markdown</div>134  </div>135 136  <!-- Message Card -->137  <div class="card">138    <div class="card-title">Weeding plan</div>139    <div class="card-sub">Due Date: Jul 19, 12:30pm</div>140    <div class="card-source">141      From TickTick:<br>142      www.ticktick.com143    </div>144  </div>145 146  <!-- Bottom Share Bar -->147  <div class="share-bar">148    <div class="share-item">149      <div class="icon-circle twitter-bg">150        <!-- Twitter icon (simplified bird) -->151        <svg viewBox="0 0 24 24">152          <path d="M22 7c-1 1-2 1-3 1 1-1 2-2 2-3-1 1-3 2-4 2-2-2-5-1-6 2-1 2 0 4 2 5-2 0-4-1-5-3 0 3 2 5 5 6-2 1-4 1-6 0 2 2 4 3 7 3 7 0 11-6 11-11v-1" fill="#fff"/>153        </svg>154      </div>155      <div>Twitter</div>156    </div>157 158    <div class="share-item">159      <div class="icon-circle google-bg">160        <!-- Google "G" simplified -->161        <svg viewBox="0 0 24 24">162          <circle cx="12" cy="12" r="10" fill="none" stroke="#4285F4" stroke-width="2"/>163          <path d="M12 6a6 6 0 1 0 0 12c2 0 3-1 4-2" fill="none" stroke="#34A853" stroke-width="2"/>164          <path d="M12 12h6" stroke="#EA4335" stroke-width="2"/>165          <path d="M8 9l-2-2" stroke="#FBBC05" stroke-width="2"/>166        </svg>167      </div>168      <div>Google+</div>169    </div>170 171    <div class="share-item">172      <div class="icon-circle email-bg">173        <!-- Envelope -->174        <svg viewBox="0 0 24 24">175          <rect x="2" y="6" width="20" height="14" rx="2" ry="2" fill="#fff" stroke="none"/>176          <path d="M2 8l10 6 10-6" fill="none" stroke="#3b5bfd" stroke-width="2"/>177        </svg>178      </div>179      <div>Email</div>180    </div>181 182    <div class="share-item">183      <div class="icon-circle copy-bg">184        <!-- Link/Copy -->185        <svg viewBox="0 0 24 24">186          <rect x="5" y="5" width="10" height="12" rx="2" ry="2" fill="#fff" stroke="none"/>187          <rect x="9" y="8" width="10" height="12" rx="2" ry="2" fill="none" stroke="#7d5a00" stroke-width="2"/>188        </svg>189      </div>190      <div>Copy Link</div>191    </div>192 193    <div class="share-item">194      <div class="icon-circle more-bg">195        <!-- More (three dots) -->196        <svg viewBox="0 0 24 24">197          <circle cx="6" cy="12" r="2" fill="#084a3a"/>198          <circle cx="12" cy="12" r="2" fill="#084a3a"/>199          <circle cx="18" cy="12" r="2" fill="#084a3a"/>200        </svg>201      </div>202      <div>More</div>203    </div>204  </div>205 206  <!-- Gesture pill -->207  <div class="gesture"></div>208 209</div>210</body>211</html>