-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (96 loc) · 5.04 KB
/
index.html
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>Cranleigh School Google Certificate</title>
<!-- Include the Tailwind CSS CDN link -->
<link href="./dist/output.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0c223f">
<meta name="msapplication-TileColor" content="#0c223f">
<meta name="theme-color" content="#0c223f">
</head>
<body class="bg-gray-100">
<!-- Header with Logo -->
<header class="bg-senior p-4 text-white flex">
<div class="container mx-auto">
<div class="float-left">
<div class="flex items-center">
<img src="./images/senior.png" alt="Logo" class="h-10 float-left">
<h1>Google Certificate</h1>
</div>
</div>
<div class="float-right">
<a href="./download.html"
class="bg-yellow border-2 border-white text-black font-bold py-2 px-4 rounded">
<img class="float-left mr-2 text-white download-icon" src="./images/download-square-svgrepo-com.svg"
alt="Download" width="24" height="24"/>Download Certificate
</a>
</div>
<div class="clearfix"></div>
</div>
</header>
<!-- Content Section with 4 Columns and Cards -->
<section class="container mx-auto mt-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Card 1 -->
<a target="_blank" href="./instructions/Windows%2010%20Certificate%20Install%20Instructions%202023.pdf"
class="bg-white p-4 rounded shadow animate-pull-down">
<img src="./images/windows10.jpg" alt="Image 1" class="w-full h-32 object-cover mb-4 rounded">
<h2 class="text-lg font-bold mb-2">Windows 10 / 11</h2>
<p class="text-gray-700">View instructions for Windows 10 or 11 devices.</p>
</a>
<!-- </a>-->
<!-- Card 2 -->
<a target="_blank" href="./instructions/MacOS%20Certificate%20Install%20Instructions%202023.pdf"
class="bg-white p-4 rounded shadow animate-pull-down">
<img src="./images/macos.jpg" alt="Image 2" class="w-full h-32 object-cover mb-4 rounded">
<h2 class="text-lg font-bold mb-2">MacOS</h2>
<p class="text-gray-700">View instructions for MacBook, iMac and other MacOS devices.</p>
</a>
<!-- Card 3 -->
<a target="_blank" href="./instructions/iOS%20Certificate%20Install%20Instructions%202023.pdf"
class="bg-white p-4 rounded shadow animate-pull-down">
<img src="./images/ios.jpg" alt="Image 3" class="w-full h-32 object-cover mb-4 rounded">
<h2 class="text-lg font-bold mb-2">iOS & iPadOS</h2>
<p class="text-gray-700">View instructions for iPhones, iPod Touch and personal iPads.</p>
</a>
<!-- Card 4 -->
<a target="_blank" href="./instructions/Android%20Certificate%20Install%20Instructions%202023.pdf" class="bg-white p-4 rounded shadow animate-pull-down">
<img src="./images/andriod.jpg" alt="Image 4" class="w-full h-32 object-cover mb-4 rounded">
<h2 class="text-lg font-bold mb-2">Android</h2>
<p class="text-gray-700">View instructions for Android Devices.</p>
</a>
</div>
</section>
<section class="container mx-auto mt-8 bg-senior p-4 rounded shadow text-white">
<img src="./images/chromebook.png" style="max-height:75px;float:right"/>
<h2 class="text-lg">Do you use a Chromebook?</h2>
<p>
There are some subtle differences in the installation process on a Chromebook. Please pop into IT Support.</p>
</section>
<section class="container mx-auto mt-8 bg-senior p-4 rounded shadow text-white">
<h2 class="text-lg">
Why do I need "the Google Certificate" on my device?</h2>
<p>
Since November 2023, 'the Google Certificate' actually affects more than just Google Services.
Whilst it does remain completely optional, without it your experience using WiFi on your personal device will be
degraded for a growing list of websites and services.
</p>
<p>It allows the School to filter your internet searches/activity to comply with safeguarding
requirements whilst still ensuring your data is encrypted when sent over the internet. It only applies when at
School on the WiFi – installing this certificate does not give the School access to your phone or any control
over it!</p>
</section>
<!-- Static Footer -->
<footer class="bg-senior text-white p-4 mt-8">
<div class="container mx-auto text-right">
<p>For support, email: <a href="mailto:servicedesk@cranleigh.org">servicedesk@cranleigh.org</a>.
</p>
</div>
</footer>
</body>
</html>