GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Voice Recorder Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#0f0f0f; color:#fff; font-family: Arial, Helvetica, sans-serif;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute; top:0; left:0; width:100%; height:100px;16    display:flex; align-items:center; justify-content:space-between;17    padding:0 28px; font-size:32px; letter-spacing:1px; color:#f5f5f5;18  }19  .status-right{ display:flex; gap:26px; align-items:center; }20  .icon-box{ width:34px; height:34px; opacity:0.9; }21  .battery{22    width:54px; height:28px; border:3px solid #fff; border-radius:4px; position:relative;23  }24  .battery:after{25    content:""; position:absolute; right:-10px; top:8px; width:8px; height:12px; background:#fff; border-radius:2px;26  }27  .battery .level{ position:absolute; left:3px; top:3px; height:20px; width:34px; background:#fff; }28 29  /* Top thumbnails ribbon */30  .thumb-bar{31    position:absolute; top:100px; left:0; width:100%; height:180px; background:#ffffff;32    display:flex; gap:16px; align-items:center; padding:14px 18px; box-sizing:border-box;33  }34  .thumb{35    width:160px; height:130px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:12px;36    display:flex; justify-content:center; align-items:center; color:#757575; font-size:26px; text-align:center; padding:6px;37  }38  .thumb.teal{39    width:130px; background:#3fb7c8; color:#e9f9fc; border-color:#2ca1b3; font-weight:bold;40  }41  .floating-x{42    position:absolute; top:156px; left:12px; width:54px; height:54px; border-radius:28px;43    background:#1e88e5; display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px; box-shadow:0 2px 6px rgba(0,0,0,0.35);44  }45 46  /* Recording section */47  .recording-section{ position:absolute; top:300px; left:0; width:100%; }48  .title-row{49    display:flex; align-items:center; gap:14px; padding:0 32px; margin-bottom:20px;50    color:#eaeaea; font-size:56px; font-weight:600;51  }52  .title-row svg{ width:32px; height:32px; transform:rotate(90deg); opacity:0.9; }53  .timer{54    text-align:center; font-size:150px; letter-spacing:2px; margin-top:10px; color:#f1f1f1;55  }56 57  /* Wave/timeline area */58  .wave-area{59    position:relative; margin:40px 0 0 0; height:900px;60  }61  .wave-area .center-line{62    position:absolute; left:50%; top:0; transform:translateX(-1px);63    width:3px; height:100%; background:#ff7a3c;64  }65  .wave-area .dots{66    position:absolute; top:45%; left:10%; width:35%; height:2px;67    background:repeating-linear-gradient(90deg, #888 0, #888 4px, transparent 6px, transparent 14px);68    opacity:0.8;69  }70  .ticks{71    margin-top:880px; display:flex; justify-content:space-around; color:#c7c7c7; font-size:28px;72    padding:0 40px;73  }74  .ticks .t{ width:80px; text-align:center; }75 76  /* Controls */77  .controls{78    position:absolute; left:0; right:0; top:1560px;79    display:flex; justify-content:center; align-items:center; gap:180px;80  }81  .ctrl-btn{82    width:190px; height:190px; background:#1b1b1b; border:2px solid #333; border-radius:50%;83    display:flex; align-items:center; justify-content:center; position:relative;84    box-shadow: inset 0 0 0 1px #222;85  }86  .ctrl-badge{87    position:absolute; right:20px; top:20px; width:64px; height:64px; border-radius:50%;88    border:2px solid #666; color:#fff; font-size:34px; display:flex; align-items:center; justify-content:center; opacity:0.9;89  }90  .ctrl-btn svg{ width:84px; height:84px; }91 92  /* Bottom actions */93  .actions{94    position:absolute; left:0; right:0; bottom:170px;95    display:flex; align-items:center; justify-content:space-between; padding:0 120px;96  }97  .round{98    width:140px; height:140px; border-radius:50%; background:#1c1c1c; border:2px solid #303030;99    display:flex; align-items:center; justify-content:center;100  }101  .label-under{102    position:absolute; width:200px; text-align:center; color:#cfcfcf; font-size:34px; left:64px; bottom:110px;103  }104  .label-right{105    position:absolute; width:200px; text-align:center; color:#cfcfcf; font-size:34px; right:60px; bottom:110px;106  }107  .replace{108    display:flex; align-items:center; gap:20px;109    background:#252525; border:2px solid #3a3a3a; padding:26px 54px; border-radius:70px; font-size:48px;110  }111  .rec-dot{ width:28px; height:28px; background:#a4553a; border-radius:50%; display:inline-block; }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status Bar -->118  <div class="status-bar">119    <div class="status-left">8:42</div>120    <div class="status-right">121      <!-- simple glyphs to mimic small icons -->122      <svg class="icon-box" viewBox="0 0 24 24"><path fill="#fff" d="M10 2v20M2 12h20" opacity="0.75"/></svg>123      <svg class="icon-box" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" fill="none"/></svg>124      <svg class="icon-box" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" stroke="#fff" stroke-width="2" fill="none"/></svg>125      <div class="battery"><div class="level"></div></div>126    </div>127  </div>128 129  <!-- Image ribbon -->130  <div class="thumb-bar">131    <div class="thumb teal">[IMG: Furniture]</div>132    <div class="thumb">[IMG: Side Table]</div>133    <div class="thumb">[IMG: Arm Chair]</div>134    <div class="thumb">[IMG: Recliner]</div>135    <div class="thumb">[IMG: Bed Frame]</div>136    <div class="thumb">[IMG: Smart TV]</div>137    <div class="thumb">[IMG: Landscape TV]</div>138  </div>139  <div class="floating-x">✕</div>140 141  <!-- Recording content -->142  <div class="recording-section">143    <div class="title-row">144      <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="none" stroke="#fff" stroke-width="2"/></svg>145      <div>Recording 1</div>146    </div>147    <div class="timer">00:01.80</div>148 149    <div class="wave-area">150      <div class="dots"></div>151      <div class="center-line"></div>152      <div class="ticks">153        <div class="t">00:00</div>154        <div class="t">00:01</div>155        <div class="t">00:02</div>156        <div class="t">00:03</div>157        <div class="t">00:04</div>158      </div>159    </div>160  </div>161 162  <!-- Controls -->163  <div class="controls">164    <div class="ctrl-btn">165      <svg viewBox="0 0 24 24">166        <path d="M12 5a7 7 0 100 14" fill="none" stroke="#fff" stroke-width="2"/>167        <path d="M12 5v4l-3-2" fill="#fff"/>168      </svg>169      <div class="ctrl-badge">3</div>170    </div>171    <div class="ctrl-btn">172      <svg viewBox="0 0 24 24">173        <rect x="6" y="4" width="4" height="16" fill="#fff"/>174        <rect x="14" y="4" width="4" height="16" fill="#fff"/>175      </svg>176    </div>177    <div class="ctrl-btn">178      <svg viewBox="0 0 24 24">179        <path d="M12 19a7 7 0 100-14" fill="none" stroke="#fff" stroke-width="2"/>180        <path d="M12 19v-4l3 2" fill="#fff"/>181      </svg>182      <div class="ctrl-badge">3</div>183    </div>184  </div>185 186  <!-- Bottom actions -->187  <div class="actions">188    <div style="display:flex; flex-direction:column; align-items:center;">189      <div class="round">190        <svg viewBox="0 0 24 24" width="64" height="64">191          <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" fill="none"/>192        </svg>193      </div>194    </div>195 196    <div class="replace">197      <span class="rec-dot"></span>198      <span>Replace</span>199    </div>200 201    <div style="display:flex; flex-direction:column; align-items:center;">202      <div class="round">203        <svg viewBox="0 0 24 24" width="64" height="64">204          <path d="M5 12l5 5L19 8" stroke="#fff" stroke-width="2" fill="none"/>205        </svg>206      </div>207    </div>208  </div>209 210  <div class="label-under">Discard</div>211  <div class="label-right">Save</div>212 213</div>214</body>215</html>