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>Meeting Details UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #F4F4F4;12  }13 14  /* Top App Bar */15  .app-bar {16    position: relative;17    height: 180px;18    background: #0A2D4A;19    color: #fff;20    display: flex;21    align-items: flex-end;22    padding: 0 36px 34px 36px;23    box-sizing: border-box;24  }25  .app-bar .left, .app-bar .right { width: 120px; display: flex; align-items: center; }26  .app-bar .title { flex: 1; text-align: center; font-weight: 600; font-size: 56px; letter-spacing: 0.2px; }27  .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; cursor: default; }28  .icon-btn svg { width: 56px; height: 56px; fill: #fff; }29 30  /* Card */31  .card {32    margin: 30px 24px;33    background: #fff;34    border-radius: 12px;35    box-shadow: 0 2px 12px rgba(0,0,0,0.12);36    padding: 36px 36px 40px;37    box-sizing: border-box;38  }39  .row { display: flex; align-items: flex-start; justify-content: space-between; }40  .label { color: #9E9E9E; font-size: 34px; margin-bottom: 8px; }41  .value { color: #212121; font-size: 46px; line-height: 1.3; }42  .spacer-40 { height: 40px; }43  .avatar {44    width: 120px; height: 120px; border-radius: 60px; background: #607D8B; color: #fff;45    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 48px;46  }47 48  /* Two-column small values */49  .value-small { font-size: 42px; color: #212121; }50  .label-inline { font-size: 32px; color: #9E9E9E; margin-bottom: 8px; }51 52  /* Share box */53  .share-box {54    border: 1px solid #E0E0E0; border-radius: 8px; overflow: hidden; margin-top: 36px;55  }56  .share-top {57    padding: 32px 28px; box-sizing: border-box; text-align: center;58  }59  .share-top .muted { color: #7E7E7E; font-size: 34px; margin-bottom: 20px; }60  .share-top .link {61    font-weight: 700; font-size: 40px; color: #1565C0;62  }63  .share-actions { display: flex; border-top: 1px solid #E0E0E0; }64  .share-action {65    flex: 1; padding: 30px 0; text-align: center; color: #1565C0; font-weight: 600; font-size: 40px;66  }67  .share-actions .divider { width: 1px; background: #E0E0E0; }68 69  /* Bottom primary bar */70  .bottom-bar {71    position: absolute; left: 0; right: 0; bottom: 0;72    height: 150px; background: #0D6EFD; display: flex; align-items: center; justify-content: center;73  }74  .bottom-bar .cta { color: #fff; font-weight: 700; font-size: 46px; letter-spacing: 1px; }75 76</style>77</head>78<body>79<div id="render-target">80 81  <!-- App Bar -->82  <div class="app-bar">83    <div class="left">84      <div class="icon-btn" aria-label="Back">85        <svg viewBox="0 0 24 24">86          <path d="M15.5 19.5L8 12l7.5-7.5 1.4 1.4L10.8 12l6.1 6.1-1.4 1.4z"/>87        </svg>88      </div>89    </div>90    <div class="title">Meeting Details</div>91    <div class="right" style="justify-content:flex-end;">92      <div class="icon-btn" aria-label="More">93        <svg viewBox="0 0 24 24">94          <circle cx="12" cy="5" r="2.2"></circle>95          <circle cx="12" cy="12" r="2.2"></circle>96          <circle cx="12" cy="19" r="2.2"></circle>97        </svg>98      </div>99    </div>100  </div>101 102  <!-- Content Card -->103  <div class="card">104    <div class="row">105      <div style="flex:1;">106        <div class="label">Host</div>107        <div class="value">Cerebra Research</div>108      </div>109      <div class="avatar">C</div>110    </div>111 112    <div class="spacer-40"></div>113 114    <div>115      <div class="label">Topic</div>116      <div class="value">Team Meeting</div>117    </div>118 119    <div class="spacer-40"></div>120 121    <div class="row">122      <div style="flex:1; padding-right:24px;">123        <div class="label">Date and Time</div>124        <div class="value-small">Jul 24, 2023 08:00 AM</div>125      </div>126      <div style="width: 320px;">127        <div class="label-inline">Duration</div>128        <div class="value-small">30 Mins</div>129      </div>130    </div>131 132    <div class="spacer-40"></div>133 134    <div>135      <div class="label">Time Zone</div>136      <div class="value-small">India Standard Time (Asia/Calcutta)</div>137    </div>138 139    <div class="spacer-40"></div>140 141    <div class="row">142      <div style="flex:1; padding-right:24px;">143        <div class="label">Meeting Key</div>144        <div class="value-small">1022086159</div>145      </div>146      <div style="width: 320px;">147        <div class="label-inline">Password</div>148        <div class="value-small">67gRed</div>149      </div>150    </div>151 152    <div class="share-box">153      <div class="share-top">154        <div class="muted">Share the below link to join this meeting</div>155        <div class="link">https://meet.zoho.com/my7blHqJ5C</div>156      </div>157      <div class="share-actions">158        <div class="share-action">COPY</div>159        <div class="divider"></div>160        <div class="share-action">SHARE</div>161      </div>162    </div>163  </div>164 165  <!-- Bottom Primary Button Bar -->166  <div class="bottom-bar">167    <div class="cta">START</div>168  </div>169 170</div>171</body>172</html>