GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Cuisines List UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #F5F5F5;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 150px;16    background: #333333; color: #ffffff;17  }18  .status-inner {19    height: 100%; display: flex; align-items: center; justify-content: space-between;20    padding: 0 40px;21  }22  .status-time { font-size: 34px; letter-spacing: 0.5px; }23  .status-icons { display: flex; align-items: center; gap: 26px; }24  .icon { width: 42px; height: 42px; }25 26  /* App bar / header */27  .app-bar {28    position: absolute; top: 150px; left: 0; width: 100%; height: 170px;29    background: #ffffff; box-shadow: 0 2px 6px rgba(0,0,0,0.08);30    display: flex; align-items: center;31  }32  .back-icon { width: 72px; height: 72px; margin-left: 28px; }33  .title { font-size: 64px; font-weight: 600; color: #333333; margin-left: 24px; }34 35  /* List area */36  .list {37    position: absolute; top: 320px; left: 0; right: 0; bottom: 180px;38    overflow-y: auto; padding: 40px;39  }40  .card {41    background: #ffffff; border-radius: 34px;42    box-shadow: 0 8px 20px rgba(0,0,0,0.08);43    height: 210px; margin-bottom: 32px;44    display: flex; align-items: center; justify-content: space-between;45    padding: 0 40px;46  }47  .card .label { font-size: 48px; font-weight: 600; color: #333333; }48  .thumb {49    width: 150px; height: 150px; border-radius: 50%;50    background: #E0E0E0; border: 1px solid #BDBDBD;51    display: flex; align-items: center; justify-content: center;52    color: #757575; font-size: 26px; text-align: center; padding: 10px;53  }54 55  /* Bottom gesture bar */56  .bottom-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; background: #333333; }57  .gesture-pill {58    position: absolute; left: 50%; transform: translateX(-50%);59    bottom: 60px; width: 320px; height: 22px; border-radius: 22px; background: #CFCFCF;60  }61</style>62</head>63<body>64<div id="render-target">65  <!-- Status Bar -->66  <div class="status-bar">67    <div class="status-inner">68      <div class="status-time">8:43</div>69      <div class="status-icons">70        <!-- Simple sun icon -->71        <svg class="icon" viewBox="0 0 24 24">72          <circle cx="12" cy="12" r="4" fill="#fff"></circle>73          <g stroke="#fff" stroke-width="2" stroke-linecap="round">74            <line x1="12" y1="1.5" x2="12" y2="5"></line>75            <line x1="12" y1="19" x2="12" y2="22.5"></line>76            <line x1="1.5" y1="12" x2="5" y2="12"></line>77            <line x1="19" y1="12" x2="22.5" y2="12"></line>78            <line x1="4.2" y1="4.2" x2="6.6" y2="6.6"></line>79            <line x1="17.4" y1="17.4" x2="19.8" y2="19.8"></line>80            <line x1="17.4" y1="6.6" x2="19.8" y2="4.2"></line>81            <line x1="4.2" y1="19.8" x2="6.6" y2="17.4"></line>82          </g>83        </svg>84        <!-- WiFi icon -->85        <svg class="icon" viewBox="0 0 24 24">86          <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>87          <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>88          <path d="M8 15c3-2 5-2 8 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>89          <circle cx="12" cy="18" r="1.6" fill="#fff"></circle>90        </svg>91        <!-- Battery icon -->92        <svg class="icon" viewBox="0 0 24 24">93          <rect x="3" y="7" width="16" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>94          <rect x="5" y="9" width="12" height="6" fill="#fff"></rect>95          <rect x="20" y="10" width="2" height="4" fill="#fff"></rect>96        </svg>97      </div>98    </div>99  </div>100 101  <!-- App Bar -->102  <div class="app-bar">103    <svg class="back-icon" viewBox="0 0 24 24">104      <path d="M15 6l-6 6 6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>105    </svg>106    <div class="title">Cuisines</div>107  </div>108 109  <!-- Card List -->110  <div class="list">111    <div class="card">112      <div class="label">Indian</div>113      <div class="thumb">[IMG: Indian Dish]</div>114    </div>115    <div class="card">116      <div class="label">English</div>117      <div class="thumb">[IMG: English Dish]</div>118    </div>119    <div class="card">120      <div class="label">Chinese</div>121      <div class="thumb">[IMG: Chinese Dish]</div>122    </div>123    <div class="card">124      <div class="label">Mediterranean</div>125      <div class="thumb">[IMG: Mediterranean Dish]</div>126    </div>127    <div class="card">128      <div class="label">Spanish</div>129      <div class="thumb">[IMG: Spanish Dish]</div>130    </div>131    <div class="card">132      <div class="label">Greek</div>133      <div class="thumb">[IMG: Greek Dish]</div>134    </div>135    <div class="card">136      <div class="label">Thai</div>137      <div class="thumb">[IMG: Thai Dish]</div>138    </div>139    <div class="card">140      <div class="label">Cajun</div>141      <div class="thumb">[IMG: Cajun Dish]</div>142    </div>143    <div class="card">144      <div class="label">Irish</div>145      <div class="thumb">[IMG: Irish Dish]</div>146    </div>147  </div>148 149  <!-- Bottom Gesture Bar -->150  <div class="bottom-bar">151    <div class="gesture-pill"></div>152  </div>153</div>154</body>155</html>