GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Drive File Options Sheet</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #E9E6EF; /* light lavender sheet */14    border-radius: 60px;15    box-shadow: 0 30px 80px rgba(0,0,0,0.25);16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 120px;25    padding: 0 36px;26    box-sizing: border-box;27    color: #2F2F2F;28    font-weight: 600;29    font-size: 42px;30    display: flex;31    align-items: center;32    justify-content: space-between;33  }34  .status-left { letter-spacing: 1px; }35  .status-center {36    display: flex;37    gap: 26px;38    align-items: center;39    opacity: 0.8;40  }41  .status-dot, .status-square {42    background: #4A4A4A;43    border-radius: 50%;44  }45  .status-dot { width: 16px; height: 16px; }46  .status-square { width: 34px; height: 34px; border-radius: 8px; }47  .status-right {48    display: flex;49    align-items: center;50    gap: 24px;51  }52  .status-icon {53    width: 40px; height: 40px; border-radius: 10px; background: #4A4A4A;54  }55 56  /* Header (file name) */57  .sheet-header {58    position: absolute;59    top: 140px;60    left: 48px;61    right: 48px;62    display: flex;63    align-items: center;64    gap: 28px;65  }66  .pdf-badge {67    width: 72px; height: 72px;68    background: #E0E0E0;69    border: 1px solid #BDBDBD;70    border-radius: 14px;71    display: flex; align-items: center; justify-content: center;72    position: relative;73  }74  .pdf-badge::before {75    content: "PDF";76    position: absolute;77    color: #D32F2F;78    font-weight: 700;79    font-size: 28px;80  }81  .file-title {82    font-size: 42px;83    color: #2F2F2F;84    font-weight: 600;85  }86 87  /* List */88  .list {89    position: absolute;90    top: 240px;91    left: 0;92    width: 100%;93  }94  .row {95    display: flex;96    align-items: center;97    padding: 28px 48px;98    gap: 36px;99    box-sizing: border-box;100  }101  .row .icon {102    width: 64px; height: 64px;103    display: inline-flex;104    align-items: center;105    justify-content: center;106  }107  .row svg { width: 64px; height: 64px; stroke: #6D6D78; fill: none; stroke-width: 4; }108  .row .label {109    font-size: 40px;110    color: #2F2F2F;111    line-height: 1.2;112  }113  .group-divider {114    height: 2px;115    background: #CFCBD8;116    margin: 6px 48px 6px 48px;117  }118 119  /* Bottom gesture bar */120  .gesture {121    position: absolute;122    bottom: 48px;123    left: 50%;124    transform: translateX(-50%);125    width: 300px; height: 14px;126    background: #7E7E86;127    border-radius: 10px;128    opacity: 0.9;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <!-- Status Bar -->136  <div class="status-bar">137    <div class="status-left">2:53</div>138    <div class="status-center">139      <div class="status-square"></div>140      <div class="status-square"></div>141      <div class="status-dot"></div>142      <div class="status-dot" style="opacity:0.6;"></div>143    </div>144    <div class="status-right">145      <div class="status-icon" style="width:36px;height:36px;border-radius:9px;"></div>146      <div class="status-icon"></div>147    </div>148  </div>149 150  <!-- Header -->151  <div class="sheet-header">152    <div class="pdf-badge" aria-label="PDF icon"></div>153    <div class="file-title">YMCA Org..pdf</div>154  </div>155 156  <!-- List of actions -->157  <div class="list">158    <div class="row">159      <div class="icon">160        <!-- Star outline -->161        <svg viewBox="0 0 24 24">162          <polygon points="12,3 9.5,9 3,9.5 8,13.5 6.5,20 12,16.5 17.5,20 16,13.5 21,9.5 14.5,9" />163        </svg>164      </div>165      <div class="label">Add to Starred</div>166    </div>167 168    <div class="row">169      <div class="icon">170        <!-- Check circle -->171        <svg viewBox="0 0 24 24">172          <circle cx="12" cy="12" r="9" />173          <polyline points="7,12 10,15 17,8" />174        </svg>175      </div>176      <div class="label">Make available offline</div>177    </div>178 179    <div class="group-divider"></div>180 181    <div class="row">182      <div class="icon">183        <!-- Link -->184        <svg viewBox="0 0 24 24">185          <path d="M9 12c0-2 2-4 4-4h3" />186          <path d="M6 12c0 2 2 4 4 4h3" />187          <path d="M10 8l4 8" />188        </svg>189      </div>190      <div class="label">Copy link</div>191    </div>192 193    <div class="row">194      <div class="icon">195        <!-- Copy -->196        <svg viewBox="0 0 24 24">197          <rect x="8" y="8" width="9" height="9" rx="2" />198          <rect x="5" y="5" width="9" height="9" rx="2" />199        </svg>200      </div>201      <div class="label">Make a copy</div>202    </div>203 204    <div class="row">205      <div class="icon">206        <!-- S