GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Poor GPS Alert</title>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: linear-gradient(#0e2e3a, #1b4150);14    font-family: Arial, Helvetica, sans-serif;15    color: #fff;16  }17 18  /* Header */19  .header {20    width: 100%;21    text-align: center;22    margin-top: 180px;23    font-weight: 800;24    font-size: 96px;25    letter-spacing: 1px;26  }27 28  /* Badge */29  .badge {30    width: 160px;31    height: 160px;32    margin: 60px auto 40px;33    border-radius: 50%;34    border: 10px solid #fff;35    background: #e53935;36    display: flex;37    align-items: center;38    justify-content: center;39    box-shadow: 0 6px 0 rgba(0,0,0,0.15) inset;40  }41  .badge span {42    font-size: 42px;43    font-weight: 800;44    line-height: 44px;45    text-align: center;46  }47 48  /* Description */49  .desc {50    width: 920px;51    margin: 0 auto;52    text-align: center;53    font-size: 42px;54    line-height: 62px;55    font-weight: 700;56  }57 58  /* Bottom actions */59  .actions {60    position: absolute;61    left: 60px;62    right: 60px;63    bottom: 170px;64    display: flex;65    justify-content: space-between;66    align-items: center;67  }68 69  .btn-circle {70    width: 320px;71    height: 320px;72    border-radius: 50%;73    display: flex;74    flex-direction: column;75    align-items: center;76    justify-content: center;77    gap: 26px;78    text-transform: uppercase;79    font-weight: 800;80    letter-spacing: 1px;81  }82 83  .btn-cancel {84    border: 18px solid #ffffff;85    background: transparent;86    color: #ffffff;87  }88  .btn-continue {89    background: #ff4b86;90    border: 16px solid #ff6a98;91    color: #ffffff;92    box-shadow: 0 8px 24px rgba(0,0,0,0.25);93  }94 95  .label {96    font-size: 36px;97  }98 99  /* Icons */100  .icon {101    width: 110px;102    height: 110px;103  }104  .icon svg { width: 100%; height: 100%; }105 106</style>107</head>108<body>109<div id="render-target">110  <div class="header">Poor GPS Alert</div>111 112  <div class="badge">113    <span>NO<br>GPS</span>114  </div>115 116  <div class="desc">117    GPS accuracy is poor in your current location. For Fitbit to correctly track your progress you need to be outdoors with direct line-of-sight to the sky. If you continue, your activity may not be accurate.118  </div>119 120  <div class="actions">121    <div class="btn-circle btn-cancel">122      <div class="icon">123        <!-- X icon -->124        <svg viewBox="0 0 100 100" fill="none">125          <path d="M20 20 L80 80 M80 20 L20 80" stroke="#ffffff" stroke-width="12" stroke-linecap="round"/>126        </svg>127      </div>128      <div class="label">Cancel</div>129    </div>130 131    <div class="btn-circle btn-continue">132      <div class="icon">133        <!-- Play icon -->134        <svg viewBox="0 0 100 100">135          <path d="M35 20 L80 50 L35 80 Z" fill="#ffffff"/>136        </svg>137      </div>138      <div class="label">Continue</div>139    </div>140  </div>141</div>142</body>143</html>