GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>File Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1440px;11    height: 3120px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EAEAEA;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    height: 140px;24    width: 100%;25    padding: 0 48px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #FFFFFF;31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 28px;36    font-weight: 600;37    letter-spacing: 0.5px;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .status-right {45    display: flex;46    align-items: center;47    gap: 28px;48  }49  .tiny-icon {50    width: 40px;51    height: 40px;52    opacity: 0.9;53  }54 55  /* Search header */56  .search-row {57    position: absolute;58    top: 240px;59    left: 60px;60    right: 60px;61    height: 140px;62    display: flex;63    align-items: center;64  }65  .search-icon {66    width: 86px;67    height: 86px;68    margin-right: 28px;69  }70  .search-text {71    font-size: 92px;72    line-height: 1;73    font-weight: 600;74    color: #E5E5E5;75  }76  .action-icon {77    position: absolute;78    right: 24px;79    top: 22px;80    width: 90px;81    height: 90px;82    opacity: 0.8;83  }84 85  /* File list item */86  .file-item {87    position: absolute;88    top: 460px;89    left: 60px;90    right: 60px;91    display: flex;92    align-items: center;93  }94  .pdf-icon {95    width: 120px;96    height: 96px;97    border-radius: 16px;98    background: #E53935;99    color: #FFFFFF;100    font-weight: 700;101    font-size: 40px;102    display: flex;103    align-items: center;104    justify-content: center;105    letter-spacing: 1px;106    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;107    margin-right: 36px;108  }109  .file-texts {110    display: flex;111    flex-direction: column;112    gap: 18px;113  }114  .file-title {115    font-size: 68px;116    font-weight: 600;117    color: #F5F5F5;118  }119  .file-sub {120    font-size: 44px;121    color: #A1A1A1;122  }123 124  /* Bottom home indicator */125  .home-indicator {126    position: absolute;127    bottom: 52px;128    left: 50%;129    transform: translateX(-50%);130    width: 360px;131    height: 16px;132    border-radius: 10px;133    background: #FFFFFF;134    opacity: 0.9;135  }136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status Bar -->142  <div class="status-bar">143    <div class="status-left">144      <div style="font-size: 56px;">9:21</div>145      <div class="status-icons">146        <!-- small dot icon -->147        <svg class="tiny-icon" viewBox="0 0 24 24">148          <circle cx="12" cy="12" r="6" fill="#FFFFFF"/>149        </svg>150        <!-- simple rounded badge -->151        <svg class="tiny-icon" viewBox="0 0 24 24">152          <rect x="3" y="5" width="18" height="14" rx="4" fill="#FFFFFF"/>153        </svg>154        <!-- warning triangle -->155        <svg class="tiny-icon" viewBox="0 0 24 24">156          <path d="M12 3 L22 20 H2 Z" fill="#FFFFFF"/>157        </svg>158      </div>159    </div>160    <div class="status-right">161      <!-- Wi-Fi icon -->162      <svg class="tiny-icon" viewBox="0 0 24 24">163        <path d="M2 9c5-4 15-4 20 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>164        <path d="M5 12c3-3 11-3 14 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>165        <path d="M9 15c2-2 4-2 6 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>166        <circle cx="12" cy="18" r="1.8" fill="#FFFFFF"/>167      </svg>168      <!-- Battery icon -->169      <svg class="tiny-icon" viewBox="0 0 28 24">170        <rect x="1" y="6" width="22" height="12" rx="2" ry="2" fill="#FFFFFF"/>171        <rect x="24" y="9" width="3" height="6" rx="1" fill="#FFFFFF"/>172      </svg>173    </div>174  </div>175 176  <!-- Search Row -->177  <div class="search-row">178    <!-- Magnifying glass -->179    <svg class="search-icon" viewBox="0 0 24 24">180      <circle cx="10" cy="10" r="7" stroke="#CFCFCF" stroke-width="2.5" fill="none"/>181      <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#CFCFCF" stroke-width="2.5" stroke-linecap="round"/>182    </svg>183    <div class="search-text">Dinner vegetable</div>184    <!-- Action icon (angled arrow) -->185    <svg class="action-icon" viewBox="0 0 24 24">186      <path d="M18 6 L6 18" stroke="#CFCFCF" stroke-width="2.5" stroke-linecap="round"/>187      <path d="M6 8 L6 18 L16 18" stroke="#CFCFCF" stroke-width="2.5" fill="none" stroke-linecap="round"/>188    </svg>189  </div>190 191  <!-- File Item -->192  <div class="file-item">193    <div class="pdf-icon">PDF</div>194    <div class="file-texts">195      <div class="file-title">dinner-vegetable (3).pdf</div>196      <div class="file-sub">Modified 8:53 AM</div>197    </div>198  </div>199 200  <!-- Bottom Home Indicator -->201  <div class="home-indicator"></div>202 203</div>204</body>205</html>