GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Details - Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target{10    position: relative;11    width:1080px; height:2400px;12    overflow:hidden;13    background:#f1f1f1;14  }15 16  /* App bar */17  .appbar{18    position: absolute; top:0; left:0; right:0;19    height:160px;20    background:#2f2f2f;21    color:#fff;22    display:flex; align-items:center;23    padding:0 36px;24    box-sizing:border-box;25    z-index: 5;26  }27  .appbar .title{28    font-weight:600; font-size:52px; margin-left:20px;29  }30  .appbar .spacer{ flex:1; }31  .icon{32    width:56px; height:56px; fill:#fff;33  }34  .icon-btn{ background:none; border:0; padding:18px; }35 36  /* Content */37  .content{ position:absolute; top:160px; left:0; right:0; bottom:0; overflow:auto; padding:24px 24px 260px; box-sizing:border-box; }38  .h-scroll{39    display:flex; gap:28px; padding:16px 8px 8px 8px; overflow-x:auto;40  }41  .card{42    min-width:318px; max-width:318px; background:#fff; border:1px solid #e6e6e6; border-radius:22px;43    box-shadow: 0 1px 0 rgba(0,0,0,0.04);44    padding:20px; box-sizing:border-box;45  }46  .img-ph{47    width:100%; height:210px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:14px;48    display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px; text-align:center;49    margin-bottom:20px;50  }51  .p-title{ color:#222; font-size:34px; line-height:1.2; height:80px; overflow:hidden; }52  .price{ margin-top:12px; font-weight:700; font-size:40px; color:#111; }53 54  .section-title{55    margin:28px 8px 14px; color:#9a9a9a; letter-spacing:2px; font-weight:700; font-size:34px;56  }57 58  .feedback-box{59    margin:0 8px 22px; background:#fff; border:1px solid #ececec; border-radius:22px; min-height:220px;60    display:flex; flex-direction:column; align-items:center; justify-content:center; color:#7f7f7f;61  }62  .feedback-box .ghost{63    width:90px; height:90px; opacity:0.25; margin-bottom:18px;64  }65 66  .grid{67    display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; padding:8px; box-sizing:border-box;68  }69  .grid .card{ min-width:auto; max-width:none; }70 71  .seller-title{ margin:30px 8px 14px; color:#9a9a9a; letter-spacing:2px; font-weight:700; font-size:34px; }72 73  .seller-card{74    margin:0 8px 40px; background:#fff; border:1px solid #ececec; border-radius:22px; overflow:hidden;75  }76  .seller-row{77    display:flex; align-items:center; padding:30px 30px; font-size:38px; color:#222; font-weight:600; border-bottom:1px solid #f0f0f0;78  }79  .chev{ width:40px; height:40px; fill:#9e9e9e; }80  .seller-info{81    display:flex; align-items:center; justify-content:space-between; padding:26px 30px; font-size:34px; color:#333;82  }83  .muted{ color:#666; }84  .follow-btn{85    background:#ff8a1e; color:#fff; border:none; padding:18px 32px; border-radius:12px; font-weight:700; font-size:32px;86  }87 88  /* Bottom bar */89  .bottom-bar{90    position:absolute; left:0; right:0; bottom:0; height:180px; background:#fff; box-shadow:0 -8px 26px rgba(0,0,0,0.1);91    display:flex; align-items:center; gap:28px; padding:24px 28px; box-sizing:border-box;92  }93  .bb-mini{94    width:140px; height:108px; border:2px solid #ff8a1e; border-radius:16px; display:flex; align-items:center; justify-content:center; background:#fff;95  }96  .bb-mini .icon{ fill:#ff8a1e; width:48px; height:48px; }97  .cta{98    flex:1; height:108px; background:#ff8a1e; color:#fff; border:none; border-radius:18px; display:flex; align-items:center; justify-content:center; gap:18px; font-weight:800; font-size:42px; box-shadow:0 8px 18px rgba(255,138,30,0.35);99  }100  .cta .icon{ fill:#fff; width:50px; height:50px; }101</style>102</head>103<body>104<div id="render-target">105 106  <!-- App Bar -->107  <div class="appbar">108    <button class="icon-btn" aria-label="Back">109      <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"/></svg>110    </button>111    <div class="title">Details</div>112    <div class="spacer"></div>113    <button class="icon-btn" aria-label="Search">114      <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 14h-.7l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.7L20 21l1-1-5.5-5zM10 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>115    </button>116    <button class="icon-btn" aria-label="Cart">117      <svg class="icon" viewBox="0 0 24 24"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 .001 4A2 2 0 0 0 17 18zM6 6h14l-2 8H8L6 2H3v2h2l3.6 12h9.8l2.4-9H7.1L6.6 4H4V2h2"/></svg>118    </button>119    <button class="icon-btn" aria-label="More">120      <svg class="icon" viewBox="0 0 24 24"><path d="M6 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm6 0a2 2 0 1 0 .001 4A2 2 0 0 0 12 10zm6 0a2 2 0 1 0 .001 4A2 2 0 0 0 18 10z"/></svg>121    </button>122  </div>123 124  <div class="content">125 126    <!-- Horizontal product list at the top -->127    <div class="h-scroll">128      <div class="card">129        <div class="img-ph">[IMG: Apple MacBook]</div>130        <div class="p-title">Apple MacBook Air ...</div>131        <div class="price">EGP 71,700.00</div>132      </div>133      <div class="card">134        <div class="img-ph">[IMG: Apple MacBook]</div>135        <div class="p-title">Apple MacBook Air ...</div>136        <div class="price">EGP 71,700.00</div>137      </div>138      <div class="card">139        <div class="img-ph">[IMG: Apple MacBook]</div>140        <div class="p-title">Apple MacBook Pro ...</div>141        <div class="price">EGP 128,000.00</div>142      </div>143    </div>144 145    <!-- Verified Customer Feedback -->146    <div class="section-title">VERIFIED CUSTOMER FEEDBACK</div>147    <div class="feedback-box">148      <svg class="ghost" viewBox="0 0 24 24">149        <path d="M3 6h18v12H3z" fill="#000" opacity="0.2"/>150        <path d="M8 9h8v2H8zM8 12h6v2H8z" fill="#000" opacity="0.2"/>151      </svg>152      <div style="font-size:34px;">This product has no ratings yet.</div>153    </div>154 155    <!-- You may also like -->156    <div class="section-title">YOU MAY ALSO LIKE</div>157    <div class="grid">158      <div class="card">159        <div class="img-ph">[IMG: MacBook Pro]</div>160        <div class="p-title">Apple MacBook Pro...</div>161        <div class="price">EGP 128,000.00</div>162      </div>163      <div class="card">164        <div class="img-ph">[IMG: MacBook Pro]</div>165        <div class="p-title">Apple MacBook Pro...</div>166        <div class="price">EGP 109,000.00</div>167      </div>168      <div class="card">169        <div class="img-ph">[IMG: MacBook Air]</div>170        <div class="p-title">Apple MacBook Air...</div>171        <div class="price">EGP 71,700.00</div>172      </div>173    </div>174 175    <!-- Seller Information -->176    <div class="seller-title">SELLER INFORMATION</div>177    <div class="seller-card">178      <div class="seller-row">179        <div style="flex:1;">Techmart Marketplace</div>180        <svg class="chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>181      </div>182      <div class="seller-info">183        <div>184          <div><span class="muted">66%</span> Seller Score</div>185          <div><span class="muted">382</span> Followers</div>186        </div>187        <button class="follow-btn">FOLLOW</button>188      </div>189    </div>190 191  </div>192 193  <!-- Bottom action bar -->194  <div class="bottom-bar">195    <div class="bb-mini" aria-label="Home">196      <svg class="icon" viewBox="0 0 24 24"><path d="M12 4l9 8h-3v8h-5v-5H11v5H6v-8H3l9-8z"/></svg>197    </div>198    <div class="bb-mini" aria-label="Call">199      <svg class="icon" viewBox="0 0 24 24"><path d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.2c1.1.4 2.3.6 3.6.6a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1C10.6 21 3 13.4 3 4a1 1 0 0 1 1-1h3.4a1 1 0 0 1 1 1c0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1l-2.2 2.2z"/></svg>200    </div>201    <button class="cta">202      <svg class="icon" viewBox="0 0 24 24"><path d="M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 .001 4A2 2 0 0 0 17 18zM6 6h14l-2 8H8L6 2H3v2h2l3.6 12h9.8l2.4-9H7.1L6.6 4H4V2h2"/></svg>203      ADD TO CART204    </button>205  </div>206 207</div>208</body>209</html>