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>Search - Daily routine</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #F6F5F8;13  }14 15  /* Status bar */16  .status-bar {17    height: 96px;18    padding: 0 36px;19    display: flex; align-items: center; justify-content: space-between;20    color: #222;21  }22  .status-left { font-size: 40px; font-weight: 500; }23  .status-right { display: flex; align-items: center; gap: 28px; }24  .icon { width: 44px; height: 44px; display: inline-block; }25 26  /* Search bar */27  .search-bar {28    height: 150px; background: #E7E8E2;29    display: flex; align-items: center;30    padding: 0 32px;31    border-bottom: 1px solid #DADBD4;32  }33  .search-title {34    font-size: 48px; color: #222;35    letter-spacing: 0.2px;36    flex: 1;37  }38  .search-bar .icon-btn { width: 64px; height: 64px; margin-right: 24px; }39  .search-bar .icon-close { width: 64px; height: 64px; margin-left: 16px; }40 41  /* Content list */42  .content { padding: 36px 24px; }43  .item {44    background: #FFFFFF;45    border-radius: 20px;46    padding: 36px 28px;47    display: flex; align-items: center;48    border: 1px solid #EEEEEE;49  }50  .doc-icon-wrap {51    width: 92px; height: 92px; border-radius: 16px;52    background: #1A73E8;53    display: flex; align-items: center; justify-content: center;54    margin-right: 26px;55    box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;56  }57  .item-text { flex: 1; }58  .item-title { font-size: 50px; color: #1F1F1F; margin-bottom: 14px; }59  .item-sub {60    display: flex; align-items: center; gap: 12px;61    font-size: 32px; color: #5F6368;62  }63  .ellipsis { width: 60px; height: 60px; margin-left: 10px; }64 65  /* Bottom home indicator */66  .home-indicator {67    position: absolute; bottom: 42px; left: 50%;68    width: 280px; height: 16px; border-radius: 8px;69    background: #777; transform: translateX(-50%);70    opacity: 0.7;71  }72</style>73</head>74<body>75<div id="render-target">76 77  <!-- Status Bar -->78  <div class="status-bar">79    <div class="status-left">3:58</div>80    <div class="status-right">81      <!-- simple sun icon -->82      <svg class="icon" viewBox="0 0 24 24">83        <circle cx="12" cy="12" r="5" fill="#5F6368"></circle>84        <g stroke="#5F6368" stroke-width="2">85          <line x1="12" y1="1.5" x2="12" y2="5"></line>86          <line x1="12" y1="19" x2="12" y2="22.5"></line>87          <line x1="1.5" y1="12" x2="5" y2="12"></line>88          <line x1="19" y1="12" x2="22.5" y2="12"></line>89        </g>90      </svg>91      <!-- wifi icon -->92      <svg class="icon" viewBox="0 0 24 24">93        <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#5F6368" stroke-width="2" />94        <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#5F6368" stroke-width="2" />95        <path d="M9 16c3-2 5-2 8 0" fill="none" stroke="#5F6368" stroke-width="2" />96        <circle cx="12" cy="19" r="1.8" fill="#5F6368"></circle>97      </svg>98      <!-- battery icon -->99      <svg class="icon" viewBox="0 0 28 24">100        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#5F6368" stroke-width="2" fill="none"></rect>101        <rect x="4" y="8" width="16" height="8" fill="#5F6368"></rect>102        <rect x="23" y="9" width="3" height="6" fill="#5F6368"></rect>103      </svg>104    </div>105  </div>106 107  <!-- Search Bar -->108  <div class="search-bar">109    <!-- Back arrow -->110    <svg class="icon-btn" viewBox="0 0 24 24">111      <path d="M15 4 L7 12 L15 20" fill="none" stroke="#202124" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>112    </svg>113    <div class="search-title">daily routine</div>114    <!-- Close (X) -->115    <svg class="icon-close" viewBox="0 0 24 24">116      <path d="M4 4 L20 20 M20 4 L4 20" stroke="#202124" stroke-width="3" stroke-linecap="round"/>117    </svg>118  </div>119 120  <!-- Content -->121  <div class="content">122    <div class="item">123      <!-- Google Docs-like icon -->124      <div class="doc-icon-wrap">125        <svg viewBox="0 0 64 64" width="54" height="54">126          <rect x="10" y="8" width="44" height="48" rx="6" fill="#1A73E8"></rect>127          <rect x="16" y="18" width="32" height="4" fill="#FFFFFF"></rect>128          <rect x="16" y="26" width="28" height="4" fill="#FFFFFF"></rect>129          <rect x="16" y="34" width="24" height="4" fill="#FFFFFF"></rect>130          <rect x="16" y="42" width="20" height="4" fill="#FFFFFF"></rect>131        </svg>132      </div>133 134      <div class="item-text">135        <div class="item-title">Daily routine</div>136        <div class="item-sub">137          <svg width="28" height="28" viewBox="0 0 24 24">138            <circle cx="12" cy="12" r="10" fill="#5F6368"></circle>139            <path d="M7 12 L10 15 L17 8" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>140          </svg>141          <span>Modified 3:54 PM</span>142        </div>143      </div>144 145      <!-- Vertical ellipsis -->146      <svg class="ellipsis" viewBox="0 0 24 24">147        <circle cx="12" cy="5" r="2.5" fill="#5F6368"></circle>148        <circle cx="12" cy="12" r="2.5" fill="#5F6368"></circle>149        <circle cx="12" cy="19" r="2.5" fill="#5F6368"></circle>150      </svg>151    </div>152  </div>153 154  <!-- Bottom Home Indicator -->155  <div class="home-indicator"></div>156</div>157</body>158</html>