GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Strava Notifications Prompt UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #f2f2f2; border-radius: 0; box-shadow: none;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 120px;17    background: rgba(48,48,48,0.75); color: #fff;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 36px; box-sizing: border-box; z-index: 5;20  }21  .status-time { font-size: 44px; font-weight: 600; letter-spacing: 0.5px; }22  .status-icons { display: flex; align-items: center; gap: 28px; }23  .icon { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3; }24 25  /* Underlying app preview (dimmed phone UI) */26  .phone-preview {27    position: absolute; top: 160px; left: 80px; width: 920px; height: 1100px;28    border-radius: 80px; background: #ffffff; box-shadow: 0 30px 60px rgba(0,0,0,0.25);29    overflow: hidden;30  }31  .phone-header {32    height: 140px; background: #ff5a1f; color: #fff;33    display: flex; align-items: center; justify-content: space-between; padding: 0 40px;34    font-size: 44px; font-weight: 700;35  }36  .phone-header .icons { display: flex; gap: 30px; opacity: 0.95; }37  .phone-content { padding: 40px; }38  .feed-item { display: flex; gap: 24px; align-items: flex-start; }39  .avatar {40    width: 96px; height: 96px; background: #E0E0E0; border: 1px solid #BDBDBD;41    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 22px; border-radius: 50%;42  }43  .feed-text { flex: 1; }44  .feed-title { font-size: 42px; font-weight: 800; color: #222; margin: 8px 0 6px; }45  .feed-meta { font-size: 28px; color: #666; }46  .achievements { font-size: 28px; color: #777; margin-left: auto; }47  .notice-card {48    margin-top: 40px; background: #fafafa; border-radius: 28px; padding: 28px;49    box-shadow: 0 18px 28px rgba(0,0,0,0.12);50  }51  .notice-head { display: flex; align-items: center; gap: 16px; color: #999; font-size: 28px; letter-spacing: 0.3px; }52  .notice-a { width: 32px; height: 32px; background: #ff5a1f; border-radius: 6px; }53  .notice-title { margin-top: 12px; font-size: 36px; font-weight: 800; color: #222; }54  .notice-body { font-size: 30px; color: #555; margin-top: 8px; }55 56  /* Bottom app actions (under the system prompt) */57  .bottom-actions {58    position: absolute; bottom: 140px; left: 0; width: 100%; padding: 0 40px; box-sizing: border-box;59  }60  .btn-orange {61    height: 120px; border-radius: 24px; background: #8d360f; color: #fff;62    display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700;63    margin: 0 20px 24px;64  }65  .btn-outline {66    height: 120px; border-radius: 24px; background: transparent; color: #8d360f; border: 4px solid #8d360f;67    display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700;68    margin: 0 20px;69  }70  .home-indicator {71    position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);72    width: 260px; height: 12px; border-radius: 8px; background: #e6e6e6;73  }74 75  /* Overlay and modal */76  .overlay {77    position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 10;78  }79  .notif-modal {80    position: absolute; left: 50%; top: 860px; transform: translateX(-50%);81    width: 940px; background: #3f4447; border-radius: 54px; box-shadow: 0 30px 60px rgba(0,0,0,0.45);82    padding: 60px 56px; color: #fff;83  }84  .bell {85    width: 72px; height: 72px; margin: 0 auto 32px; display: block;86  }87  .bell path { fill: #d9c2f3; }88  .modal-title {89    text-align: center; font-size: 50px; line-height: 1.2; font-weight: 800; margin-bottom: 36px;90  }91  .modal-actions { display: flex; flex-direction: column; gap: 24px; margin-top: 12px; }92  .modal-btn {93    height: 120px; border-radius: 28px; background: #ead8f9; color: #222; font-weight: 700;94    font-size: 40px; border: 0; display: flex; align-items: center; justify-content: center;95    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);96  }97  .modal-btn.secondary { background: #ead8f9; color: #222; }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status bar -->104  <div class="status-bar">105    <div class="status-time">8:34</div>106    <div class="status-icons">107      <!-- WiFi -->108      <svg class="icon" viewBox="0 0 24 24">109        <path d="M2 9c5-5 15-5 20 0"></path>110        <path d="M5 12c4-4 10-4 14 0"></path>111        <path d="M8 15c3-3 5-3 8 0"></path>112        <circle cx="12" cy="18" r="2" fill="#fff"></circle>113      </svg>114      <!-- Battery -->115      <svg class="icon" viewBox="0 0 28 16">116        <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>117        <rect x="3" y="5" width="18" height="6" rx="1" ry="1" fill="#fff"></rect>118        <rect x="24" y="6" width="3" height="4" rx="1" ry="1" fill="#fff"></rect>119      </svg>120    </div>121  </div>122 123  <!-- Underlying app preview -->124  <div class="phone-preview">125    <div class="phone-header">126      <div>Home</div>127      <div class="icons">128        <!-- simple circle icons -->129        <svg width="36" height="36"><circle cx="18" cy="18" r="16" fill="rgba(255,255,255,0.85)"/></svg>130        <svg width="36" height="36"><circle cx="18" cy="18" r="16" fill="rgba(255,255,255,0.85)"/></svg>131        <svg width="36" height="36"><circle cx="18" cy="18" r="16" fill="rgba(255,255,255,0.85)"/></svg>132      </div>133    </div>134    <div class="phone-content">135      <div class="feed-item">136        <div class="avatar">[IMG: User Avatar]</div>137        <div class="feed-text">138          <div style="font-size:32px; color:#444; font-weight:700;">Peter Lee • Today at 8:22 AM</div>139          <div class="feed-title">Morning Hike</div>140          <div class="feed-meta">Nothing like starting the weekend in nature 😊</div>141        </div>142        <div class="achievements">Achievements • 2</div>143      </div>144 145      <div class="notice-card">146        <div class="notice-head">147          <div class="notice-a"></div>148          <div>STRAVA • Now</div>149        </div>150        <div class="notice-title">Trending challenge among friends</div>151        <div class="notice-body">Peter Lee recently joined the Weekly Hiking Challenge.</div>152      </div>153    </div>154  </div>155 156  <!-- Bottom actions of app (under the overlay) -->157  <div class="bottom-actions">158    <div class="btn-orange">Allow</div>159    <div class="btn-outline">Not now</div>160  </div>161  <div class="home-indicator"></div>162 163  <!-- System-like overlay prompt -->164  <div class="overlay">165    <div class="notif-modal">166      <svg class="bell" viewBox="0 0 24 24">167        <path d="M12 2c-3 0-5 2.5-5 5.5V10c0 .9-.5 1.8-1.2 2.4L4 13.5V15h16v-1.5l-1.8-1.1C17.5 11.8 17 10.9 17 10V7.5C17 4.5 15 2 12 2zM9.5 18a2.5 2.5 0 005 0H9.5z"/>168      </svg>169      <div class="modal-title">Allow Strava to send you notifications?</div>170      <div class="modal-actions">171        <div class="modal-btn">Allow</div>172        <div class="modal-btn secondary">Don’t allow</div>173      </div>174    </div>175  </div>176 177</div>178</body>179</html>