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 – Antipasti</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; color: #212121;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; background: #C94949; color: #fff;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 36px; font-size: 36px; letter-spacing: 0.2px;21  }22  .status-left span { margin-right: 18px; opacity: 0.95; }23  .status-right { display: flex; align-items: center; gap: 24px; }24  .status-icon { width: 48px; height: 48px; }25  .status-right .percent { font-size: 32px; }26 27  /* App bar */28  .app-bar {29    position: absolute; top: 110px; left: 0; right: 0;30    height: 170px; background: #C94949; color: #fff;31    display: flex; align-items: center;32    padding: 0 36px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);33  }34  .icon-back { width: 64px; height: 64px; margin-right: 22px; }35  .title { font-size: 48px; font-weight: 600; }36 37  /* Link row */38  .link-row {39    position: absolute; top: 280px; left: 0; right: 0;40    height: 120px; background: #fff; border-bottom: 1px solid #e6e6e6;41    display: flex; align-items: center; justify-content: space-between;42    padding: 0 36px;43  }44  .link-text { color: #C94949; font-size: 38px; }45 46  /* Section header */47  .section-header {48    position: absolute; top: 400px; left: 0; right: 0;49    height: 120px; background: #eeeeee; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;50    display: flex; align-items: center; justify-content: center;51    font-size: 40px; color: #444444;52    text-transform: lowercase;53  }54 55  /* List */56  .list {57    position: absolute; top: 520px; left: 0; right: 0; bottom: 140px;58    overflow: hidden;59  }60  .item {61    padding: 34px 36px 34px 36px;62    border-bottom: 1px solid #eeeeee;63    display: flex; align-items: flex-start; justify-content: space-between;64    gap: 24px;65  }66  .item .left { max-width: 780px; }67  .name { font-size: 44px; font-weight: 600; margin-bottom: 18px; color: #222; }68  .desc { font-size: 32px; line-height: 1.35; color: #8a8a8a; }69  .price { font-size: 42px; font-weight: 600; color: #222; min-width: 200px; text-align: right; padding-top: 6px; }70 71  /* Gesture bar */72  .gesture-bar {73    position: absolute; bottom: 0; left: 0; right: 0;74    height: 140px; background: #000000;75    display: flex; align-items: center; justify-content: center;76  }77  .pill {78    width: 300px; height: 16px; border-radius: 12px; background: #ffffff; opacity: 0.9;79  }80</style>81</head>82<body>83<div id="render-target">84 85  <!-- Status Bar -->86  <div class="status-bar">87    <div class="status-left">88      <span class="time">5:56</span>89      <span>M</span>90      <span>⚠</span>91    </div>92    <div class="status-right">93      <!-- Wi‑Fi icon -->94      <svg class="status-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">95        <path d="M6 18c7-6 29-6 36 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>96        <path d="M12 24c5-4 19-4 24 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>97        <path d="M18 30c3-2 9-2 12 0" stroke="#fff" stroke-width="4" stroke-linecap="round"/>98        <circle cx="24" cy="36" r="3.5" fill="#fff"/>99      </svg>100      <!-- Battery icon -->101      <svg class="status-icon" viewBox="0 0 56 48" xmlns="http://www.w3.org/2000/svg">102        <rect x="2" y="10" width="42" height="28" rx="4" ry="4" fill="none" stroke="#fff" stroke-width="4"/>103        <rect x="6" y="14" width="30" height="20" rx="2" ry="2" fill="#fff"/>104        <rect x="46" y="18" width="8" height="12" rx="2" ry="2" fill="#fff"/>105      </svg>106      <span class="percent">100%</span>107    </div>108  </div>109 110  <!-- App Bar -->111  <div class="app-bar">112    <svg class="icon-back" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">113      <path d="M40 12 L20 32 L40 52" stroke="#ffffff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>114    </svg>115    <div class="title">Tanivera Pizza e Pasta</div>116  </div>117 118  <!-- Link Row -->119  <div class="link-row">120    <div class="link-text">zur Speisekarte</div>121    <svg class="icon-back" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">122      <path d="M12 40 L32 20 L52 40" stroke="#C94949" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>123    </svg>124  </div>125 126  <!-- Section header -->127  <div class="section-header">antipasti</div>128 129  <!-- List -->130  <div class="list">131    <div class="item">132      <div class="left">133        <div class="name">Bruschetta</div>134        <div class="desc">hausgemachte geröstete Weißbrotscheiben mit marinierten Tomaten, Olivenöl, Knoblauch und frischem Basilikum</div>135      </div>136      <div class="price">6,90 €</div>137    </div>138 139    <div class="item">140      <div class="left">141        <div class="name">Burrata e Rucola</div>142        <div class="desc">frische Burrata mit geschmorten Kirschtomaten, Rucola, Basilikumpesto, Meersalz und Olivenöl</div>143      </div>144      <div class="price">13,90 €</div>145    </div>146 147    <div class="item">148      <div class="left">149        <div class="name">Antipasti Verdure</div>150        <div class="desc">gegrilltes mediterranes Gemüse mit Meersalz und Olivenöl</div>151      </div>152      <div class="price">12,50 €</div>153    </div>154 155    <div class="item">156      <div class="left">157        <div class="name">Vitello Tonnato</div>158        <div class="desc">zarte Kalbfleischscheiben mit Thunfisch sauce und Kapernäpfeln</div>159      </div>160      <div class="price">13,90 €</div>161    </div>162 163    <div class="item">164      <div class="left">165        <div class="name">Antipasti Mare</div>166        <div class="desc">marinierter Meeresfrüchtesalat mit Rosa Pfeffer und Limette</div>167      </div>168      <div class="price">14,50 €</div>169    </div>170 171    <div class="item">172      <div class="left">173        <div class="name">Antipasti della Casa</div>174        <div class="desc">luftgetrockneter italienischer Rohschinken mit Prosciutto cotto, Grana Padano, Oliven, Kapernäpfel und Grissinis</div>175      </div>176      <div class="price">15,90 €</div>177    </div>178 179    <div class="item">180      <div class="left">181        <div class="name">Antipasti Sinfonia Mista</div>182        <div class="desc">gemischte Vorspeisen</div>183      </div>184      <div class="price">15,50 €</div>185    </div>186  </div>187 188  <!-- Gesture bar -->189  <div class="gesture-bar">190    <div class="pill"></div>191  </div>192 193</div>194</body>195</html>