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">6<title>Translation Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1B1D1E;13    border-radius: 0;14    box-shadow: none;15    color: #D7D9DA;16  }17  .status-bar {18    position: absolute; top: 24px; left: 36px; right: 36px; height: 72px;19    display: flex; align-items: center; justify-content: space-between; font-size: 36px; color: #E8ECEC;20  }21  .status-left { display: flex; gap: 18px; align-items: center; }22  .status-right { display: flex; gap: 24px; align-items: center; }23  .tiny-square {24    width: 32px; height: 32px; border-radius: 6px; background: #E8ECEC; display: inline-block;25  }26  .app-header {27    position: absolute; top: 140px; left: 32px; right: 32px; height: 96px;28    display: flex; align-items: center; justify-content: space-between;29  }30  .header-actions { display: flex; gap: 44px; align-items: center; color: #D7D9DA; }31  .label {32    position: absolute; left: 64px; top: 300px; font-size: 40px; color: #BFC6C7;33  }34  .main-icons {35    position: absolute; right: 64px; top: 420px; display: flex; flex-direction: column; gap: 40px; color: #BFC6C7;36  }37  .main-text {38    position: absolute; left: 64px; right: 160px; top: 420px;39    font-size: 96px; font-weight: 500; color: #DDE3E4; line-height: 1.15;40  }41  .divider {42    position: absolute; left: 160px; right: 160px; top: 720px; height: 6px; background: #2B3131; border-radius: 3px;43  }44  .label-arabic {45    position: absolute; left: 64px; top: 860px; font-size: 40px; color: #82D7D1;46  }47  .secondary-icons {48    position: absolute; right: 64px; top: 860px; display: flex; gap: 48px; align-items: center; color: #82D7D1;49  }50  .accent-square {51    width: 34px; height: 34px; background: #82D7D1; border-radius: 6px;52  }53  .arabic-text {54    position: absolute; right: 64px; left: 64px; top: 1080px;55    font-size: 92px; color: #82D7D1; text-align: right; line-height: 1.2;56  }57  .offline {58    position: absolute; left: 64px; top: 1460px; display: flex; align-items: center; gap: 28px; color: #BFC6C7; font-size: 40px;59  }60  .circle {61    width: 56px; height: 56px; border-radius: 28px; background: #2B3131; display: flex; align-items: center; justify-content: center;62  }63  .fab {64    position: absolute; right: 64px; bottom: 220px; width: 520px; height: 128px;65    background: #045D56; color: #CFEFEA; border-radius: 64px;66    display: flex; align-items: center; justify-content: center; gap: 28px;67    box-shadow: 0 18px 32px rgba(0,0,0,0.5);68    font-size: 44px; font-weight: 500;69  }70  .nav-indicator {71    position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%);72    width: 280px; height: 12px; background: #DFDFDF; border-radius: 8px; opacity: 0.9;73  }74  svg { display: block; }75</style>76</head>77<body>78<div id="render-target">79 80  <!-- Status bar -->81  <div class="status-bar">82    <div class="status-left">83      <div>10:15</div>84      <div>11°</div>85      <span class="tiny-square"></span>86    </div>87    <div class="status-right">88      <!-- Wi-Fi -->89      <svg width="48" height="48" viewBox="0 0 48 48">90        <path d="M4 16c10-8 30-8 40 0" stroke="#E8ECEC" stroke-width="4" fill="none" stroke-linecap="round"/>91        <path d="M10 22c7-6 21-6 28 0" stroke="#E8ECEC" stroke-width="4" fill="none" stroke-linecap="round"/>92        <path d="M18 30c4-3 8-3 12 0" stroke="#E8ECEC" stroke-width="4" fill="none" stroke-linecap="round"/>93        <circle cx="24" cy="36" r="3" fill="#E8ECEC"/>94      </svg>95      <!-- Battery -->96      <svg width="60" height="48" viewBox="0 0 60 48">97        <rect x="6" y="10" width="42" height="28" rx="4" ry="4" stroke="#E8ECEC" stroke-width="4" fill="none"/>98        <rect x="10" y="14" width="30" height="20" fill="#E8ECEC"/>99        <rect x="50" y="18" width="6" height="12" rx="2" fill="#E8ECEC"/>100      </svg>101    </div>102  </div>103 104  <!-- App header -->105  <div class="app-header">106    <!-- Back arrow -->107    <svg width="64" height="64" viewBox="0 0 48 48">108      <path d="M30 8 L12 24 L30 40" stroke="#D7D9DA" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>109    </svg>110 111    <div class="header-actions">112      <!-- Plus -->113      <svg width="56" height="56" viewBox="0 0 48 48">114        <path d="M24 8 V40 M8 24 H40" stroke="#D7D9DA" stroke-width="4" stroke-linecap="round"/>115      </svg>116      <!-- History -->117      <svg width="56" height="56" viewBox="0 0 48 48">118        <circle cx="24" cy="24" r="16" stroke="#D7D9DA" stroke-width="4" fill="none"/>119        <path d="M24 24 L24 14 M24 24 L32 28" stroke="#D7D9DA" stroke-width="4" stroke-linecap="round"/>120      </svg>121      <!-- More (vertical dots) -->122      <svg width="56" height="56" viewBox="0 0 48 48">123        <circle cx="24" cy="10" r="4" fill="#D7D9DA"/>124        <circle cx="24" cy="24" r="4" fill="#D7D9DA"/>125        <circle cx="24" cy="38" r="4" fill="#D7D9DA"/>126      </svg>127    </div>128  </div>129 130  <!-- Labels and main text -->131  <div class="label">English</div>132 133  <div class="main-icons">134    <!-- Copy -->135    <svg width="56" height="56" viewBox="0 0 48 48">136      <rect x="14" y="12" width="22" height="22" rx="3" stroke="#BFC6C7" stroke-width="4" fill="none"/>137      <rect x="8" y="18" width="22" height="22" rx="3" stroke="#BFC6C7" stroke-width="3" fill="none"/>138    </svg>139    <!-- Speaker -->140    <svg width="56" height="56" viewBox="0 0 48 48">141      <path d="M8 30 H16 L26 38 V10 L16 18 H8 Z" fill="none" stroke="#BFC6C7" stroke-width="4" stroke-linejoin="round"/>142      <path d="M30 18 C36 22 36 26 30 30" stroke="#BFC6C7" stroke-width="4" fill="none" stroke-linecap="round"/>143    </svg>144  </div>145 146  <div class="main-text">My name is Charlie</div>147 148  <div class="divider"></div>149 150  <div class="label-arabic">Arabic</div>151 152  <div class="secondary-icons">153    <!-- Conversation bubble -->154    <svg width="56" height="56" viewBox="0 0 48 48">155      <path d="M8 10 H40 V30 H24 L16 38 V30 H8 Z" stroke="#82D7D1" stroke-width="4" fill="none" stroke-linejoin="round"/>156    </svg>157    <!-- Copy -->158    <svg width="56" height="56" viewBox="0 0 48 48">159      <rect x="14" y="12" width="22" height="22" rx="3" stroke="#82D7D1" stroke-width="4" fill="none"/>160      <rect x="8" y="18" width="22" height="22" rx="3" stroke="#82D7D1" stroke-width="3" fill="none"/>161    </svg>162    <span class="accent-square"></span>163  </div>164 165  <div class="arabic-text">اسمي تشارلي</div>166 167  <!-- Offline translation -->168  <div class="offline">169    <div class="circle">170      <svg width="36" height="36" viewBox="0 0 48 48">171        <path d="M14 24 L22 32 L34 18" stroke="#BFC6C7" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>172      </svg>173    </div>174    <div>Offline translation</div>175  </div>176 177  <!-- Floating action button -->178  <div class="fab">179    <svg width="44" height="44" viewBox="0 0 48 48">180      <path d="M24 8 V40 M8 24 H40" stroke="#CFEFEA" stroke-width="4" stroke-linecap="round"/>181    </svg>182    <span>New translation</span>183  </div>184 185  <!-- Bottom navigation indicator -->186  <div class="nav-indicator"></div>187 188</div>189</body>190</html>