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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #E0E0E0;13  }14  /* Status bar */15  .status-bar {16    position: absolute; top: 24px; left: 32px; right: 32px; height: 72px;17    display: flex; align-items: center; justify-content: space-between;18    color: #FFFFFF;19    font-size: 34px; letter-spacing: 0.3px;20  }21  .status-right { display: flex; align-items: center; gap: 18px; font-size: 28px; }22  /* Top action bar */23  .top-actions {24    position: absolute; top: 140px; left: 24px; right: 24px; height: 84px;25    display: flex; align-items: center; justify-content: space-between;26    color: #B0B0B0;27  }28  .action-right { display: flex; align-items: center; gap: 44px; }29  .icon { width: 48px; height: 48px; }30  .icon path, .icon circle, .icon rect, .icon line { stroke: #B0B0B0; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }31  .icon-fill path, .icon-fill rect, .icon-fill circle { fill: #B0B0B0; stroke: none; }32  /* Title and content */33  .title {34    position: absolute; top: 280px; left: 92px;35    font-size: 72px; color: #9E9E9E; font-weight: 500;36  }37  .subtitle {38    position: absolute; top: 380px; left: 92px;39    font-size: 44px; color: #E0E0E0;40  }41  /* Reminder pill */42  .pill {43    position: absolute; top: 520px; left: 92px;44    height: 96px; width: 520px; border-radius: 24px;45    background: #424242; color: #FFFFFF;46    display: flex; align-items: center; gap: 24px; padding: 0 28px;47  }48  .pill-text { font-size: 38px; }49  /* Bottom bar */50  .bottom-toolbar {51    position: absolute; left: 24px; right: 24px; bottom: 150px; height: 84px;52    display: flex; align-items: center; justify-content: space-between; color: #B0B0B0;53  }54  .bottom-left { display: flex; align-items: center; gap: 36px; }55  .edited { font-size: 32px; color: #B0B0B0; }56  .menu-dots { width: 48px; height: 48px; }57  /* Home indicator */58  .home-indicator {59    position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);60    width: 360px; height: 12px; border-radius: 8px; background: #E5E5E5; opacity: 0.9;61  }62</style>63</head>64<body>65<div id="render-target">66 67  <!-- Status bar -->68  <div class="status-bar">69    <div class="status-left">1:43</div>70    <div class="status-right">71      <!-- Wi-Fi -->72      <svg class="icon" viewBox="0 0 24 24">73        <path d="M2 8c5-5 15-5 20 0"></path>74        <path d="M5 12c3-3 11-3 14 0"></path>75        <path d="M8 16c2-2 6-2 8 0"></path>76        <circle cx="12" cy="19" r="1.6" fill="#FFFFFF" stroke="none"></circle>77      </svg>78      <!-- Battery -->79      <svg class="icon" viewBox="0 0 24 24">80        <rect x="2" y="7" width="18" height="10" rx="2"></rect>81        <rect x="20" y="10" width="2" height="4" rx="1" class="icon-fill"></rect>82        <rect x="4" y="9" width="14" height="6" rx="1" class="icon-fill"></rect>83      </svg>84      <div style="font-size:28px;color:#FFFFFF;">100%</div>85    </div>86  </div>87 88  <!-- Top actions -->89  <div class="top-actions">90    <!-- Back arrow -->91    <svg class="icon" viewBox="0 0 24 24">92      <path d="M15 5l-7 7 7 7"></path>93      <line x1="8" y1="12" x2="22" y2="12"></line>94    </svg>95 96    <div class="action-right">97      <!-- Pin -->98      <svg class="icon" viewBox="0 0 24 24">99        <path d="M8 3l8 8-3 3 3 7-7-3 3-3-8-8z"></path>100      </svg>101      <!-- Bell with lock (simplified) -->102      <svg class="icon" viewBox="0 0 24 24">103        <path d="M12 3c-3 0-5 2-5 5v3c0 2-1 3-2 4h14c-1-1-2-2-2-4V8c0-3-2-5-5-5z"></path>104        <path d="M9 19c1.2 1 3.8 1 5 0"></path>105        <rect x="16.5" y="3" width="5" height="4" rx="1"></rect>106      </svg>107      <!-- Download/archive -->108      <svg class="icon" viewBox="0 0 24 24">109        <rect x="4" y="4" width="16" height="16" rx="2"></rect>110        <path d="M12 7v8"></path>111        <path d="M9 12l3 3 3-3"></path>112      </svg>113    </div>114  </div>115 116  <!-- Content -->117  <div class="title">Title</div>118  <div class="subtitle">Meet and Greet</div>119 120  <!-- Reminder pill -->121  <div class="pill">122    <svg class="icon" viewBox="0 0 24 24" style="width:48px;height:48px;">123      <circle cx="12" cy="12" r="7"></circle>124      <path d="M12 8v5l3 2"></path>125      <path d="M5 6l2-2"></path>126      <path d="M17 4l2 2"></path>127    </svg>128    <div class="pill-text">Aug 10, 8:00 AM</div>129  </div>130 131  <!-- Big empty body area is just background -->132 133  <!-- Bottom toolbar -->134  <div class="bottom-toolbar">135    <div class="bottom-left">136      <!-- Plus in square -->137      <svg class="icon" viewBox="0 0 24 24">138        <rect x="3" y="3" width="18" height="18" rx="2"></rect>139        <path d="M12 7v10"></path>140        <path d="M7 12h10"></path>141      </svg>142      <!-- Palette -->143      <svg class="icon" viewBox="0 0 24 24">144        <path d="M12 3a9 9 0 0 0 0 18c3 0 3-2 2.5-3.5S16 15 18 15s3-3-2-6a9 9 0 0 0-4-6z"></path>145        <circle cx="6.5" cy="11" r="1.5"></circle>146        <circle cx="9.5" cy="8" r="1.5"></circle>147        <circle cx="14.5" cy="8.5" r="1.5"></circle>148      </svg>149    </div>150    <div class="edited">Edited 11:49 AM</div>151    <!-- Vertical dots -->152    <svg class="menu-dots" viewBox="0 0 24 24">153      <circle cx="12" cy="5" r="2.2" fill="#B0B0B0"></circle>154      <circle cx="12" cy="12" r="2.2" fill="#B0B0B0"></circle>155      <circle cx="12" cy="19" r="2.2" fill="#B0B0B0"></circle>156    </svg>157  </div>158 159  <div class="home-indicator"></div>160</div>161</body>162</html>