GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile Viewer UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #0b0b0b;18    color: #e6e6e6;19  }20 21  /* Top App Bar */22  .topbar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 150px;28    background: #2f2f2f;29    display: flex;30    align-items: center;31    padding: 0 36px;32    box-sizing: border-box;33  }34  .back-btn {35    width: 64px;36    height: 64px;37    display: flex;38    align-items: center;39    justify-content: center;40    margin-right: 22px;41  }42  .title {43    font-size: 40px;44    color: #eaeaea;45    white-space: nowrap;46    overflow: hidden;47    text-overflow: ellipsis;48    flex: 1;49  }50  .actions {51    display: flex;52    align-items: center;53    gap: 30px;54  }55  .icon {56    width: 56px;57    height: 56px;58  }59 60  /* Center loading emblem */61  .spinner {62    position: absolute;63    top: 1200px;64    left: 540px;65    transform: translate(-50%, -50%);66    width: 190px;67    height: 190px;68    background: #1a1a1a;69    border-radius: 8px;70    box-shadow: 0 8px 24px rgba(0,0,0,0.35);71  }72  .spinner .inner {73    position: absolute;74    top: 36px;75    left: 36px;76    width: 118px;77    height: 118px;78    background: #2c2c2c;79    border-radius: 4px;80  }81  .spinner .bar-top {82    position: absolute;83    top: 36px;84    left: 36px;85    width: 118px;86    height: 22px;87    background: #ffffff;88    border-radius: 2px;89  }90  .spinner .bar-right {91    position: absolute;92    top: 58px;93    left: 154px;94    width: 22px;95    height: 96px;96    background: #ffffff;97    border-radius: 2px;98  }99 100  /* Bottom action bar */101  .bottomBar {102    position: absolute;103    bottom: 0;104    left: 0;105    width: 1080px;106    height: 170px;107    background: #333333;108    display: flex;109    align-items: center;110    justify-content: space-between;111    padding: 0 36px;112    box-sizing: border-box;113    box-shadow: 0 -4px 12px rgba(0,0,0,0.35);114  }115  .tile {116    width: 140px;117    height: 120px;118    background: #3d3d3d;119    border-radius: 14px;120    display: flex;121    align-items: center;122    justify-content: center;123  }124  .share-btn {125    height: 120px;126    width: 280px;127    background: #4285F4;128    color: #ffffff;129    font-size: 46px;130    font-weight: 700;131    border-radius: 14px;132    display: flex;133    align-items: center;134    justify-content: center;135  }136  /* Helper: simple SVG fill color */137  svg { display: block; }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Top App Bar -->144  <div class="topbar">145    <div class="back-btn">146      <svg class="icon" viewBox="0 0 24 24">147        <path d="M15 4 L7 12 L15 20" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>148        <path d="M7 12 H22" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round"></path>149      </svg>150    </div>151    <div class="title">the-diary-of-anne-frank-1...</div>152    <div class="actions">153      <!-- Star outline -->154      <svg class="icon" viewBox="0 0 24 24">155        <path d="M12 2 L14.9 8.5 L22 9.2 L17 13.8 L18.5 21 L12 17.7 L5.5 21 L7 13.8 L2 9.2 L9.1 8.5 Z" fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"></path>156      </svg>157      <!-- Kebab (vertical dots) -->158      <svg class="icon" viewBox="0 0 24 24">159        <circle cx="12" cy="5" r="2.2" fill="#ffffff"></circle>160        <circle cx="12" cy="12" r="2.2" fill="#ffffff"></circle>161        <circle cx="12" cy="19" r="2.2" fill="#ffffff"></circle>162      </svg>163    </div>164  </div>165 166  <!-- Center loading emblem -->167  <div class="spinner">168    <div class="inner"></div>169    <div class="bar-top"></div>170    <div class="bar-right"></div>171  </div>172 173  <!-- Bottom action bar -->174  <div class="bottomBar">175    <div class="tile">176      <!-- Chat bubble icon -->177      <svg viewBox="0 0 24 24" width="62" height="62">178        <path d="M4 5h16v10H8l-4 4V5z" fill="none" stroke="#ffffff" stroke-width="2" stroke-linejoin="round"></path>179        <circle cx="9" cy="10" r="1.6" fill="#ffffff"></circle>180        <circle cx="13" cy="10" r="1.6" fill="#ffffff"></circle>181        <circle cx="17" cy="10" r="1.6" fill="#ffffff"></circle>182      </svg>183    </div>184    <div class="tile">185      <!-- Link icon -->186      <svg viewBox="0 0 24 24" width="62" height="62">187        <path d="M8 12a4 4 0 014-4h3" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>188        <path d="M16 12a4 4 0 01-4 4H9" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>189        <path d="M9 8l6 8" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>190      </svg>191    </div>192    <div class="share-btn">Share</div>193  </div>194 195</div>196</body>197</html>