GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Compose Email UI - Dark</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif; }9  #render-target{10    position: relative;11    overflow: hidden;12    width:1080px;13    height:2400px;14    background:#121212;15    color:#EDEDED;16  }17 18  .statusbar{19    height:92px;20    padding:0 28px;21    display:flex;22    align-items:flex-end;23    justify-content:space-between;24    color:#EDEDED;25    font-size:34px;26  }27  .status-icons{ display:flex; align-items:center; gap:20px; }28  .divider{ height:1px; background:#2A2A2A; }29 30  .topbar{31    height:120px;32    padding:0 24px;33    display:flex;34    align-items:center;35    justify-content:space-between;36  }37  .top-left{ display:flex; align-items:center; gap:24px; }38  .icon-btn{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; }39  .icon{ width:44px; height:44px; fill:#EDEDED; opacity:0.9; }40 41  .field{42    padding:22px 32px;43    display:flex;44    align-items:center;45    gap:24px;46    font-size:34px;47    color:#CFCFCF;48  }49  .field .label{50    width:120px;51    color:#B0B0B0;52  }53  .field .value{54    flex:1;55    color:#EDEDED;56  }57 58  .subject{59    padding:28px 32px;60    font-size:44px;61    color:#EDEDED;62    line-height:1.2;63  }64 65  .body-area{66    padding:28px 32px 28px 32px;67    font-size:38px;68    color:#E0E0E0;69    line-height:1.6;70    overflow:hidden;71  }72  .body-area p{ margin:0 0 28px 0; }73 74  /* Keyboard */75  .keyboard{76    position:absolute;77    left:0; right:0; bottom:0;78    height:820px;79    background:#1B1B1F;80    box-shadow:0 -6px 20px rgba(0,0,0,0.45) inset;81  }82  .kb-toolbar{83    height:90px;84    padding:0 24px;85    display:flex;86    align-items:center;87    gap:26px;88    border-top:1px solid #24242A;89    border-bottom:1px solid #24242A;90  }91  .kb-tool{92    width:86px; height:64px; border-radius:16px;93    background:#2B2B31; display:flex; align-items:center; justify-content:center;94  }95  .kb-rows{ padding:20px 16px 16px 16px; }96  .kb-row{97    display:flex; justify-content:center;98    gap:14px; margin-bottom:16px;99  }100  .key{101    height:110px; min-width:86px;102    background:#2A2A30; color:#EDEDED;103    border-radius:16px;104    display:flex; align-items:center; justify-content:center;105    font-size:40px; letter-spacing:1px;106    box-shadow:0 2px 0 rgba(255,255,255,0.04) inset, 0 -2px 0 rgba(0,0,0,0.35) inset;107  }108  .key.wide { min-width:180px; }109  .key.wider{ min-width:360px; }110  .key.icon { font-size:34px; }111  .suggestion-bar{112    position:absolute;113    left:0; right:0;114    bottom:820px;115    height:56px;116    display:flex; align-items:center;117    padding:0 32px;118    color:#9E9E9E;119    font-size:28px;120  }121 122  /* Keep content above keyboard visible height */123  .scroll-zone{124    position:absolute; top:92px; bottom:820px; left:0; right:0;125    overflow:hidden;126  }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Status bar -->133  <div class="statusbar">134    <div style="display:flex; align-items:center; gap:12px;">135      <span>9:09</span>136      <svg width="36" height="36" viewBox="0 0 24 24" class="icon" style="fill:#CFCFCF;">137        <path d="M6 18h11a4 4 0 0 0 0-8 5 5 0 0 0-9-2 4 4 0 0 0-2 10z"></path>138      </svg>139    </div>140    <div class="status-icons">141      <svg class="icon" viewBox="0 0 24 24"><path d="M2 18l8-8 5 5 7-7v10H2z"/></svg>142      <svg class="icon" viewBox="0 0 24 24"><path d="M12 21a4 4 0 0 0 4-4h-8a4 4 0 0 0 4 4zm6-5V9a6 6 0 1 0-12 0v7l-2 2h16l-2-2z"/></svg>143    </div>144  </div>145  <div class="divider"></div>146 147  <!-- Top app bar -->148  <div class="topbar">149    <div class="top-left">150      <div class="icon-btn">151        <svg class="icon" viewBox=