GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0E6D77; /* teal backdrop */14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    padding: 0 40px;27    box-sizing: border-box;28    color: #FFFFFF;29    font-family: "Roboto", system-ui, -apple-system, Arial, sans-serif;30  }31  .sb-left, .sb-right {32    display: flex;33    align-items: center;34    gap: 24px;35    font-weight: 500;36    letter-spacing: 0.5px;37  }38  .time {39    font-size: 48px;40  }41  .temp {42    font-size: 36px;43    opacity: 0.9;44  }45  .icon {46    width: 48px;47    height: 48px;48    fill: none;49    stroke: #FFFFFF;50    stroke-width: 3;51  }52 53  /* Center logo text */54  .logo {55    position: absolute;56    left: 0;57    width: 100%;58    top: 1200px; /* roughly lower center */59    text-align: center;60    font-family: cursive, "Comic Sans MS", "Brush Script MT", sans-serif;61    font-size: 220px;62    font-weight: 700;63    color: #111111;64    -webkit-text-stroke: 12px #FFFFFF;65    text-shadow: 0 6px 0 rgba(0,0,0,0.08);66    letter-spacing: 6px;67  }68 69  /* Bottom gesture bar */70  .nav-area {71    position: absolute;72    bottom: 0;73    left: 0;74    width: 1080px;75    height: 130px;76    background: #000000;77  }78  .gesture-pill {79    position: absolute;80    left: 50%;81    bottom: 30px;82    transform: translateX(-50%);83    width: 360px;84    height: 18px;85    background: #E6E6E6;86    border-radius: 9px;87    opacity: 0.95;88  }89</style>90</head>91<body>92<div id="render-target">93  <!-- Top Status Bar -->94  <div class="status-bar">95    <div class="sb-left">96      <div class="time">10:43</div>97      <div class="temp">60°</div>98      <!-- Play Store triangle icon -->99      <svg class="icon" viewBox="0 0 24 24">100        <path d="M3 4 L19 12 L3 20 Z"></path>101      </svg>102      <!-- Download icon -->103      <svg class="icon" viewBox="0 0 24 24">104        <rect x="4" y="4" width="16" height="16" rx="2"></rect>105        <path d="M12 7 V15 M8 12 L12 16 L16 12"></path>106      </svg>107    </div>108    <div class="sb-right">109      <!-- WiFi icon -->110      <svg class="icon" viewBox="0 0 24 24">111        <path d="M2 8 C8 2,16 2,22 8"></path>112        <path d="M5 11 C9 7,15 7,19 11"></path>113        <path d="M8 14 C11 12,13 12,16 14"></path>114        <circle cx="12" cy="17" r="1.5" fill="#FFFFFF" stroke="none"></circle>115      </svg>116      <!-- Battery icon -->117      <svg class="icon" viewBox="0 0 28 24">118        <rect x="2" y="5" width="20" height="14" rx="2"></rect>119        <rect x="22" y="9" width="4" height="6" rx="1"></rect>120        <rect x="5" y="8" width="14" height="8" fill="#FFFFFF" stroke="none"></rect>121      </svg>122    </div>123  </div>124 125  <!-- Logo -->126  <div class="logo">TASTY</div>127 128  <!-- Bottom navigation/gesture area -->129  <div class="nav-area">130    <div class="gesture-pill"></div>131  </div>132</div>133</body>134</html>