GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Blaze Wordpad - Mockup</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Arial", sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11    border-radius:0;12  }13 14  /* Top teal area */15  .header {16    position:absolute; left:0; top:0;17    width:100%; height:460px;18    background:#57B9C6;19  }20  .status-bar {21    position:absolute; top:20px; left:0; width:100%; height:80px;22    display:flex; align-items:center; justify-content:space-between;23    padding:0 40px; color:#ffffff; font-weight:600; font-size:38px;24  }25  .status-left { display:flex; align-items:center; gap:22px; }26  .status-icons { display:flex; align-items:center; gap:18px; }27  .title {28    position:absolute; top:150px; left:0; width:100%;29    text-align:center; color:#ffffff; font-size:66px;30    letter-spacing:2px; font-weight:700;31  }32  .help-btn {33    position:absolute; top:120px; right:40px;34    width:64px; height:64px; border-radius:50%;35    background:#79CAD3; display:flex; align-items:center; justify-content:center;36    color:#ffffff; font-size:40px; box-shadow:0 4px 10px rgba(0,0,0,0.18);37  }38 39  /* Search bar */40  .search-bar {41    position:absolute; left:40px; right:40px; top:300px;42    height:120px; background:#ffffff; border-radius:60px;43    box-shadow:0 10px 20px rgba(0,0,0,0.15);44    display:flex; align-items:center; padding:0 40px; gap:26px;45  }46  .search-text {47    color:#8FA8AF; font-size:44px;48  }49 50  /* Main content */51  .content {52    position:absolute; top:460px; left:0; right:0; bottom:180px;53    padding-top:60px; text-align:center;54  }55  .illustration {56    margin:60px auto 40px auto;57    width:420px; height:380px;58    background:#E0E0E0; border:1px solid #BDBDBD;59    display:flex; align-items:center; justify-content:center;60    color:#757575; font-size:32px;61    border-radius:10px;62  }63  .welcome {64    color:#B9BCBE; font-size:56px; font-weight:700; margin-top:10px;65  }66  .subtext {67    color:#B9BCBE; font-size:50px; margin-top:28px;68  }69 70  /* Floating action button */71  .fab {72    position:absolute; right:60px; bottom:260px;73    width:150px; height:150px; border-radius:50%;74    background:#57B9C6; display:flex; align-items:center; justify-content:center;75    box-shadow:0 12px 26px rgba(0,0,0,0.25);76  }77  .fab svg { width:72px; height:72px; }78 79  /* Bottom nav */80  .bottom-nav {81    position:absolute; left:0; right:0; bottom:0; height:180px;82    border-top:1px solid #e7e7e7; background:#ffffff;83    display:flex; align-items:center; justify-content:space-around;84  }85  .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; }86  .nav-label { font-size:40px; color:#A9A9A9; }87  .active .nav-label { color:#57B9C6; font-weight:600; }88  .nav-icon svg { width:70px; height:70px; }89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Header and status bar -->95  <div class="header">96    <div class="status-bar">97      <div class="status-left">98        <div>10:55</div>99        <div class="status-icons">100          <!-- simple small app icons -->101          <svg width="34" height="34"><circle cx="17" cy="17" r="13" fill="none" stroke="#ffffff" stroke-width="3"/></svg>102          <svg width="34" height="34"><rect x="6" y="6" width="22" height="22" fill="none" stroke="#ffffff" stroke-width="3"/></svg>103          <svg width="34" height="34"><circle cx="17" cy="17" r="4" fill="#ffffff"/><circle cx="17" cy="17" r="13" fill="none" stroke="#ffffff" stroke-width="3"/></svg>104        </div>105      </div>106      <div class="status-icons">107        <!-- WiFi -->108        <svg width="40" height="40" viewBox="0 0 40 40">109          <path d="M6 16c8-8 20-8 28 0" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>110          <path d="M10 20c6-6 14-6 20 0" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>111          <path d="M14 24c4-4 8-4 12 0" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>112          <circle cx="20" cy="28" r="2.8" fill="#ffffff"/>113        </svg>114        <!-- Battery -->115        <svg width="48" height="40" viewBox="0 0 48 40">116          <rect x="2" y="8" width="38" height="24" rx="4" ry="4" fill="none" stroke="#ffffff" stroke-width="3"/>117          <rect x="42" y="14" width="6" height="12" rx="2" fill="#ffffff"/>118        </svg>119      </div>120    </div>121 122    <div class="title">BLAZE WORDPAD</div>123 124    <div class="help-btn">?</div>125 126    <div class="search-bar">127      <!-- Hamburger icon -->128      <svg width="58" height="58" viewBox="0 0 58 58">129        <rect x="8" y="14" width="42" height="6" fill="#57B9C6"/>130        <rect x="8" y="26" width="42" height="6" fill="#57B9C6"/>131        <rect x="8" y="38" width="42" height="6" fill="#57B9C6"/>132      </svg>133      <div class="search-text">Search</div>134    </div>135  </div>136 137  <!-- Main content -->138  <div class="content">139    <div class="illustration">[IMG: Document & Person Illustration]</div>140    <div class="welcome">Welcome.</div>141    <div class="subtext">Create Your First Document !</div>142  </div>143 144  <!-- Floating Action Button -->145  <div class="fab">146    <svg viewBox="0 0 100 100">147      <line x1="50" y1="22" x2="50" y2="78" stroke="#ffffff" stroke-width="12" stroke-linecap="round"/>148      <line x1="22" y1="50" x2="78" y2="50" stroke="#ffffff" stroke-width="12" stroke-linecap="round"/>149    </svg>150  </div>151 152  <!-- Bottom Navigation -->153  <div class="bottom-nav">154    <div class="nav-item active">155      <div class="nav-icon">156        <!-- List icon -->157        <svg viewBox="0 0 100 100">158          <rect x="18" y="24" width="64" height="10" fill="#57B9C6"/>159          <rect x="18" y="44" width="64" height="10" fill="#57B9C6"/>160          <rect x="18" y="64" width="64" height="10" fill="#57B9C6"/>161        </svg>162      </div>163      <div class="nav-label">Home</div>164    </div>165 166    <div class="nav-item">167      <div class="nav-icon">168        <!-- Camera for OCR -->169        <svg viewBox="0 0 100 100">170          <rect x="20" y="34" width="60" height="40" rx="8" ry="8" fill="#B0B0B0"/>171          <rect x="40" y="24" width="20" height="12" rx="4" fill="#B0B0B0"/>172          <circle cx="50" cy="54" r="12" fill="#ffffff" stroke="#B0B0B0" stroke-width="6"/>173        </svg>174      </div>175      <div class="nav-label">OCR</div>176    </div>177 178    <div class="nav-item">179      <div class="nav-icon">180        <!-- Speech/head -->181        <svg viewBox="0 0 100 100">182          <circle cx="40" cy="44" r="16" fill="#B0B0B0"/>183          <rect x="24" y="60" width="32" height="16" rx="8" fill="#B0B0B0"/>184          <path d="M62 44c10 0 16 6 16 14" stroke="#B0B0B0" stroke-width="6" fill="none" stroke-linecap="round"/>185          <path d="M62 36c12 0 22 10 22 22" stroke="#B0B0B0" stroke-width="6" fill="none" stroke-linecap="round"/>186        </svg>187      </div>188      <div class="nav-label">Speech</div>189    </div>190 191    <div class="nav-item">192      <div class="nav-icon">193        <!-- Grid icon -->194        <svg viewBox="0 0 100 100">195          <rect x="18" y="18" width="26" height="26" fill="#B0B0B0"/>196          <rect x="56" y="18" width="26" height="26" fill="#B0B0B0"/>197          <rect x="18" y="56" width="26" height="26" fill="#B0B0B0"/>198          <rect x="56" y="56" width="26" height="26" fill="#B0B0B0"/>199        </svg>200      </div>201      <div class="nav-label">Extra</div>202    </div>203  </div>204 205</div>206</body>207</html>