GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="de">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Tanivera Pizza e Pasta</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    position: relative;16    width: 1080px;17    height: 2400px;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Status bar (system) */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 140px;29    background: #A63E3E;30    color: #FFFFFF;31    display: flex;32    align-items: center;33    padding: 0 36px;34    box-sizing: border-box;35    font-size: 40px;36    letter-spacing: 0.5px;37  }38  .status-left, .status-right {39    display: flex;40    align-items: center;41  }42  .status-left {43    gap: 24px;44  }45  .status-right {46    margin-left: auto;47    gap: 24px;48  }49  .icon {50    display: inline-flex;51    align-items: center;52    justify-content: center;53  }54 55  /* App bar */56  .app-bar {57    position: absolute;58    top: 140px;59    left: 0;60    width: 1080px;61    height: 180px;62    background: #C84B4B;63    display: flex;64    align-items: center;65    padding: 0 36px;66    box-sizing: border-box;67    color: #FFFFFF;68    box-shadow: 0 2px 0 rgba(0,0,0,0.08);69  }70  .back-btn {71    width: 72px;72    height: 72px;73    margin-right: 24px;74  }75  .title {76    font-size: 50px;77    font-weight: 600;78  }79 80  /* Content list */81  .content {82    position: absolute;83    top: 320px; /* status(140) + appbar(180) */84    left: 0;85    width: 1080px;86    bottom: 120px; /* keep space for gesture bar */87    background: #FFFFFF;88  }89  .list-item {90    height: 160px;91    display: flex;92    align-items: center;93    padding: 0 36px;94    box-sizing: border-box;95    border-top: 1px solid #EFEFEF;96  }97  .list-item:first-child {98    border-top: 0;99  }100  .item-text {101    font-size: 44px;102    color: #C84B4B;103  }104  .chevron {105    margin-left: auto;106    width: 44px;107    height: 44px;108  }109 110  /* Bottom gesture area */111  .gesture-area {112    position: absolute;113    bottom: 0;114    left: 0;115    width: 1080px;116    height: 120px;117    background: #000000;118    display: flex;119    align-items: center;120    justify-content: center;121  }122  .gesture-pill {123    width: 240px;124    height: 14px;125    background: #DBDBDB;126    border-radius: 10px;127  }128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Top status bar -->134  <div class="status-bar">135    <div class="status-left">136      <div>5:55</div>137      <!-- Mail icon -->138      <svg class="icon" width="46" height="46" viewBox="0 0 24 24">139        <path d="M2 5h20v14H2z" fill="none" stroke="#FFFFFF" stroke-width="2"/>140        <path d="M2 5l10 7 10-7" fill="none" stroke="#FFFFFF" stroke-width="2"/>141      </svg>142      <!-- Alert icon -->143      <svg class="icon" width="46" height="46" viewBox="0 0 24 24">144        <path d="M12 4L2 20h20L12 4z" fill="none" stroke="#FFFFFF" stroke-width="2"/>145        <circle cx="12" cy="16" r="1.5" fill="#FFFFFF"/>146        <path d="M12 10v4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>147      </svg>148    </div>149    <div class="status-right">150      <!-- WiFi icon -->151      <svg class="icon" width="46" height="46" viewBox="0 0 24 24">152        <path d="M3 9c4.5-4 13.5-4 18 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>153        <path d="M6 12c3-2.7 9-2.7 12 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>154        <path d="M9 15c1.5-1.3 4.5-1.3 6 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>155        <circle cx="12" cy="18" r="1.6" fill="#FFFFFF"/>156      </svg>157      <!-- Battery icon -->158      <svg class="icon" width="52" height="46" viewBox="0 0 28 24">159        <rect x="2" y="5" width="20" height="14" rx="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>160        <rect x="4" y="7" width="14" height="10" fill="#FFFFFF"/>161        <rect x="22" y="9" width="4" height="6" rx="1" fill="#FFFFFF"/>162      </svg>163      <div>100%</div>164    </div>165  </div>166 167  <!-- App bar -->168  <div class="app-bar">169    <svg class="back-btn" viewBox="0 0 48 48">170      <path d="M30 10 L16 24 L30 38" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>171    </svg>172    <div class="title">Tanivera Pizza e Pasta</div>173  </div>174 175  <!-- Content -->176  <div class="content">177    <div class="list-item">178      <div class="item-text">zur Speisekarte</div>179      <svg class="chevron" viewBox="0 0 24 24">180        <path d="M6 9l6 6 6-6" fill="none" stroke="#C84B4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>181      </svg>182    </div>183    <div class="list-item">184      <div class="item-text">zur Wochenkarte/Monatsempfehlung</div>185      <svg class="chevron" viewBox="0 0 24 24">186        <path d="M6 9l6 6 6-6" fill="none" stroke="#C84B4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>187      </svg>188    </div>189  </div>190 191  <!-- Bottom gesture bar -->192  <div class="gesture-area">193    <div class="gesture-pill"></div>194  </div>195 196</div>197</body>198</html>