GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #4f3e24; /* dark brown base */13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 96px;22    background: rgba(79, 62, 36, 0.95);23    color: #f4e9d2;24    display: flex;25    align-items: center;26    padding: 0 32px;27    box-sizing: border-box;28    font-size: 36px;29    letter-spacing: 0.5px;30  }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 24px;36    color: #f4e9d2;37  }38  .status-icon svg { height: 36px; width: 36px; fill: #f4e9d2; }39 40  /* App bar */41  .app-bar {42    position: absolute;43    top: 96px;44    left: 0;45    width: 1080px;46    height: 160px;47    background: rgba(79, 62, 36, 0.98);48    display: flex;49    align-items: center;50    padding: 0 32px;51    box-sizing: border-box;52  }53  .app-left {54    display: flex;55    align-items: center;56    gap: 26px;57    color: #d6c7a4;58  }59  .app-title {60    font-size: 58px;61    font-weight: 700;62    color: #d6c7a4;63  }64  .app-actions {65    margin-left: auto;66    display: flex;67    align-items: center;68    gap: 40px;69  }70  .app-actions svg { width: 56px; height: 56px; fill: #d6c7a4; }71 72  /* Content text */73  .note-content {74    position: absolute;75    top: 320px;76    left: 40px;77    right: 40px;78    color: #eadfc0;79    font-size: 56px;80  }81 82  /* Dim overlay shown behind modal */83  .scrim {84    position: absolute;85    inset: 0;86    background: rgba(0, 0, 0, 0.35);87    z-index: 2;88  }89 90  /* Modal card */91  .modal {92    position: absolute;93    left: 60px;94    top: 940px;95    width: 960px;96    background: #ffffff;97    border-radius: 18px;98    box-shadow: 0 20px 60px rgba(0,0,0,0.35);99    z-index: 10;100    padding: 56px 56px 48px;101    box-sizing: border-box;102  }103  .modal h1 {104    margin: 0 0 36px;105    font-size: 64px;106    font-weight: 800;107    color: #1c1c1c;108  }109  .modal p {110    margin: 0 0 56px;111    font-size: 38px;112    line-height: 1.5;113    color: #333;114  }115  .modal .actions {116    display: flex;117    flex-direction: column;118    align-items: flex-end;119    gap: 44px;120  }121  .link-btn {122    font-size: 42px;123    font-weight: 800;124    color: #5b85ff;125    text-transform: uppercase;126    letter-spacing: 1px;127  }128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Status Bar -->134  <div class="status-bar">135    <div>3:21</div>136    <div class="status-right">137      <div class="status-icon">138        <!-- WiFi icon -->139        <svg viewBox="0 0 24 24">140          <path d="M12 18.5c-.9 0-1.7.7-1.7 1.5s.8 1.5 1.7 1.5 1.7-.7 1.7-1.5-.8-1.5-1.7-1.5zm8.8-7.5C17.7 7 14.1 6 12 6s-5.7 1-8.8 5l2 2c2.5-3.1 5-4 6.8-4s4.3.9 6.8 4l2-2zm-4.7 4.3c-2.1-2.4-4.3-3.3-4.1-3.3-.2 0-2 .7-4.1 3.3l2 2c1.5-1.8 2.2-2.1 2.2-2.1s.7.3 2.2 2.1l1.8-2z"/>141        </svg>142      </div>143      <div class="status-icon">144        <!-- Battery icon -->145        <svg viewBox="0 0 24 24">146          <path d="M18 7h2v2h1v6h-1v2h-2V7zM3 7h13v10H3V7z"/>147        </svg>148      </div>149    </div>150  </div>151 152  <!-- App Bar -->153  <div class="app-bar">154    <div class="app-left">155      <!-- Back arrow -->156      <svg viewBox="0 0 24 24">157        <path d="M15 19l-7-7 7-7v4H24v6H15v4z"/>158      </svg>159      <div class="app-title">Title</div>160    </div>161    <div class="app-actions">162      <!-- Alarm/clock -->163      <svg viewBox="0 0 24 24">164        <path d="M6 3L2 6l2 2 4-3-2-2zm12 0l-2 2 4 3 2-2-4-3zM12 5a9 9 0 100 18 9 9 0 000-18zm1 5h-2v6h6v-2h-4V10z"/>165      </svg>166      <!-- Person plus -->167      <svg viewBox="0 0 24 24">168        <path d="M12 11a4 4 0 100-8 4 4 0 000 8zm-8 9c0-4 5-6 8-6s8 2 8 6v2H4v-2zm16-8h-2V10h-2V8h2V6h2v2h2v2h-2v2z"/>169      </svg>170      <!-- Kebab menu -->171      <svg viewBox="0 0 24 24">172        <circle cx="12" cy="4" r="2"></circle>173        <circle cx="12" cy="12" r="2"></circle>174        <circle cx="12" cy="20" r="2"></circle>175      </svg>176    </div>177  </div>178 179  <!-- Note content on background -->180  <div class="note-content">Modeling</div>181 182  <!-- Dim overlay -->183  <div class="scrim"></div>184 185  <!-- Modal card -->186  <div class="modal">187    <h1>Did you know ?</h1>188    <p>189      Now you can privately share your notes and collaborate with your friends,190      coworkers, family and more.191    </p>192    <div class="actions">193      <div class="link-btn">Share Privately</div>194      <div class="link-btn">Export via other apps</div>195    </div>196  </div>197 198</div>199</body>200</html>