GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>UI Render</title>6<style>7 body { margin:0; padding:0; background: transparent; }8 #render-target {9 width:1080px;10 height:2400px;11 position:relative;12 overflow:hidden;13 background:#2f2f2f;14 box-shadow: 0 8px 24px rgba(0,0,0,0.35);15 border-radius: 0;16 font-family: Arial, Helvetica, sans-serif;17 color:#fff;18 }19 .status-bar {20 position:absolute; top:0; left:0; width:100%; height:150px;21 background:#cb91a3;22 display:flex; align-items:center; justify-content:space-between;23 padding:0 40px; color:#fff; font-weight:600;24 font-size:52px;25 }26 .status-left, .status-right { display:flex; align-items:center; gap:28px; }27 .icon { width:48px; height:48px; display:inline-block; }28 .icon svg { width:100%; height:100%; fill:#fff; }29 .app-header {30 position:absolute; top:150px; left:0; width:100%; height:220px;31 background:#595959;32 display:flex; align-items:center; padding:0 40px; box-sizing:border-box;33 }34 .home-icon { margin-right:36px; }35 .avatar {36 width:140px; height:140px; border-radius:70px; background:#6a6a6a;37 border:3px solid #9e9e9e; display:flex; align-items:center; justify-content:center;38 margin-right:28px; color:#ddd; position:relative;39 }40 .avatar svg { width:72px; height:72px; fill:#e0e0e0; }41 .title-block { display:flex; flex-direction:column; }42 .title-row { display:flex; align-items:center; gap:16px; }43 .title { font-size:64px; font-weight:700; }44 .chev { width:34px; height:34px; }45 .subtitle { font-size:30px; color:#e3e3e3; }46 .menu-icon { margin-left:auto; }47 .tabs {48 position:absolute; top:370px; left:0; width:100%; height:120px;49 background:#e8a8b6; display:flex; align-items:flex-end; justify-content:space-around;50 padding:0 40px; box-sizing:border-box;51 }52 .tab {53 font-size:42px; padding-bottom:22px; color:#bfbfbf; letter-spacing:2px;54 }55 .tab.active { color:#000; font-weight:800; position:relative; }56 .tab.active::after {57 content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:#ffffff; border-radius:4px;58 }59 .tab .small-icon { width:44px; height:44px; margin-left:12px; vertical-align:middle; }60 .content {61 position:absolute; top:490px; left:0; width:100%; bottom:0;62 background:#373737; box-sizing:border-box; padding:40px;63 }64 .row { display:flex; justify-content:space-between; align-items:center; }65 .label-pink { color:#f1c0cc; font-size:42px; }66 .notes { margin-top:40px; }67 .notes .underline { height:2px; background:#f1c0cc; margin-top:18px; }68 .duration { margin-top:36px; }69 .duration .center { color:#f1c0cc; font-size:38px; letter-spacing:4px; }70 .duration .right { display:flex; align-items:center; gap:14px; color:#f1c0cc; font-size:38px; }71 .timer-icon { width:42px; height:42px; }72 .timers {73 margin-top:40px; display:flex; justify-content:space-between;74 }75 .timers .col { width:49%; }76 .timers .col .side-label { color:#dcdcdc; font-size:42px; margin-bottom:8px; }77 .timers .col.right .side-label { color:#9c9c9c; }78 .time-big { font-size:170px; font-weight:800; line-height:1; }79 .time-big.gray { color:#9c9c9c; }80 .btn-row { margin-top:60px; display:flex; gap:40px; }81 .btn {82 flex:1; height:140px; border-radius:14px; display:flex; align-items:center; justify-content:center;83 font-size:48px; font-weight:700; box-shadow: 0 6px 0 rgba(0,0,0,0.35) inset, 0 6px 12px rgba(0,0,0,0.25);84 }85 .btn.pause { background:#9e9fa2; color:#151515; }86 .btn.continue { background:#f3b8c5; color:#000; }87 .btn-stop {88 width:360px; height:120px; margin:60px auto 20px; background:#ef643f; color:#000;89 border-radius:12px; display:flex; align-items:center; justify-content:center;90 font-size:48px; font-weight:800; box-shadow: 0 6px 0 rgba(0,0,0,0.35) inset, 0 6px 12px rgba(0,0,0,0.25);91 }92 .sound { margin-top:40px; font-size:40px; color:#eaeaea; }93 .sound .off { color:#f1c0cc; font-weight:800; margin-left:20px; }94 .bottom-cta {95 position:absolute; bottom:160px; left:120px; width:840px; height:120px;96 background:#1fca6b; color:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center;97 font-size:52px; font-weight:800; box-shadow: 0 8px 16px rgba(0,0,0,0.35);98 }99</style>100</head>101<body>102<div id="render-target">103 104 <div class="status-bar">105 <div class="status-left">106 <div>8:39</div>107 <span class="icon">108 <svg viewBox="0 0 24 24"><path d="M2 12h3l3 6h9l3-6h2v2h-2l-3 6H8l-3-6H2v-2zM6 8a3 3 0 1 1 6 0H6z"/></svg>109 </span>110 <span class="icon">111 <svg viewBox="0 0 24 24"><path d="M7 2h10v2h3v3H4V4h3V2zm13 7H4v13h16V9zm-3 4H7v2h10v-2z"/></svg>112 </span>113 </div>114 <div class="status-right">115 <span class="icon">116 <svg viewBox="0 0 24 24"><path d="M2 7h3V5h14v2h3v12H2V7zm2 2v8h16V9H4z"/></svg>117 </span>118 </div>119 </div>120 121 <div class="app-header">122 <span class="home-icon icon">123 <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9h-6v-6H9v6H3v-9z"/></svg>124 </span>125 <div class="avatar">126 <svg viewBox="0 0 24 24"><path d="M7 18c0-2.8 2.2-5 5-5s5 2.2 5 5H7zm5-7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-2-4h4l1 2H9l1-2z"/></svg>127 </div>128 <div class="title-block">129 <div class="title-row">130 <div class="title">Research</div>131 <span class="chev">132 <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z" fill="#fff"/></svg>133 </span>134 </div>135 <div class="subtitle">Nursing</div>136 </div>137 <span class="menu-icon icon" style="margin-left:auto;">138 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>139 </span>140 </div>141 142 <div class="tabs">143 <div class="tab">BOTTLE</div>144 <div class="tab active">NURSING145 <span class="small-icon">146 <svg viewBox="0 0 24 24"><path d="M12 2a1 1 0 0 1 1 1v8l4 2-1 2-5-3V3a1 1 0 0 1 1-1zM7 4h2l1-2h4l1 2h2l1 2H6l1-2zM4 20h16v2H4v-2z"/></svg>147 </span>148 </div>149 <div class="tab">SOLID</div>150 </div>151 152 <div class="content">153 <div class="row">154 <div class="label-pink">Today 08:37 AM</div>155 <div class="label-pink">Until: <span style="letter-spacing:2px; font-weight:800;">End Time</span></div>156 </div>157 158 <div class="notes">159 <div class="label-pink" style="color:#eaeaea;">Notes:</div>160 <div class="underline"></div>161 </div>162 163 <div class="duration row">164 <div style="font-size:42px;">Duration</div>165 <div class="center">< tap to set ></div>166 <div class="right">167 <span class="timer-icon">168 <svg viewBox="0 0 24 24"><path d="M9 2h6v2H9V2zm3 3a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm0 3v5l4 2-1 2-5-3V8h2z"/></svg>169 </span>170 Timer171 <svg viewBox="0 0 24 24" class="chev"><path d="M7 10l5 5 5-5H7z" fill="#f1c0cc"/></svg>172 </div>173 </div>174 175 <div class="timers">176 <div class="col left">177 <div class="side-label">Left (Last Side)</div>178 <div class="time-big">00:02</div>179 </div>180 <div class="col right">181 <div class="side-label">Right</div>182 <div class="time-big gray">00:00</div>183 </div>184 </div>185 186 <div class="btn-row">187 <div class="btn pause">Pause</div>188 <div class="btn continue">Continue (R)</div>189 </div>190 191 <div class="btn-stop">Stop</div>192 193 <div class="sound">Sound alarm: <span class="off">OFF</span></div>194 195 <div class="bottom-cta">Stop and Save</div>196 </div>197 198</div>199</body>200</html>