GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>DeftPDF Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff; color: #222;11  }12  /* Status bar */13  .status-bar {14    height: 96px; padding: 0 36px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;15    font-size: 36px; color: #333;16  }17  .status-icons { display: flex; gap: 28px; align-items: center; }18  .icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }19  /* App header */20  .header {21    padding: 10px 36px 24px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;22  }23  .app-left { display: flex; align-items: center; gap: 22px; }24  .app-badge {25    width: 76px; height: 76px; background: #5B58F5; border-radius: 16px; color: #fff; font-weight: 700; font-size: 44px;26    display: flex; align-items: center; justify-content: center;27  }28  .app-title { font-size: 46px; font-weight: 700; color: #2c2c2c; }29  .header-actions { display: flex; gap: 34px; }30  .action-circle { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #7f6dbd00; display: flex; align-items: center; justify-content: center; }31  /* Search bar */32  .search-wrap { padding: 0 36px 18px; }33  .search-bar {34    height: 120px; border-radius: 28px; border: 2px solid #ececf3; background: #faf9ff;35    display: flex; align-items: center; padding: 0 30px; box-sizing: border-box;36    box-shadow: inset 0 0 0 0 rgba(0,0,0,0.03);37  }38  .search-input { flex: 1; margin: 0 24px; color: #777; font-size: 40px; }39  /* File cards */40  .list { padding: 12px 28px; display: flex; flex-direction: column; gap: 28px; }41  .card {42    background: #fff; border-radius: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.06);43    border: 1px solid #eee; padding: 26px 24px; display: flex; align-items: center; gap: 32px;44  }45  .thumb {46    width: 132px; height: 132px; border-radius: 18px; background: #f3f3f7; border: 1px solid #e0e0ea;47    display: flex; align-items: center; justify-content: center; position: relative;48  }49  .pdf-badge {50    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);51    background: #ff5a58; color: #fff; font-weight: 700; font-size: 32px; padding: 8px 18px; border-radius: 14px;52    border: 1px solid rgba(0,0,0,0.05);53  }54  .file-info { flex: 1; }55  .file-name { font-size: 42px; color: #1f1f1f; font-weight: 700; margin-bottom: 10px; }56  .meta { color: #777; font-size: 34px; }57  .dot { margin: 0 12px; }58  .menu {59    width: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-right: 6px;60  }61  .menu .m-dot { width: 10px; height: 10px; background: #333; border-radius: 50%; }62  /* Floating Action Button */63  .fab {64    position: absolute; right: 60px; bottom: 270px; width: 150px; height: 150px; border-radius: 50%;65    background: #6a43ff; display: flex; align-items: center; justify-content: center;66    box-shadow: 0 10px 24px rgba(106,67,255,0.4);67  }68  .fab svg { width: 72px; height: 72px; }69  /* Bottom navigation */70  .bottom-nav {71    position: absolute; bottom: 0; left: 0; right: 0; height: 220px; border-top: 1px solid #ececf3; background: #fff;72    display: flex; align-items: center; justify-content: space-around;73  }74  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; color: #9494a6; }75  .nav-item .label { font-size: 34px; }76  .nav-item.active { color: #6a43ff; }77  .nav-icon { width: 66px; height: 66px; }78  /* Helper */79  .spacer { height: 24px; }80</style>81</head>82<body>83<div id="render-target">84 85  <!-- Status Bar -->86  <div class="status-bar">87    <div style="display:flex; align-items:center; gap:28px;">88      <div style="font-weight:600;">2:31</div>89      <!-- simple signal icon -->90      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="12" width="3" height="8" fill="#555"/><rect x="7" y="10" width="3" height="10" fill="#555"/><rect x="12" y="8" width="3" height="12" fill="#555"/><rect x="17" y="6" width="3" height="14" fill="#555"/></svg>91      <!-- upload arrow -->92      <svg class="icon" viewBox="0 0 24 24"><path d="M12 3l5 5h-3v7h-4V8H7l5-5zM5 20h14v2H5z" fill="#555"/></svg>93      <!-- lock -->94      <svg class="icon" viewBox="0 0 24 24"><path d="M12 2a5 5 0 00-5 5v3H5v12h14V10h-2V7a5 5 0 00-5-5zm-3 8V7a3 3 0 016 0v3H9z" fill="#555"/></svg>95      <!-- dot -->96      <div class="icon" style="font-size:36px; color:#555;">•</div>97    </div>98    <div class="status-icons">99      <!-- wifi -->100      <svg class="icon" viewBox="0 0 24 24"><path d="M12 18a2 2 0 110 4 2 2 0 010-4zm-7-5a12 12 0 0114 0l-1.5 1.5a9.5 9.5 0 00-11 0L5 13zM2 9a16 16 0 0120 0l-1.6 1.6a13.5 13.5 0 00-16.8 0L2 9z" fill="#555"/></svg>101      <!-- battery -->102      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" fill="#555"/><rect x="20" y="10" width="2" height="4" fill="#555"/></svg>103    </div>104  </div>105 106  <!-- App Header -->107  <div class="header">108    <div class="app-left">109      <div class="app-badge">D</div>110      <div class="app-title">DeftPDF</div>111    </div>112    <div class="header-actions">113      <!-- globe -->114      <div class="action-circle">115        <svg width="44" height="44" viewBox="0 0 24 24">116          <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c1.8 0 3.4.6 4.7 1.6H7.3A7.9 7.9 0 0112 4zm-8 8c0-.7.1-1.4.3-2h15.4c.2.6.3 1.3.3 2s-.1 1.4-.3 2H4.3a8 8 0 01-.3-2zm2.6 5.4h10.8A7.9 7.9 0 0112 20c-1.8 0-3.4-.6-4.7-1.6z" fill="#6a43ff"/>117        </svg>118      </div>119      <!-- bell -->120      <div class="action-circle">121        <svg width="44" height="44" viewBox="0 0 24 24">122          <path d="M12 22a2.5 2.5 0 002.5-2.5h-5A2.5 2.5 0 0012 22zm6-6V11a6 6 0 00-12 0v5l-2 2v1h16v-1l-2-2z" fill="#6a43ff"/>123        </svg>124      </div>125    </div>126  </div>127 128  <!-- Search -->129  <div class="search-wrap">130    <div class="search-bar">131      <svg width="54" height="54" viewBox="0 0 24 24">132        <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8L20 21l1-1-5.5-5zM10 15a5 5 0 110-10 5 5 0 010 10z" fill="#7d77a8"/>133      </svg>134      <div class="search-input">Search documents</div>135      <svg width="54" height="54" viewBox="0 0 24 24">136        <path d="M3 5h18v2H3V5zm4 6h10v2H7v-2zm3 6h4v2h-4v-2z" fill="#7d77a8"/>137      </svg>138    </div>139  </div>140 141  <!-- Files List -->142  <div class="list">143    <!-- Card 1 -->144    <div class="card">145      <div class="thumb">146        <!-- simple document pictogram -->147        <svg width="72" height="72" viewBox="0 0 24 24">148          <path d="M6 2h9l3 3v15a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2z" fill="#d7d7e6"/>149          <path d="M15 2v5h5" fill="#bdbdd3"/>150        </svg>151        <div class="pdf-badge">PDF</div>152      </div>153      <div class="file-info">154        <div class="file-name">Edit19-07-...285619.pdf</div>155        <div class="meta">19.07.2023 13:28 <span class="dot">•</span> 156.2 kB</div>156      </div>157      <div class="menu" aria-label="menu">158        <div class="m-dot"></div>159        <div class="m-dot"></div>160        <div class="m-dot"></div>161      </div>162    </div>163 164    <!-- Card 2 -->165    <div class="card">166      <div class="thumb">167        <div style="position:absolute; top:16px; font-size:22px; color:#a0a0b6">[File preview]</div>168        <div class="pdf-badge">PDF</div>169      </div>170      <div class="file-info">171        <div class="file-name">test.pdf</div>172        <div class="meta">19.07.2023 12:11 <span class="dot">•</span> 107.8 kB</div>173      </div>174      <div class="menu" aria-label="menu">175        <div class="m-dot"></div>176        <div class="m-dot"></div>177        <div class="m-dot"></div>178      </div>179    </div>180  </div>181 182  <!-- Floating Action Button -->183  <div class="fab" aria-label="Add">184    <svg viewBox="0 0 24 24">185      <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z" fill="#fff"/>186    </svg>187  </div>188 189  <!-- Bottom Navigation -->190  <div class="bottom-nav">191    <div class="nav-item active">192      <svg class="nav-icon" viewBox="0 0 24 24">193        <path d="M4 4h9v8H4V4zm0 10h16v6H4v-6zm11-10h5v8h-5V4z" fill="currentColor"/>194      </svg>195      <div class="label">Files</div>196    </div>197    <div class="nav-item">198      <svg class="nav-icon" viewBox="0 0 24 24">199        <path d="M14 2l2 2-3 3-2-2 3-3zM3 14l8-8 2 2-8 8H3v-2zM7 18h10v2H7v-2zm7-9l2 2 5-5-2-2-5 5z" fill="currentColor"/>200      </svg>201      <div class="label">Tools</div>202    </div>203    <div class="nav-item">204      <svg class="nav-icon" viewBox="0 0 24 24">205        <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 3-9 7h18c0-4-4-7-9-7z" fill="currentColor"/>206      </svg>207      <div class="label">Account</div>208    </div>209  </div>210 211</div>212</body>213</html>