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>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 1080px; height: 110px;17    display: flex; align-items: center; padding: 0 30px; color: #333;18  }19  .status-left { display: flex; align-items: center; gap: 16px; font-size: 36px; }20  .status-right { margin-left: auto; display: flex; align-items: center; gap: 20px; color: #555; }21  .status-icon { width: 34px; height: 34px; }22 23  /* App bar */24  .app-bar {25    position: absolute; top: 110px; left: 0; width: 1080px; height: 200px;26    border-bottom: 1px solid #E6E6E6; display: flex; align-items: center;27    padding: 0 24px; box-sizing: border-box;28  }29  .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }30  .avatar {31    width: 90px; height: 90px; border-radius: 50%;32    background: linear-gradient(180deg,#FFD9C8,#F7B79E);33    color: #A34024; font-weight: 700; display: flex; align-items: center; justify-content: center;34    margin-right: 18px; font-size: 36px;35  }36  .title-wrap { display: flex; flex-direction: column; }37  .title { font-size: 46px; font-weight: 700; color: #222; }38  .subtitle { font-size: 30px; color: #777; margin-top: 6px; }39  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; padding-right: 16px; }40  .icon-btn { width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; }41 42  /* Invite card */43  .invite-card {44    position: absolute; left: 72px; top: 1320px; width: 936px;45    background: #EDF3F8; border-radius: 36px; box-sizing: border-box;46    padding: 36px; color: #222;47  }48  .link-pill {49    height: 108px; background: #fff; border-radius: 54px; display: flex; align-items: center;50    padding: 0 24px; box-shadow: 0 1px 0 rgba(0,0,0,0.04);51  }52  .pill-icon {53    width: 60px; height: 60px; border-radius: 50%; background: #F3F4F6;54    display: flex; align-items: center; justify-content: center; margin-right: 18px;55  }56  .url-text { font-size: 34px; color: #333; flex: 1; }57  .pill-right {58    width: 56px; height: 56px; border-radius: 50%; background: #F3F4F6;59    display: flex; align-items: center; justify-content: center; margin-left: 12px;60  }61  .invite-sub { text-align: center; font-size: 34px; color: #444; margin: 30px 0 24px; }62  .btn {63    height: 104px; border-radius: 52px; display: flex; align-items: center; justify-content: center;64    font-size: 36px; font-weight: 700; cursor: default;65  }66  .btn-white { background: #fff; color: #222; margin-bottom: 18px; }67  .btn-blue {68    background: linear-gradient(180deg,#2196F3,#1976D2); color: #fff;69  }70 71  /* Info texts */72  .info-block { position: absolute; left: 80px; top: 1680px; width: 920px; text-align: center; color: #8A8A8A; }73  .info-block p { margin: 28px 0; font-size: 28px; line-height: 1.45; }74 75  /* Chat input */76  .chat-input {77    position: absolute; left: 24px; bottom: 150px; width: 1032px; height: 120px;78    display: flex; align-items: center; gap: 20px;79  }80  .plus-btn {81    width: 108px; height: 108px; border-radius: 54px; background: linear-gradient(180deg,#2B8AF7,#0D6EF2);82    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: 700;83  }84  .input-pill {85    flex: 1; height: 120px; border-radius: 60px; background: #EFF3F7; display: flex; align-items: center; padding: 0 34px;86    box-sizing: border-box; color: #666; font-size: 34px;87  }88  .input-placeholder { color: #6F7A85; }89  .input-icons { display: flex; align-items: center; gap: 24px; margin-left: 4px; }90  .input-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }91 92  /* Gesture bar */93  .gesture-bar {94    position: absolute; left: 390px; bottom: 40px; width: 300px; height: 16px; background: #D6D6D6; border-radius: 8px;95  }96</style>97</head>98<body>99<div id="render-target">100 101  <!-- Status bar -->102  <div class="status-bar">103    <div class="status-left">104      <span>11:06</span>105    </div>106    <div class="status-right">107      <!-- Simple wifi icon -->108      <svg class="status-icon" viewBox="0 0 24 24">109        <path d="M2 8c5-4 15-4 20 0" stroke="#555" stroke-width="2" fill="none"/>110        <path d="M6 12c3-3 9-3 12 0" stroke="#555" stroke-width="2" fill="none"/>111        <circle cx="12" cy="17" r="2" fill="#555"/>112      </svg>113      <!-- Battery icon -->114      <svg class="status-icon" viewBox="0 0 26 24">115        <rect x="2" y="5" width="18" height="14" rx="2" ry="2" stroke="#555" stroke-width="2" fill="none"/>116        <rect x="4" y="7" width="14" height="10" fill="#555"/>117        <rect x="21" y="9" width="3" height="6" fill="#555"/>118      </svg>119    </div>120  </div>121 122  <!-- App bar -->123  <div class="app-bar">124    <div class="back-btn">125      <svg width="48" height="48" viewBox="0 0 24 24">126        <path d="M14 5l-7 7 7 7" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>127      </svg>128    </div>129    <div class="avatar">FR</div>130    <div class="title-wrap">131      <div class="title">friends</div>132      <div class="subtitle">3 participants</div>133    </div>134    <div class="app-actions">135      <div class="icon-btn">136        <!-- Video camera -->137        <svg width="40" height="40" viewBox="0 0 24 24">138          <rect x="3" y="6" width="12" height="12" rx="2" fill="#222"/>139          <polygon points="17,9 22,7 22,17 17,15" fill="#222"/>140        </svg>141      </div>142    </div>143  </div>144 145  <!-- Invite card -->146  <div class="invite-card">147    <div class="link-pill">148      <div class="pill-icon">149        <!-- Link icon -->150        <svg width="30" height="30" viewBox="0 0 24 24">151          <path d="M10 8l-3 3a3 3 0 004 4l3-3M14 16l3-3a3 3 0 00-4-4l-3 3" stroke="#5C6B7A" stroke-width="2" fill="none" stroke-linecap="round"/>152        </svg>153      </div>154      <div class="url-text">join.skype.com/qbAT9WBPHjkX</div>155      <div class="pill-right">156        <!-- Share icon -->157        <svg width="26" height="26" viewBox="0 0 24 24">158          <circle cx="5" cy="12" r="3" fill="#5C6B7A"/>159          <circle cx="19" cy="5" r="3" fill="#5C6B7A"/>160          <circle cx="19" cy="19" r="3" fill="#5C6B7A"/>161          <path d="M8 12l8-7M8 12l8 7" stroke="#5C6B7A" stroke-width="2" fill="none"/>162        </svg>163      </div>164    </div>165    <div class="invite-sub">Invite Skype contacts or share the link</div>166    <div class="btn btn-white">Invite</div>167    <div class="btn btn-blue">Add people</div>168  </div>169 170  <!-- Informational texts -->171  <div class="info-block">172    <p>Natalie Larson enabled joining this conversation using a link. Go to Group<br/>Settings to manage access to the group.</p>173    <p>Natalie Larson added Amelia miller, Richard Wagner to this conversation</p>174    <p>Natalie Larson has made the chat history visible to everyone</p>175  </div>176 177  <!-- Chat input area -->178  <div class="chat-input">179    <div class="plus-btn">+</div>180    <div class="input-pill">181      <span class="input-placeholder">Type a message</span>182    </div>183    <div class="input-icons">184      <!-- Smiley -->185      <div class="input-icon">186        <svg width="36" height="36" viewBox="0 0 24 24">187          <circle cx="12" cy="12" r="10" stroke="#5C6B7A" stroke-width="2" fill="none"/>188          <circle cx="9" cy="10" r="1.5" fill="#5C6B7A"/>189          <circle cx="15" cy="10" r="1.5" fill="#5C6B7A"/>190          <path d="M8 14c1.5 2 6.5 2 8 0" stroke="#5C6B7A" stroke-width="2" fill="none" stroke-linecap="round"/>191        </svg>192      </div>193      <!-- Mic -->194      <div class="input-icon">195        <svg width="36" height="36" viewBox="0 0 24 24">196          <rect x="9" y="5" width="6" height="10" rx="3" fill="#5C6B7A"/>197          <path d="M5 12c0 4 4 6 7 6s7-2 7-6" stroke="#5C6B7A" stroke-width="2" fill="none"/>198          <path d="M12 18v3" stroke="#5C6B7A" stroke-width="2"/>199        </svg>200      </div>201      <!-- Image -->202      <div class="input-icon">203        <svg width="36" height="36" viewBox="0 0 24 24">204          <rect x="3" y="5" width="18" height="14" rx="2" stroke="#5C6B7A" stroke-width="2" fill="none"/>205          <circle cx="9" cy="11" r="2" fill="#5C6B7A"/>206          <path d="M5 17l4-4 3 3 3-2 4 3" stroke="#5C6B7A" stroke-width="2" fill="none"/>207        </svg>208      </div>209      <!-- Sparkle/star -->210      <div class="input-icon">211        <svg width="36" height="36" viewBox="0 0 24 24">212          <path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5z" fill="#5C6B7A"/>213        </svg>214      </div>215    </div>216  </div>217 218  <!-- Gesture bar -->219  <div class="gesture-bar"></div>220 221</div>222</body>223</html>