GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Screen - Dark</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #1F1A1C; /* deep dark theme */15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #EDE7E9;17  }18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 96px;24    padding: 0 40px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    font-size: 36px;30    color: #EDE7E9;31    opacity: 0.95;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .app-bar {39    position: absolute;40    top: 96px;41    left: 0;42    width: 100%;43    height: 140px;44    display: flex;45    align-items: center;46    box-sizing: border-box;47    padding: 0 32px 0 28px;48    color: #EDE7E9;49  }50  .app-bar .title {51    font-size: 56px;52    font-weight: 500;53    margin-left: 24px;54  }55  .app-actions {56    margin-left: auto;57    display: flex;58    align-items: center;59    gap: 40px;60  }61  .progress-wrap {62    position: absolute;63    top: 226px;64    left: 0;65    width: 100%;66    height: 12px;67    background: #3A2F34;68  }69  .progress-bar {70    width: 62%;71    height: 12px;72    background: #F2A8C1;73  }74  .content {75    position: absolute;76    top: 238px;77    left: 0;78    width: 100%;79    box-sizing: border-box;80    padding: 8px 24px 0 24px;81  }82  .row {83    height: 132px;84    display: flex;85    align-items: center;86    box-sizing: border-box;87    padding: 0 20px;88    border-bottom: 1px solid #4B4246;89  }90  .icon-circle {91    width: 72px;92    height: 72px;93    border-radius: 36px;94    background: #2A2327;95    border: 1px solid #5A4F54;96    display: flex;97    align-items: center;98    justify-content: center;99    margin-right: 24px;100  }101  .email-text {102    font-size: 40px;103    letter-spacing: 0.2px;104  }105  .label {106    font-size: 40px;107    color: #D7CED3;108  }109  .dropdown {110    margin-left: auto;111  }112  .checkbox {113    width: 52px;114    height: 52px;115    border-radius: 8px;116    background: #F2A8C1;117    border: 1px solid #C98BA3;118    display: flex;119    align-items: center;120    justify-content: center;121    margin-right: 28px;122  }123  .placeholder {124    color: #BBAEB5;125    font-size: 40px;126  }127  .gesture-bar {128    position: absolute;129    bottom: 40px;130    left: 50%;131    transform: translateX(-50%);132    width: 400px;133    height: 16px;134    background: #FFFFFF;135    border-radius: 16px;136    opacity: 0.9;137  }138  /* Simple SVG sizing */139  svg { display: block; }140</style>141</head>142<body>143<div id="render-target">144  <!-- Status bar -->145  <div class="status-bar">146    <div class="time">7:55</div>147    <div class="status-icons">148      <!-- simple status icons -->149      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">150        <path d="M3 17h18" stroke="#EDE7E9" stroke-width="2"/>151        <path d="M6 14h12" stroke="#EDE7E9" stroke-width="2"/>152        <path d="M9 11h6" stroke="#EDE7E9" stroke-width="2"/>153      </svg>154      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">155        <path d="M3 17l9-10 9 10" stroke="#EDE7E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>156      </svg>157      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">158        <rect x="5" y="5" width="14" height="14" rx="3" stroke="#EDE7E9" stroke-width="2"/>159        <rect x="15" y="7" width="2" height="10" fill="#EDE7E9"/>160      </svg>161    </div>162  </div>163 164  <!-- App bar -->165  <div class="app-bar">166    <!-- Close icon -->167    <svg width="44" height="44" viewBox="0 0 24 24">168      <path d="M5 5l14 14M19 5L5 19" stroke="#EDE7E9" stroke-width="2" stroke-linecap="round"/>169    </svg>170    <div class="title">Share</div>171    <div class="app-actions">172      <!-- Send (paper plane) -->173      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">174        <path d="M3 11l17-8-8 17-2-7-7-2z" stroke="#EDE7E9" stroke-width="2" fill="none" stroke-linejoin="round"/>175      </svg>176      <!-- More (vertical dots) -->177      <svg width="44" height="44" viewBox="0 0 24 24" fill="#EDE7E9">178        <circle cx="12" cy="5" r="2"/>179        <circle cx="12" cy="12" r="2"/>180        <circle cx="12" cy="19" r="2"/>181      </svg>182    </div>183  </div>184 185  <!-- Progress bar -->186  <div class="progress-wrap">187    <div class="progress-bar"></div>188  </div>189 190  <!-- Content -->191  <div class="content">192    <!-- Email row -->193    <div class="row" style="border-top: 1px solid #4B4246;">194      <div class="icon-circle">195        <!-- user-plus icon -->196        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">197          <circle cx="10" cy="8" r="4" stroke="#EDE7E9" stroke-width="2"/>198          <path d="M3 19c0-3 4-5 7-5s7 2 7 5" stroke="#EDE7E9" stroke-width="2" stroke-linecap="round"/>199          <path d="M18 8v4M16 10h4" stroke="#F2A8C1" stroke-width="2" stroke-linecap="round"/>200        </svg>201      </div>202      <div class="email-text">mike.waggoner@hotwater.com</div>203    </div>204 205    <!-- Editor row -->206    <div class="row">207      <div class="label">Editor</div>208      <div class="dropdown">209        <svg width="40" height="40" viewBox="0 0 24 24" fill="none">210          <path d="M6 9l6 6 6-6" stroke="#EDE7E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>211        </svg>212      </div>213    </div>214 215    <!-- Notify people -->216    <div class="row">217      <div class="checkbox">218        <svg width="34" height="34" viewBox="0 0 24 24" fill="none">219          <path d="M4 12l5 5 11-11" stroke="#3F2A32" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>220        </svg>221      </div>222      <div class="label">Notify people</div>223    </div>224 225    <!-- Add a message -->226    <div class="row" style="border-bottom: none;">227      <div class="placeholder">Add a message</div>228    </div>229  </div>230 231  <!-- Bottom gesture bar -->232  <div class="gesture-bar"></div>233</div>234</body>235</html>