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>AI Grammar Modal</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;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F6F6F6;15    border-radius: 28px;16    box-shadow: 0 20px 50px rgba(0,0,0,0.15);17  }18 19  /* Header */20  .app-header {21    position: absolute;22    top: 40px;23    left: 0;24    width: 1080px;25    height: 120px;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .hdr-left, .hdr-right { display: flex; align-items: center; gap: 28px; }32  .hdr-left { width: 250px; }33  .hdr-right { margin-left: auto; }34  .hdr-title {35    position: absolute;36    left: 50%;37    transform: translateX(-50%);38    font-weight: 700;39    font-size: 44px;40    color: #0A7A55;41    letter-spacing: 0.3px;42  }43  .icon-btn {44    width: 60px; height: 60px; border-radius: 16px;45    display: flex; align-items: center; justify-content: center;46    color: #0A7A55;47  }48  .icon-btn .ic {49    width: 48px; height: 48px;50  }51 52  /* Content behind modal */53  .textarea {54    position: absolute;55    top: 260px;56    left: 48px;57    width: 984px;58    height: 560px;59    background: #FFFFFF;60    border: 1px solid #E5E5E5;61    border-radius: 40px;62    box-shadow: 0 8px 22px rgba(0,0,0,0.06) inset;63  }64  .textarea .placeholder {65    position: absolute;66    top: 40px; left: 40px;67    font-size: 44px; color: #A9A9A9;68  }69 70  .bottom-cta {71    position: absolute;72    left: 120px;73    top: 1900px;74    width: 840px; height: 120px;75    background: #125D41;76    color: #EAF4EE;77    border-radius: 60px;78    box-shadow: 0 16px 40px rgba(0,0,0,0.18);79    display: flex; align-items: center; justify-content: center;80    font-weight: 700; font-size: 40px;81  }82  .more-link {83    position: absolute;84    top: 2045px; left: 300px;85    font-size: 38px; color: #0A7A55;86  }87 88  /* Dim overlay */89  .overlay {90    position: absolute; inset: 0;91    background: rgba(0,0,0,0.38);92  }93 94  /* Modal card */95  .promo-modal {96    position: absolute;97    top: 880px; left: 120px;98    width: 840px; height: 740px;99    background: #E9F7EA;100    border-radius: 64px;101    box-shadow: 0 34px 80px rgba(0,0,0,0.30);102    overflow: hidden;103  }104  .promo-top-illustration {105    position: absolute;106    top: -140px; left: 90px;107    width: 660px; height: 260px;108    background: #E0E0E0;109    border: 1px solid #BDBDBD;110    border-radius: 20px;111    display: flex; align-items: center; justify-content: center;112    color: #757575; font-weight: 600;113  }114  .promo-body {115    position: absolute;116    top: 180px; left: 80px; right: 80px;117  }118  .promo-body .headline {119    font-size: 64px; font-weight: 800; color: #E16A5E;120    line-height: 1.05;121  }122  .promo-body .subline {123    margin-top: 14px;124    font-size: 56px; font-weight: 800; color: #145D43;125    line-height: 1.09;126  }127 128  /* Floating language badges */129  .badge {130    position: absolute;131    width: 84px; height: 84px; border-radius: 42px;132    display: flex; align-items: center; justify-content: center;133    background: #2BA46E; color: #fff; font-weight: 800; font-size: 38px;134    box-shadow: 0 10px 22px rgba(0,0,0,0.18);135  }136  .badge.light {137    background: #BFEAD0; color: #145D43; font-weight: 700;138  }139  .badge.b1 { top: 120px; left: 100px; }     /* 가 */140  .badge.b2 { top: 80px; right: 120px; }     /* A */141  .badge.b3 { top: 370px; left: 540px; }     /* あ */142 143  /* Close button */144  .close-circle {145    position: absolute;146    top: 1680px; left: 490px;147    width: 100px; height: 100px;148    border-radius: 50%;149    background: rgba(255,255,255,0.25);150    border: 2px solid rgba(255,255,255,0.9);151    display: flex; align-items: center; justify-content: center;152    color: #FFFFFF; font-size: 54px; font-weight: 700;153    backdrop-filter: blur(2px);154  }155</style>156</head>157<body>158<div id="render-target">159  <!-- App header (background content) -->160  <div class="app-header">161    <div class="hdr-left">162      <div class="icon-btn" aria-label="Back">163        <svg class="ic" viewBox="0 0 48 48">164          <path d="M30 8 L14 24 L30 40" stroke="#0A7A55" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>165        </svg>166      </div>167    </div>168    <div class="hdr-title">AI Grammar</div>169    <div class="hdr-right">170      <div class="icon-btn" aria-label="Refresh">⟳</div>171      <div class="icon-btn" aria-label="Clock">172        <svg class="ic" viewBox="0 0 48 48">173          <circle cx="24" cy="24" r="18" stroke="#0A7A55" stroke-width="4" fill="none"></circle>174          <path d="M24 14 L24 24 L34 24" stroke="#0A7A55" stroke-width="4" stroke-linecap="round"></path>175        </svg>176      </div>177    </div>178  </div>179 180  <!-- Background content -->181  <div class="textarea">182    <div class="placeholder">Enter text to be corrected</div>183  </div>184 185  <div class="bottom-cta">Free Grammar Check (3)</div>186  <div class="more-link">Get more corrections</div>187 188  <!-- Dim overlay above background -->189  <div class="overlay"></div>190 191  <!-- Center promo modal -->192  <div class="promo-modal">193    <div class="promo-top-illustration">[IMG: Grammar correction cards illustration]</div>194 195    <!-- floating badges -->196    <div class="badge b1">가</div>197    <div class="badge light b2">A</div>198    <div class="badge light b3">あ</div>199 200    <div class="promo-body">201      <div class="headline">🔥 Multi-Language</div>202      <div class="subline">Correction feature now available!</div>203    </div>204  </div>205 206  <!-- Close control -->207  <div class="close-circle">×</div>208</div>209</body>210</html>