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 Mock</title>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: #141116;15    font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;16    color: #d1c6d8;17  }18 19  /* Status bar (simplified) */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 120px;26    padding: 0 36px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #ece6f0;32    font-size: 38px;33    letter-spacing: 1px;34    opacity: 0.9;35  }36  .status-left { display: flex; align-items: center; gap: 22px; }37  .status-right { display: flex; align-items: center; gap: 22px; }38 39  /* Header */40  .header {41    position: absolute;42    top: 140px;43    left: 0;44    width: 100%;45    height: 140px;46    display: flex;47    align-items: center;48    justify-content: center;49    pointer-events: none;50  }51  .title {52    font-size: 72px;53    font-weight: 500;54    color: #cfc4d6;55  }56  .profile {57    position: absolute;58    right: 48px;59    top: 120px;60    width: 92px;61    height: 92px;62    border-radius: 50%;63    display: flex;64    align-items: center;65    justify-content: center;66  }67 68  /* Tip text */69  .tip {70    position: absolute;71    left: 90px;72    right: 90px;73    top: 1040px;74    text-align: center;75    font-size: 112px;76    line-height: 1.12;77    color: #c9bfce;78    font-weight: 400;79    letter-spacing: 0.5px;80  }81 82  /* Record button */83  .record-wrap {84    position: absolute;85    bottom: 260px;86    left: 0;87    right: 0;88    display: flex;89    justify-content: center;90  }91  .record-btn {92    width: 260px;93    height: 260px;94    border-radius: 50%;95    background: #f46f66;96    box-shadow: 0 28px 48px rgba(0,0,0,0.5), 0 6px 12px rgba(0,0,0,0.35) inset;97    position: relative;98  }99  .record-btn::after {100    content: "";101    position: absolute;102    width: 68px;103    height: 68px;104    border-radius: 50%;105    background: #5b1411;106    left: 50%;107    top: 50%;108    transform: translate(-50%, -50%);109    box-shadow: inset 0 2px 0 rgba(255,255,255,0.06);110  }111 112  /* Gesture bar */113  .gesture {114    position: absolute;115    bottom: 110px;116    left: 50%;117    transform: translateX(-50%);118    width: 430px;119    height: 16px;120    background: #d7ceda;121    border-radius: 10px;122    opacity: 0.9;123  }124 125  /* Simple icons */126  .icon {127    width: 42px;128    height: 42px;129    display: inline-block;130  }131</style>132</head>133<body>134<div id="render-target">135  <!-- Status Bar -->136  <div class="status-bar">137    <div class="status-left">138      <div>12:52</div>139      <svg class="icon" viewBox="0 0 24 24" fill="#e7e0ec"><circle cx="12" cy="12" r="9"/></svg>140      <div style="font-weight:700; font-size:34px; border:1px solid #6f6a75; border-radius:6px; padding:2px 6px; color:#e7e0ec;">LR</div>141      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#e7e0ec" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3-3"/></svg>142      <svg class="icon" viewBox="0 0 24 24" fill="#e7e0ec"><path d="M4 12h16v2H4z"/></svg>143      <svg class="icon" viewBox="0 0 24 24" fill="#e7e0ec"><circle cx="12" cy="12" r="2"/></svg>144    </div>145    <div class="status-right">146      <svg class="icon" viewBox="0 0 24 24" fill="#e7e0ec"><path d="M16 4l4 4-4 4V9H4V7h12V4z"/></svg>147      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#e7e0ec" stroke-width="2"><rect x="6" y="7" width="12" height="10" rx="2"/><path d="M10 7V5h4v2"/></svg>148    </div>149  </div>150 151  <!-- Header / Title -->152  <div class="header">153    <div class="title">Recorder</div>154  </div>155 156  <!-- Profile icon -->157  <div class="profile">158    <svg viewBox="0 0 24 24" width="92" height="92">159      <circle cx="12" cy="12" r="10" fill="none" stroke="#c29bee" stroke-width="2.6"/>160      <circle cx="12" cy="10" r="3" fill="none" stroke="#c29bee" stroke-width="2.6"/>161      <path d="M6.5 18c1.8-3 9.2-3 11 0" fill="none" stroke="#c29bee" stroke-width="2.6" stroke-linecap="round"/>162    </svg>163  </div>164 165  <!-- Tip text -->166  <div class="tip">167    Record respectfully<br/>around others168  </div>169 170  <!-- Record button -->171  <div class="record-wrap">172    <div class="record-btn"></div>173  </div>174 175  <!-- Gesture bar -->176  <div class="gesture"></div>177</div>178</body>179</html>