-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsub-eval.html
More file actions
103 lines (92 loc) · 5.83 KB
/
Copy pathsub-eval.html
File metadata and controls
103 lines (92 loc) · 5.83 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sub-Contractor Evaluation | Aramco Appendix 10</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
:root { --aramco-brown: #5d4037; }
body { font-family: 'Roboto', sans-serif; background: #555; margin: 0; padding: 10px; padding-bottom: 100px; }
.document-page { background: #fff; width: 210mm; min-height: 297mm; margin: 0 auto; padding: 15mm; border: 2px solid #000; box-shadow: 0 0 20px rgba(0,0,0,0.5); box-sizing: border-box; }
.header-table { width: 100%; border-collapse: collapse; border: 2px solid #000; }
.header-table td { border: 1px solid #000; padding: 10px; }
.section-bar { background: var(--aramco-brown); color: white; padding: 8px; font-weight: bold; text-transform: uppercase; font-size: 13px; border: 2px solid #000; border-top: none; }
table.eval-table { width: 100%; border-collapse: collapse; border: 2px solid #000; border-top: none; }
table.eval-table th { border: 1px solid #000; padding: 8px; font-size: 11px; background: #f2f2f2; }
table.eval-table td { border: 1px solid #000; padding: 8px; font-size: 12px; }
.score-select { width: 100%; border: 1px solid #ccc; font-weight: bold; padding: 5px; }
.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 { .no-print { display: none !important; } .document-page { border: 2px solid #000; width: 100%; } body { background: white; padding: 0; } .section-bar { background-color: var(--aramco-brown) !important; -webkit-print-color-adjust: exact; } }
@media (max-width: 800px) { .document-page { width: 100%; padding: 5mm; } .btn { flex: 1; font-size: 10px; } }
</style>
</head>
<body>
<div class="controls no-print">
<button class="btn" style="background:var(--aramco-brown)" onclick="window.print()">📄 PRINT EVALUATION</button>
<button class="btn" style="background:#1976d2" onclick="saveEval()">💾 SAVE</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="text-align:center; background:#f2f2f2;"><strong>SUB-CONTRACTOR SAFETY PRE-QUALIFICATION</strong><br><small>Saudi Aramco SSMS Appendix 10</small></td>
<td width="20%" style="font-size:10px; text-align:right;"><b>APPENDIX 10</b><br>Rev: 2026</td>
</tr>
</table>
<div class="section-bar">Company Information</div>
<div style="display:grid; grid-template-columns:1fr 1fr; border:2px solid #000; border-top:none;">
<div style="padding:10px; border-right:1px solid #000;">
<label style="font-size:10px; font-weight:bold;">SUB-CONTRACTOR NAME:</label>
<input type="text" style="width:100%; border:none; outline:none; font-weight:bold;">
</div>
<div style="padding:10px;">
<label style="font-size:10px; font-weight:bold;">NATURE OF WORK:</label>
<input type="text" style="width:100%; border:none; outline:none; font-weight:bold;">
</div>
</div>
<div class="section-bar">Safety Performance Evaluation</div>
<table class="eval-table">
<thead>
<tr>
<th width="70%">Evaluation Criteria</th>
<th width="30%">Score / Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Is there a written Health & Safety Policy?</td>
<td><select class="score-select"><option>YES</option><option>NO</option><option>N/A</option></select></td>
</tr>
<tr>
<td>Are all workers provided with basic safety induction?</td>
<td><select class="score-select"><option>YES</option><option>NO</option><option>N/A</option></select></td>
</tr>
<tr>
<td>Sub-contractor's TRIR (Total Recordable Incident Rate) for last year:</td>
<td><input type="text" placeholder="Enter Rate" style="width:100%; border:none;"></td>
</tr>
<tr>
<td>Availability of trained First Aiders & Fire Watchers?</td>
<td><select class="score-select"><option>YES</option><option>NO</option><option>N/A</option></select></td>
</tr>
</tbody>
</table>
<div class="section-bar">Final Recommendation</div>
<div style="border:2px solid #000; border-top:none; padding:15px;">
<label style="font-weight:bold; font-size:12px;">Conclusion:</label>
<select style="width:100%; margin-top:5px; padding:10px; font-weight:bold;">
<option>APPROVED TO WORK</option>
<option>CONDITIONALLY APPROVED</option>
<option>NOT APPROVED / REJECTED</option>
</select>
<textarea placeholder="Auditor's comments..." style="margin-top:10px; border:1px solid #eee;"></textarea>
</div>
</div>
<script>
function saveEval() { alert("Evaluation Saved!"); }
</script>
</body>
</html>