https://adamghill.com/isitwebscale

1<!DOCTYPE html>
2<html lang=en>
3
4<head>
5    <meta charset=utf-8>
6    <meta http-equiv=X-UA-Compatible content='IE=edge;chrome=1'>
7    <meta name=viewport content="width=device-width, initial-scale=1">
8    <title>Is It Web Scale?</title>
9
10    <head>
11        

11<script src="/static/adamghill/static/js/isitwebscale.js" type="module"></script>

11
12
13        <link rel="stylesheet" href="/static/adamghill/static/css/isitwebscale/holiday.css" />
14        <link rel="stylesheet" href="/static/adamghill/static/css/isitwebscale/styles.css" />
15        <link rel="stylesheet" href="/static/adamghill/static/css/isitwebscale/gh-fork-ribbon.css" />
16        <link rel="stylesheet" href="/static/adamghill/static/css/isitwebscale/dots.css" />
17        <link rel="stylesheet" href="/static/adamghill/static/css/isitwebscale/spinner.css" />
18    </head>
19
20<body>
21    
22
23    <h1>
24        But<span class="bouncing-dots"><span class="dot">.</span><span class="dot">.</span><span
25                class="dot">.</span></span>
26        is it web scale?
27    </h1>
28
29    <main>
30        <template id="app">
31            <style>
32                body {
33                    background-color: #f9f9f9;
34                }
35
36                h1 {
37                    margin-top: 1em;
38                    font-size: 5em;
39                }
40
41                #search {
42                    padding: .5em 2rem 2rem 2rem;
43                    font-size: 4em;
44                    height: 2em;
45                    width: 100%;
46                }
47
48                #result {
49                    color: #666;
50                }
51
52                #spinner {
53                    display: none;
54                }
55
56                #spinner-container {
57                    text-align: center;
58                    top: 275px;
59                    position: absolute;
60                    right: 350px;
61                }
62            </style>
63
64            <link rel="stylesheet" href="/static/adamghill/static/css/isitwebscale/spinner.css" />
65
66            <p>
67                {this.examples}
68            </p>
69
70            <input type="text" id="search" placeholder="Name of technology" autocomplete="off" @input="search"></input>
71
72            <h2 :style="this.resultStyle">
73                <span :if="this.result">{this.result}</span>
74                <span :else>Type in something above to find all of the answers you seek.</span>
75            </h2>
76
77            <div id="spinner-container">
78                <div id="spinner" style="display: none;" :style="this.spinnerStyle">🤔</div>
79            </div>
80        </template>
81    </main>

82<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"98af3946c800432e879bc4cbc7dd187b","r":1,"spa":2}' crossorigin="anonymous"></script>

82
83</body>
84
85</html>