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>Recorder Share Sheet Mock</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: #121314; color: #E6E6E6; font-family: Arial, Helvetica, sans-serif;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0; height: 110px;17    padding: 28px; display: flex; align-items: center; justify-content: space-between;18    color: #F5F5F5; font-size: 42px; letter-spacing: 0.5px;19  }20  .status-icons { display: flex; gap: 26px; align-items: center; opacity: 0.95; }21 22  /* App bar */23  .appbar {24    position: absolute; top: 110px; left: 0; right: 0; height: 110px;25    padding: 0 28px; display: flex; align-items: center; color: #CFCFCF;26  }27  .appbar .spacer { flex: 1; }28  .actions { display: flex; gap: 44px; align-items: center; }29  .icon-btn svg { width: 56px; height: 56px; }30 31  /* Recording card */32  .card {33    position: absolute; left: 24px; right: 24px; top: 230px; height: 1320px;34    background: #161718; border-radius: 44px;35    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);36  }37  .card-content { padding: 80px 72px; }38  .title { font-size: 64px; font-weight: 600; color: #DADADA; margin-bottom: 16px; }39  .subtitle { font-size: 32px; color: #9FA4A6; }40 41  /* Waveform approximation */42  .wave-area { position: absolute; left: 60px; right: 60px; bottom: 170px; height: 360px; }43  .playhead {44    position: absolute; left: 520px; top: 20px; width: 6px; height: 320px;45    background: #303234; border-radius: 3px;46  }47  .wave-bars {48    position: absolute; left: 560px; right: 20px; bottom: 30px;49    display: flex; align-items: flex-end; gap: 18px;50  }51  .bar {52    width: 18px; background: #3B3D40; border-radius: 9px;53  }54  .dot {55    width: 8px; height: 8px; border-radius: 50%; background: #3B3D40;56    margin-right: 14px; opacity: 0.8;57  }58  .left-dots {59    position: absolute; left: 520px; bottom: 48px; display: flex; gap: 14px;60  }61 62  /* Bottom sheet */63  .sheet {64    position: absolute; left: 0; right: 0; bottom: 0; height: 860px;65    background: #2B3237; border-top-left-radius: 64px; border-top-right-radius: 64px;66    box-shadow: 0 -24px 60px rgba(0,0,0,0.55);67  }68  .sheet-grabber {69    width: 180px; height: 10px; border-radius: 10px; background: #E5E5E5;70    position: absolute; left: 50%; transform: translateX(-50%); bottom: 32px; opacity: 0.9;71  }72  .sheet-title {73    text-align: center; font-size: 56px; margin-top: 52px; color: #EAEAEA;74  }75  .sheet-list { margin-top: 40px; padding: 0 64px; }76  .sheet-item { display: flex; align-items: center; gap: 32px; padding: 38px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }77  .sheet-item:last-child { border-bottom: none; }78  .item-text { display: flex; flex-direction: column; }79  .item-title { font-size: 44px; color: #EEEEEE; }80  .item-sub { font-size: 28px; color: #AEB4B7; margin-top: 8px; }81 82  .list-icon svg { width: 58px; height: 58px; fill: none; stroke: #D6D6D6; stroke-width: 3.5; }83  .list-icon { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; }84</style>85</head>86<body>87<div id="render-target">88 89  <!-- Status bar -->90  <div class="status-bar">91    <div class="time">8:45</div>92    <div class="status-icons">93      <!-- Simple Wi-Fi -->94      <svg width="46" height="46" viewBox="0 0 46 46">95        <path d="M8 18c6-5 24-5 30 0" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round"/>96        <path d="M13 24c4-3 16-3 20 0" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round"/>97        <circle cx="23" cy="30" r="3" fill="#FFFFFF"/>98      </svg>99      <!-- Battery with bolt -->100      <svg width="46" height="46" viewBox="0 0 46 46">101        <rect x="8" y="13" width="28" height="18" rx="3" ry="3" stroke="#FFFFFF" fill="none" stroke-width="3"/>102        <rect x="36" y="18" width="4" height="8" fill="#FFFFFF"/>103        <path d="M24 17l-6 9h5l-1 6 6-9h-5l1-6z" fill="#FFFFFF"/>104      </svg>105    </div>106  </div>107 108  <!-- App bar -->109  <div class="appbar">110    <div class="icon-btn">111      <!-- Back -->112      <svg viewBox="0 0 48 48">113        <path d="M30 10 L14 24 L30 38" stroke="#CFCFCF" stroke-width="5.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>114      </svg>115    </div>116    <div class="spacer"></div>117    <div class="actions">118      <!-- Star outline -->119      <div class="icon-btn">120        <svg viewBox="0 0 48 48">121          <path d="M24 8l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z" fill="none" stroke="#CFCFCF" stroke-width="3.5" stroke-linejoin="round"/>122        </svg>123      </div>124      <!-- Share -->125      <div class="icon-btn">126        <svg viewBox="0 0 48 48">127          <circle cx="14" cy="24" r="4" fill="#CFCFCF"/>128          <circle cx="34" cy="14" r="4" fill="#CFCFCF"/>129          <circle cx="34" cy="34" r="4" fill="#CFCFCF"/>130          <path d="M17 23L30 16M17 25L30 32" stroke="#CFCFCF" stroke-width="3" stroke-linecap="round"/>131        </svg>132      </div>133      <!-- Scissors -->134      <div class="icon-btn">135        <svg viewBox="0 0 48 48">136          <circle cx="16" cy="18" r="6" stroke="#CFCFCF" stroke-width="3" fill="none"/>137          <circle cx="16" cy="30" r="6" stroke="#CFCFCF" stroke-width="3" fill="none"/>138          <path d="M20 24L40 14M20 24L40 34" stroke="#CFCFCF" stroke-width="3" stroke-linecap="round"/>139        </svg>140      </div>141      <!-- Search -->142      <div class="icon-btn">143        <svg viewBox="0 0 48 48">144          <circle cx="22" cy="22" r="10" stroke="#CFCFCF" stroke-width="3" fill="none"/>145          <path d="M32 32L44 44" stroke="#CFCFCF" stroke-width="3" stroke-linecap="round"/>146        </svg>147      </div>148      <!-- More (vertical dots) -->149      <div class="icon-btn">150        <svg viewBox="0 0 48 48">151          <circle cx="24" cy="12" r="3" fill="#CFCFCF"/>152          <circle cx="24" cy="24" r="3" fill="#CFCFCF"/>153          <circle cx="24" cy="36" r="3" fill="#CFCFCF"/>154        </svg>155      </div>156    </div>157  </div>158 159  <!-- Recording card -->160  <div class="card">161    <div class="card-content">162      <div class="title">Birthday Song</div>163      <div class="subtitle">Thu, Dec 14 • 7:56 AM</div>164    </div>165 166    <div class="wave-area">167      <div class="playhead"></div>168 169      <!-- Subtle left dotted guide -->170      <div class="left-dots">171        <div class="dot"></div><div class="dot"></div><div class="dot"></div>172        <div class="dot"></div><div class="dot"></div><div class="dot"></div>173        <div class="dot"></div><div class="dot"></div><div class="dot"></div>174        <div class="dot"></div><div class="dot"></div><div class="dot"></div>175      </div>176 177      <!-- Right waveform bars -->178      <div class="wave-bars">179        <div class="bar" style="height:22px;"></div>180        <div class="bar" style="height:36px;"></div>181        <div class="bar" style="height:58px;"></div>182        <div class="bar" style="height:84px;"></div>183        <div class="bar" style="height:62px;"></div>184        <div class="bar" style="height:32px;"></div>185        <div class="bar" style="height:26px;"></div>186        <div class="bar" style="height:18px;"></div>187        <div class="bar" style="height:26px;"></div>188        <div class="bar" style="height:40px;"></div>189        <div class="bar" style="height:60px;"></div>190        <div class="bar" style="height:92px;"></div>191        <div class="bar" style="height:76px;"></div>192        <div class="bar" style="height:40px;"></div>193        <div class="bar" style="height:24px;"></div>194      </div>195    </div>196  </div>197 198  <!-- Bottom share sheet -->199  <div class="sheet">200    <div class="sheet-title">Share</div>201    <div class="sheet-list">202      <div class="sheet-item">203        <div class="list-icon">204          <!-- Folder/file icon -->205          <svg viewBox="0 0 64 64">206            <path d="M8 20h18l4 6h26v24H8z" stroke="#D6D6D6" fill="none" stroke-width="3" stroke-linejoin="round"/>207          </svg>208        </div>209        <div class="item-text">210          <div class="item-title">File</div>211          <div class="item-sub">Share audio or transcript file</div>212        </div>213      </div>214      <div class="sheet-item">215        <div class="list-icon">216          <!-- Link icon -->217          <svg viewBox="0 0 64 64">218            <path d="M22 32c0-6 6-10 12-10h6" stroke="#D6D6D6" stroke-width="3" fill="none" stroke-linecap="round"/>219            <path d="M42 32c0 6-6 10-12 10h-6" stroke="#D6D6D6" stroke-width="3" fill="none" stroke-linecap="round"/>220            <path d="M26 26l12 12" stroke="#D6D6D6" stroke-width="3" fill="none" stroke-linecap="round"/>221          </svg>222        </div>223        <div class="item-text">224          <div class="item-title">Link</div>225          <div class="item-sub">Create a link to view on recorder.google.com</div>226        </div>227      </div>228    </div>229 230    <!-- Gesture bar -->231    <div class="sheet-grabber"></div>232  </div>233 234</div>235</body>236</html>