HSE-Digital-Toolkit/hse-objectives.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HSE Objectives Planner | Aramco Standard</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Poppins', sans-serif; background-color: #f4f6f9; padding: 15px; margin: 0; }
        .container { max-width: 1100px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .header { text-align: center; border-bottom: 4px solid #283593; padding-bottom: 10px; margin-bottom: 20px; }
        .header h1 { color: #1a237e; margin: 0; font-size: 22px; }

        .objective-meta { background: #e8eaf6; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #283593; }
        label { font-size: 12px; font-weight: 700; color: #283593; }
        input, textarea { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #c5cae9; border-radius: 4px; box-sizing: border-box; font-family: 'Poppins'; font-size: 13px; }

        .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        table { width: 100%; border-collapse: collapse; min-width: 900px; table-layout: fixed; }
        th, td { border: 1px solid #d1d9ff; padding: 10px; text-align: left; font-size: 12px; word-wrap: break-word; }
        th { background: #283593; color: white; }

        .btn-group { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
        button, .btn-link { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; text-decoration: none; display: flex; align-items: center; justify-content: center; flex: 1; font-size: 13px; }
        .btn-add { background: #3949ab; color: white; }
        .btn-save { background: #1976d2; color: white; }
        .btn-load { background: #f57c00; color: white; }
        .btn-pdf { background: #2e7d32; color: white; }
        .btn-back { background: #607d8b; color: white; }

        /* 🖨️ PDF & Print Settings */
        @media print {
            @page { size: landscape; margin: 5mm; }
            .no-print { display: none !important; }
            .container { width: 100%; max-width: 100%; box-shadow: none; padding: 0; margin: 0; }
            table { font-size: 10px; min-width: 100%; }
            th { background: #eee !important; color: black !important; -webkit-print-color-adjust: exact; }
            input, textarea { border: none !important; padding: 2px !important; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎯 HSE Objectives, Targets & Plans</h1>
            <p style="font-size: 11px; color: #666;">Saudi Aramco SSMS Appendix 3 Standard</p>
        </div>

        <div class="objective-meta">
            <div style="margin-bottom: 10px;">
                <label>OBJECTIVE TITLE (e.g. 1.0 General Safety Management):</label>
                <input type="text" id="obj_title" placeholder="Aramco Appendix 3 Heading...">
            </div>
            <div>
                <label>RATIONALE (Why is this objective needed?):</label>
                <textarea id="rationale" rows="2" placeholder="e.g. Required by policy and risk assessment process..."></textarea>
            </div>
        </div>

        <div class="table-responsive">
            <table>
                <thead>
                    <tr>
                        <th style="width: 50px;">No.</th>
                        <th>Target (What is the goal?)</th>
                        <th>Action Plan (Detailed Steps)</th>
                        <th style="width: 120px;">Time Scale</th>
                        <th style="width: 150px;">Responsibility</th>
                    </tr>
                </thead>
                <tbody id="planner-body">
                    <tr>
                        <td>1.1</td>
                        <td><textarea placeholder="Target description"></textarea></td>
                        <td><textarea placeholder="How to achieve it"></textarea></td>
                        <td><input type="text" placeholder="e.g. Oct 2024"></td>
                        <td><input type="text" placeholder="Job Title/Name"></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="btn-group no-print">
            <a href="index.html" class="btn-link btn-back">⬅️ Back</a>
            <button class="btn-add" onclick="addRow()">➕ Add Target</button>
            <button class="btn-save" onclick="savePlanner()">💾 Save Draft</button>
            <button class="btn-load" onclick="loadPlanner()">🔄 Load Draft</button>
            <button class="btn-pdf" onclick="window.print()">📄 Save PDF (Landscape)</button>
        </div>
    </div>

    <script>
        let rowCount = 1;
        function addRow() {
            rowCount++;
            const tbody = document.getElementById('planner-body');
            const row = `<tr>
                <td>1.${rowCount}</td>
                <td><textarea placeholder="Target description"></textarea></td>
                <td><textarea placeholder="How to achieve it"></textarea></td>
                <td><input type="text" placeholder="e.g. Oct 2024"></td>
                <td><input type="text" placeholder="Job Title/Name"></td>
            </tr>`;
            tbody.insertAdjacentHTML('beforeend', row);
        }

        function savePlanner() {
            const data = {
                title: document.getElementById('obj_title').value,
                rationale: document.getElementById('rationale').value
            };
            localStorage.setItem('aramco_objectives', JSON.stringify(data));
            alert("✅ Objectives Draft Saved!");
        }

        function loadPlanner() {
            const data = JSON.parse(localStorage.getItem('aramco_objectives'));
            if(!data) return alert("No saved data!");
            document.getElementById('obj_title').value = data.title;
            document.getElementById('rationale').value = data.rationale;
            alert("🔄 Data Loaded Successfully!");
        }
    </script>
</body>
</html>