GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Recipe App UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Top app bar */15  .app-bar { background: #C84444; color: #fff; }16  .status-bar {17    height: 110px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;18    font-size: 32px; opacity: 0.95;19  }20  .status-left { letter-spacing: 1px; }21  .status-right { display: flex; gap: 28px; opacity: 0.9; }22  .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; display: inline-block; margin-top: 12px; }23 24  .search-row {25    height: 190px; padding: 0 36px; display: flex; align-items: center; gap: 24px;26  }27  .back-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }28  .search-input {29    flex: 1; height: 120px; background: #fff; border-radius: 10px;30    box-shadow: 0 4px 10px rgba(0,0,0,0.2);31    display: flex; align-items: center; padding: 0 36px; color: #9E9E9E; font-size: 40px;32  }33 34  .tabs {35    height: 120px; display: flex; align-items: flex-end; gap: 60px; padding: 0 36px 0 36px; color: #fff;36    font-size: 34px; letter-spacing: 1px;37  }38  .tab { padding-bottom: 20px; opacity: 0.9; }39  .tab.active { opacity: 1; position: relative; }40  .tab.active::after {41    content: ""; position: absolute; left: 0; right: 0; bottom: 0;42    margin: auto; width: 160px; height: 6px; background: #fff; border-radius: 3px;43  }44 45  /* Content */46  .content { background: #fff; }47  .section-title {48    color: #C84444; font-weight: 500; font-size: 34px; letter-spacing: 1px;49    text-transform: uppercase; padding: 40px 40px 20px 40px;50  }51 52  .list {53    padding: 0 40px;54  }55  .list-item {56    display: flex; align-items: center; gap: 36px; height: 120px;57    font-size: 40px; color: #212121;58  }59  .list-icon {60    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;61  }62  .divider {63    height: 1px; background: #E0E0E0; margin: 30px 0;64  }65 66  /* By course items */67  .course-list { padding: 0 40px 220px 40px; }68  .course-item {69    font-size: 42px; color: #111; padding: 34px 0;70  }71 72  /* Floating action button */73  .fab {74    position: absolute; right: 48px; bottom: 220px;75    width: 160px; height: 160px; border-radius: 50%;76    background: #C84444; box-shadow: 0 10px 20px rgba(0,0,0,0.25);77    display: flex; align-items: center; justify-content: center;78  }79 80  /* Bottom system bar simulation */81  .system-bar {82    position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: #000;83  }84  .home-pill {85    width: 240px; height: 14px; background: #BDBDBD; border-radius: 10px;86    position: absolute; left: 50%; transform: translateX(-50%); top: 60px;87    opacity: 0.7;88  }89 90  /* SVG icon styling */91  svg { display: block; }92  .icon-stroke { stroke: #ffffff; stroke-width: 8; fill: none; }93  .icon-gray-fill { fill: #9E9E9E; }94  .icon-gray-stroke { stroke: #9E9E9E; stroke-width: 6; fill: none; }95</style>96</head>97<body>98<div id="render-target">99 100  <!-- Top red app bar -->101  <div class="app-bar">102    <div class="status-bar">103      <div class="status-left">8:26</div>104      <div class="status-right">105        <div class="dot"></div>106        <div class="dot"></div>107        <div class="dot"></div>108      </div>109    </div>110 111    <div class="search-row">112      <div class="back-btn">113        <svg width="64" height="64" viewBox="0 0 48 48">114          <path class="icon-stroke" d="M30 10 L16 24 L30 38"></path>115        </svg>116      </div>117      <div class="search-input">Search 1,000,000+ Recipes</div>118    </div>119 120    <div class="tabs">121      <div class="tab active">ALL</div>122      <div class="tab">MY RECIPES</div>123      <div class="tab">COOKS</div>124    </div>125  </div>126 127  <!-- Content area -->128  <div class="content">129    <div class="section-title">Get Inspired</div>130    <div class="list">131      <div class="list-item">132        <div class="list-icon">133          <svg width="72" height="72" viewBox="0 0 48 48">134            <rect x="8" y="10" width="32" height="26" rx="2" class="icon-gray-stroke"></rect>135            <line x1="12" y1="16" x2="36" y2="16" class="icon-gray-stroke"></line>136            <line x1="12" y1="22" x2="36" y2="22" class="icon-gray-stroke"></line>137          </svg>138        </div>139        <div>Collections</div>140      </div>141 142      <div class="list-item">143        <div class="list-icon">144          <svg width="72" height="72" viewBox="0 0 48 48">145            <circle cx="24" cy="24" r="8" class="icon-gray-stroke"></circle>146            <path