GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Sacré Frenchy UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: Arial, Helvetica, sans-serif;16    color: #333;17  }18 19  /* Status bar */20  .statusbar {21    height: 120px;22    background: linear-gradient(#b71c1c, #b71c1c);23    position: relative;24    color: #fff;25  }26  .status-time {27    position: absolute;28    left: 40px;29    top: 36px;30    font-size: 46px;31    font-weight: 600;32    letter-spacing: 0.5px;33  }34  .status-icons {35    position: absolute;36    right: 40px;37    top: 32px;38    display: flex;39    align-items: center;40    gap: 26px;41  }42  .status-icons svg { width: 62px; height: 62px; }43 44  /* App bar */45  .appbar {46    height: 170px;47    background: #d32f2f;48    box-shadow: 0 4px 10px rgba(0,0,0,0.15);49    display: flex;50    align-items: center;51    padding: 0 40px;52    gap: 30px;53  }54  .appbar .title {55    color: #fff;56    font-size: 56px;57    font-weight: 700;58    letter-spacing: 0.5px;59  }60  .back-icon svg { width: 70px; height: 70px; }61 62  /* Content list */63  .content {64    padding-top: 10px;65  }66  .list {67    margin-top: 20px;68  }69  .list-item {70    height: 160px;71    display: flex;72    align-items: center;73    justify-content: space-between;74    padding: 0 40px;75    border-top: 1px solid #EEEEEE;76    border-bottom: 1px solid #EEEEEE;77    background: #fff;78  }79  .list-item .label {80    font-size: 46px;81    color: #d32f2f;82  }83  .chevron svg { width: 60px; height: 60px; stroke: #d32f2f; }84 85  /* Gesture bar */86  .gesture-bar {87    position: absolute;88    bottom: 0;89    left: 0;90    width: 1080px;91    height: 130px;92    background: #000;93  }94  .gesture-pill {95    position: absolute;96    bottom: 36px;97    left: 50%;98    transform: translateX(-50%);99    width: 260px;100    height: 12px;101    background: #d9d9d9;102    border-radius: 8px;103  }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Status bar -->110  <div class="statusbar">111    <div class="status-time">9:50</div>112    <div class="status-icons">113      <!-- Wifi icon -->114      <svg viewBox="0 0 24 24" aria-hidden="true">115        <path d="M2 8c5-4 15-4 20 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>116        <path d="M5 12c4-3 10-3 14 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>117        <path d="M9 16c2-2 4-2 6 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>118        <circle cx="12" cy="19" r="1.7" fill="#fff"/>119      </svg>120      <!-- Battery icon -->121      <svg viewBox="0 0 24 24" aria-hidden="true">122        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>123        <rect x="20.5" y="9" width="2.5" height="6" rx="1" fill="#fff"/>124        <rect x="4" y="8" width="12" height="8" fill="#fff" opacity="0.9"/>125      </svg>126    </div>127  </div>128 129  <!-- App bar -->130  <div class="appbar">131    <div class="back-icon">132      <svg viewBox="0 0 24 24" aria-hidden="true">133        <path d="M15 6 L9 12 L15 18" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>134        <path d="M9 12 H21" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round"/>135      </svg>136    </div>137    <div class="title">Sacré Frenchy !</div>138  </div>139 140  <!-- Content -->141  <div class="content">142    <div class="list">143      <div class="list-item">144        <div class="label">Main Menu FR</div>145        <div class="chevron">146          <svg viewBox="0 0 24 24" aria-hidden="true">147            <path d="M6 9 L12 15 L18 9" fill="none" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" stroke="#d32f2f"/>148          </svg>149        </div>150      </div>151 152      <div class="list-item" style="margin-top: 24px;">153        <div class="label">Main Menu</div>154        <div class="chevron">155          <svg viewBox="0 0 24 24" aria-hidden="true">156            <path d="M6 9 L12 15 L18 9" fill="none" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round" stroke="#d32f2f"/>157          </svg>158        </div>159      </div>160    </div>161  </div>162 163  <!-- Gesture bar -->164  <div class="gesture-bar">165    <div class="gesture-pill"></div>166  </div>167</div>168</body>169</html>