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>Daily routine Note</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; position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 120px; background: #EFEFEF; color: #333;18    display: flex; align-items: center; padding: 0 40px;19    box-sizing: border-box;20  }21  .status-left { display: flex; align-items: center; gap: 20px; font-size: 40px; color: #444; }22  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }23 24  /* App bar */25  .app-bar {26    position: absolute; top: 120px; left: 0; right: 0;27    height: 180px; background: #F5F5F5; display: flex; align-items: center;28    padding: 0 30px; box-sizing: border-box; color: #222;29  }30  .nav-left { width: 120px; display: flex; align-items: center; justify-content: center; }31  .title {32    font-size: 64px; font-weight: 500; color: #333; flex: 1; padding-left: 10px;33  }34  .actions { display: flex; align-items: center; gap: 26px; }35  .action-chip {36    width: 96px; height: 96px; border-radius: 48px; display: flex; align-items: center; justify-content: center;37  }38  .chip-pink { background: #F3D7EA; }39  .chip-gray { background: #EAEAEA; }40  .kebab { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }41 42  /* Content */43  .content {44    position: absolute; top: 300px; left: 0; right: 0; bottom: 0;45    padding: 40px 60px; box-sizing: border-box;46  }47  .note-line {48    font-size: 48px; color: #111; line-height: 1.8;49  }50 51  /* Floating action button */52  .fab {53    position: absolute; right: 70px; bottom: 210px;54    width: 150px; height: 150px; border-radius: 32px;55    background: #D8E89E; box-shadow: 0 14px 24px rgba(0,0,0,0.18);56    display: flex; align-items: center; justify-content: center;57  }58 59  /* Home indicator */60  .home-indicator {61    position: absolute; bottom: 64px; left: 50%;62    width: 720px; height: 14px; transform: translateX(-50%);63    background: #7A7A7A; border-radius: 10px;64  }65 66  .icon { display: block; }67  .muted { stroke: #616161; fill: none; }68</style>69</head>70<body>71<div id="render-target">72 73  <!-- Status bar -->74  <div class="status-bar">75    <div class="status-left">76      <span class="time">4:01</span>77      <!-- Small gear-like icon -->78      <svg class="icon" width="38" height="38" viewBox="0 0 24 24">79        <circle cx="12" cy="12" r="3" fill="#616161"></circle>80        <path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.5 4.5l2.1 2.1M17.4 17.4l2.1 2.1M19.5 4.5l-2.1 2.1M4.5 19.5l2.1-2.1"81              stroke="#616161" stroke-width="1.6" fill="none" stroke-linecap="round"></path>82      </svg>83    </div>84    <div class="status-right">85      <!-- WiFi -->86      <svg class="icon" width="54" height="54" viewBox="0 0 24 24">87        <path d="M2 8c5-5 15-5 20 0" class="muted" stroke-width="1.8" stroke-linecap="round"></path>88        <path d="M5 11c3-3 11-3 14 0" class="muted" stroke-width="1.8" stroke-linecap="round"></path>89        <path d="M8 14c2-2 6-2 8 0" class="muted" stroke-width="1.8" stroke-linecap="round"></path>90        <circle cx="12" cy="17.5" r="1.6" fill="#616161"></circle>91      </svg>92      <!-- Battery -->93      <svg class="icon" width="64" height="64" viewBox="0 0 24 24">94        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#616161" stroke-width="1.8" fill="none"></rect>95        <rect x="21" y="9" width="2" height="6" fill="#616161"></rect>96        <rect x="4" y="8" width="12" height="8" fill="#616161"></rect>97      </svg>98    </div>99  </div>100 101  <!-- App bar -->102  <div class="app-bar">103    <div class="nav-left">104      <!-- Back arrow -->105      <svg class="icon" width="60" height="60" viewBox="0 0 24 24">106        <path d="M15 6L9 12l6 6" stroke="#616161" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>107      </svg>108    </div>109    <div class="title">Daily routine</div>110    <div class="actions">111      <div class="action-chip chip-pink">112        <!-- Person add -->113        <svg class="icon" width="56" height="56" viewBox="0 0 24 24">114          <circle cx="10" cy="9" r="4" stroke="#5F5F5F" stroke-width="1.8" fill="none"></circle>115          <path d="M4 19c0-3.5 4-5 6-5s6 1.5 6 5" stroke="#5F5F5F" stroke-width="1.8" fill="none" stroke-linecap="round"></path>116          <path d="M18 8v4M16 10h4" stroke="#5F5F5F" stroke-width="1.8" stroke-linecap="round"></path>117        </svg>118      </div>119      <div class="action-chip chip-gray">120        <!-- Chat bubble -->121        <svg class="icon" width="56" height="56" viewBox="0 0 24 24">122          <path d="M4 5h16v10H8l-4 4V5z" stroke="#5F5F5F" stroke-width="1.8" fill="none" stroke-linejoin="round"></path>123        </svg>124      </div>125      <div class="kebab">126        <!-- More vertical -->127        <svg class="icon" width="40" height="40" viewBox="0 0 24 24">128          <circle cx="12" cy="5" r="2" fill="#5F5F5F"></circle>129          <circle cx="12" cy="12" r="2" fill="#5F5F5F"></circle>130          <circle cx="12" cy="19" r="2" fill="#5F5F5F"></circle>131        </svg>132      </div>133    </div>134  </div>135 136  <!-- Content -->137  <div class="content">138    <div class="note-line">7:00 AM- wake up</div>139    <div class="note-line">8:00 AM- work</div>140    <div class="note-line">12:00 PM- lunch</div>141    <div class="note-line">5:00 PM- finish work</div>142    <div class="note-line">6:00 PM- exercise</div>143    <div class="note-line">7:00 PM- dinner</div>144    <div class="note-line">8:00 PM- free time</div>145    <div class="note-line">10:00PM- bedtime</div>146  </div>147 148  <!-- Floating action button -->149  <div class="fab">150    <svg class="icon" width="84" height="84" viewBox="0 0 24 24">151      <path d="M4 17l12-12 3 3-12 12H4z" stroke="#1A1A1A" stroke-width="2" fill="none" stroke-linejoin="round"></path>152      <path d="M14.5 4.5l5 5" stroke="#1A1A1A" stroke-width="2" stroke-linecap="round"></path>153    </svg>154  </div>155 156  <!-- Home indicator -->157  <div class="home-indicator"></div>158 159</div>160</body>161</html>