GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Flashcards UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #fff;15  }16  /* Status bar */17  .statusbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 110px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 36px;27    box-sizing: border-box;28    color: #ffffff;29    font-size: 40px;30    letter-spacing: 0.5px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 18px;36    opacity: 0.9;37  }38  .icon-dot { width: 10px; height: 10px; background: #bbb; border-radius: 50%; }39  /* App bar */40  .appbar {41    position: absolute;42    top: 110px;43    left: 0;44    width: 1080px;45    height: 150px;46    display: flex;47    align-items: center;48    padding: 0 36px;49    box-sizing: border-box;50    background: #1a1a1a;51    border-bottom: 1px solid rgba(255,255,255,0.05);52  }53  .appbar-title {54    font-size: 56px;55    font-weight: 600;56    margin-left: 24px;57  }58  .appbar-right {59    margin-left: auto;60  }61  .icon-btn {62    width: 72px;63    height: 72px;64    display: flex;65    align-items: center;66    justify-content: center;67  }68  /* Content */69  .content {70    position: absolute;71    top: 290px;72    left: 0;73    width: 100%;74    padding: 0 44px;75    box-sizing: border-box;76  }77  .thumb-card {78    width: 740px;79    height: 420px;80    background: #E0E0E0;81    border: 1px solid #BDBDBD;82    border-radius: 28px;83    display: flex;84    align-items: center;85    justify-content: center;86    color: #757575;87    font-size: 36px;88    box-shadow: 0 10px 20px rgba(0,0,0,0.35);89  }90  .list-row {91    margin-top: 26px;92    width: calc(100% - 88px);93    display: flex;94    align-items: center;95  }96  .yellow-square {97    width: 60px;98    height: 60px;99    background: #F3B300;100    border-radius: 6px;101    margin-right: 24px;102  }103  .item-title {104    font-size: 48px;105    flex: 1;106  }107  .kebab {108    width: 60px;109    height: 60px;110    position: relative;111  }112  .kebab span {113    position: absolute;114    left: 50%;115    transform: translateX(-50%);116    width: 10px;117    height: 10px;118    background: #eaeaea;119    border-radius: 50%;120  }121  .kebab span:nth-child(1) { top: 10px; }122  .kebab span:nth-child(2) { top: 25px; }123  .kebab span:nth-child(3) { top: 40px; }124  /* Gesture bar */125  .gesture {126    position: absolute;127    bottom: 54px;128    left: 430px;129    width: 220px;130    height: 14px;131    background: #f5f5f5;132    border-radius: 10px;133    opacity: 0.9;134  }135</style>136</head>137<body>138<div id="render-target">139  <!-- Status bar -->140  <div class="statusbar">141    <div>10:26</div>142    <div class="status-icons">143      <!-- Simple moon icon -->144      <svg width="38" height="38" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M12 2a8.5 8.5 0 0 0 0 17c3.9 0 7.2-2.6 8.2-6.2C17.4 13.6 14 10.4 12 2z"/></svg>145      <!-- Simple play icon -->146      <svg width="38" height="38" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M8 5v14l11-7z"/></svg>147      <svg width="38" height="38" viewBox="0 0 24 24" fill="#dcdcdc"><path d="M8 5v14l11-7z"/></svg>148      <div class="icon-dot"></div>149      <!-- WiFi -->150      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">151        <path d="M2 9c5-5 15-5 20 0"/>152        <path d="M5 12c3.5-3.5 10.5-3.5 14 0"/>153        <path d="M8 15c2-2 6-2 8 0"/>154        <circle cx="12" cy="18" r="1.5" fill="#ffffff" stroke="none"/>155      </svg>156      <!-- Battery -->157      <svg width="48" height="40" viewBox="0 0 28 16" fill="none" stroke="#ffffff" stroke-width="2">158        <rect x="1" y="3" width="22" height="10" rx="2"/>159        <rect x="3" y="5" width="16" height="6" fill="#ffffff" stroke="none"/>160        <rect x="23" y="6" width="3" height="4" rx="1"/>161      </svg>162    </div>163  </div>164 165  <!-- App bar -->166  <div class="appbar">167    <div class="icon-btn">168      <!-- Back arrow -->169      <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">170        <path d="M15 6l-6 6 6 6"/>171      </svg>172    </div>173    <div class="appbar-title">Flashcards</div>174    <div class="appbar-right icon-btn">175      <!-- Close (X) -->176      <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round">177        <path d="M6 6l12 12M18 6l-12 12"/>178      </svg>179    </div>180  </div>181 182  <!-- Content area -->183  <div class="content">184    <div class="thumb-card">185      [IMG: Flashcard Thumbnail]186    </div>187    <div class="list-row">188      <div class="yellow-square"></div>189      <div class="item-title">Flash cards</div>190      <div class="kebab">191        <span></span><span></span><span></span>192      </div>193    </div>194  </div>195 196  <!-- Bottom gesture bar -->197  <div class="gesture"></div>198</div>199</body>200</html>