GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Appy Weather Notification Prompt</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: "Inter", Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #5F4C16; /* warm brown/olive backdrop */18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 20px;24    left: 24px;25    right: 24px;26    height: 90px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #ffffff;31  }32  .sb-left {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .time {38    font-weight: 700;39    font-size: 52px;40    letter-spacing: 1px;41  }42  .mini-icon {43    width: 32px;44    height: 32px;45    border-radius: 50%;46    border: 2px solid rgba(255,255,255,0.7);47    opacity: 0.8;48  }49  .sb-right {50    display: flex;51    align-items: center;52    gap: 28px;53  }54  .icon {55    display: inline-flex;56    align-items: center;57    justify-content: center;58  }59  .icon svg {60    display: block;61  }62 63  /* Modal/card */64  .modal {65    position: absolute;66    left: 50%;67    transform: translateX(-50%);68    top: 1080px; /* lower half placement */69    width: 980px;70    background: #383C41;71    border-radius: 64px;72    box-shadow: 0 30px 60px rgba(0,0,0,0.45);73    padding: 64px 56px 56px;74    color: #ffffff;75  }76  .bell {77    display: flex;78    justify-content: center;79    margin-top: -6px;80    margin-bottom: 28px;81  }82  .title {83    text-align: center;84    font-size: 56px;85    line-height: 1.25;86    font-weight: 600;87    letter-spacing: 0.2px;88    margin-bottom: 42px;89  }90  .title .brand {91    font-weight: 800;92  }93  .actions {94    display: flex;95    flex-direction: column;96    gap: 26px;97    margin-top: 10px;98  }99  .btn {100    height: 156px;101    border-radius: 32px;102    background: #CFEEFF;103    color: #142533;104    font-size: 44px;105    font-weight: 700;106    display: flex;107    align-items: center;108    justify-content: center;109    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);110  }111  .gesture-bar {112    position: absolute;113    left: 50%;114    transform: translateX(-50%);115    bottom: 42px;116    width: 520px;117    height: 14px;118    background: #FFFFFF;119    border-radius: 10px;120    opacity: 0.9;121  }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status Bar -->128  <div class="status-bar">129    <div class="sb-left">130      <div class="time">2:18</div>131      <div class="mini-icon"></div>132      <div class="mini-icon" style="border-style:dashed;"></div>133      <div class="mini-icon" style="border-radius:8px;"></div>134      <div class="icon" style="color:#fff;font-weight:600;">Calm</div>135      <div class="mini-icon" style="width:16px;height:16px;"></div>136    </div>137    <div class="sb-right">138      <!-- WiFi -->139      <div class="icon">140        <svg width="46" height="46" viewBox="0 0 24 24">141          <path fill="#FFFFFF" d="M12 18.5l-1.6-1.6a2.25 2.25 0 013.2 0L12 18.5zm4.6-4.6a6 6 0 00-9.2 0l-1.6-1.6a8.5 8.5 0 0112.4 0l-1.6 1.6zm3.3-3.3a11 11 0 00-15.8 0L2.5 9a13.5 13.5 0 0119 0l-1.6 1.6z"/>142        </svg>143      </div>144      <!-- Battery -->145      <div class="icon">146        <svg width="46" height="46" viewBox="0 0 24 24">147          <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#FFFFFF" stroke-width="2"/>148          <rect x="4" y="8" width="12" height="8" fill="#FFFFFF"/>149          <rect x="20" y="10" width="2.5" height="4" rx="1" fill="#FFFFFF"/>150        </svg>151      </div>152    </div>153  </div>154 155  <!-- Modal Card -->156  <div class="modal">157    <div class="bell">158      <svg width="96" height="96" viewBox="0 0 24 24">159        <path fill="#9FD8FF" d="M12 2a4 4 0 00-4 4v2c0 .6-.2 1.2-.6 1.7L6 12v2h12v-2l-1.4-2.3c-.4-.5-.6-1.1-.6-1.7V6a4 4 0 00-4-4zm0 20a3 3 0 003-3H9a3 3 0 003 3z"/>160      </svg>161    </div>162    <div class="title">163      Allow <span class="brand">Appy Weather</span> to send you notifications?164    </div>165    <div class="actions">166      <div class="btn">Allow</div>167      <div class="btn">Don’t allow</div>168    </div>169  </div>170 171  <!-- Gesture bar at bottom -->172  <div class="gesture-bar"></div>173</div>174</body>175</html>