-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathunsupported-browser.html
169 lines (167 loc) · 6.18 KB
/
unsupported-browser.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Unsupported | O.P Portfolio</title>
<style type="text/css">
.win-machine .mac,
.win-machine .linux,
.mac-machine .win,
.mac-machine .linux,
.linux-machine .win,
.linux-machine .mac {
display: none;
}
.win-machine .win,
.mac-machine .mac,
.linux-machine .linux {
display: block;
}
</style>
</head>
<body>
<div id="portfolio" class="sticky-footer">
<!-- VIDEO BACKGROUND -->
<div
class="absolute w-full h-screen overflow-hidden bg-black bg-no-repeat"
style="
background-image: url('/assets/images/6e90449c6e940d014f5a78f69eb05c70.jpg');
background-position: center top;
background-size: auto 100%;
"
>
<iframe
class="absolute top-0 left-1/2 h-full w-1920 z-0"
src="https://player.vimeo.com/video/407193331?title=0&portrait=0&byline=0&autoplay=1&loop=1&background=1"
style="transform: translate(-50%)"
></iframe>
</div>
<!-- END VIDEO BACKGROUND -->
<!-- HEADER -->
<div class="relative z-1 w-full">
<div class="container">
<header class="flex items-end justify-between mb-4 text-white h-100">
<h1 class="text-h1 mb-2 text-scale-8 font-logo">O.P</h1>
<nav class="flex flex-col items-end">
<div class="mb-3">
<a
class="block p-2 border-white rounded-md text-scale-n1 border-1"
href="https://github.com/opanitch/portfolio"
target="_blank"
>See on
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
aria-hidden="true"
focusable="false"
role="img"
class="inline-block fill-current text-scale-3"
>
<path
d="M12 2A10 10 0 002 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"
></path>
</svg>
</a>
</div>
</nav>
</header>
</div>
</div>
<!-- END HEADER -->
<div
class="pb-5 bg-center bg-no-repeat relative z-1 w-full"
id="unsupported"
>
<div class="flex items-center justify-center h-full container">
<div
class="p-3 pt-4 bg-white bg-opacity-90 shadow-lg md:p-4 md:pt-5 w-5/6 md:w-3/5 lg:w-1/2"
>
<h2 class="text-h2 mb-2 text-scale-7 font-nugo text-center">
UNSUPPORTED BROWSER
</h2>
<p class="px-2 mt-3 font-nugo text-scale-2">
Sorry for the inconvenience!<br />
I built my portfolio using the
<img
class="inline align-top"
alt="React.js"
src="assets/icons/react.svg"
/>
React v17.0.1 JavaScript framework. To guarantee the best possible
user experience, I have decided not to support the browser you are
currently using. Please update your browser, or download the
latest version of one of the following options:
</p>
<ul class="mt-3 flex justify-between flex-grow">
<li class="mac">
<a
href="https://support.apple.com/downloads/safari"
target="_blank"
>
<img
class="w-100"
alt="Safari"
src="assets/icons/apple-safari.svg"
/>
</a>
</li>
<li class="win mac linux">
<a
href="https://www.mozilla.org/en-US/firefox/new/"
target="_blank"
>
<img
class="w-100"
alt="Firefox"
src="assets/icons/firefox.svg"
/>
</a>
</li>
<li class="win mac linux">
<a href="https://www.google.com/chrome/" target="_blank">
<img
class="w-100"
alt="Chrome"
src="assets/icons/google-chrome.svg"
/>
</a>
</li>
<li class="win linux">
<a href="https://www.microsoft.com/en-us/edge" target="_blank">
<img
class="w-100 text-blue-400 fill-current"
alt="Edge"
src="assets/icons/microsoft-edge.svg"
/>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="relative z-1 w-full">
<div class="container">
<footer class="mt-3 text-white">
<div class="flex items-end justify-end w-full">
<p class="py-2 text-scale-n1">© 2021 Oren Panitch</p>
</div>
</footer>
</div>
</div>
<!-- END FOOTER -->
</div>
<script>
if (navigator.userAgent.indexOf('Mac OS') !== -1) {
document.body.setAttribute('class', 'mac-machine');
} else if (navigator.userAgent.indexOf('Linux') !== -1) {
document.body.setAttribute('class', 'linux-machine');
} else {
document.body.setAttribute('class', 'win-machine');
}
</script>
</body>
</html>