GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Ingredients Search</title>5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<style>7  body{margin:0;padding:0;background:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#FFFFFF;11  }12 13  /* Status bar */14  .status-bar{15    height:90px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;16    color:#222;font-weight:600;font-size:36px;17  }18  .status-icons{display:flex;gap:22px;align-items:center;}19  .status-icons .dot{width:10px;height:10px;border-radius:50%;background:#666;display:inline-block;}20  .icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:#333;}21  .icon svg{width:36px;height:36px;fill:#333}22 23  /* Top search bar */24  .top-search{25    margin:22px 40px 0 40px;height:110px;border-radius:56px;background:#F1F1F1;26    display:flex;align-items:center;padding:0 28px;gap:24px;color:#9A9A9A;font-size:36px;27  }28  .top-search .placeholder{opacity:.8}29  .top-search .back svg{fill:#656565}30 31  /* Card area */32  .card{33    margin:36px 30px 0 30px;background:#fff;border-radius:16px;box-shadow:0 1px 0 #eee inset;34    border:1px solid #EFEFEF;padding:28px 28px 34px;35  }36  .card h1{37    margin:8px 0 10px 0;font-size:48px;line-height:1.2;color:#101010;38  }39  .sub{color:#6E6E6E;font-size:32px;margin-bottom:22px;}40  .photo{41    width:100%;height:680px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:8px;42    display:flex;align-items:center;justify-content:center;color:#757575;font-size:34px;43  }44 45  /* Keyboard */46  .keyboard{47    position:absolute;left:0;right:0;bottom:0;height:940px;background:#191816;color:#E8E0D3;48    border-top-left-radius:22px;border-top-right-radius:22px;49    box-shadow:0 -2px 8px rgba(0,0,0,.18);50  }51  .kbd-toolbar{52    height:120px;display:flex;align-items:center;gap:48px;padding:0 28px;border-bottom:1px solid rgba(255,255,255,.06);53  }54  .kbd-icon{55    width:84px;height:84px;border-radius:18px;background:#262522;display:flex;align-items:center;justify-content:center;56    border:1px solid rgba(255,255,255,.06);57    color:#E8E0D3;font-size:28px;58  }59  .letters{padding:22px 24px 0 24px}60  .row{display:flex;justify-content:center;gap:14px;margin:18px 0;}61  .key{62    width:90px;height:110px;border-radius:22px;background:#2A2927;border:1px solid rgba(255,255,255,.05);63    display:flex;align-items:center;justify-content:center;font-size:44px;color:#EDE3D3;64  }65  .spacer{width:52px}66  .key-wide{width:154px}67  .backspace{width:154px}68  .bottom-row{69    display:flex;align-items:center;gap:18px;padding:14px 20px 22px 20px;70  }71  .space{flex:1;height:120px;border-radius:26px;background:#2A2927;border:1px solid rgba(255,255,255,.06)}72  .small-key{width:140px;height:120px;border-radius:26px;background:#2A2927;border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:36px;}73  .dot-key{width:120px;height:120px;border-radius:26px;background:#2A2927;border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:48px;}74  .search-btn{75    width:136px;height:136px;border-radius:50%;background:#FFD88C;color:#2A2100;76    display:flex;align-items:center;justify-content:center;margin-left:auto;box-shadow:0 2px 0 rgba(0,0,0,.2) inset;77  }78  .search-btn svg{width:56px;height:56px;fill:#2A2100}79 80  /* Home indicator */81  .home-indicator{82    position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:360px;height:10px;border-radius:8px;background:#E6E6E6;83  }84</style>85</head>86<body>87<div id="render-target">88 89  <!-- Status bar -->90  <div class="status-bar">91    <div>2:21</div>92    <div class="status-icons">93      <span style="font-size:32px;color:#666;">57°</span>94      <span class="icon"><svg viewBox="0 0 24 24"><path d="M12 22c4.97 0 9-4.03 9-9h-2a7 7 0 1 1-7-7V4C7.03 4 3 8.03 3 13s4.03 9 9 9z"/></svg></span>95      <span class="icon"><svg viewBox="0 0 24 24"><path d="M12 19a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v4L4 15v2h16v-2l-2-2z"/></svg></span>96      <span class="icon"><svg viewBox="0 0 24 24"><path d="M6 22h12V10H6v12zM19 8h-5V2h5v6zM10 8H5V4h5v4z"/></svg></span>97      <span class="dot"></span>98      <span class="icon"><svg viewBox="0 0 24 24"><path d="M18 3H6a1 1 0 0 0-1 1v16l7-3 7 3V4a1 1 0 0 0-1-1z"/></svg></span>99      <span class="icon"><svg viewBox="0 0 24 24"><path d="M20 6h-2V4h2v2zM4 6H2V4h2v2zm0 14H2v-2h2v2zm16 0h-2v-2h2v2zM7 4h10v16H7V4z"/></svg></span>100    </div>101  </div>102 103  <!-- Search bar -->104  <div class="top-search">105    <div class="back icon">106      <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>107    </div>108    <div class="placeholder">Type in ingredients or dishes…</div>109  </div>110 111  <!-- Card with title and image -->112  <div class="card">113    <h1>Type in ingredients or dishes</h1>114    <div class="sub">Find easy recipes to make with what you have.</div>115    <div class="photo">[IMG: Bowl of tomatoes, pasta, zucchini and basil on board]</div>116  </div>117 118  <!-- Keyboard -->119  <div class="keyboard">120    <div class="kbd-toolbar">121      <div class="kbd-icon">▦</div>122      <div class="kbd-icon">😊</div>123      <div class="kbd-icon">GIF</div>124      <div class="kbd-icon"><svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 1 4 4h3l-4 4-4-4h3a2 2 0 1 0-2-2zM8 12a4 4 0 0 1 4-4V5l4 4-4 4v-3a2 2 0 1 0-2-2z"/></svg></div>125      <div class="kbd-icon">G⇄</div>126      <div class="kbd-icon">🎨</div>127      <div class="kbd-icon"><svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm-7 2v2h14v-2H5z"/></svg></div>128    </div>129 130    <div class="letters">131      <div class="row">132        <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>133        <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>134      </div>135      <div class="row" style="padding-left:50px">136        <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>137        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>138      </div>139      <div class="row" style="padding-left:120px">140        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div>141        <div class="key">n</div><div class="key">m</div>142        <div class="key backspace">143          <svg viewBox="0 0 24 24" style="width:44px;height:44px;fill:#EDE3D3">144            <path d="M22 3H8L1 12l7 9h14a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-5.59 12L14 12.59 11.59 15 10 13.41 12.41 11 10 8.59 11.59 7 14 9.41 16.41 7 18 8.59 15.59 11 18 13.41 16.41 15z"/>145          </svg>146        </div>147      </div>148    </div>149 150    <div class="bottom-row">151      <div class="small-key">?123</div>152      <div class="small-key">,</div>153      <div class="small-key">😊</div>154      <div class="space"></div>155      <div class="dot-key">.</div>156      <div class="search-btn">157        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20 15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>158      </div>159    </div>160  </div>161 162  <div class="home-indicator"></div>163</div>164</body>165</html>