GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Track - Location Permission</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #0f2a33;11  }12  /* Status bar */13  .statusbar {14    height: 110px; background: #0a2027; color: #ffffff; display: flex; align-items: center; padding: 0 32px; font-size: 40px;15  }16  .statusbar .right { margin-left: auto; display: flex; gap: 28px; align-items: center; }17  /* Header */18  .header {19    height: 160px; background: #0f2a33; color: #cfe3ea; display: flex; align-items: center; padding: 0 40px; border-bottom: 1px solid rgba(255,255,255,0.06);20  }21  .header-title { font-size: 72px; color: #cfe3ea; margin-left: 24px; }22  .back-icon { width: 56px; height: 56px; }23  /* Tabs */24  .tabs {25    height: 120px; background: #123642; display: flex; align-items: flex-end; padding: 0 40px; gap: 60px;26    color: #8fb0b9; font-weight: 600; font-size: 44px;27  }28  .tab { padding-bottom: 24px; position: relative; }29  .tab.active::after {30    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: #2bb5a7; border-radius: 5px;31  }32  /* Map area */33  .map {34    position: absolute; left: 0; right: 0; top: 390px; bottom: 140px;35    background: #E0E0E0; border-top: 1px solid #BDBDBD; border-bottom: 1px solid #BDBDBD;36    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 48px;37  }38  /* Dim overlay */39  .scrim {40    position: absolute; inset: 0; background: rgba(0,0,0,0.35);41  }42  /* Modal card */43  .modal {44    position: absolute; left: 50%; top: 620px; transform: translateX(-50%);45    width: 940px; background: #4b4f55; border-radius: 48px; box-shadow: 0 24px 60px rgba(0,0,0,0.6);46    color: #ffffff; padding: 48px 48px 56px;47  }48  .modal .pin {49    width: 64px; height: 64px; margin: 0 auto 24px; display: block;50  }51  .modal h1 {52    text-align: center; font-size: 54px; line-height: 1.3; margin: 0 0 40px;53  }54  .modal h1 strong { font-weight: 700; }55  .choice-row { display: flex; gap: 40px; justify-content: center; margin-bottom: 24px; }56  .img-circle {57    width: 310px; height: 310px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 50%;58    display: flex; align-items: center; justify-content: center; color: #757575; text-align: center; font-size: 32px; padding: 20px;59  }60  .labels { display: flex; justify-content: space-around; color: #e6e6e6; font-size: 44px; margin-top: 14px; margin-bottom: 30px; }61  .btn {62    background: #cfe5ff; color: #1f2a33; border-radius: 28px; height: 140px; display: flex; align-items: center; justify-content: center;63    font-size: 44px; font-weight: 600; margin: 22px 0; border: 1px solid rgba(0,0,0,0.12);64  }65  /* Bottom gesture bar */66  .home-indicator {67    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);68    width: 300px; height: 14px; border-radius: 7px; background: #cfd3d6;69  }70</style>71</head>72<body>73<div id="render-target">74  <!-- Status bar -->75  <div class="statusbar">76    <div>2:56</div>77    <div class="right">78      <div>◓</div>79      <div>⌁</div>80      <div>⋅</div>81      <div>📶</div>82      <div>🔋</div>83    </div>84  </div>85 86  <!-- Header with back and title -->87  <div class="header">88    <svg class="back-icon" viewBox="0 0 24 24">89      <path d="M15 18l-6-6 6-6" fill="none" stroke="#cfe3ea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>90    </svg>91    <div class="header-title">Track</div>92  </div>93 94  <!-- Tabs -->95  <div class="tabs">96    <div class="tab active">TRACKING</div>97    <div class="tab">LOG PREVIOUS</div>98  </div>99 100  <!-- Map placeholder -->101  <div class="map">[IMG: Google Map]</div>102 103  <!-- Dim background -->104  <div class="scrim"></div>105 106  <!-- Modal dialog -->107  <div class="modal">108    <!-- location pin icon -->109    <svg class="pin" viewBox="0 0 24 24">110      <path d="M12 2c-3.3 0-6 2.7-6 6 0 5.2 6 12 6 12s6-6.8 6-12c0-3.3-2.7-6-6-6z" fill="#7fb8e9"/>111      <circle cx="12" cy="8" r="3" fill="#bfe0ff"/>112    </svg>113 114    <h1>Allow <strong>Fitbit</strong> to access this device’s location?</h1>115 116    <div class="choice-row">117      <div class="img-circle">[IMG: Precise location map with pin]</div>118      <div class="img-circle">[IMG: Approximate location road map]</div>119    </div>120 121    <div class="labels">122      <div>Precise</div>123      <div>Approximate</div>124    </div>125 126    <div class="btn">While using the app</div>127    <div class="btn">Only this time</div>128    <div class="btn">Don’t allow</div>129  </div>130 131  <!-- Bottom home indicator -->132  <div class="home-indicator"></div>133</div>134</body>135</html>