GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>New voice note</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#1b2128; color:#eaeff4;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; left:0; top:0; width:100%; height:96px;17    padding:0 32px; box-sizing:border-box;18    display:flex; align-items:center; justify-content:space-between;19    color:#dfe3e8; font-size:34px; letter-spacing:1px;20  }21  .status-right { display:flex; align-items:center; gap:26px; opacity:.9; }22  .appbar {23    position:absolute; left:0; top:96px; width:100%; height:220px;24    padding:36px 36px 0 36px; box-sizing:border-box;25  }26  .title-row {27    display:flex; align-items:center; justify-content:space-between;28  }29  .title {30    font-size:72px; font-weight:600; color:#f2f5f8;31  }32  .actions { display:flex; align-items:center; gap:36px; }33  .icon-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; opacity:.9; }34  .icon-btn svg { width:56px; height:56px; fill:#dbe1e7; }35 36  /* Tabs */37  .tabs { margin-top:36px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 8px; }38  .tab { font-size:42px; letter-spacing:2px; }39  .tab.active { color:#5aa7ff; }40  .tab.inactive { color:#9aa3ad; }41  .tab-underline {42    position:absolute; left:36px; top:310px; width:300px; height:4px; background:#5aa7ff; opacity:.8;43  }44 45  /* Center messaging */46  .center-wrap {47    position:absolute; left:0; top:420px; width:100%; text-align:center;48    color:#b9c0c7;49  }50  .recording-name {51    margin-top:540px;52    font-size:78px; color:#e7ebf0;53    font-style:italic; font-weight:500;54  }55  .recording-name .base {56    border-bottom:2px solid rgba(255,255,255,0.35); padding-bottom:6px;57  }58  .recording-name .ext {59    color:#b0b6bc; font-style:normal; font-weight:400;60  }61  .subtle {62    margin-top:32px; font-size:56px; color:#7f8790;63  }64 65  /* Divider and storage text */66  .divider {67    position:absolute; left:48px; right:48px; bottom:520px; height:2px; background:#38526e;68    opacity:.6;69  }70  .storage {71    position:absolute; left:0; right:0; bottom:440px; text-align:center; color:#a9b1ba; font-size:44px;72  }73 74  /* Mic button */75  .mic-wrap {76    position:absolute; left:0; right:0; bottom:290px; display:flex; justify-content:center;77  }78  .mic-btn {79    width:200px; height:200px; background:#e4483b; border-radius:50%;80    display:flex; align-items:center; justify-content:center;81    box-shadow:0 18px 34px rgba(0,0,0,0.6);82  }83  .mic-btn svg { width:92px; height:92px; fill:#ffffff; }84 85  /* Gesture bar */86  .gesture {87    position:absolute; left:50%; transform:translateX(-50%); bottom:64px;88    width:280px; height:16px; background:#e6e8eb; border-radius:16px; opacity:.9;89  }90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Status bar -->96  <div class="status-bar">97    <div class="status-left">8:42</div>98    <div class="status-right">99      <!-- simple icons -->100      <svg viewBox="0 0 24 24" width="44" height="44" fill="#dfe3e8" aria-hidden="true"><path d="M3 11h8V3H3v8zm0 10h8v-8H3v8zm10 0h8v-8h-8v8zm0-18v8h8V3h-8z"/></svg>101      <svg viewBox="0 0 24 24" width="44" height="44" fill="#dfe3e8"><path d="M12 4a8 8 0 100 16 8 8 0 000-16zm0 3a1 1 0 011 1v4l3 2a1 1 0 11-1 1.73l-3.5-2.02A1 1 0 0111 13V8a1 1 0 011-1z"/></svg>102      <svg viewBox="0 0 24 24" width="44" height="44" fill="#dfe3e8"><path d="M10 20v-6H6l8-10v6h4l-8 10z"/></svg>103      <svg viewBox="0 0 24 24" width="44" height="44" fill="#dfe3e8"><circle cx="12" cy="12" r="10"/></svg>104      <svg viewBox="0 0 24 24" width="44" height="44" fill="#dfe3e8"><path d="M17 7H7v10h10V7zM5 9H3v6h2V9zm16 0h-2v6h2V9z"/></svg>105      <!-- WiFi -->106      <svg viewBox="0 0 24 24" width="44" height="44" fill="#dfe3e8"><path d="M12 18l-2-2a3 3 0 014 0l-2 2zm6-6a8 8 0 00-12 0l-1.5-1.5a10 10 0 0115 0L18 12z"/></svg>107      <!-- Battery -->108      <svg viewBox="0 0 24 24" width="44" height="44" fill="#dfe3e8"><path d="M16 7h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v2H6V5h10v2z"/></svg>109    </div>110  </div>111 112  <!-- App bar content -->113  <div class="appbar">114    <div class="title-row">115      <div class="title">New voice note</div>116      <div class="actions">117        <div class="icon-btn" title="tune">118          <!-- sliders icon -->119          <svg viewBox="0 0 24 24"><path d="M9 21h2V3H9v18zm-6-8h6v-2H3v2zm10 8h2V3h-2v18zm2-14v2h6V7h-6zm-4 10v2h10v-2H11z"/></svg>120        </div>121        <div class="icon-btn" title="more">122          <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>123        </div>124      </div>125    </div>126 127    <div class="tabs">128      <div class="tab active">RECORD</div>129      <div class="tab inactive">LISTEN</div>130    </div>131    <div class="tab-underline"></div>132  </div>133 134  <!-- Large center message -->135  <div class="center-wrap">136    <div class="recording-name">137      <span class="base">My recording 1</span> <span class="ext">.m4a</span>138    </div>139    <div class="subtle">is ready to start</div>140  </div>141 142  <!-- Divider & storage info -->143  <div class="divider"></div>144  <div class="storage">~2232h left on storage</div>145 146  <!-- Mic button -->147  <div class="mic-wrap">148    <div class="mic-btn">149      <svg viewBox="0 0 24 24" aria-hidden="true">150        <path d="M12 14a3 3 0 003-3V7a3 3 0 10-6 0v4a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2zm-5 7a7 7 0 01-7-7H3a9 9 0 0018 0h-2a7 7 0 01-7 7z"/>151      </svg>152    </div>153  </div>154 155  <!-- Gesture bar -->156  <div class="gesture"></div>157 158</div>159</body>160</html>