GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>UI Render - Discover Screen</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background: linear-gradient(180deg, #2b6da0 0%, #274e8d 30%, #233c7c 60%, #1f2f6f 100%);10    color:#ffffff;11  }12 13  /* Top header */14  .topbar {15    position:absolute; left:0; top:0; width:100%;16    padding: 30px 40px 0 40px;17  }18  .title {19    font-size:56px; font-weight:600; line-height:1.2;20    padding: 20px 120px 0 120px; /* leave room for icons */21  }22  .icon-btn {23    position:absolute; width:84px; height:84px; border-radius:42px;24    background: rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center;25    top:30px;26  }27  .icon-back { left:32px; }28  .icon-close { right:32px; }29  .icon-btn svg { width:40px; height:40px; fill:none; stroke:#fff; stroke-width:6; }30 31  /* Filters row */32  .filters {33    position:absolute; top:220px; left:40px; right:40px;34    display:flex; gap:36px;35  }36  .pill {37    background: rgba(255,255,255,0.12); color:#fff;38    border:1px solid rgba(255,255,255,0.25);39    border-radius:48px; padding:22px 34px; font-size:34px; font-weight:600;40    display:flex; align-items:center; gap:22px;41  }42  .pill svg { width:28px; height:28px; stroke:#fff; stroke-width:6; fill:none; }43 44  /* Query preview */45  .query {46    position:absolute; top:330px; left:40px; right:40px;47    font-size:42px; opacity:0.95;48  }49 50  /* Bottom navigation */51  .bottom-nav {52    position:absolute; left:0; bottom:0; width:100%; height:180px;53    background: rgba(10,20,60,0.6);54    border-top: 1px solid rgba(255,255,255,0.15);55    display:flex; align-items:center; justify-content:space-around;56  }57  .nav-item { color:#cfd6ff; text-align:center; font-size:32px; }58  .nav-item svg { width:56px; height:56px; stroke:#cfd6ff; fill:none; stroke-width:6; }59  .nav-label { margin-top:12px; }60  .nav-active .bubble {61    width:90px; height:90px; border-radius:45px; background:#ffffff22;62    display:flex; align-items:center; justify-content:center; margin:0 auto;63  }64  .nav-active svg { stroke:#ffffff; }65  .nav-active .nav-label { color:#ffffff; }66 67  /* Helper large blank area just to keep layout proportional */68  .content-placeholder {69    position:absolute; left:0; right:0; top:420px; bottom:180px;70  }71</style>72</head>73<body>74<div id="render-target">75 76  <!-- Header -->77  <div class="topbar">78    <div class="icon-btn icon-back">79      <svg viewBox="0 0 24 24">80        <path d="M15 4 L7 12 L15 20"></path>81      </svg>82    </div>83    <div class="icon-btn icon-close">84      <svg viewBox="0 0 24 24">85        <path d="M5 5 L19 19"></path>86        <path d="M19 5 L5 19"></path>87      </svg>88    </div>89    <div class="title">The Grand Plan to rise and Shine</div>90  </div>91 92  <!-- Filters -->93  <div class="filters">94    <div class="pill">95      <span>Category</span>96      <svg viewBox="0 0 24 24"><path d="M5 9 L12 16 L19 9"></path></svg>97    </div>98    <div class="pill">99      <span>Time</span>100      <svg viewBox="0 0 24 24"><path d="M5 9 L12 16 L19 9"></path></svg>101    </div>102  </div>103 104  <!-- Query text shown under filters -->105  <div class="query">the grand plan to rise and shine</div>106 107  <!-- Content area (empty like screenshot) -->108  <div class="content-placeholder"></div>109 110  <!-- Bottom Navigation -->111  <div class="bottom-nav">112    <div class="nav-item">113      <svg viewBox="0 0 24 24">114        <path d="M4 11 L12 4 L20 11"></path>115        <path d="M6 10 V19 H18 V10"></path>116      </svg>117      <div class="nav-label">Home</div>118    </div>119    <div class="nav-item">120      <svg viewBox="0 0 24 24">121        <path d="M12 3 C9 6 8 8 8 11 A4 4 0 0 0 12 15 A4 4 0 0 0 16 11 C16 8 15 6 12 3 Z"></path>122      </svg>123      <div class="nav-label">Sleep</div>124    </div>125    <div class="nav-item nav-active">126      <div class="bubble">127        <svg viewBox="0 0 24 24">128          <circle cx="11" cy="11" r="7"></circle>129          <path d="M19 19 L15 15"></path>130        </svg>131      </div>132      <div class="nav-label">Discover</div>133    </div>134    <div class="nav-item">135      <svg viewBox="0 0 24 24">136        <circle cx="12" cy="8" r="4"></circle>137        <path d="M4 20 C6 15 18 15 20 20"></path>138      </svg>139      <div class="nav-label">Profile</div>140    </div>141    <div class="nav-item">142      <svg viewBox="0 0 24 24">143        <path d="M12 3 L14 9 L20 9 L15 12 L17 18 L12 14 L7 18 L9 12 L4 9 L10 9 Z"></path>144      </svg>145      <div class="nav-label">Premium</div>146    </div>147  </div>148 149</div>150</body>151</html>