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>Client Call Screen</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1a130e;13  }14 15  /* Top status bar */16  .statusbar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 120px;19    background: #2a2018;20    color: #e7ddd2;21    display: flex; align-items: center; justify-content: space-between;22    padding: 0 48px;23    box-sizing: border-box;24  }25  .status-left {26    display: flex; align-items: center; gap: 18px;27    font-size: 44px; font-weight: 600;28  }29  .status-right {30    display: flex; align-items: center; gap: 26px;31  }32  .status-right svg { stroke: #e7ddd2; fill: none; }33 34  /* App bar */35  .appbar {36    position: absolute; top: 120px; left: 0; right: 0;37    height: 120px;38    background: #2a2018;39    display: flex; align-items: center; justify-content: space-between;40    padding: 0 48px;41    box-sizing: border-box;42    border-bottom: 6px solid #1a130e;43  }44  .appbar-left {45    display: flex; align-items: center; gap: 28px;46  }47  .title {48    color: #d7cabc;49    font-size: 48px; font-weight: 600;50    letter-spacing: 0.5px;51  }52  .icon-btn svg { stroke: #e7ddd2; }53 54  /* Content */55  .content {56    position: absolute; top: 300px; left: 0; right: 0; bottom: 0;57    padding: 60px 60px;58    box-sizing: border-box;59    color: #d7cabc;60  }61  .card {62    width: 780px;63    border: 3px solid #6a5a50;64    border-radius: 30px;65    padding: 36px 40px;66    box-sizing: border-box;67    color: #d7cabc;68  }69  .hl {70    background: #f3d56a;71    color: #1a130e;72    padding: 6px 10px;73    border-radius: 6px;74    font-weight: 700;75  }76  .line1 {77    font-size: 48px;78    margin-bottom: 18px;79  }80  .line2 {81    font-size: 40px;82    color: #c9bbad;83  }84 85  /* Bottom home indicator */86  .home-indicator {87    position: absolute; bottom: 34px; left: 50%;88    transform: translateX(-50%);89    width: 300px; height: 12px;90    background: #ffffff; border-radius: 12px; opacity: 0.9;91  }92</style>93</head>94<body>95<div id="render-target">96  <!-- Status Bar -->97  <div class="statusbar">98    <div class="status-left">99      <div>6:14</div>100      <!-- simple sun icon -->101      <svg width="42" height="42" viewBox="0 0 42 42">102        <circle cx="21" cy="21" r="8" stroke="#e7ddd2" />103        <line x1="21" y1="2" x2="21" y2="10" stroke="#e7ddd2" stroke-width="2"/>104        <line x1="21" y1="32" x2="21" y2="40" stroke="#e7ddd2" stroke-width="2"/>105        <line x1="2" y1="21" x2="10" y2="21" stroke="#e7ddd2" stroke-width="2"/>106        <line x1="32" y1="21" x2="40" y2="21" stroke="#e7ddd2" stroke-width="2"/>107        <line x1="8" y1="8" x2="13" y2="13" stroke="#e7ddd2" stroke-width="2"/>108        <line x1="29" y1="29" x2="34" y2="34" stroke="#e7ddd2" stroke-width="2"/>109        <line x1="8" y1="34" x2="13" y2="29" stroke="#e7ddd2" stroke-width="2"/>110        <line x1="29" y1="13" x2="34" y2="8" stroke="#e7ddd2" stroke-width="2"/>111      </svg>112    </div>113    <div class="status-right">114      <!-- Wi-Fi icon -->115      <svg width="44" height="44" viewBox="0 0 44 44">116        <path d="M7 18c7-7 23-7 30 0" stroke-width="3"/>117        <path d="M12 23c5-5 15-5 20 0" stroke-width="3"/>118        <path d="M17 28c3-3 7-3 10 0" stroke-width="3"/>119        <circle cx="22" cy="33" r="2.5" fill="#e7ddd2" stroke="none"/>120      </svg>121      <!-- Battery icon -->122      <svg width="48" height="44" viewBox="0 0 48 44">123        <rect x="4" y="10" width="34" height="24" rx="4" stroke-width="3"/>124        <rect x="40" y="16" width="4" height="12" rx="1" stroke-width="3"/>125        <rect x="8" y="14" width="26" height="16" rx="2" fill="#e7ddd2" stroke="none"/>126      </svg>127    </div>128  </div>129 130  <!-- App Bar -->131  <div class="appbar">132    <div class="appbar-left">133      <!-- Back arrow -->134      <div class="icon-btn">135        <svg width="56" height="56" viewBox="0 0 56 56">136          <path d="M32 12 L16 28 L32 44" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>137        </svg>138      </div>139      <div class="title">client call</div>140    </div>141    <!-- Close (X) -->142    <div class="icon-btn">143      <svg width="56" height="56" viewBox="0 0 56 56">144        <path d="M14 14 L42 42 M42 14 L14 42" stroke-width="5" stroke-linecap="round"/>145      </svg>146    </div>147  </div>148 149  <!-- Content -->150  <div class="content">151    <div class="card">152      <div class="line1"><span class="hl">client call</span></div>153      <div class="line2">Important</div>154    </div>155  </div>156 157  <!-- Home Indicator -->158  <div class="home-indicator"></div>159</div>160</body>161</html>