GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Skype Group UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#0e0e0e; color:#fff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:90px; padding:22px 28px;17    color:#f5f5f5; font-weight:600; font-size:36px;18    display:flex; align-items:center; justify-content:space-between;19    opacity:0.9;20  }21  .status-icons { display:flex; align-items:center; gap:20px; color:#d6d6d6; font-size:28px; }22  .dot { width:14px; height:14px; border-radius:50%; background:#d6d6d6; display:inline-block; }23  .battery { width:26px; height:40px; border:3px solid #d6d6d6; border-radius:4px; position:relative; }24  .battery::after { content:''; position:absolute; top:-10px; left:8px; width:10px; height:6px; background:#d6d6d6; border-radius:2px; }25  .battery .level { position:absolute; bottom:4px; left:4px; right:4px; height:24px; background:#d6d6d6; }26 27  /* Header */28  .header {29    position:absolute; top:90px; left:0; right:0;30    height:150px; padding:0 30px;31    display:flex; align-items:center; justify-content:space-between;32  }33  .header-left { display:flex; align-items:center; gap:26px; }34  .back-btn {35    width:72px; height:72px; display:flex; align-items:center; justify-content:center;36  }37  .avatar {38    width:110px; height:110px; border-radius:55px; background:#c7a6ff;39    display:flex; align-items:center; justify-content:center; color:#3a2b5f; font-weight:800; font-size:42px;40  }41  .title-area { display:flex; flex-direction:column; }42  .chat-title { font-size:46px; font-weight:700; }43  .subtitle { font-size:32px; color:#bdbdbd; }44 45  .header-right { display:flex; align-items:center; gap:20px; }46  .icon-btn {47    width:72px; height:72px; border-radius:16px; display:flex; align-items:center; justify-content:center;48    color:#dcdcdc; background:transparent;49  }50 51  /* Vertical dots on left */52  .side-dots {53    position:absolute; left:22px; top:520px;54    display:flex; flex-direction:column; gap:32px;55  }56  .side-dots .s-dot { width:18px; height:18px; border-radius:50%; background:#cfcfcf; opacity:0.6; }57 58  /* Invite card */59  .invite-card {60    position:absolute; left:50%; transform:translateX(-50%);61    top:1260px; width:900px;62    background:#1a1a1a; border-radius:28px; padding:40px; color:#fff;63    box-shadow:0 8px 20px rgba(0,0,0,0.4);64  }65  .link-pill {66    height:120px; background:#0f0f10; border-radius:60px;67    display:flex; align-items:center; justify-content:space-between;68    padding:0 40px; color:#e6e6e6; font-size:36px;69  }70  .link-left { display:flex; align-items:center; gap:28px; }71  .pill-icon {72    width:64px; height:64px; border-radius:32px; background:#111; border:2px solid #3a3a3a;73    display:flex; align-items:center; justify-content:center;74  }75  .card-sub { margin-top:26px; font-size:34px; color:#cfcfcf; text-align:center; }76 77  .btn-row { margin-top:40px; display:flex; flex-direction:column; gap:26px; align-items:center; }78  .btn {79    width:600px; height:110px; border-radius:60px; font-size:40px; font-weight:700;80    display:flex; align-items:center; justify-content:center; cursor:pointer;81  }82  .btn.dark { background:#0e0e0e; color:#fff; border:1px solid #2b2b2b; }83  .btn.blue { background:linear-gradient(90deg,#3f7df1,#5aa3ff); color:#fff; border:none; }84 85  /* System messages */86  .system {87    position:absolute; left:40px; right:40px; top:1640px;88    color:#cfcfcf; font-size:34px; line-height:1.45; text-align:center;89  }90  .system p { margin:22px 0; }91 92  /* Bottom input area */93  .composer {94    position:absolute; left:0; right:0; bottom:120px;95    padding:0 36px; display:flex; align-items:center; gap:24px;96  }97  .plus-circle {98    width:110px; height:110px; border-radius:55px; background:#2c8ef7;99    display:flex; align-items:center; justify-content:center; color:#fff; font-size:70px; font-weight:700;100    box-shadow:0 10px 20px rgba(0,0,0,0.3);101  }102  .input-bar {103    flex:1; height:120px; background:#232323; border-radius:60px;104    display:flex; align-items:center; padding:0 32px; gap:18px; color:#bdbdbd;105  }106  .input-field { flex:1; font-size:40px; color:#bdbdbd; }107  .right-icons { display:flex; align-items:center; gap:28px; }108 109  /* Simple svg icons */110  svg { fill:currentColor; }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="status-bar">118    <div>11:43</div>119    <div class="status-icons">120      <span class="dot"></span>121      <span class="dot"></span>122      <span class="dot"></span>123      <span class="dot"></span>124      <span>•</span>125      <span style="font-size:30px;">📶</span>126      <div class="battery"><div class="level"></div></div>127    </div>128  </div>129 130  <!-- Header -->131  <div class="header">132    <div class="header-left">133      <div class="back-btn">134        <svg width="48" height="48" viewBox="0 0 24 24">135          <path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"></path>136        </svg>137      </div>138      <div class="avatar">FR</div>139      <div class="title-area">140        <div class="chat-title">Friends</div>141        <div class="subtitle">3 participants</div>142      </div>143    </div>144    <div class="header-right">145      <div class="icon-btn">146        <svg width="46" height="46" viewBox="0 0 24 24">147          <path d="M17 10.5V7a2 2 0 0 0-2-2H5C3.9 5 3 5.9 3 7v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2v-3.5l4 3V7.5l-4 3zM5 7h10v10H5V7z"></path>148        </svg>149      </div>150    </div>151  </div>152 153  <!-- Left side vertical dots -->154  <div class="side-dots">155    <div class="s-dot"></div>156    <div class="s-dot"></div>157    <div class="s-dot"></div>158    <div class="s-dot"></div>159  </div>160 161  <!-- Invite card -->162  <div class="invite-card">163    <div class="link-pill">164      <div class="link-left">165        <div class="pill-icon">166          <svg width="36" height="36" viewBox="0 0 24 24">167            <path d="M7.5 13.5l-2 2a4 4 0 0 0 5.7 5.6l3.4-3.4a4 4 0 0 0 0-5.7l-.7-.7-1.4 1.4.7.7a2 2 0 0 1 0 2.9l-3.4 3.4a2 2 0 0 1-2.9 0 2 2 0 0 1 0-2.9l2-2-1.4-1.4zm9-3l2-2a4 4 0 1 0-5.6-5.7l-3.4 3.4a4 4 0 0 0 0 5.7l.7.7 1.4-1.4-.7-.7a2 2 0 0 1 0-2.9l3.4-3.4a2 2 0 0 1 2.9 0 2 2 0 0 1 0 2.9l-2 2 1.3 1.4z"/>168          </svg>169        </div>170        <div>join.skype.com/swja8OzJ4wCQ</div>171      </div>172      <div class="pill-icon">173        <svg width="36" height="36" viewBox="0 0 24 24">174          <path d="M12 3l3 6h6l-4.8 4 2 7-6.2-4.6L6.8 20l2-7L4 9h6z"></path>175        </svg>176      </div>177    </div>178 179    <div class="card-sub">Invite Skype contacts or share the link</div>180 181    <div class="btn-row">182      <div class="btn dark">Invite</div>183      <div class="btn blue">Add people</div>184    </div>185  </div>186 187  <!-- System messages -->188  <div class="system">189    <p>Amelia miller enabled joining this conversation using a link. Go to Group Settings to manage access to the group.</p>190    <p>Amelia miller added Natalie Larson, Richard Wagner to this conversation</p>191    <p>Amelia miller has made the chat history visible to everyone</p>192  </div>193 194  <!-- Bottom composer -->195  <div class="composer">196    <div class="plus-circle">+</div>197 198    <div class="input-bar">199      <div class="input-field">Type a message</div>200      <div class="right-icons">201        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 15.5c-1.9 0-3.5-1.6-3.5-3.5S10.1 8.5 12 8.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm0-10C8.7 5.5 6 8.2 6 11.5S8.7 17.5 12 17.5 18 14.8 18 11.5 15.3 5.5 12 5.5z"/></svg>202      </div>203    </div>204 205    <div class="right-icons">206      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M3 20l18-8L3 4v7l12 1-12 1v7z"></path></svg>207      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M21 19V5a2 2 0 0 0-2-2H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2zM5 5h14v14H5V5zm3 10l2.5-3.1 2 2.6 3-4L19 17H8z"></path></svg>208      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 17l-4 2 1-4-3-3 4-.6L12 7l2 4.4 4 .6-3 3 1 4z"></path></svg>209    </div>210  </div>211 212</div>213</body>214</html>