GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Book Report</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#0A0F12; color:#e6f2ff;10  }11  /* Status bar */12  .status-bar {13    position:absolute; top:0; left:0; width:100%; height:90px;14    color:#ffffff; font-weight:600; font-size:44px; letter-spacing:0.5px;15    display:flex; align-items:center; justify-content:space-between;16    padding:0 40px;17  }18  .status-icons { display:flex; gap:34px; align-items:center; }19  .status-dot { width:10px; height:10px; background:#ffffff; border-radius:50%; }20  /* Toolbar */21  .toolbar {22    position:absolute; top:90px; left:0; width:100%; height:95px;23    display:flex; align-items:center; justify-content:flex-start;24    padding:0 28px; gap:30px; color:#d6e7f6;25  }26  .icon-btn {27    width:72px; height:72px; display:flex; align-items:center; justify-content:center;28    border-radius:36px; background:transparent;29  }30  .icon-circle {31    background:#263e30; color:#cfe5c2;32  }33  .svg { width:48px; height:48px; fill:#c9d7e6; }34  /* Cards */35  .card {36    position:absolute; left:25px; width:1030px; background:#0f2e44; border-radius:22px;37    box-shadow:0 8px 20px rgba(0,0,0,0.35);38    border:1px solid rgba(255,255,255,0.03);39  }40  .title-card { top:210px; height:520px; padding:80px 70px; }41  .book-title { font-size:72px; text-align:center; letter-spacing:1px; color:#cfe0f8; }42  .subtitle { text-align:center; margin-top:30px; font-size:38px; color:#8fb16b; }43  .decor-line {44    position:absolute; height:5px; background:#8fb16b; border-radius:3px;45  }46  .decor-vertical { width:5px; height:110px; background:#8fb16b; border-radius:3px; position:absolute; }47  /* Split card (behind bubble) */48  .split-card {49    top:760px; height:470px; display:flex; overflow:hidden;50  }51  .split-card .half { flex:1; }52  .split-card .half:first-child { background:#0f2e44; border-top-left-radius:22px; border-bottom-left-radius:22px; }53  .split-card .half:last-child { background:#0f2a3c; border-top-right-radius:22px; border-bottom-right-radius:22px; }54  /* Bubble overlay */55  .bubble {56    position:absolute; top:810px; left:85px; width:910px; height:360px;57    background:#2d4233; border-radius:56px; color:#d9f0d2;58    padding:54px 60px; box-shadow:0 16px 38px rgba(0,0,0,0.5);59    border:1px solid rgba(255,255,255,0.06);60  }61  .bubble h3 { margin:0; font-size:46px; font-weight:700; }62  .bubble p { margin:26px 0 40px 0; font-size:36px; line-height:1.35; color:#e4f4e0; }63  .bubble .buttons { display:flex; justify-content:space-between; font-size:40px; font-weight:700; }64  .bubble .btn-text { color:#cfe5c2; }65  .bubble .btn-cta { color:#a9e58a; }66  /* Summary card */67  .summary-card { top:1260px; height:470px; padding:60px 60px; }68  .section-title { font-size:58px; color:#cbe0f7; }69  .hr { width:120px; height:6px; background:#2f6fb2; border-radius:3px; margin:16px 0 30px 0; }70  .muted { font-size:32px; color:#b7c9da; line-height:1.5; }71  .img-books {72    position:absolute; right:60px; bottom:40px; width:260px; height:210px;73    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;74    display:flex; align-items:center; justify-content:center; font-size:26px;75  }76  /* Setting section */77  .settings-card { top:1750px; height:530px; padding:50px 60px; }78  .two-cols { display:flex; gap:60px; margin-top:30px; }79  .col { flex:1; }80  .subheading { font-size:44px; color:#9cc26a; }81  .mini-hr { width:120px; height:4px; background:#9cc26a; border-radius:2px; margin:12px 0 20px 0; opacity:0.7; }82  .para { font-size:30px; color:#b7c9da; line-height:1.5; }83</style>84</head>85<body>86<div id="render-target">87  <!-- Status bar -->88  <div class="status-bar">89    <div>12:41</div>90    <div class="status-icons">91      <div class="status-dot"></div>92      <div class="status-dot"></div>93      <div class="status-dot"></div>94      <div class="status-dot"></div>95      <div class="status-dot"></div>96    </div>97  </div>98 99  <!-- Toolbar -->100  <div class="toolbar">101    <div class="icon-btn" title="Back">102      <svg class="svg" viewBox="0 0 48 48">103        <path d="M28 8 L12 24 L28 40" stroke="#c9d7e6" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>104      </svg>105    </div>106    <div class="icon-btn" title="Play">107      <svg class="svg" viewBox="0 0 48 48">108        <polygon points="14,10 38,24 14,38" fill="#c9d7e6"></polygon>109      </svg>110    </div>111    <div class="icon-btn" title="Search">112      <svg class="svg" viewBox="0 0 48 48">113        <circle cx="20" cy="20" r="12" stroke="#c9d7e6" stroke-width="6" fill="none"/>114        <line x1="32" y1="32" x2="44" y2="44" stroke="#c9d7e6" stroke-width="6" stroke-linecap="round"/>115      </svg>116    </div>117    <div class="icon-btn icon-circle" title="People">118      <svg class="svg" viewBox="0 0 48 48">119        <circle cx="24" cy="18" r="9" fill="#cfe5c2"></circle>120        <rect x="10" y="30" width="28" height="10" rx="5" fill="#cfe5c2"></rect>121        <rect x="33" y="9" width="10" height="4" rx="2" fill="#2d4233"></rect>122        <rect x="37" y="5" width="4" height="12" rx="2" fill="#2d4233"></rect>123      </svg>124    </div>125    <div class="icon-btn" title="Menu">126      <svg class="svg" viewBox="0 0 48 48">127        <circle cx="24" cy="12" r="4" fill="#c9d7e6"></circle>128        <circle cx="24" cy="24" r="4" fill="#c9d7e6"></circle>129        <circle cx="24" cy="36" r="4" fill="#c9d7e6"></circle>130      </svg>131    </div>132  </div>133 134  <!-- Title card -->135  <div class="card title-card">136    <div class="book-title">Book Title</div>137    <div class="subtitle">A report by Your Name</div>138 139    <!-- decorative corners -->140    <div class="decor-line" style="top:260px; left:490px; width:60px;"></div>141    <div class="decor-vertical" style="right:90px; top:150px;"></div>142    <div class="decor-line" style="top:140px; left:140px; width:150px;"></div>143    <div class="decor-line" style="bottom:90px; right:140px; width:150px;"></div>144  </div>145 146  <!-- Split card behind bubble -->147  <div class="card split-card">148    <div class="half"></div>149    <div class="half"></div>150  </div>151 152  <!-- Bubble overlay -->153  <div class="bubble">154    <h3>Create .pptx files often?</h3>155    <p>In Settings, you can turn on the optional creation of PowerPoint (.pptx) files from the creation (+) button.</p>156    <div class="buttons">157      <div class="btn-text">Maybe later</div>158      <div class="btn-cta">Turn on now</div>159    </div>160  </div>161 162  <!-- Summary card -->163  <div class="card summary-card">164    <div class="section-title">Summary</div>165    <div class="hr"></div>166    <div class="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>167    <div class="img-books">[IMG: Stack of Books]</div>168  </div>169 170  <!-- Settings section -->171  <div class="card settings-card">172    <div class="section-title">Setting</div>173    <div class="two-cols">174      <div class="col">175        <div class="subheading">Where did it happen?</div>176        <div class="mini-hr"></div>177        <div class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non justo eu lorem volutpat posuere. Suspendisse potenti.</div>178      </div>179      <div class="col">180        <div class="subheading">How about when??</div>181        <div class="mini-hr"></div>182        <div class="para">Aenean sed eros tristique, eleifend nibh at, sodales arcu. Curabitur dictum augue sit amet ligula faucibus finibus.</div>183      </div>184    </div>185  </div>186</div>187</body>188</html>