GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Reminders Mock</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target{8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#0b0b0c;11  }12 13  /* Status bar */14  .status-bar{15    position:absolute; left:0; top:0; width:100%; height:120px;16    color:#eaeaea; font-size:34px; letter-spacing:1px;17    display:flex; align-items:center; justify-content:flex-start;18    padding:0 40px;19  }20 21  /* Floating sheet */22  .sheet{23    position:absolute; left:0; right:0; top:90px; bottom:0;24    background:#151516;25    border-top-left-radius:48px; border-top-right-radius:48px;26    box-shadow: 0 -10px 30px rgba(0,0,0,0.6) inset;27  }28 29  .header{30    display:flex; align-items:center; justify-content:space-between;31    padding:56px 44px 20px 44px;32  }33  .title{34    color:#ff2d55; font-size:94px; font-weight:700; letter-spacing:1px;35  }36  .header-right{37    display:flex; align-items:center; gap:16px;38  }39  .badge{40    color:#ff2d55; font-size:64px; font-weight:800;41  }42 43  /* List container */44  .list{45    padding:10px 24px 0 24px;46  }47  .item{48    background:#17181a;49    border-radius:22px;50    padding:34px 26px;51    margin:18px 8px;52    border:1px solid #222428;53  }54  .row{55    display:flex; align-items:center; gap:24px;56  }57  .checkbox{58    width:54px; height:54px; border-radius:50%;59    border:3px solid #7a7c81; box-sizing:border-box;60    flex:0 0 54px;61  }62  .item-title{63    color:#f3f3f3; font-size:52px; font-weight:700;64    flex:1;65  }66  .info-btn{67    width:62px; height:62px; border-radius:50%;68    border:2px solid #3a3c42; display:flex; align-items:center; justify-content:center;69    color:#c9cbd1; font-weight:700; font-size:34px;70  }71  .meta{72    margin-left:78px; margin-top:12px; color:#b7bcc5; font-size:34px;73    display:flex; align-items:center; gap:12px;74  }75  .repeat{76    margin-left:78px; margin-top:10px; color:#a8adb6; font-size:34px;77    display:flex; align-items:center; gap:10px;78  }79  .subtask{80    display:flex; align-items:center; gap:24px; margin-left:78px; margin-top:26px;81  }82  .subtask .circle{83    width:54px; height:54px; border-radius:50%;84    border:3px solid #7a7c81;85  }86  .subtask span{ color:#eaeaea; font-size:44px; }87 88  .plus-inline{89    color:#9da3ad; font-size:90px; padding:20px 30px; user-select:none;90  }91 92  /* Bottom toolbar */93  .toolbar{94    position:absolute; bottom:18px; left:0; right:0; height:140px;95    display:flex; align-items:center; justify-content:space-between;96    padding:0 52px;97  }98  .tool{99    width:100px; height:100px; border-radius:50%;100    border:3px solid #3a3c42; display:flex; align-items:center; justify-content:center;101    color:#d7d9de;102  }103  .tool.small{104    width:96px; height:96px;105  }106 107  /* Simple icons via SVG */108  .icon{ display:inline-block; }109  .clock svg{ width:72px; height:72px; }110  .clock path{ stroke:#d7d9de; stroke-width:6; fill:none; }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- top status area (simplified) -->117  <div class="status-bar">118    <div style="width:120px;height:46px;background:#eaeaea;border-radius:8px;opacity:.12"></div>119  </div>120 121  <!-- main floating sheet -->122  <div class="sheet">123 124    <div class="header">125      <div class="title">Reminders</div>126      <div class="header-right">127        <div class="clock icon">128          <svg viewBox="0 0 24 24">129            <circle cx="12" cy="12" r="9" stroke="#9aa0a6" stroke-width="2" fill="none"/>130            <path d="M12 6 v6 l4 2" stroke="#9aa0a6" stroke-width="2" fill="none" stroke-linecap="round"/>131          </svg>132        </div>133        <div class="badge">2</div>134      </div>135    </div>136 137    <div class="list">138      <!-- First item -->139      <div class="item">140        <div class="row">141          <div class="checkbox"></div>142          <div class="item-title">Ashu's birthday</div>143          <div class="info-btn">i</div>144        </div>145        <div class="meta">146          <div class="clock icon">147            <svg viewBox="0 0 24 24">148              <circle cx="12" cy="12" r="9" />149              <path d="M12 6 v6 l4 2" />150            </svg>151          </div>152          <span>Tomorrow, Thu, 08/10/23, 9:00 PM</span>153        </div>154        <div class="repeat">155          <svg width="30" height="30" viewBox="0 0 24 24">156            <path d="M7 7h10v4l3-3-3-3v2H6a5 5 0 0 0 0 10h2" stroke="#9aa0a6" stroke-width="2" fill="none" stroke-linecap="round"/>157          </svg>158          <span>every year</span>159        </div>160        <div class="subtask">161          <div class="circle"></div>162          <span>Birthday celebration</span>163        </div>164      </div>165 166      <!-- Second item -->167      <div class="item">168        <div class="row">169          <div class="checkbox"></div>170          <div class="item-title">Di marriage</div>171          <div class="info-btn">i</div>172        </div>173        <div class="meta">174          <div class="clock icon">175            <svg viewBox="0 0 24 24">176              <circle cx="12" cy="12" r="9" />177              <path d="M12 6 v6 l4 2" />178            </svg>179          </div>180          <span>Monday, 08/14/23, 11:55 AM</span>181        </div>182      </div>183 184      <div class="plus-inline">+</div>185    </div>186 187    <!-- bottom toolbar -->188    <div class="toolbar">189      <div class="tool">190        <svg width="54" height="54" viewBox="0 0 24 24">191          <path d="M4 6h16M4 12h12M4 18h10" stroke="#d7d9de" stroke-width="2" fill="none" stroke-linecap="round"/>192        </svg>193      </div>194      <div class="tool">195        <svg width="54" height="54" viewBox="0 0 24 24">196          <path d="M4 5h16v14H4z" stroke="#d7d9de" stroke-width="2" fill="none"/>197          <path d="M8 9h8M8 13h6" stroke="#d7d9de" stroke-width="2" stroke-linecap="round"/>198        </svg>199      </div>200      <div class="tool small">201        <svg width="44" height="44" viewBox="0 0 24 24">202          <path d="M4 20h16" stroke="#d7d9de" stroke-width="2"/>203          <path d="M6 13l7-7 4 4-7 7-5 1z" stroke="#d7d9de" stroke-width="2" fill="none" stroke-linejoin="round"/>204        </svg>205      </div>206    </div>207 208  </div>209</div>210</body>211</html>