GD-ML/AndroidCode
13.4k
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 - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #111614; /* deep dark */15 color: #EDEFEA;16 font-family: "Segoe UI", Roboto, Arial, sans-serif;17 }18 19 /* Top app bar */20 .top-bar {21 position: absolute;22 top: 36px;23 left: 0;24 right: 0;25 height: 96px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 padding: 0 36px;30 }31 .icon-btn {32 width: 72px;33 height: 72px;34 border-radius: 36px;35 display: flex;36 align-items: center;37 justify-content: center;38 }39 .icon-btn svg { width: 48px; height: 48px; }40 41 /* Title */42 .screen-title {43 position: absolute;44 left: 64px;45 top: 220px;46 font-size: 96px;47 line-height: 1.05;48 font-weight: 500;49 letter-spacing: -0.5px;50 color: #E7ECE7;51 }52 53 /* Sections */54 .section {55 position: absolute;56 left: 64px;57 right: 64px;58 }59 .section h3 {60 margin: 0 0 20px 0;61 color: #8CCF97; /* soft green */62 font-weight: 500;63 font-size: 40px;64 }65 .list-item {66 display: flex;67 align-items: center;68 gap: 34px;69 padding: 22px 0;70 }71 .circle {72 width: 116px;73 height: 116px;74 border-radius: 58px;75 display: flex;76 align-items: center;77 justify-content: center;78 }79 .circle.green { background: #2F5E3F; }80 .circle.gray { background: #1D2320; }81 .circle svg { width: 60px; height: 60px; }82 .item-text {83 font-size: 44px;84 color: #F2F4F1;85 letter-spacing: 0.2px;86 }87 88 /* Sections positioning */89 #rec { top: 470px; }90 #your { top: 830px; }91 #device { top: 1180px; }92 93 /* Bottom gesture pill */94 .pill {95 position: absolute;96 left: 240px;97 right: 240px;98 bottom: 36px;99 height: 16px;100 background: #E9ECE7;101 border-radius: 12px;102 opacity: 0.95;103 }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Top app bar with back and more -->110 <div class="top-bar">111 <div class="icon-btn">112 <svg viewBox="0 0 24 24" fill="none" stroke="#E5E7E4" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">113 <path d="M15 4 L7 12 L15 20"></path>114 </svg>115 </div>116 <div class="icon-btn">117 <svg viewBox="0 0 24 24" fill="#E5E7E4">118 <circle cx="12" cy="5" r="2.1"></circle>119 <circle cx="12" cy="12" r="2.1"></circle>120 <circle cx="12" cy="19" r="2.1"></circle>121 </svg>122 </div>123 </div>124 125 <!-- Title -->126 <div class="screen-title">Timer sound</div>127 128 <!-- Recorded sounds -->129 <div id="rec" class="section">130 <h3>Recorded sounds</h3>131 <div class="list-item">132 <div class="circle green">133 <!-- Mic icon -->134 <svg viewBox="0 0 24 24">135 <path fill="#FFFFFF" d="M12 14a3 3 0 0 0 3-3V8a3 3 0 0 0-6 0v3a3 3 0 0 0 3 3z"></path>136 <path fill="#FFFFFF" d="M5 11h2a5 5 0 0 0 10 0h2a7 7 0 0 1-14 0z"></path>137 <rect x="11" y="18" width="2" height="3" fill="#FFFFFF"></rect>138 </svg>139 </div>140 <div class="item-text">Record new</div>141 </div>142 </div>143 144 <!-- Your sounds -->145 <div id="your" class="section">146 <h3>Your sounds</h3>147 <div class="list-item">148 <div class="circle green">149 <!-- Plus icon -->150 <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2.8" stroke-linecap="round">151 <path d="M12 5v14M5 12h14"></path>152 </svg>153 </div>154 <div class="item-text">Add new</div>155 </div>156 </div>157 158 <!-- Device sounds -->159 <div id="device" class="section">160 <h3>Device sounds</h3>161 162 <div class="list-item">163 <div class="circle gray">164 <!-- Silent (bell with slash) -->165 <svg viewBox="0 0 24 24">166 <path fill="#B9C2B9" d="M12 4c-3 0-5 2-5 5v4l-2 3h14l-2-3V9c0-3-2-5-5-5z"></path>167 <rect x="10" y="16" width="4" height="2" fill="#B9C2B9"></rect>168 <path d="M5 5l14 14" stroke="#8F968F" stroke-width="2.4"></path>169 </svg>170 </div>171 <div class="item-text">Silent</div>172 </div>173 174 <div class="list-item">175 <div class="circle gray">176 <!-- Bell icon -->177 <svg viewBox="0 0 24 24">178 <path fill="#B9C2B9" d="M12 4c-3 0-5 2-5 5v4l-2 3h14l-2-3V9c0-3-2-5-5-5z"></path>179 <rect x="10" y="16" width="4" height="2" fill="#B9C2B9"></rect>180 </svg>181 </div>182 <div class="item-text">Timer Expired</div>183 </div>184 185 <div class="list-item">186 <div class="circle gray">187 <svg viewBox="0 0 24 24">188 <path fill="#B9C2B9" d="M12 4c-3 0-5 2-5 5v4l-2 3h14l-2-3V9c0-3-2-5-5-5z"></path>189 <rect x="10" y="16" width="4" height="2" fill="#B9C2B9"></rect>190 </svg>191 </div>192 <div class="item-text">Bright Morning</div>193 </div>194 195 <div class="list-item">196 <div class="circle gray">197 <svg viewBox="0 0 24 24">198 <path fill="#B9C2B9" d="M12 4c-3 0-5 2-5 5v4l-2 3h14l-2-3V9c0-3-2-5-5-5z"></path>199 <rect x="10" y="16" width="4" height="2" fill="#B9C2B9"></rect>200 </svg>201 </div>202 <div class="item-text">Cuckoo Clock</div>203 </div>204 205 <div class="list-item">206 <div class="circle gray">207 <svg viewBox="0 0 24 24">208 <path fill="#B9C2B9" d="M12 4c-3 0-5 2-5 5v4l-2 3h14l-2-3V9c0-3-2-5-5-5z"></path>209 <rect x="10" y="16" width="4" height="2" fill="#B9C2B9"></rect>210 </svg>211 </div>212 <div class="item-text">Early Twilight</div>213 </div>214 215 <div class="list-item">216 <div class="circle gray">217 <svg viewBox="0 0 24 24">218 <path fill="#B9C2B9" d="M12 4c-3 0-5 2-5 5v4l-2 3h14l-2-3V9c0-3-2-5-5-5z"></path>219 <rect x="10" y="16" width="4" height="2" fill="#B9C2B9"></rect>220 </svg>221 </div>222 <div class="item-text">Full of Wonder</div>223 </div>224 </div>225 226 <!-- Bottom gesture hint pill -->227 <div class="pill"></div>228</div>229</body>230</html>