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>Note Editor Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #1b1b1b; color: #e9e9e9;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0; height: 110px;17 display: flex; align-items: center; padding: 0 28px; color: #dcdcdc;18 font-weight: 600; font-size: 40px;19 }20 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }21 22 /* Top app actions */23 .top-actions {24 position: absolute; top: 120px; left: 0; right: 0; height: 120px;25 display: flex; align-items: center; padding: 0 24px;26 }27 .icon-btn {28 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;29 border-radius: 12px; color: #bdbdbd;30 }31 .icon-row { margin-left: auto; display: flex; gap: 28px; }32 .stroke { stroke: #bdbdbd; fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }33 .fill { fill: #bdbdbd; }34 35 /* Content */36 .content {37 position: absolute; top: 280px; left: 54px; right: 54px;38 }39 .title {40 font-size: 88px; font-weight: 500; color: #efefef; letter-spacing: 0.5px; margin: 0 0 30px 20px;41 }42 .note-line {43 font-size: 48px; color: #cfcfcf; margin-left: 22px; display: inline-flex; align-items: center; gap: 6px;44 }45 .caret {46 display: inline-block; width: 3px; height: 56px; background: #cfcfcf; animation: blink 1.2s steps(1) infinite;47 }48 @keyframes blink { 50% { opacity: 0; } }49 50 /* Formatting toolbar above keyboard */51 .format-bar {52 position: absolute; left: 0; right: 0; bottom: 960px; height: 100px;53 display: flex; align-items: center; gap: 42px; padding: 0 36px;54 }55 .chip {56 width: 90px; height: 90px; border-radius: 20px; background: #242424;57 display: flex; align-items: center; justify-content: center; border: 1px solid #303030;58 }59 60 /* Keyboard */61 .keyboard {62 position: absolute; left: 0; right: 0; bottom: 120px; height: 880px;63 background: #1a1a1a; border-top: 1px solid #2b2b2b; padding: 22px 18px;64 display: flex; flex-direction: column; gap: 18px;65 }66 .k-row { display: flex; gap: 14px; justify-content: center; }67 .key {68 background: #2a2a2a; color: #e7e7e7; border-radius: 18px; min-width: 84px; height: 120px;69 display: flex; align-items: center; justify-content: center; font-size: 44px;70 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.03);71 }72 .key.sm { min-width: 110px; }73 .key.wide { min-width: 200px; }74 .key.space { min-width: 520px; }75 .key.func { background: #262b33; color: #dfe6ff; }76 .key.enter { background: #cad3ff; color: #1a1a1a; }77 .k-top { color: #9e9e9e; font-size: 36px; display: flex; align-items: center; gap: 22px; padding: 0 10px; }78 79 /* Bottom gesture bar */80 .gesture {81 position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);82 width: 320px; height: 12px; border-radius: 12px; background: #e6e6e6; opacity: 0.85;83 }84</style>85</head>86<body>87<div id="render-target">88 89 <!-- Status Bar -->90 <div class="status-bar">91 <div>1:22</div>92 <div class="status-right">93 <!-- simple wifi icon -->94 <svg width="48" height="48" viewBox="0 0 24 24" class="stroke">95 <path d="M2 8c5-4 15-4 20 0"/>96 <path d="M5 11c3.5-3 10.5-3 14 0"/>97 <path d="M8 14c2.2-2 5.8-2 8 0"/>98 <circle cx="12" cy="18" r="1.4" fill="#bdbdbd" stroke="none"/>99 </svg>100 <!-- battery -->101 <svg width="48" height="48" viewBox="0 0 24 24" class="stroke">102 <rect x="2.5" y="7" width="16" height="10" rx="2"></rect>103 <rect x="19" y="10" width="2.5" height="4" rx="1"></rect>104 <rect x="4.5" y="9" width="12" height="6" rx="1" class="fill"></rect>105 </svg>106 </div>107 </div>108 109 <!-- Top app bar with back and actions -->110 <div class="top-actions">111 <div class="icon-btn" aria-label="Back">112 <svg width="60" height="60" viewBox="0 0 24 24" class="stroke">113 <path d="M15 18l-6-6 6-6"></path>114 </svg>115 </div>116 <div class="icon-row">117 <!-- Pin -->118 <div class="icon-btn">119 <svg width="56" height="56" viewBox="0 0 24 24" class="stroke">120 <path d="M10 3l4 4-2 2 4 4-2 2-4-4-2 2-2-2 2-2-4-4"></path>121 <path d="M12 14v7"></path>122 </svg>123 </div>124 <!-- Bell -->125 <div class="icon-btn">126 <svg width="56" height="56" viewBox="0 0 24 24" class="stroke">127 <path d="M18 16v-5a6 6 0 10-12 0v5l-2 2h16l-2-2z"></path>128 <path d="M9 18a3 3 0 006 0"></path>129 </svg>130 </div>131 <!-- Download to box -->132 <div class="icon-btn">133 <svg width="56" height="56" viewBox="0 0 24 24" class="stroke">134 <rect x="3" y="14" width="18" height="6" rx="1"></rect>135 <path d="M12 4v8"></path>136 <path d="M8 10l4 4 4-4"></path>137 </svg>138 </div>139 </div>140 </div>141 142 <!-- Content -->143 <div class="content">144 <h1 class="title">My Movies</h1>145 <div class="note-line">Project X <span class="caret"></span></div>146 </div>147 148 <!-- Formatting toolbar -->149 <div class="format-bar">150 <div class="chip" title="Add">151 <svg width="52" height="52" viewBox="0 0 24 24" class="stroke"><path d="M12 5v14M5 12h14"/></svg>152 </div>153 <div class="chip" title="Color">154 <svg width="52" height="52" viewBox="0 0 24 24" class="stroke">155 <path d="M12 3a6 6 0 016 6c0 6-6 9-6 9s-6-3-6-9a6 6 0 016-6z"></path>156 <circle cx="12" cy="9" r="2" class="fill"></circle>157 </svg>158 </div>159 <div class="chip" title="Undo">160 <svg width="52" height="52" viewBox="0 0 24 24" class="stroke">161 <path d="M9 7H5v4"></path>162 <path d="M5 11a8 8 0 1114 3"></path>163 </svg>164 </div>165 <div class="chip" title="Redo">166 <svg width="52" height="52" viewBox="0 0 24 24" class="stroke">167 <path d="M15 7h4v4"></path>168 <path d="M19 11a8 8 0 10-14 3"></path>169 </svg>170 </div>171 <div class="chip" title="More">172 <svg width="52" height="52" viewBox="0 0 24 24" class="fill">173 <circle cx="5" cy="12" r="2"></circle>174 <circle cx="12" cy="12" r="2"></circle>175 <circle cx="19" cy="12" r="2"></circle>176 </svg>177 </div>178 </div>179 180 <!-- Keyboard -->181 <div class="keyboard" aria-label="Virtual keyboard">182 <div class="k-top">183 <svg width="60" height="60" viewBox="0 0 24 24" class="stroke"><rect x="4" y="4" width="16" height="16" rx="3"/></svg>184 <svg width="60" height="60" viewBox="0 0 24 24" class="stroke"><path d="M4 12h16M12 4v16"/></svg>185 <svg width="60" height="60" viewBox="0 0 24 24" class="stroke"><path d="M12 8v8M8 12h8"/></svg>186 <svg width="60" height="60" viewBox="0 0 24 24" class="stroke"><path d="M8 12h8"/></svg>187 <svg width="60" height="60" viewBox="0 0 24 24" class="stroke"><circle cx="12" cy="12" r="1.2"/><circle cx="6" cy="12" r="1.2"/><circle cx="18" cy="12" r="1.2"/></svg>188 </div>189 190 <div class="k-row">191 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>192 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>193 </div>194 <div class="k-row">195 <div class="key sm">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>196 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key sm">l</div>197 </div>198 <div class="k-row">199 <div class="key sm func">⇧</div>200 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>201 <div class="key sm func">⌫</div>202 </div>203 <div class="k-row">204 <div class="key func wide">?123</div>205 <div class="key func">,</div>206 <div class="key func">😊</div>207 <div class="key space"> </div>208 <div class="key">.</div>209 <div class="key enter">↵</div>210 </div>211 </div>212 213 <!-- Gesture bar -->214 <div class="gesture"></div>215 216</div>217</body>218</html>