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>Description - Hammer Drill</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    color: #212121;16  }17 18  /* Header */19  .statusbar, .appbar { background: #263238; color: #ffffff; }20  .statusbar {21    height: 120px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 36px;26    font-size: 42px;27    letter-spacing: 1px;28  }29  .status-icons {30    display: flex;31    align-items: center;32    gap: 26px;33    opacity: 0.9;34  }35  .appbar {36    height: 160px;37    display: flex;38    align-items: center;39    padding: 0 28px;40    border-bottom: 1px solid rgba(255,255,255,0.08);41  }42  .back-btn {43    width: 80px;44    height: 80px;45    display: flex;46    align-items: center;47    justify-content: center;48    margin-right: 24px;49  }50  .title {51    font-size: 72px;52    font-weight: 700;53  }54 55  /* Content area */56  .content {57    position: absolute;58    top: 280px; /* 120 + 160 */59    left: 0;60    right: 0;61    bottom: 0;62    overflow: hidden;63    background: #ffffff;64  }65 66  .img-block {67    margin: 12px 20px 0 20px;68    border: 1px solid #BDBDBD;69    background: #E0E0E0;70    color: #555;71    display: flex;72    align-items: center;73    justify-content: center;74    text-align: center;75  }76  .img-1 { height: 880px; }77  .img-2 { height: 850px; margin-top: 28px; }78 79  .img-label {80    font-size: 44px;81    line-height: 1.3;82    padding: 0 40px;83  }84 85  .like-row {86    margin: 22px 0 0 0;87    padding: 0 40px;88    height: 140px;89    display: flex;90    align-items: center;91    gap: 22px;92    color: #616161;93    font-size: 44px;94  }95  .divider {96    height: 1px;97    background: #EEEEEE;98    margin: 24px 20px 0 20px;99  }100 101  /* Bottom gesture bar */102  .gesture-area {103    position: absolute;104    bottom: 0;105    left: 0;106    right: 0;107    height: 120px;108    background: #ffffff;109    display: flex;110    align-items: center;111    justify-content: center;112  }113  .gesture-pill {114    width: 360px;115    height: 16px;116    background: #CFCFCF;117    border-radius: 16px;118  }119 120  /* Simple icon helpers */121  .icon {122    display: inline-flex;123    width: 60px;124    height: 60px;125  }126  .battery {127    width: 70px; height: 36px;128    border: 3px solid #fff; border-radius: 6px; position: relative;129  }130  .battery::after {131    content: ""; position: absolute; right: -10px; top: 8px;132    width: 8px; height: 18px; background: #fff; border-radius: 2px;133  }134  .battery .level {135    position: absolute; left: 4px; top: 4px; bottom: 4px; right: 18px;136    background: #fff; opacity: 0.9; border-radius: 3px;137  }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status bar -->144  <div class="statusbar">145    <div>10:00</div>146    <div class="status-icons">147      <!-- simple placeholders for status icons -->148      <svg class="icon" viewBox="0 0 24 24" fill="#fff" opacity="0.9">149        <circle cx="12" cy="12" r="10"></circle>150      </svg>151      <svg class="icon" viewBox="0 0 24 24" fill="#fff" opacity="0.9">152        <rect x="3" y="3" width="18" height="18" rx="4"></rect>153      </svg>154      <svg class="icon" viewBox="0 0 24 24" fill="#fff" opacity="0.9">155        <path d="M2 12h4a6 6 0 0 1 6-6V2C6.5 2 2 6.5 2 12zm0 6h4a12 12 0 0 1 12-12V2C9 2 2 9 2 18z"></path>156      </svg>157      <svg class="icon" viewBox="0 0 24 24" fill="#fff" opacity="0.9">158        <circle cx="12" cy="12" r="2"></circle>159      </svg>160      <div class="battery"><div class="level"></div></div>161    </div>162  </div>163 164  <!-- App bar -->165  <div class="appbar">166    <div class="back-btn">167      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">168        <path d="M15 5l-7 7 7 7"></path>169      </svg>170    </div>171    <div class="title">Description</div>172  </div>173 174  <!-- Content -->175  <div class="content">176    <div class="img-block img-1">177      <div class="img-label">[IMG: Hammer Drill with annotated parts and red callouts]</div>178    </div>179 180    <div class="img-block img-2">181      <div class="img-label">[IMG: Close-up of HAMMER DRILL selector and body]</div>182    </div>183 184    <div class="divider"></div>185 186    <div class="like-row">187      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#7e7e7e" stroke-width="2.2">188        <path d="M12 21s-6.5-4.3-9-7.8C1.1 10.9 2.2 8 4.9 7.3 6.7 6.8 8.6 7.5 9.8 8.9L12 11.3l2.2-2.4c1.2-1.4 3.1-2.1 4.9-1.6 2.7.7 3.8 3.6 1.9 5.9C18.5 16.7 12 21 12 21z"/>189      </svg>190      <div>liked by 783 peoples.</div>191    </div>192  </div>193 194  <!-- Bottom gesture bar -->195  <div class="gesture-area">196    <div class="gesture-pill"></div>197  </div>198 199</div>200</body>201</html>