GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>L’usine Sliced White Bread Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #ffffff;14  }15 16  /* App bar */17  .appbar {18    position: absolute;19    left: 0; top: 0;20    width: 1080px;21    height: 220px;22    background: #C84560; /* pink/red */23    color: #fff;24  }25 26  .status-bar {27    height: 90px;28    padding: 0 34px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #fff;33    font-size: 36px;34    font-weight: 600;35    letter-spacing: 0.5px;36  }37  .sb-left {38    display: flex;39    align-items: center;40    gap: 18px;41  }42  .sb-right {43    display: flex;44    align-items: center;45    gap: 26px;46  }47  .toolbar {48    height: 130px;49    display: flex;50    align-items: center;51    padding: 0 34px;52    gap: 18px;53    color: #fff;54  }55  .back-btn svg { width: 56px; height: 56px; display: block; }56  .title {57    font-size: 54px;58    font-weight: 700;59    white-space: nowrap;60  }61 62  /* Content area */63  .content {64    position: absolute;65    top: 220px;66    left: 0;67    width: 1080px;68    height: 2180px;69    background: #ffffff;70  }71  .loader-dot {72    position: absolute;73    left: 50%;74    top: 50%;75    width: 28px;76    height: 28px;77    margin-left: -14px;78    margin-top: -14px;79    background: #C84560;80    border-radius: 50%;81  }82 83  /* Bottom navigation bar (Android gesture pill) */84  .nav-bar {85    position: absolute;86    bottom: 0;87    left: 0;88    width: 1080px;89    height: 110px;90    background: #000000;91    display: flex;92    align-items: center;93    justify-content: center;94  }95  .nav-pill {96    width: 340px;97    height: 12px;98    background: #D0D0D0;99    border-radius: 8px;100    opacity: 0.9;101  }102  /* Simple icon sizes in status bar */103  .status-icon svg { height: 40px; width: 40px; display: block; }104  .small-icon svg { height: 34px; width: 34px; display: block; }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Top App Bar -->111  <div class="appbar">112    <div class="status-bar">113      <div class="sb-left">114        <div class="time">8:00</div>115        <div class="small-icon" title="Location">116          <svg viewBox="0 0 24 24" aria-hidden="true">117            <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#ffffff"/>118          </svg>119        </div>120      </div>121      <div class="sb-right">122        <div class="status-icon" title="Wi‑Fi">123          <svg viewBox="0 0 24 24" aria-hidden="true">124            <path d="M12 20a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" fill="#ffffff"/>125            <path d="M4 14.5a10 10 0 0 1 16 0" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>126            <path d="M7 17.5a6.5 6.5 0 0 1 10 0" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>127          </svg>128        </div>129        <div class="status-icon" title="Battery">130          <svg viewBox="0 0 24 24" aria-hidden="true">131            <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>132            <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>133            <rect x="4" y="9" width="12" height="6" fill="#ffffff" opacity="0.85"/>134          </svg>135        </div>136      </div>137    </div>138    <div class="toolbar">139      <div class="back-btn" title="Back">140        <svg viewBox="0 0 24 24" aria-hidden="true">141          <path d="M15.5 4.5L7.5 12l8 7.5" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>142        </svg>143      </div>144      <div class="title">L’usine Sliced White Bread</div>145    </div>146  </div>147 148  <!-- Main Content -->149  <div class="content">150    <div class="loader-dot"></div>151  </div>152 153  <!-- Bottom Navigation area -->154  <div class="nav-bar">155    <div class="nav-pill"></div>156  </div>157</div>158</body>159</html>