GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Inter", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#FCFCFC;10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; width:100%; height:90px;15    display:flex; align-items:center; justify-content:space-between;16    padding:0 32px; color:#222; font-weight:600; font-size:36px;17  }18  .status-icons { display:flex; align-items:center; gap:24px; font-size:26px; color:#444; }19 20  /* Top app bar */21  .top-bar {22    position:absolute; top:90px; left:0; width:100%; height:98px;23    display:flex; align-items:center; justify-content:space-between;24    padding:0 30px;25  }26  .hamburger { width:70px; height:70px; border-radius:16px; display:flex; align-items:center; justify-content:center; }27  .hamburger svg { width:42px; height:42px; fill:#222; }28  .red-dot {29    position:absolute; top:86px; left:58px; width:16px; height:16px; background:#F44336; border-radius:50%;30  }31 32  .right-tools { display:flex; align-items:center; gap:24px; }33  .icon-btn {34    width:64px; height:64px; border-radius:32px; display:flex; align-items:center; justify-content:center; background:#FFFFFF; border:1px solid #E6E6E6;35  }36  .icon-btn svg { width:34px; height:34px; fill:#333; }37  .vip-badge {38    display:flex; align-items:center; gap:12px; background:#FFA94D; color:#fff; font-weight:700;39    padding:14px 22px; border-radius:36px; box-shadow:0 2px 0 rgba(0,0,0,0.08);40  }41  .vip-badge svg { width:30px; height:30px; fill:#fff; }42 43  /* Tabs */44  .tabs {45    position:absolute; top:188px; left:30px; display:flex; gap:20px; align-items:center;46  }47  .pill {48    padding:22px 30px; border-radius:40px; background:#EFEFEF; color:#333; font-weight:700; font-size:34px;49  }50  .pill.active { background:#3A86FF; color:#fff; }51  .pill-icon {52    width:62px; height:62px; border-radius:31px; background:#EFEFEF; display:flex; align-items:center; justify-content:center;53    border:1px solid #E5E5E5;54  }55  .pill-icon svg { width:32px; height:32px; fill:#7A7A7A; }56 57  /* Small blue bag with 8 */58  .small-bag {59    position:absolute; top:170px; right:34px; width:86px; height:86px;60    background:#2998FF; border-radius:20px; display:flex; align-items:center; justify-content:center;61    box-shadow:0 10px 24px rgba(41,152,255,0.35);62    color:#fff; font-weight:800; font-size:36px;63  }64 65  /* Ad banner */66  .ad-banner {67    position:absolute; top:300px; left:20px; width:1040px; height:170px;68    background:#FFFFFF; border:1px solid #DADADA; border-radius:16px; display:flex; align-items:center; gap:24px; padding:20px;69  }70  .ad-logo {71    width:140px; height:100%; max-height:130px; background:#E0E0E0; border:1px solid #BDBDBD;72    display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; border-radius:8px;73  }74  .ad-text { flex:1; color:#222; }75  .ad-title { font-size:34px; font-weight:700; margin-bottom:8px; }76  .ad-price { display:flex; align-items:center; gap:18px; font-size:34px; }77  .new-price { color:#D32F2F; font-weight:800; }78  .old-price { color:#666; text-decoration:line-through; }79  .prime { color:#2A8CFF; font-weight:800; font-size:32px; }80 81  /* Task card */82  .task-card {83    position:absolute; top:500px; left:26px; width:700px;84    background:#FFF0C4; border-radius:28px; padding:34px; color:#2D2D2D;85    box-shadow:0 2px 0 rgba(0,0,0,0.06);86  }87  .task-title { font-size:42px; font-weight:800; line-height:50px; margin-bottom:16px; }88  .task-desc { font-size:32px; color:#5A5A5A; line-height:44px; margin-bottom:26px; }89  .task-date { font-size:32px; color:#7A7A7A; font-weight:700; }90 91  /* Floating Action Button */92  .fab {93    position:absolute; right:60px; bottom:120px; width:160px; height:160px; border-radius:80px;94    background:linear-gradient(135deg,#41A7FF,#69C1FF); display:flex; align-items:center; justify-content:center;95    box-shadow:0 22px 38px rgba(65,167,255,0.35);96  }97  .fab svg { width:76px; height:76px; stroke:#fff; stroke-width:16; fill:none; }98 99</style>100</head>101<body>102<div id="render-target">103 104  <!-- Status bar -->105  <div class="status-bar">106    <div>12:30</div>107    <div class="status-icons">108      <span>🔋</span>109      <span>📶</span>110      <span>📡</span>111    </div>112  </div>113 114  <!-- Top app bar -->115  <div class="top-bar">116    <div class="hamburger">117      <svg viewBox="0 0 24 24">118        <rect x="3" y="5" width="18" height="2"></rect>119        <rect x="3" y="11" width="18" height="2"></rect>120        <rect x="3" y="17" width="18" height="2"></rect>121      </svg>122    </div>123 124    <div class="right-tools">125      <div class="vip-badge">126        <svg viewBox="0 0 24 24">127          <path d="M12 3l2.2 4.4 4.8.7-3.5 3.4.8 4.7L12 14.8l-4.3 2.4.8-4.7-3.5-3.4 4.8-.7L12 3z"></path>128        </svg>129        <span>VIP</span>130      </div>131      <div class="icon-btn">132        <svg viewBox="0 0 24 24">133          <circle cx="11" cy="11" r="7"></circle>134          <line x1="17" y1="17" x2="22" y2="22" stroke="#333" stroke-width="2"></line>135        </svg>136      </div>137      <div class="icon-btn">138        <svg viewBox="0 0 24 24">139          <circle cx="12" cy="5" r="2"></circle>140          <circle cx="12" cy="12" r="2"></circle>141          <circle cx="12" cy="19" r="2"></circle>142        </svg>143      </div>144    </div>145  </div>146  <div class="red-dot"></div>147 148  <!-- Tabs -->149  <div class="tabs">150    <div class="pill active">All</div>151    <div class="pill">Home</div>152    <div class="pill">Work</div>153    <div class="pill-icon">154      <svg viewBox="0 0 24 24">155        <path d="M12 17.3l-5.4 3 1.5-6.1-4.7-4.1 6.2-.5L12 3l2.4 6.6 6.2.5-4.7 4.1 1.5 6.1z"></path>156      </svg>157    </div>158  </div>159 160  <!-- Small blue bag with number 8 -->161  <div class="small-bag">8</div>162 163  <!-- Ad banner -->164  <div class="ad-banner">165    <div class="ad-logo">[IMG: Ultrahuman Logo]</div>166    <div class="ad-text">167      <div class="ad-title">Ultrahuman Ring | Smart Ring Wearable</div>168      <div class="ad-price">169        <span class="new-price">₹17,997.00</span>170        <span class="old-price">₹22,499.00</span>171        <span class="prime">prime ✓</span>172      </div>173    </div>174  </div>175 176  <!-- Task card -->177  <div class="task-card">178    <div class="task-title">reader annotations task</div>179    <div class="task-desc">180      In this task basically we have to annotate the long article based on the 11 cate...181    </div>182    <div class="task-date">2023-08-08</div>183  </div>184 185  <!-- Floating Action Button -->186  <div class="fab">187    <svg viewBox="0 0 24 24">188      <line x1="12" y1="5" x2="12" y2="19"></line>189      <line x1="5" y1="12" x2="19" y2="12"></line>190    </svg>191  </div>192 193</div>194</body>195</html>