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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #2f8f5b; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #F6FAF3;13  }14 15  /* Top status bar */16  .status-bar {17    height: 60px; padding: 0 36px;18    display: flex; align-items: center; justify-content: space-between;19    color: #5f6b5f; font-weight: 600; font-size: 30px;20    letter-spacing: 0.5px;21  }22  .status-icons { display: flex; gap: 22px; align-items: center; }23  .status-dot { width: 18px; height: 18px; background: #5f6b5f; border-radius: 50%; }24 25  /* App bar */26  .app-bar {27    height: 120px; padding: 0 36px;28    display: flex; align-items: center; justify-content: space-between;29  }30  .app-left, .app-right { display: flex; align-items: center; gap: 28px; }31  .app-title {32    position: absolute; left: 50%; transform: translateX(-50%);33    font-size: 56px; font-weight: 700; color: #2f8f5b;34  }35  .icon-btn svg { display: block; }36 37  /* Input card */38  .input-card {39    width: 960px; height: 780px;40    margin: 24px auto 0 auto;41    background: #FFFFFF; border-radius: 42px;42    box-shadow: 0 14px 40px rgba(47,143,91,0.08);43    position: relative;44  }45  .placeholder {46    color: #BFC5BD; font-size: 44px; padding: 40px 44px;47  }48  .card-actions {49    position: absolute; left: 40px; bottom: 36px;50    display: flex; gap: 36px;51  }52  .round-square {53    width: 110px; height: 110px; background: #2f8f5b;54    border-radius: 24px; display: flex; align-items: center; justify-content: center;55    box-shadow: 0 8px 20px rgba(47,143,91,0.18);56  }57 58  /* Banner */59  .promo-banner {60    width: 960px; height: 320px; margin: 40px auto 0 auto;61    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 36px;62    display: flex; align-items: center; justify-content: center;63    color: #757575; font-size: 36px; font-weight: 600;64  }65 66  /* Bottom actions */67  .bottom-area { width: 100%; padding-top: 740px; }68  .primary-btn {69    width: 880px; height: 140px; margin: 0 auto;70    background: #308E5B; color: #FFFFFF; border-radius: 80px;71    display: flex; align-items: center; justify-content: center;72    font-size: 44px; font-weight: 700; letter-spacing: 0.3px;73    box-shadow: 0 24px 60px rgba(47,143,91,0.18);74  }75  .sub-link {76    text-align: center; margin-top: 36px; font-size: 40px; color: #2f8f5b;77    font-weight: 600;78  }79 80  /* Floating Q&A button */81  .fab {82    position: absolute; right: 56px; bottom: 320px;83    width: 120px; height: 120px; border-radius: 60px;84    background: #F3EDE6; box-shadow: 0 16px 50px rgba(0,0,0,0.08);85    display: flex; align-items: center; justify-content: center;86    color: #8B6A54; font-weight: 700; font-size: 30px;87    flex-direction: column; gap: 6px;88  }89  .fab svg { display: block; }90 91  /* Helper styles for icons */92  .stroke-green { stroke: #2f8f5b; }93  .stroke-white { stroke: #fff; }94  .fill-none { fill: none; }95  .round { stroke-linecap: round; stroke-linejoin: round; }96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Status bar -->102  <div class="status-bar">103    <div>1:38</div>104    <div class="status-icons">105      <!-- simple placeholders for status icons -->106      <div class="status-dot"></div>107      <div class="status-dot" style="width: 26px; height: 18px; border-radius: 6px;"></div>108      <div class="status-dot" style="width: 22px; height: 22px;"></div>109      <div class="status-dot" style="width: 12px; height: 22px; border-radius: 3px;"></div>110    </div>111  </div>112 113  <!-- App bar -->114  <div class="app-bar">115    <div class="app-left">116      <div class="icon-btn">117        <svg width="48" height="48" viewBox="0 0 48 48">118          <path class="stroke-green fill-none round" stroke-width="5" d="M30 10 L16 24 L30 38"></path>119        </svg>120      </div>121    </div>122    <div class="app-title">AI Grammar</div>123    <div class="app-right">124      <!-- Scan icon -->125      <div class="icon-btn">126        <svg width="52" height="52" viewBox="0 0 52 52">127          <path class="stroke-green fill-none round" stroke-width="4" d="M10 18 L10 10 L18 10"></path>128          <path class="stroke-green fill-none round" stroke-width="4" d="M34 10 L42 10 L42 18"></path>129          <path class="stroke-green fill-none round" stroke-width="4" d="M42 34 L42 42 L34 42"></path>130          <path class="stroke-green fill-none round" stroke-width="4" d="M18 42 L10 42 L10 34"></path>131        </svg>132      </div>133      <!-- Clock icon -->134      <div class="icon-btn">135        <svg width="52" height="52" viewBox="0 0 52 52">136          <circle cx="26" cy="26" r="16" class="stroke-green fill-none" stroke-width="4"></circle>137          <path class="stroke-green round fill-none" stroke-width="4" d="M26 26 L26 16"></path>138          <path class="stroke-green round fill-none" stroke-width="4" d="M26 26 L34 30"></path>139        </svg>140      </div>141    </div>142  </div>143 144  <!-- Input card -->145  <div class="input-card">146    <div class="placeholder">Enter text to be corrected</div>147 148    <div class="card-actions">149      <div class="round-square">150        <!-- Camera icon -->151        <svg width="60" height="60" viewBox="0 0 60 60">152          <rect x="10" y="16" width="40" height="28" rx="6" class="stroke-white fill-none" stroke-width="4"></rect>153          <circle cx="30" cy="30" r="9" class="stroke-white fill-none" stroke-width="4"></circle>154          <path d="M22 16 L26 10 L34 10 L38 16" class="stroke-white fill-none round" stroke-width="4"></path>155        </svg>156      </div>157      <div class="round-square">158        <!-- Trend/check icon -->159        <svg width="60" height="60" viewBox="0 0 60 60">160          <path class="stroke-white round fill-none" stroke-width="4" d="M12 40 L24 28 L32 34 L46 20"></path>161          <path class="stroke-white round fill-none" stroke-width="4" d="M46 20 L46 30"></path>162        </svg>163      </div>164    </div>165  </div>166 167  <!-- Banner placeholder -->168  <div class="promo-banner">[IMG: Multi-Language feature banner]</div>169 170  <!-- Bottom actions -->171  <div class="bottom-area">172    <div class="primary-btn">Free Grammar Check (3)</div>173    <div class="sub-link">Get more corrections</div>174  </div>175 176  <!-- Floating Q&A button -->177  <div class="fab">178    <svg width="34" height="34" viewBox="0 0 34 34">179      <circle cx="12" cy="10" r="5" fill="#8B6A54"></circle>180      <path d="M6 28 C6 20 18 20 18 28" stroke="#8B6A54" stroke-width="3" fill="none" stroke-linecap="round"></path>181    </svg>182    <div>Q&A</div>183  </div>184 185</div>186</body>187</html>