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>Recipe Detail</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #fff; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #000; border-radius: 28px;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 24px; left: 32px; right: 32px; height: 48px;17    display: flex; align-items: center; justify-content: space-between; color: #fff; opacity: 0.95;18    pointer-events: none;19  }20  .status-left { display: flex; align-items: center; gap: 16px; }21  .time { font-size: 36px; font-weight: 600; letter-spacing: 0.3px; }22  .status-right { display: flex; align-items: center; gap: 22px; }23  .status-icon { width: 36px; height: 36px; opacity: 0.95; }24 25  /* Hero image area */26  .hero {27    position: absolute; top: 0; left: 0; width: 100%; height: 1180px;28  }29  .hero .img-ph {30    position: absolute; inset: 0;31    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;32    display: flex; align-items: flex-end; justify-content: flex-start;33    padding: 24px; font-size: 28px; letter-spacing: 0.2px;34  }35 36  /* Toast */37  .toast {38    position: absolute; top: 150px; left: 50%; transform: translateX(-50%);39    background: #2b2b2b; color: #fff; padding: 28px 40px;40    border-radius: 28px; width: 900px; font-size: 34px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);41    text-align: left;42  }43 44  /* Play button overlay */45  .play {46    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%);47    width: 240px; height: 240px; border-radius: 50%;48    border: 8px solid rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;49    background: rgba(255,255,255,0.05);50  }51  .play svg { width: 90px; height: 90px; fill: #fff; }52 53  /* Content section */54  .content {55    position: absolute; top: 1180px; left: 0; right: 0; bottom: 0;56    background: #000;57  }58  .title {59    margin: 72px 64px 24px; font-size: 86px; line-height: 1.1; font-weight: 700; text-align: center;60  }61 62  .rating { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 16px; }63  .star { width: 44px; height: 44px; }64  .star svg { width: 100%; height: 100%; }65  .star.filled svg path { fill: #ff6d2e; }66  .star.empty svg path { fill: #494949; }67 68  .rating-note { margin-top: 12px; text-align: center; color: #b5b5b5; font-size: 36px; }69 70  .actions {71    margin: 56px 40px 24px; display: flex; justify-content: space-around; align-items: center;72  }73  .action { display: flex; align-items: center; gap: 18px; color: #fff; font-size: 36px; }74  .action .icon { width: 54px; height: 54px; }75 76  .divider { height: 1px; background: #1f1f1f; margin: 48px 40px; }77 78  .author {79    display: flex; align-items: center; gap: 28px; padding: 24px 40px;80  }81  .avatar {82    width: 140px; height: 140px; border-radius: 50%; background: #E0E0E0; border: 1px solid #BDBDBD;83    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;84    flex: 0 0 auto;85  }86  .author-info { display: flex; flex-direction: column; gap: 8px; }87  .author-name { font-size: 44px; font-weight: 700; }88  .author-role { font-size: 32px; color: #bfbfbf; }89 90  .home-indicator {91    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);92    width: 320px; height: 10px; background: #d9d9d9; border-radius: 8px; opacity: 0.95;93  }94</style>95</head>96<body>97<div id="render-target">98 99  <!-- Hero with placeholder image -->100  <div class="hero">101    <div class="img-ph">[IMG: Bowl of Chinese fried rice on marble table]</div>102 103    <!-- Status bar -->104    <div class="status-bar">105      <div class="status-left">106        <div class="time">8:54</div>107        <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M3 19h18a9 9 0 00-18 0z"/></svg>108      </div>109      <div class="status-right">110        <svg class="status-icon" viewBox="0 0 24 24">111          <path fill="#fff" d="M2 18h2a8 8 0 0116 0h2A10 10 0 002 18z"/>112        </svg>113        <svg class="status-icon" viewBox="0 0 24 24">114          <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>115          <rect x="20" y="10" width="2" height="4" fill="#fff"/>116        </svg>117      </div>118    </div>119 120    <!-- Toast message -->121    <div class="toast">Hooray! You've successfully saved your recipe!</div>122 123    <!-- Play button -->124    <div class="play" aria-label="Play video">125      <svg viewBox="0 0 100 100">126        <polygon points="35,25 78,50 35,75"/>127      </svg>128    </div>129  </div>130 131  <!-- Content -->132  <div class="content">133    <div class="title">Chinese fried rice</div>134 135    <div class="rating" aria-label="4 out of 5 stars">136      <div class="star filled">137        <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.9L7 14.1 2 9.3l6.9-1L12 2z"/></svg>138      </div>139      <div class="star filled">140        <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.9L7 14.1 2 9.3l6.9-1L12 2z"/></svg>141      </div>142      <div class="star filled">143        <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.9L7 14.1 2 9.3l6.9-1L12 2z"/></svg>144      </div>145      <div class="star filled">146        <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.9L7 14.1 2 9.3l6.9-1L12 2z"/></svg>147      </div>148      <div class="star empty">149        <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3.9L7 14.1 2 9.3l6.9-1L12 2z"/></svg>150      </div>151    </div>152    <div class="rating-note">Based on 215 ratings</div>153 154    <div class="actions">155      <div class="action">156        <svg class="icon" viewBox="0 0 24 24">157          <path fill="none" stroke="#fff" stroke-width="2" d="M12 21s-6.7-4.1-9.2-8C1 9.2 2.3 5.8 5.6 5.3 7.4 5 9 6.2 10 7.4 11 6.2 12.6 5 14.4 5.3 17.7 5.8 19 9.2 17.2 13c-2.5 3.9-9.2 8-9.2 8z"/>158        </svg>159        <span>60002</span>160      </div>161      <div class="action">162        <svg class="icon" viewBox="0 0 24 24">163          <path fill="none" stroke="#fff" stroke-width="2" d="M6 2h12a2 2 0 012 2v16l-8-4-8 4V4a2 2 0 012-2z"/>164        </svg>165        <span>Save</span>166      </div>167      <div class="action">168        <svg class="icon" viewBox="0 0 24 24">169          <circle cx="6" cy="12" r="2" fill="#fff"/>170          <circle cx="18" cy="6" r="2" fill="#fff"/>171          <circle cx="18" cy="18" r="2" fill="#fff"/>172          <path d="M7.8 11.2L16.2 7.2" stroke="#fff" stroke-width="2"/>173          <path d=" pipelinesign" />174          <path d="M7.8 12.8L16.2 16.8" stroke="#fff NB" />175        </svg>176        <span>Share</span>177      </div>178    </div>179 180    <div class="divider"></div>181 182    <div class="author">183      <div class="avatar">[IMG: Kitchen avatar]</div>184      <div class="author-info">185        <div class="author-name">Yingpin</div>186        <div class="author-role">Contributor</div>187      </div>188    </div>189  </div>190 191  <div class="home-indicator"></div>192</div>193</body>194</html>