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>OneDrive + Outlook Prompt</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15  }16 17  /* Status bar */18  .statusbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    padding: 0 36px;25    box-sizing: border-box;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #ffffff;30    background: rgba(30,30,30,0.95);31  }32  .status-left {33    display: flex;34    align-items: center;35    gap: 18px;36    font-size: 40px;37    font-weight: 600;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .icon {45    width: 46px;46    height: 46px;47    display: inline-flex;48  }49 50  /* Center content */51  .content {52    position: absolute;53    top: 760px;54    left: 0;55    width: 100%;56    display: flex;57    align-items: center;58    flex-direction: column;59    color: #ffffff;60    text-align: center;61  }62  .illustration {63    width: 420px;64    height: 420px;65    background: #E0E0E0;66    border: 1px solid #BDBDBD;67    color: #757575;68    display: flex;69    align-items: center;70    justify-content: center;71    border-radius: 24px;72    letter-spacing: 0.2px;73  }74  .title {75    margin-top: 48px;76    font-size: 54px;77    font-weight: 600;78    line-height: 1.22;79    padding: 0 80px;80  }81  .subtitle {82    margin-top: 22px;83    font-size: 38px;84    color: #9E9E9E;85    line-height: 1.4;86    padding: 0 120px;87  }88 89  /* Bottom CTA area */90  .cta {91    position: absolute;92    left: 0;93    right: 0;94    bottom: 230px;95    display: flex;96    align-items: center;97    flex-direction: column;98    gap: 28px;99  }100  .primary-btn {101    width: 800px;102    height: 120px;103    border-radius: 20px;104    background: #0A84FF;105    color: #0b0b0b;106    font-size: 40px;107    font-weight: 700;108    letter-spacing: 3px;109    text-transform: uppercase;110    display: flex;111    align-items: center;112    justify-content: center;113  }114  .secondary {115    font-size: 38px;116    color: #9E9E9E;117  }118 119  /* Gesture pill */120  .pill {121    position: absolute;122    left: 50%;123    transform: translateX(-50%);124    bottom: 48px;125    width: 280px;126    height: 12px;127    background: rgba(255,255,255,0.9);128    border-radius: 8px;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status bar -->136  <div class="statusbar">137    <div class="status-left">138      <div>7:38</div>139      <!-- simple mail icon -->140      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">141        <path d="M3 6h18v12H3z" opacity="0.3"/>142        <path d="M21 6H3l9 6 9-6zM3 18h18V8l-9 6L3 8z"/>143      </svg>144      <!-- download icon -->145      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">146        <path d="M5 20h14v-2H5v2zM12 3v10m0 0l4-4m-4 4l-4-4" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>147      </svg>148      <!-- cloud icon -->149      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">150        <path d="M6 18h11a4 4 0 0 0 .9-7.9A5.5 5.5 0 0 0 7 8a4 4 0 0 0-1 10z" opacity="0.7"/>151      </svg>152      <!-- cloud icon light -->153      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">154        <path d="M7 18h10a3.5 3.5 0 0 0 .8-6.9A5 5 0 0 0 8 8a3.5 3.5 0 0 0-1 10z" opacity="0.5"/>155      </svg>156    </div>157    <div class="status-right">158      <!-- wifi -->159      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">160        <path d="M12 20a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>161        <path d="M4.9 12.5a10 10 0 0 1 14.2 0M7.8 15.4a6 6 0 0 1 8.4 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>162      </svg>163      <!-- battery -->164      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">165        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#ffffff"/>166        <rect x="4" y="9" width="10" height="6" fill="#000000"/>167        <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>168      </svg>169    </div>170  </div>171 172  <!-- Main content -->173  <div class="content">174    <div class="illustration">[IMG: Outlook + OneDrive illustration]</div>175    <div class="title">OneDrive works better with Outlook</div>176    <div class="subtitle">Send files easily and securely with Outlook</div>177  </div>178 179  <!-- CTA -->180  <div class="cta">181    <div class="primary-btn">TRY OUTLOOK</div>182    <div class="secondary">No, thanks</div>183  </div>184 185  <!-- Gesture pill -->186  <div class="pill"></div>187</div>188</body>189</html>