GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Upcoming Events - Mobile 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:#111213; color:#fff;11  }12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0;15    height:110px; background:#0f0f10; color:#fff;16    display:flex; align-items:center; padding:0 36px;17    font-weight:600; font-size:44px;18  }19  .status-icons { margin-left:auto; display:flex; align-items:center; gap:22px; }20  .status-icon { width:48px; height:48px; opacity:0.85; }21  /* App header */22  .app-header {23    position:absolute; top:110px; left:0; right:0;24    height:180px; background:#151515; display:flex; align-items:center;25    padding:0 24px;26    box-shadow:0 2px 0 rgba(255,255,255,0.06);27  }28  .back-btn {29    width:88px; height:88px; display:flex; align-items:center; justify-content:center;30    margin-left:12px; margin-right:8px;31  }32  .header-title {33    display:flex; flex-direction:column; justify-content:center;34    color:#ddd;35  }36  .header-title .title {37    font-size:64px; letter-spacing:0.5px; color:#e6e6e6;38  }39  .header-title .subtitle {40    font-size:30px; color:#9ea0a3; margin-top:6px;41  }42  .header-actions {43    margin-left:auto; display:flex; align-items:center; gap:28px; padding-right:24px;44  }45  .action-circle {46    width:96px; height:96px; border-radius:48px; background:#24364f;47    display:flex; align-items:center; justify-content:center;48  }49  .icon-btn { width:84px; height:84px; display:flex; align-items:center; justify-content:center; }50  /* Document area */51  .doc-area {52    position:absolute; top:290px; left:0; right:0; bottom:190px;53    background:#0c0c0c; overflow:hidden;54  }55  .doc-content {56    width:100%; height:100%; padding:90px 80px;57    color:#cfcfcf; font-size:38px; line-height:1.6;58  }59  .doc-content h1 {60    font-size:42px; font-weight:600; color:#cfd2d6; margin:0 0 40px 0;61  }62  .doc-content ul { margin:0; padding-left:28px; list-style:disc; }63  .doc-content li { font-size:34px; color:#c9c9c9; margin-bottom:16px; }64  /* Floating action button */65  .fab {66    position:absolute; right:40px; bottom:260px;67    width:150px; height:150px; border-radius:75px;68    background:#0d2234; box-shadow:0 8px 24px rgba(0,0,0,0.6);69    display:flex; align-items:center; justify-content:center;70  }71  /* Bottom sheet */72  .bottom-sheet {73    position:absolute; left:0; right:0; bottom:0; height:190px;74    background:#1a1a1a; color:#fff;75    border-top-left-radius:42px; border-top-right-radius:42px;76    display:flex; align-items:center; padding:0 48px; font-size:46px; letter-spacing:0.3px;77  }78  .sheet-text { opacity:0.95; }79  /* Simple helper dots */80  .dot { width:16px; height:16px; border-radius:50%; background:#d9d9d9; display:inline-block; }81</style>82</head>83<body>84<div id="render-target">85 86  <!-- STATUS BAR -->87  <div class="status-bar">88    <div>10:17</div>89    <div class="status-icons">90      <!-- Moon / Do Not Disturb (simple dot) -->91      <span class="dot" style="background:#ffffff; opacity:0.9;"></span>92      <!-- Wi‑Fi -->93      <svg class="status-icon" viewBox="0 0 24 24">94        <path fill="#ffffff" d="M12 18.5l2.2 2.3c-.6.6-3.8.6-4.4 0L12 18.5zm-6.6-6.1c4.9-4.6 13-4.6 17.9 0l-2.2 2c-3.9-3.6-9.6-3.6-13.5 0l-2.2-2zm3.8 3.3c3-2.6 8.2-2.6 11.2 0l-2.1 1.8c-2.4-1.9-4.6-1.9-7 0l-2.1-1.8z"/>95      </svg>96      <!-- Battery -->97      <svg class="status-icon" viewBox="0 0 24 24">98        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"/>99        <rect x="4" y="8" width="12" height="8" fill="#ffffff"/>100        <rect x="20" y="9" width="2" height="6" fill="#ffffff"/>101      </svg>102    </div>103  </div>104 105  <!-- APP HEADER -->106  <div class="app-header">107    <div class="back-btn">108      <svg width="64" height="64" viewBox="0 0 24 24">109        <path fill="#ffffff" d="M15.5 19L8 12l7.5-7 1.5 1.6L11 12l6 5.4z"/>110      </svg>111    </div>112    <div class="header-title">113      <div class="title">Upcoming Even...</div>114      <div class="subtitle">All changes saved</div>115    </div>116    <div class="header-actions">117      <div class="action-circle">118        <!-- person add -->119        <svg width="46" height="46" viewBox="0 0 24 24">120          <circle cx="12" cy="8" r="3" fill="#cfe1ff"/>121          <path fill="#cfe1ff" d="M5 19c0-3.2 3.4-5 7-5s7 1.8 7 5v1H5v-1z"/>122          <rect x="17" y="6" width="2" height="8" fill="#cfe1ff"/>123          <rect x="14" y="9" width="8" height="2" fill="#cfe1ff"/>124        </svg>125      </div>126      <div class="icon-btn">127        <!-- comment bubble -->128        <svg width="64" height="64" viewBox="0 0 24 24">129          <path fill="#d9d9d9" d="M4 5h16v11H13l-3 3-3-3H4z"/>130        </svg>131      </div>132      <div class="icon-btn">133        <!-- kebab -->134        <svg width="56" height="56" viewBox="0 0 24 24">135          <circle cx="12" cy="5" r="2.2" fill="#d9d9d9"/>136          <circle cx="12" cy="12" r="2.2" fill="#d9d9d9"/>137          <circle cx="12" cy="19" r="2.2" fill="#d9d9d9"/>138        </svg>139      </div>140    </div>141  </div>142 143  <!-- DOCUMENT AREA -->144  <div class="doc-area">145    <div class="doc-content">146      <h1>Upcoming events</h1>147      <ul>148        <li>Flower Show</li>149        <li>Gardening club meeting</li>150      </ul>151    </div>152  </div>153 154  <!-- Floating Edit Button -->155  <div class="fab">156    <svg width="82" height="82" viewBox="0 0 24 24">157      <path fill="#b7c6d9" d="M3 17.2V21h3.8l9.9-9.9-3.8-3.8L3 17.2zm13.9-10.3l2.2-2.2 3 3-2.2 2.2-3-3z"/>158    </svg>159  </div>160 161  <!-- Bottom Share Sheet -->162  <div class="bottom-sheet">163    <div class="sheet-text">Share</div>164  </div>165 166</div>167</body>168</html>