GD-ML/AndroidCode

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>Globalisation Note</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: #23170F; /* deep brown */15    font-family: Arial, Helvetica, sans-serif;16    color: #E9D8C8; /* light beige for UI elements */17  }18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #E9D8C8;29    font-size: 40px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .app-bar {38    position: absolute;39    top: 110px;40    left: 0;41    width: 1080px;42    height: 150px;43    display: flex;44    align-items: center;45    padding: 0 32px;46    gap: 24px;47  }48  .title {49    font-size: 64px;50    font-weight: 600;51    color: #E9D8C8;52    flex: 1;53  }54  .app-actions {55    display: flex;56    align-items: center;57    gap: 34px;58  }59  .icon-btn svg {60    width: 60px;61    height: 60px;62    fill: none;63    stroke: #DCC7B4;64    stroke-width: 7;65    stroke-linecap: round;66    stroke-linejoin: round;67  }68  .icon-dots {69    width: 14px;70    height: 14px;71    background: #DCC7B4;72    border-radius: 50%;73    box-shadow: 0 44px 0 0 #DCC7B4, 0 88px 0 0 #DCC7B4;74    margin-right: 12px;75  }76  .content-card {77    position: absolute;78    left: 30px;79    width: 1020px;80    top: 780px;81    background: #FFFFFF;82    border-radius: 6px;83    box-shadow: 0 2px 0 rgba(0,0,0,0.18);84    padding: 140px 80px;85    color: #111111;86  }87  .card-text {88    font-size: 72px;89    text-align: center;90    font-weight: 500;91  }92  .fab {93    position: absolute;94    right: 68px;95    bottom: 210px;96    width: 160px;97    height: 160px;98    background: #7A4A18;99    border-radius: 40px;100    box-shadow: 0 8px 22px rgba(0,0,0,0.45);101    display: flex;102    align-items: center;103    justify-content: center;104  }105  .fab svg {106    width: 80px;107    height: 80px;108    fill: none;109    stroke: #F1DDCD;110    stroke-width: 7;111    stroke-linecap: round;112    stroke-linejoin: round;113  }114</style>115</head>116<body>117<div id="render-target">118  <!-- Status Bar -->119  <div class="status-bar">120    <div>9:13</div>121    <div class="status-icons">122      <!-- simple triangular network and battery icons -->123      <svg width="46" height="46" viewBox="0 0 24 24">124        <path d="M3 17l9-12 9 12H3Z" fill="#E9D8C8"></path>125      </svg>126      <svg width="46" height="46" viewBox="0 0 24 24">127        <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="none" stroke="#E9D8C8" stroke-width="2"></rect>128        <rect x="5" y="9" width="12" height="6" fill="#E9D8C8"></rect>129        <rect x="20" y="10" width="2" height="4" fill="#E9D8C8"></rect>130      </svg>131    </div>132  </div>133 134  <!-- App Bar -->135  <div class="app-bar">136    <div class="icon-btn">137      <svg viewBox="0 0 24 24">138        <path d="M15 6l-6 6 6 6"></path>139      </svg>140    </div>141    <div class="title">Globalisation</div>142    <div class="app-actions">143      <div class="icon-btn">144        <!-- chat bubble -->145        <svg viewBox="0 0 24 24">146          <path d="M4 5h16v11H9l-5 4V5z"></path>147        </svg>148      </div>149      <div class="icon-btn">150        <!-- search -->151        <svg viewBox="0 0 24 24">152          <circle cx="11" cy="11" r="6"></circle>153          <path d="M20 20l-4.5-4.5"></path>154        </svg>155      </div>156      <div class="icon-dots"></div>157    </div>158  </div>159 160  <!-- Content Card -->161  <div class="content-card">162    <div class="card-text">How to read MRZ?</div>163  </div>164 165  <!-- Floating Action Button -->166  <div class="fab">167    <svg viewBox="0 0 24 24">168      <rect x="5" y="3" width="12" height="18" rx="2"></rect>169      <path d="M9 7h4M9 11h6M9 15h6"></path>170    </svg>171  </div>172</div>173</body>174</html>