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>Smiley Drawing App Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #e6e6e6;15 }16 17 /* Top black area (status bar / safe area) */18 .top-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 background: #000;25 }26 27 /* White drawing board/card */28 .board {29 position: absolute;30 left: 40px;31 top: 160px;32 width: 1000px;33 height: 1700px;34 background: #ffffff;35 border-radius: 8px;36 }37 38 .title {39 position: absolute;40 top: 260px;41 left: 0;42 width: 100%;43 text-align: center;44 font-family: cursive;45 font-size: 52px;46 color: #222;47 letter-spacing: 0.5px;48 }49 50 /* Smiley SVG placement */51 .smiley-wrap {52 position: absolute;53 left: 0;54 right: 0;55 margin: 0 auto;56 top: 900px;57 width: 460px;58 height: 540px;59 }60 61 /* Bottom gradient overlay on the board */62 .board-toolbar {63 position: absolute;64 left: 0;65 bottom: 0;66 width: 100%;67 height: 220px;68 background: linear-gradient(to top, #9e9e9e 0%, #cfcfcf 70%, rgba(207,207,207,0) 100%);69 border-bottom-left-radius: 8px;70 border-bottom-right-radius: 8px;71 }72 73 .tool-icon {74 position: absolute;75 width: 120px;76 height: 120px;77 fill: none;78 stroke: #ffffff;79 stroke-width: 10;80 opacity: 0.95;81 }82 .tool-pencil { left: 56px; bottom: 52px; }83 .tool-trash { right: 56px; bottom: 52px; }84 85 /* Floating Share Button */86 .fab-share {87 position: absolute;88 left: 60px;89 bottom: 390px;90 width: 140px;91 height: 140px;92 background: #f4a53a;93 border-radius: 50%;94 box-shadow: 0 10px 18px rgba(0,0,0,0.25);95 display: flex;96 align-items: center;97 justify-content: center;98 }99 .fab-share svg { width: 60px; height: 60px; fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }100 101 /* New Button */102 .btn-new {103 position: absolute;104 right: 60px;105 bottom: 390px;106 width: 320px;107 height: 140px;108 background: #7b3bf3;109 color: #fff;110 font-size: 52px;111 border-radius: 80px;112 box-shadow: 0 10px 18px rgba(0,0,0,0.25);113 display: flex;114 align-items: center;115 justify-content: center;116 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;117 }118 119 /* Bottom black area with ad and home indicator */120 .bottom-bar {121 position: absolute;122 left: 0;123 bottom: 0;124 width: 1080px;125 height: 280px;126 background: #000;127 }128 .ad-banner {129 position: absolute;130 left: 90px;131 top: 50px;132 width: 900px;133 height: 140px;134 background: #d7322f;135 border-radius: 10px;136 display: flex;137 align-items: center;138 padding: 0 20px;139 box-sizing: border-box;140 }141 .ad-text {142 color: #fff;143 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;144 font-size: 40px;145 line-height: 1.2;146 flex: 1;147 }148 .ad-sub {149 font-size: 26px;150 opacity: 0.9;151 }152 .ad-img {153 width: 220px;154 height: 110px;155 background: #E0E0E0;156 border: 1px solid #BDBDBD;157 color: #757575;158 display: flex;159 align-items: center;160 justify-content: center;161 margin-left: 16px;162 border-radius: 6px;163 font-size: 24px;164 }165 .home-indicator {166 position: absolute;167 left: 50%;168 transform: translateX(-50%);169 bottom: 18px;170 width: 220px;171 height: 12px;172 background: #eaeaea;173 border-radius: 8px;174 opacity: 0.95;175 }176</style>177</head>178<body>179<div id="render-target">180 <div class="top-bar"></div>181 182 <div class="board">183 <div class="title">Smiley</div>184 185 <div class="smiley-wrap">186 <svg viewBox="0 0 420 520" width="100%" height="100%">187 <!-- Face -->188 <ellipse cx="210" cy="260" rx="170" ry="210" fill="#F6EA8A" stroke="#000000" stroke-width="36"/>189 <!-- Eyes (small arcs) -->190 <path d="M140 160 Q150 150 160 160" stroke="#000" stroke-width="28" fill="none" stroke-linecap="round"/>191 <path d="M260 160 Q270 150 280 160" stroke="#000" stroke-width="28" fill="none" stroke-linecap="round"/>192 <!-- Smile -->193 <path d="M130 290 Q210 380 290 290" stroke="#000" stroke-width="36" fill="none" stroke-linecap="round" stroke-linejoin="round"/>194 </svg>195 </div>196 197 <!-- Gradient toolbar and corner icons -->198 <div class="board-toolbar">199 <!-- Pencil icon -->200 <svg class="tool-icon tool-pencil" viewBox="0 0 120 120">201 <path d="M20 90 L30 70 L80 20 L100 40 L50 90 Z" fill="none" stroke="#fff" stroke-width="8"/>202 <line x1="35" y1="75" x2="55" y2="95" stroke="#fff" stroke-width="8"/>203 </svg>204 <!-- Trash icon -->205 <svg class="tool-icon tool-trash" viewBox="0 0 120 120">206 <rect x="30" y="40" width="60" height="60" rx="8" ry="8" stroke="#fff" fill="none" stroke-width="8"/>207 <line x1="25" y1="40" x2="95" y2="40" stroke="#fff" stroke-width="10"/>208 <line x1="45" y1="55" x2="45" y2="90" stroke="#fff" stroke-width="8"/>209 <line x1="60" y1="55" x2="60" y2="90" stroke="#fff" stroke-width="8"/>210 <line x1="75" y1="55" x2="75" y2="90" stroke="#fff" stroke-width="8"/>211 </svg>212 </div>213 </div>214 215 <!-- Floating share button -->216 <div class="fab-share">217 <svg viewBox="0 0 100 100">218 <circle cx="24" cy="76" r="9" fill="#fff"/>219 <circle cx="76" cy="24" r="9" fill="#fff"/>220 <circle cx="76" cy="76" r="9" fill="#fff"/>221 <path d="M32 70 L68 30" />222 <path d="M32 70 L68 70" />223 </svg>224 </div>225 226 <!-- New Button -->227 <div class="btn-new">New</div>228 229 <!-- Bottom black bar with ad and home indicator -->230 <div class="bottom-bar">231 <div class="ad-banner">232 <div class="ad-text">233 have a ROFL!234 <div class="ad-sub">roll on the floor, laughing • zomato • up to 60% OFF</div>235 </div>236 <div class="ad-img">[IMG: Pizza slice]</div>237 </div>238 <div class="home-indicator"></div>239 </div>240</div>241</body>242</html>