ao-site/index.html at main · permaweb/ao-site · 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
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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<script>
			(function () {
				const path = window.location.pathname || '/';
				const basePath =
					path === '/'
						? '/'
						: /\.[^/]+$/.test(path)
						? path.replace(/[^/]*$/, '') || '/'
						: `${path.replace(/\/+$/, '')}/`;
				const base = document.createElement('base');
				base.href = basePath;
				document.head.appendChild(base);
			})();
		</script>
		<link rel="icon" href="favicon.svg" />
		<link rel="manifest" href="manifest.json" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="AO: The Hyper Parallel Computer" />
		<meta property="og:title" content="AO" />
		<meta property="og:description" content="AO: The Hyper Parallel Computer" />
		<meta property="og:image" href="favicon.svg" />
		<link
			href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
			rel="stylesheet"
		/>
		<link
			href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:wght@400;500;700&display=swap"
			rel="stylesheet"
		/>
		<title>AO</title>
	</head>
	<body>
		<div id="root"></div>
		<div id="page-loader">
			<div class="page-loader-ring" aria-hidden="true"></div>
			<svg width="24" height="12" viewBox="0 0 24 12" fill="none" xmlns="http://www.w3.org/2000/svg">
				<g clip-path="url(#clip0_209_2030)">
					<g clip-path="url(#clip1_209_2030)">
						<g clip-path="url(#clip2_209_2030)">
							<path
								d="M0.00201416 11.99H3.99442L4.80919 9.78673L2.97595 6.03296L0.00201416 11.99Z"
								fill="black"
							/>
							<path
								d="M10.5941 9.01148L6.1536 0.0759277L4.8092 3.13605L9.00531 11.99H12.028L10.5941 9.01148Z"
								fill="black"
							/>
							<path
								fill-rule="evenodd"
								clip-rule="evenodd"
								d="M18.013 11.99C21.3184 11.99 23.998 9.31042 23.998 6.00502C23.998 2.69959 21.3184 0.0200195 18.013 0.0200195C14.7076 0.0200195 12.028 2.69959 12.028 6.00502C12.028 9.31042 14.7076 11.99 18.013 11.99ZM18.013 9.64077C20.0209 9.64077 21.6487 8.01301 21.6487 6.00502C21.6487 3.99705 20.0209 2.36927 18.013 2.36927C16.005 2.36927 14.3772 3.99705 14.3772 6.00502C14.3772 8.01301 16.005 9.64077 18.013 9.64077Z"
								fill="black"
							/>
						</g>
					</g>
				</g>
				<defs>
					<clipPath id="clip0_209_2030">
						<rect width="24" height="11.97" fill="white" transform="translate(0 0.0200195)" />
					</clipPath>
					<clipPath id="clip1_209_2030">
						<rect width="24" height="11.97" fill="white" transform="translate(0 0.0200195)" />
					</clipPath>
					<clipPath id="clip2_209_2030">
						<rect width="24" height="11.97" fill="white" transform="translate(0 0.0200195)" />
					</clipPath>
				</defs>
			</svg>
		</div>
		<style>
			#page-loader {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 72px;
				height: 72px;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 9999;
			}

			#page-loader svg {
				width: 34px;
				height: 17px;
				position: relative;
				z-index: 1;
				animation: open 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
			}

			#page-loader .page-loader-ring {
				position: absolute;
				inset: 0;
				border-radius: 50%;
				border: 1.5px solid rgba(68, 68, 68, 0.12);
				border-top-color: var(--loader-color, #444444);
				border-right-color: rgba(68, 68, 68, 0.45);
				animation: page-loader-spin 950ms linear infinite;
			}

			@keyframes open {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}

			@keyframes page-loader-spin {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}
		</style>
		<script>
			const theme = 'light';
			const backgroundColor = '#F7F7F8';
			document.body.style.backgroundColor = backgroundColor;

			const iconColor = '#444444';
			const loader = document.getElementById('page-loader');
			const loaderIcon = document.querySelector('#page-loader svg');

			if (loader) {
				loader.style.setProperty('--loader-color', iconColor);
			}

			if (loaderIcon) {
				loaderIcon.style.color = iconColor;
				loaderIcon.style.fill = iconColor;
			}

			window.hideAppLoader = function () {
				const pageLoader = document.getElementById('page-loader');
				if (pageLoader) {
					pageLoader.style.display = 'none';
				}
			};
		</script>
		<script type="module" src="/src/index.tsx"></script>
		<script
			async
			src="https://analytics.forward.computer/tracker.js"
			data-ackee-server="https://analytics.forward.computer"
			data-ackee-domain-id="7109ed8e-ecac-43bf-b655-e21d1f2cdd69"
		></script>
	</body>
</html>