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>Timer sound</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: Roboto, "Segoe UI", Arial, sans-serif; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#121514; color:#EDEDED;12  }13 14  /* Status bar */15  .status-bar{16    height:88px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;17    color:#EAEAEA; font-size:34px; letter-spacing:0.5px;18  }19  .status-right{ display:flex; align-items:center; gap:20px; opacity:0.9; }20  .ico{ display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; }21  .ico svg{ width:100%; height:100%; fill:#EAEAEA; }22 23  /* Header and title */24  .header{25    position:relative; padding:18px 40px 12px 40px;26  }27  .back-btn, .menu-btn{28    position:absolute; top:14px; width:72px; height:72px; display:flex; align-items:center; justify-content:center;29    opacity:0.9;30  }31  .back-btn{ left:16px; }32  .menu-btn{ right:16px; }33  .big-title{34    margin:110px 0 10px 16px;35    font-size:96px; line-height:1.1; font-weight:500; color:#E6E6E6;36  }37 38  /* Section titles */39  .section{40    padding:26px 36px 8px 36px;41  }42  .section h3{43    margin:12px 0 20px 16px; font-weight:500; font-size:38px; color:#86C98C;44  }45 46  /* Rows */47  .row{48    display:flex; align-items:center;49    padding:24px 24px; margin:10px 8px; border-radius:18px;50  }51  .row .label{ font-size:46px; margin-left:26px; color:#F0F0F0; }52  .circle{53    width:108px; height:108px; border-radius:50%;54    display:flex; align-items:center; justify-content:center;55  }56  .circle svg{ width:56px; height:56px; fill:#FFFFFF; }57  .circle.green{ background:#245c38; }58  .circle.gray{ background:#1e1f1f; border:1px solid #2a2b2b; }59  .muted{ opacity:0.9; }60 61  .device-list .row{ padding-right:32px; }62  .device-list .row .label{ font-weight:400; }63  .device-list .row .end{64    margin-left:auto; display:flex; align-items:center; gap:24px;65  }66  .selected{67    background:#242525;68  }69  .end .eq svg{ width:44px; height:44px; fill:#BEBEBE; }70  .end .check{71    width:54px; height:54px; border-radius:50%; background:#3BA36F; display:flex; align-items:center; justify-content:center;72  }73  .end .check svg{ width:32px; height:32px; fill:#0f1b14; }74 75  /* Bottom gesture handle */76  .gesture{77    position:absolute; left:50%; transform:translateX(-50%);78    bottom:44px; width:420px; height:12px; border-radius:6px; background:#EDEDED; opacity:0.9;79  }80</style>81</head>82<body>83<div id="render-target">84 85  <!-- Status bar -->86  <div class="status-bar">87    <div class="status-left">3:04</div>88    <div class="status-right">89      <span class="ico" title="NFC">90        <svg viewBox="0 0 24 24"><path d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zm2 0v14h14V5H5z"/></svg>91      </span>92      <span class="ico" title="Do Not Disturb">93        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-6 9h12v2H6v-2z"/></svg>94      </span>95      <span class="ico" title="Wifi">96        <svg viewBox="0 0 24 24"><path d="M12 20l-2.5-2.5a3.5 3.5 0 0 1 5 0L12 20zm6-6a8 8 0 0 0-12 0l-1.8-1.8a10.5 10.5 0 0 1 15.6 0L18 14zm3-3.1A14 14 0 0 0 3 10.9L1.2 9.1a16.5 16.5 0 0 1 21.6 0L21 10.9z"/></svg>97      </span>98      <span class="ico" title="Battery">99        <svg viewBox="0 0 24 24"><path d="M16 6h2v2h2v8h-2v2h-2V6zM2 8a2 2 0 0 1 2-2h10v12H4a2 2 0 0 1-2-2V8z"/></svg>100      </span>101    </div>102  </div>103 104  <!-- Header -->105  <div class="header">106    <div class="back-btn">107      <svg viewBox="0 0 24 24" width="48" height="48" fill="#EDEDED"><path d="M15.5 5 8.5 12l7 7-1.5 1.5L5.5 12l8.5-8.5 1.5 1.5z"/></svg>108    </div>109    <div class="menu-btn">110      <svg viewBox="0 0 24 24" width="44" height="44" fill="#EDEDED"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>111    </div>112    <div class="big-title">Timer sound</div>113  </div>114 115  <!-- Recorded sounds -->116  <div class="section">117    <h3>Recorded sounds</h3>118    <div class="row">119      <div class="circle green">120        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 1 0-6 0v4a3 3 0 0 0 3 3zm-5-3h2a5 5 0 0 0 10 0h2a7 7 0 0 1-6 6.9V20h-4v-2.1A7 7 0 0 1 7 11z"/></svg>121      </div>122      <div class="label">Record new</div>123    </div>124  </div>125 126  <!-- Your sounds -->127  <div class="section">128    <h3>Your sounds</h3>129    <div class="row">130      <div class="circle green">131        <svg viewBox="0 0 24 24"><path d="M11 11V6h2v5h5v2h-5v5h-2v-5H6v-2h5z"/></svg>132      </div>133      <div class="label">Add new</div>134    </div>135  </div>136 137  <!-- Device sounds -->138  <div class="section device-list">139    <h3>Device sounds</h3>140 141    <div class="row">142      <div class="circle gray">143        <svg viewBox="0 0 24 24"><path d="M12 4a6 6 0 0 1 6 6c0 1.7-.7 3.2-1.8 4.3l2.1 2.1-1.4 1.4-2.2-2.2A5.8 5.8 0 0 1 12 16c-1.7 0-3.2-.7-4.3-1.8l-2.2 2.2-1.4-1.4 2.1-2.1C5.7 13.2 5 11.7 5 10a7 7 0 0 1 7-6zm0 2a4 4 0 0 0-4 4c0 1 0.4 1.9 1 2.6L14.6 8A4 4 0 0 0 12 6z"/></svg>144      </div>145      <div class="label">Silent</div>146    </div>147 148    <div class="row">149      <div class="circle gray">150        <svg viewBox="0 0 24 24"><path d="M12 3 8 7H5v10h3l4 4V3zm6 5v8h-2V8h2z"/></svg>151      </div>152      <div class="label">Timer Expired</div>153    </div>154 155    <div class="row">156      <div class="circle gray">157        <svg viewBox="0 0 24 24"><path d="M12 3 8 7H5v10h3l4 4V3zm6 8a5 5 0 0 1-5 5v-2a3 3 0 0 0 3-3h2z"/></svg>158      </div>159      <div class="label">Bright Morning</div>160    </div>161 162    <div class="row selected">163      <div class="circle gray">164        <svg viewBox="0 0 24 24"><path d="M12 3 8 7H5v10h3l4 4V3z"/></svg>165      </div>166      <div class="label">Cuckoo Clock</div>167      <div class="end">168        <div class="eq">169          <svg viewBox="0 0 24 24"><path d="M5 20V10h2v10H5zm6 0V4h2v16h-2zm6 0v-7h2v7h-2z"/></svg>170        </div>171        <div class="check">172          <svg viewBox="0 0 24 24"><path d="M9.5 16.5 5.5 12.5l1.4-1.4 2.6 2.6 7-7 1.4 1.4-8.4 8.4z"/></svg>173        </div>174      </div>175    </div>176 177    <div class="row">178      <div class="circle gray">179        <svg viewBox="0 0 24 24"><path d="M12 3 8 7H5v10h3l4 4V3zm5 9a5 5 0 0 1-5 5v-2a3 3 0 0 0 3-3h2z"/></svg>180      </div>181      <div class="label">Early Twilight</div>182    </div>183 184    <div class="row">185      <div class="circle gray">186        <svg viewBox="0 0 24 24"><path d="M12 3 8 7H5v10h3l4 4V3zm6 9a6 6 0 0 1-6 6v-2a4 4 0 0 0 4-4h2z"/></svg>187      </div>188      <div class="label">Full of Wonder</div>189    </div>190  </div>191 192  <div class="gesture"></div>193</div>194</body>195</html>