GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Generated UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #E9C06F; /* warm mustard main background */13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    background: #C4A267; /* darker band */23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 36px;27    box-sizing: border-box;28    color: #ffffff;29  }30  .status-time {31    font-size: 42px;32    font-weight: 600;33    color: #fff;34    letter-spacing: 1px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .status-icon svg { width: 44px; height: 44px; }42 43  /* Toolbar */44  .toolbar {45    position: absolute;46    top: 120px;47    left: 0;48    width: 1080px;49    height: 170px;50    background: #F0C675;51    display: flex;52    align-items: center;53    justify-content: space-between;54    padding: 0 36px;55    box-sizing: border-box;56    box-shadow: 0 4px 0 rgba(0,0,0,0.08) inset;57  }58  .toolbar-left {59    display: flex;60    align-items: center;61    gap: 26px;62  }63  .back-btn svg { width: 64px; height: 64px; }64  .title-text {65    font-size: 58px;66    font-weight: 700;67    color: #B8955A;68  }69  .toolbar-right {70    display: flex;71    align-items: center;72    gap: 54px;73  }74  .tool-icon svg { width: 64px; height: 64px; fill: #000; }75 76  /* Content */77  .content {78    position: absolute;79    top: 320px;80    left: 36px;81    right: 36px;82    bottom: 120px;83    color: #111;84    padding-top: 30px;85    box-sizing: border-box;86  }87  .note-line {88    font-size: 64px;89    font-weight: 500;90    color: #111;91  }92 93  /* Bottom home indicator */94  .home-indicator {95    position: absolute;96    bottom: 40px;97    left: 50%;98    transform: translateX(-50%);99    width: 380px;100    height: 12px;101    background: #D6D6D6;102    border-radius: 8px;103  }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Status Bar -->110  <div class="status-bar">111    <div class="status-time">3:20</div>112    <div class="status-right">113      <!-- WiFi icon -->114      <div class="status-icon">115        <svg viewBox="0 0 48 48">116          <path d="M4 16c9-7 31-7 40 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>117          <path d="M10 24c6-5 22-5 28 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>118          <circle cx="24" cy="32" r="4" fill="#fff"/>119        </svg>120      </div>121      <!-- Battery icon with small bolt -->122      <div class="status-icon">123        <svg viewBox="0 0 60 48">124          <rect x="2" y="10" width="48" height="28" rx="4" stroke="#fff" stroke-width="3" fill="none"/>125          <rect x="50" y="18" width="8" height="12" rx="2" fill="#fff"/>126          <path d="M26 14l-6 10h8l-4 10 12-16h-8l4-4z" fill="#fff" opacity="0.9"/>127        </svg>128      </div>129    </div>130  </div>131 132  <!-- Toolbar -->133  <div class="toolbar">134    <div class="toolbar-left">135      <!-- Back Arrow -->136      <div class="back-btn">137        <svg viewBox="0 0 48 48">138          <path d="M28 8 L12 24 L28 40" stroke="#000" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>139        </svg>140      </div>141      <div class="title-text">Title</div>142    </div>143    <div class="toolbar-right">144      <!-- Clock icon -->145      <div class="tool-icon">146        <svg viewBox="0 0 48 48">147          <circle cx="24" cy="24" r="18" stroke="#000" stroke-width="4" fill="none"/>148          <path d="M24 12v12l10 6" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round"/>149        </svg>150      </div>151      <!-- Person Add icon -->152      <div class="tool-icon">153        <svg viewBox="0 0 64 64">154          <circle cx="38" cy="22" r="10" stroke="#000" stroke-width="4" fill="none"/>155          <path d="M20 52c0-10 12-16 18-16s18 6 18 16" stroke="#000" stroke-width="4" fill="none" stroke-linecap="round"/>156          <path d="M10 24h14M17 17v14" stroke="#000" stroke-width="4" stroke-linecap="round"/>157        </svg>158      </div>159      <!-- More vertical icon -->160      <div class="tool-icon">161        <svg viewBox="0 0 16 48">162          <circle cx="8" cy="10" r="4" fill="#000"/>163          <circle cx="8" cy="24" r="4" fill="#000"/>164          <circle cx="8" cy="38" r="4" fill="#000"/>165        </svg>166      </div>167    </div>168  </div>169 170  <!-- Content area -->171  <div class="content">172    <div class="note-line">Modeling</div>173  </div>174 175  <!-- Bottom indicator -->176  <div class="home-indicator"></div>177 178</div>179</body>180</html>