GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Fitbit Permission Dialog UI</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background: linear-gradient(180deg, #4d5b5f 0%, #2a7c7a 40%, #1a7c79 100%);11    color:#ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0;17    height:150px; background:#6a6a6a;18    color:#fff; font-weight:600;19  }20  .status-left { position:absolute; left:36px; top:52px; font-size:52px; letter-spacing:1px; }21  .status-icons { position:absolute; left:220px; top:60px; display:flex; gap:26px; align-items:center; }22  .dot { width:14px; height:14px; background:#fff; border-radius:50%; opacity:0.9; }23  .status-right { position:absolute; right:40px; top:48px; display:flex; align-items:center; gap:28px; }24  .wifi {25    width:48px; height:48px;26  }27  .battery {28    width:42px; height:60px; border:4px solid #fff; border-radius:8px; position:relative;29  }30  .battery::after {31    content:""; position:absolute; top:-10px; left:12px; width:18px; height:8px; background:#fff; border-radius:2px;32  }33 34  /* Main content */35  .headline { position:absolute; top:240px; width:100%; text-align:center; font-size:96px; font-weight:600; letter-spacing:1px; }36  .subtext { position:absolute; top:360px; width:100%; text-align:center; font-size:44px; color:#cde7e7; }37 38  .phone-image {39    position:absolute; left:140px; top:540px;40    width:800px; height:900px;41    background:#E0E0E0; border:1px solid #BDBDBD;42    display:flex; justify-content:center; align-items:center; color:#757575;43    border-radius:50px; box-shadow:0 30px 80px rgba(0,0,0,0.35);44  }45 46  /* Bottom buttons */47  .bottom-actions { position:absolute; bottom:220px; left:80px; right:80px; }48  .action-btn {49    width:920px; height:120px; border-radius:70px;50    display:flex; align-items:center; justify-content:center;51    margin:26px 0; font-size:40px; font-weight:700; letter-spacing:1px;52  }53  .btn-light { background:rgba(255,255,255,0.18); color:#d7f2f2; }54  .btn-dark { background:#0e5654; color:#cde7e7; }55 56  /* Overlay and dialog */57  .dim { position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.45); }58  .dialog {59    position:absolute; left:90px; top:880px; width:900px;60    background:#383a3f; border-radius:60px;61    padding:80px 70px; text-align:center;62    box-shadow:0 30px 80px rgba(0,0,0,0.6);63  }64  .runner-icon { margin:0 auto 40px auto; display:block; }65  .dialog-title {66    font-size:54px; line-height:1.2; font-weight:700; margin-bottom:70px;67  }68  .dialog-btn {69    background:#bfe6ff; color:#132b3a;70    height:140px; border-radius:40px; font-size:46px; font-weight:700;71    display:flex; align-items:center; justify-content:center;72    margin:22px auto; width:760px;73  }74  .dialog-btn.secondary { margin-top:24px; }75</style>76</head>77<body>78<div id="render-target">79 80  <!-- Status bar -->81  <div class="status-bar">82    <div class="status-left">10:20</div>83    <div class="status-icons">84      <div class="dot"></div>85      <div class="dot"></div>86      <div class="dot"></div>87    </div>88    <div class="status-right">89      <!-- simple wifi icon -->90      <svg class="wifi" viewBox="0 0 64 64">91        <path d="M6 24c12-12 40-12 52 0" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round"/>92        <path d="M14 32c8-8 28-8 36 0" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round"/>93        <path d="M22 40c4-4 16-4 20 0" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round"/>94        <circle cx="32" cy="50" r="4" fill="#fff"/>95      </svg>96      <div class="battery"></div>97    </div>98  </div>99 100  <!-- Background content -->101  <div class="headline">Nice.</div>102  <div class="subtext">You are now on your way to better health.</div>103 104  <div class="phone-image">[IMG: Phone with Fitbit app preview]</div>105 106  <div class="bottom-actions">107    <div class="action-btn btn-light">SEE WHAT FITBIT TRACKERS CAN DO</div>108    <div class="action-btn btn-dark">SET UP YOUR PHONE</div>109  </div>110 111  <!-- Dim overlay and centered dialog -->112  <div class="dim"></div>113  <div class="dialog">114    <!-- simple runner icon -->115    <svg class="runner-icon" width="72" height="72" viewBox="0 0 72 72">116      <circle cx="36" cy="14" r="7" fill="#9ad8ff"/>117      <path d="M30 28 L42 34 L52 26" stroke="#9ad8ff" stroke-width="6" fill="none" stroke-linecap="round"/>118      <path d="M28 36 L36 44 L30 56" stroke="#9ad8ff" stroke-width="6" fill="none" stroke-linecap="round"/>119      <path d="M42 42 L52 52" stroke="#9ad8ff" stroke-width="6" fill="none" stroke-linecap="round"/>120    </svg>121 122    <div class="dialog-title">Allow Fitbit to access your physical activity?</div>123 124    <div class="dialog-btn">Allow</div>125    <div class="dialog-btn secondary">Don’t allow</div>126  </div>127 128</div>129</body>130</html>