HSE-Digital-Toolkit/env-aspects.html at main · UmairPashaa/HSE-Digital-Toolkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Environmental Aspect ID | Aramco Appendix 4</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <style>
        :root { --aramco-green: #00843D; }
        body { font-family: 'Roboto', sans-serif; background: #555; margin: 0; padding: 10px; padding-bottom: 80px; }
        .document-page { background: #fff; width: 297mm; min-height: 210mm; margin: 0 auto; padding: 10mm; border: 2px solid #000; box-sizing: border-box; }
        .header-table { width: 100%; border-collapse: collapse; border: 2px solid #000; }
        .header-table td { border: 1px solid #000; padding: 10px; text-align: center; }
        .section-bar { background: var(--aramco-green); color: white; padding: 8px; font-weight: bold; text-transform: uppercase; font-size: 13px; border: 2px solid #000; border-top: none; }
        table.env-table { width: 100%; border-collapse: collapse; border: 2px solid #000; border-top: none; }
        table.env-table th { border: 1px solid #000; padding: 8px; font-size: 11px; background: #f2f2f2; }
        table.env-table td { border: 1px solid #000; padding: 5px; }
        textarea { width: 100%; border: none; outline: none; font-size: 11px; resize: none; min-height: 40px; }
        .controls { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(30,30,30,0.9); padding: 10px; display: flex; justify-content: center; gap: 8px; z-index: 2000; }
        .btn { padding: 10px 15px; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; font-size: 12px; }
        @media print { @page { size: landscape; } .no-print { display: none !important; } .document-page { border: 2px solid #000; width: 100%; } body { background: white; padding: 0; } }
    </style>
</head>
<body>
    <div class="controls no-print">
        <button class="btn" style="background:var(--aramco-green)" onclick="window.print()">📄 PRINT (LANDSCAPE)</button>
        <button class="btn" style="background:#1976d2" onclick="saveEnv()">💾 SAVE</button>
        <button class="btn" style="background:#d32f2f" onclick="addEnvRow()">➕ ADD ACTIVITY</button>
        <a href="index.html" class="btn" style="background:#444; text-decoration:none;">⬅️ MENU</a>
    </div>

    <div class="document-page">
        <table class="header-table">
            <tr>
                <td width="20%"><img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/44/Saudi_Aramco_Logo.svg/1200px-Saudi_Aramco_Logo.svg.png" style="width:60px;"></td>
                <td style="background:#f2f2f2;"><strong>ENVIRONMENTAL ASPECT & IMPACT IDENTIFICATION</strong><br><small>Saudi Aramco SSMS Appendix 4</small></td>
                <td width="20%"><b>APPENDIX 4</b><br>Rev: 2026</td>
            </tr>
        </table>

        <div class="section-bar">Aspect/Impact Register</div>
        <table class="env-table">
            <thead>
                <tr>
                    <th width="20%">Site Activity</th>
                    <th width="20%">Environmental Aspect</th>
                    <th width="20%">Environmental Impact</th>
                    <th width="10%">Significance</th>
                    <th width="30%">Control Measures</th>
                </tr>
            </thead>
            <tbody id="env-body">
                <tr>
                    <td><textarea placeholder="e.g. Fuel Refilling"></textarea></td>
                    <td><textarea placeholder="e.g. Potential Fuel Spill"></textarea></td>
                    <td><textarea placeholder="e.g. Soil Contamination"></textarea></td>
                    <td><select style="width:100%; border:none;"><option>Low</option><option>Medium</option><option>High</option></select></td>
                    <td><textarea placeholder="e.g. Drip trays, Spill kits"></textarea></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        function addEnvRow() {
            const html = `<tr><td><textarea></textarea></td><td><textarea></textarea></td><td><textarea></textarea></td><td><select style="width:100%; border:none;"><option>Low</option><option>Medium</option><option>High</option></select></td><td><textarea></textarea></td></tr>`;
            document.getElementById('env-body').insertAdjacentHTML('beforeend', html);
        }
        function saveEnv() { alert("Environmental Register Saved!"); }
   // 🔄 Settings se Data Auto-Fill karne ka Magic Code
    window.addEventListener('load', () => {
        const gComp = localStorage.getItem('g_comp');
        const gCont = localStorage.getItem('g_cont');
        const gName = localStorage.getItem('g_name');
        const gSite = localStorage.getItem('g_site');

        if(gComp && document.getElementById('comp_name')) document.getElementById('comp_name').value = gComp;
        if(gCont && document.getElementById('cont_no')) document.getElementById('cont_no').value = gCont;
        if(gName && document.getElementById('auditor')) document.getElementById('auditor').value = gName;
        if(gSite && document.getElementById('facility')) document.getElementById('facility').value = gSite;
        if(gSite && document.getElementById('fac_area')) document.getElementById('fac_area').value = gSite;
    });
    </script>
</body>
</html>