forked from grommet/grommet.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.html
125 lines (119 loc) · 16.1 KB
/
404.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Grommet</title>
<meta name="fragment" content="!" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>...NOM...NOM...NOM | Grommet</title>
<link href='https://cdnjs.cloudflare.com/ajax/libs/grommet/1.1.0/grommet.min.css' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/grommet/1.1.0/grommet.min.js"></script>
<style>
#gremlin {
animation: slideUp 0.5s ease;
}
#chomp-mouth {
opacity: 0;
animation: fadeOut 0.5s infinite;
animation-delay: 0.5s;
}
@keyframes fadeOut {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
50% {
opacity: 1;
}
51% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes slideUp {
0% {
transform: translateY(100%);
}
50%{
transform: translateY(0%);
}
80%{
transform: translateY(2%);
}
100% {
transform: translateY(0%);
}
}
</style>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
class NotFound extends React.Component {
render () {
return (
<Grommet.App centered={false}>
<Grommet.Box full={true}>
<Grommet.Header pad='medium'>
<Grommet.Icons.Grommet />
</Grommet.Header>
<Grommet.Box align='center' pad='small'>
<Grommet.Headline size='large' strong={true}>
404
</Grommet.Headline>
<Grommet.Paragraph align='center' size='large'>
It looks like our grommet gremlin has been up to no good.
If you’re convinced it wasn’t the gremlin give us a shout
on <Grommet.Anchor href="http://slackin.grommet.io"
target="_blank">
Slack
</Grommet.Anchor>.
</Grommet.Paragraph>
</Grommet.Box>
<Grommet.Box align='center' justify='end' flex={true}
pad={{ horizontal: 'medium' }}>
<svg id='gremlin' version="1.1" width="413px" height="654px"
viewBox="0 0 413 654" style={{
maxWidth: '100%', height: 'auto'
}}>
<g id='open-mouth' fill="none" fillRule="evenodd">
<path fill="#6B44B5" d="M388.983835,14.9478355 C410.387467,32.2801545 422.539277,61.3542602 403.345116,85.0570748 C384.150956,108.759889 340.720547,123.062904 316.993195,103.848873 C293.265843,84.634842 298.226612,39.179728 317.420773,15.4769135 C336.614934,-8.22590101 367.580204,-2.38448337 388.983835,14.9478355 Z"/>
<path fill="#865CD6" d="M9.77764417,85.2967503 C-9.41651657,61.5939358 2.73529378,32.51983 24.1389251,15.1875111 C45.5425565,-2.1448078 76.5078267,-7.98622544 95.7019875,15.7165891 C102.800359,24.4823482 107.952082,36.2230898 110.426053,48.5113643 C185.324585,23.8803486 327.167689,34.0023767 347.044955,78.8774485 C361.1683,110.762424 370.222345,212.80195 375.890485,314.197398 C378.22244,355.912957 379.981291,427.519498 381.284263,464.086832 C383.742704,533.081861 384,654 384,654 L29,654 C29,654 30.0243873,533.081861 32.47617,464.086832 C33.7756136,427.519498 35.5305148,355.912957 37.858645,314.197398 C42.1860773,236.658236 48.4940067,158.74242 57.5387591,112.111542 C39.1645059,109.058262 20.6108578,98.674655 9.77764417,85.2967503 Z"/>
<path fill="#000000" fillOpacity=".05" d="M280.786445,78.5 C268.33291,106.6152 257.915876,201.14748 251.786445,309.5 C245.657014,417.85252 243.786445,654 243.786445,654 L283.786445,654 C283.786445,654 286.61651,440 330.658381,406.99776 C334.333139,404.244125 397.18755,392.407533 377.464474,384.518274 C357.741398,376.629015 347.733494,363.650351 351.797838,354.933552 C396.859348,258.290125 383.291755,295.59894 377.464474,291.819477 C313.604112,250.400865 333.776607,167.563642 367.592691,141.92355 C369.415629,140.541358 371.326965,121.291098 369.567047,118.255772 C345.874768,77.3937481 354.369465,68.0574512 358.286445,40.5 C321.222819,47.1206717 289.084184,59.7669584 280.786445,78.5 Z" transform="matrix(-1 0 0 1 627.786 0)"/>
<path fill="#8F2D2D" d="M206.865635,362.822811 C283.194129,362.822811 345.070598,337.381658 345.070598,305.429462 C345.070598,273.477267 283.194129,295.764107 206.865635,295.764107 C130.537141,295.764107 68.6606716,273.477267 68.6606716,305.429462 C68.6606716,337.381658 130.537141,362.822811 206.865635,362.822811 Z"/>
<path fill="#AE3939" d="M258.198907,358.878181 C258.198907,358.947425 250.301481,339.155033 230.557914,335.285985 C216.718665,332.573977 208.839992,337.182718 206.865635,339.155033 C205.238264,337.182718 197.012605,332.573977 183.173356,335.285985 C163.429789,339.155033 155.532363,358.947425 155.532363,358.878181 C198.968208,364.795126 214.763061,364.795126 258.198907,358.878181 Z"/>
<path fill="#FFFFFF" d="M108.147804,287.874847 C110.122161,295.764107 115.058052,305.625681 119.993944,305.625681 C124.929835,305.625681 127.89137,296.750264 129.865727,289.847162 C129.865727,289.847162 116.04523,287.874847 108.147804,287.874847 Z M305.583466,287.874847 C303.609109,295.764107 298.673218,305.625681 293.737326,305.625681 C288.801435,305.625681 285.8399,296.750264 283.865543,289.847162 C283.865543,289.847162 297.686039,287.874847 305.583466,287.874847 Z"/>
<path fill="#333333" d="M206.865635,268.151699 C214.763061,268.151699 234.506628,256.596464 234.506628,243.525111 C234.506628,230.453758 219.95052,228.705402 206.865635,228.705402 C193.78075,228.705402 179.224642,230.453758 179.224642,243.525111 C179.224642,256.596464 198.968208,268.151699 206.865635,268.151699 Z M116.04523,228.705402 C129.130115,228.705402 139.73751,218.108977 139.73751,205.037624 C139.73751,191.966271 129.130115,181.369846 116.04523,181.369846 C102.960346,181.369846 92.3529511,191.966271 92.3529511,205.037624 C92.3529511,218.108977 102.960346,228.705402 116.04523,228.705402 Z M297.686039,228.705402 C310.770924,228.705402 321.378319,218.108977 321.378319,205.037624 C321.378319,191.966271 310.770924,181.369846 297.686039,181.369846 C284.601155,181.369846 273.99376,191.966271 273.99376,205.037624 C273.99376,218.108977 284.601155,228.705402 297.686039,228.705402 Z"/>
<path fill="#FFFFFF" fillOpacity=".2" d="M197.96891,244.483921 C203.420945,244.483921 207.840693,242.71785 207.840693,240.539291 C207.840693,238.360732 203.420945,236.594662 197.96891,236.594662 C192.516875,236.594662 188.097127,238.360732 188.097127,240.539291 C188.097127,242.71785 192.516875,244.483921 197.96891,244.483921 Z M102.125299,199.12068 C102.125299,202.391901 104.774406,205.04375 108.042244,205.04375 C111.310082,205.04375 113.959188,202.391901 113.959188,199.12068 C113.959188,195.849459 111.310082,193.19761 108.042244,193.19761 C104.774406,193.19761 102.125299,195.849459 102.125299,199.12068 Z M283.766108,199.12068 C283.766108,202.391901 286.415215,205.04375 289.683053,205.04375 C292.950891,205.04375 295.599997,202.391901 295.599997,199.12068 C295.599997,195.849459 292.950891,193.19761 289.683053,193.19761 C286.415215,193.19761 283.766108,195.849459 283.766108,199.12068 Z"/>
<path fill="#6B44B5" d="M191.070782,393.716599 L226.609201,393.716599 C228.81834,393.716599 230.609201,391.925738 230.609201,389.716599 C230.609201,387.50746 228.81834,385.716599 226.609201,385.716599 L191.070782,385.716599 C188.861643,385.716599 187.070782,387.50746 187.070782,389.716599 C187.070782,391.925738 188.861643,393.716599 191.070782,393.716599 Z M91.6186614,143.595752 C91.7589897,144.129651 92.3164339,144.539039 92.880847,144.509342 C92.880847,144.509342 106.640952,143.780119 123.468675,142.966099 C140.296397,142.15208 152.155783,142.096029 152.155783,142.096029 C152.707548,142.091491 153.181935,141.641259 153.215431,141.089166 L154.547378,119.135582 C154.580841,118.584045 154.171541,118.184653 153.615258,118.24776 C153.615258,118.24776 138.89964,119.787947 121.433935,123.606846 C103.96823,127.425744 89.5143047,131.700045 89.5143047,131.700045 C88.9898336,131.852661 88.6785375,132.409621 88.8187525,132.94309 L91.6186614,143.595752 Z M319.083636,143.595752 C318.943308,144.129651 318.385864,144.539039 317.821451,144.509342 C317.821451,144.509342 304.061346,143.780119 287.233623,142.966099 C270.4059,142.15208 258.546514,142.096029 258.546514,142.096029 C257.99475,142.091491 257.520363,141.641259 257.486867,141.089166 L256.154919,119.135582 C256.121457,118.584045 256.530756,118.184653 257.087039,118.24776 C257.087039,118.24776 271.802658,119.787947 289.268362,123.606846 C306.734067,127.425744 321.187993,131.700045 321.187993,131.700045 C321.712464,131.852661 322.02376,132.409621 321.883545,132.94309 L319.083636,143.595752 Z"/>
</g>
<g id="chomp-mouth" fill="none" fillRule="evenodd">
<path fill="#6B44B5" d="M388.983835,14.9478355 C410.387467,32.2801545 422.539277,61.3542602 403.345116,85.0570748 C384.150956,108.759889 340.720547,123.062904 316.993195,103.848873 C293.265843,84.634842 298.226612,39.179728 317.420773,15.4769135 C336.614934,-8.22590101 367.580204,-2.38448337 388.983835,14.9478355 Z"/>
<path fill="#865CD6" d="M9.77764417,85.2967503 C-9.41651657,61.5939358 2.73529378,32.51983 24.1389251,15.1875111 C45.5425565,-2.1448078 76.5078267,-7.98622544 95.7019875,15.7165891 C102.800359,24.4823482 107.952082,36.2230898 110.426053,48.5113643 C185.324585,23.8803486 327.167689,34.0023767 347.044955,78.8774485 C361.1683,110.762424 370.222345,212.80195 375.890485,314.197398 C378.22244,355.912957 379.981291,427.519498 381.284263,464.086832 C383.742704,533.081861 384,654 384,654 L29,654 C29,654 30.0243873,533.081861 32.47617,464.086832 C33.7756136,427.519498 35.5305148,355.912957 37.858645,314.197398 C42.1860773,236.658236 48.4940067,158.74242 57.5387591,112.111542 C39.1645059,109.058262 20.6108578,98.674655 9.77764417,85.2967503 Z"/>
<path fill="#000000" fillOpacity=".05" d="M270.12673,78.5 C257.673194,106.6152 247.256161,201.14748 241.12673,309.5 C234.997298,417.85252 233.12673,654 233.12673,654 L287.62673,654 C287.62673,654 286.11343,453.339516 319.998666,406.99776 C344.12673,374 395.849805,360.889259 376.12673,353 C356.403654,345.110741 362.62673,323 376.12673,323 C395.626728,323 373.486554,323.827556 367.62673,321 C308.563365,292.5 323.12673,208 359.12673,181.5 C360.951197,180.156989 360.886647,163.035326 359.12673,160 C335.43445,119.137977 343.709749,68.0574512 347.62673,40.5 C310.563104,47.1206717 278.424469,59.7669584 270.12673,78.5 Z" transform="matrix(-1 0 0 1 617.127 0)"/>
<path fill="#FFFFFF" d="M109,314 C110.973101,321.890665 115.776851,332.68371 120.709604,332.68371 C125.642357,332.68371 129.026899,324.904332 131,318 C131,318 116.892405,314 109,314 Z M306,314 C304.026899,321.890665 299.275256,332.68371 294.342503,332.68371 C289.40975,332.68371 285.973101,324.904332 284,318 C284,318 298.107595,314 306,314 Z"/>
<path fill="#333333" d="M329.273727,307.044329 C328.030345,307.26048 318.680307,308.989624 315.130674,309.624332 C307.231525,311.036773 299.572476,312.308773 291.474712,313.51581 C262.62643,317.815881 234.521863,320.341855 207.734143,320.341855 C180.964159,320.341855 152.467249,317.819267 122.821691,313.515845 C114.51728,312.310356 106.650804,311.043048 98.4127631,309.620041 C95.2125531,309.067249 85.2515438,307.296723 83.7024064,307.040279 C82.0677976,306.769687 80.5233269,307.87544 80.2527345,309.510049 C79.982142,311.144658 81.0878957,312.689128 82.7225045,312.959721 C84.2297175,313.209224 94.160247,314.974333 97.3914707,315.532482 C105.679107,316.964057 113.597323,318.239699 121.959751,319.45361 C151.867894,323.79515 180.637247,326.341855 207.734143,326.341855 C234.854802,326.341855 263.240906,323.790577 292.359288,319.450246 C300.519095,318.233961 308.234054,316.952675 316.18678,315.530654 C319.766428,314.890579 329.096652,313.165099 330.301362,312.955671 C331.933734,312.671897 333.026989,311.118554 332.743216,309.486182 C332.459442,307.85381 330.906099,306.760555 329.273727,307.044329 Z"/>
<path fill="#333333" d="M207.526054,278.20305 C215.418458,278.20305 235.149469,266.645756 235.149469,253.572073 C235.149469,240.498391 220.602618,238.749724 207.526054,238.749724 C194.44949,238.749724 179.902638,240.498391 179.902638,253.572073 C179.902638,266.645756 199.633649,278.20305 207.526054,278.20305 Z M117.763402,235.453693 C130.839966,235.453693 141.440615,225.053978 141.440615,212.22528 C141.440615,199.396581 130.839966,188.996866 117.763402,188.996866 C104.686838,188.996866 94.0861881,199.396581 94.0861881,212.22528 C94.0861881,225.053978 104.686838,235.453693 117.763402,235.453693 Z M297.288706,234.453693 C310.365269,234.453693 320.965919,224.053978 320.965919,211.22528 C320.965919,198.396581 310.365269,187.996866 297.288706,187.996866 C284.212142,187.996866 273.611492,198.396581 273.611492,211.22528 C273.611492,224.053978 284.212142,234.453693 297.288706,234.453693 Z"/>
<path fill="#FFFFFF" fillOpacity=".2" d="M198.634986,254.531054 C204.083554,254.531054 208.500492,252.764669 208.500492,250.585722 C208.500492,248.406775 204.083554,246.640389 198.634986,246.640389 C193.186418,246.640389 188.76948,248.406775 188.76948,250.585722 C188.76948,252.764669 193.186418,254.531054 198.634986,254.531054 Z M103.847505,211.96451 C103.847505,215.233651 106.497084,217.883813 109.765504,217.883813 C113.033925,217.883813 115.683503,215.233651 115.683503,211.96451 C115.683503,208.695369 113.033925,206.045206 109.765504,206.045206 C106.497084,206.045206 103.847505,208.695369 103.847505,211.96451 Z M283.372809,210.96451 C283.372809,214.233651 286.022387,216.883813 289.290808,216.883813 C292.559229,216.883813 295.208807,214.233651 295.208807,210.96451 C295.208807,207.695369 292.559229,205.045206 289.290808,205.045206 C286.022387,205.045206 283.372809,207.695369 283.372809,210.96451 Z"/>
<path fill="#6B44B5" d="M190.89243,357.015266 L226.408251,357.015266 C228.61739,357.015266 230.408251,355.224405 230.408251,353.015266 C230.408251,350.806127 228.61739,349.015266 226.408251,349.015266 L190.89243,349.015266 C188.683291,349.015266 186.89243,350.806127 186.89243,353.015266 C186.89243,355.224405 188.683291,357.015266 190.89243,357.015266 Z M91.6531665,157.334943 C91.7934519,156.800941 92.3505813,156.391437 92.9146379,156.42109 C92.9146379,156.42109 106.666053,157.149273 123.483156,157.962006 C140.300259,158.774739 152.152204,158.829796 152.152204,158.829796 C152.703623,158.834288 153.177674,159.284556 153.211102,159.83674 L154.540357,181.793928 C154.573751,182.345556 154.164675,182.74505 153.608746,182.681979 C153.608746,182.681979 138.902485,181.142777 121.448054,177.32471 C103.993623,173.506643 89.5491225,169.232841 89.5491225,169.232841 C89.0249931,169.080244 88.7139393,168.523216 88.8541116,167.989645 L91.6531665,157.334943 Z M318.943993,157.334943 C318.803708,156.800941 318.246578,156.391437 317.682522,156.42109 C317.682522,156.42109 303.931106,157.149273 287.114003,157.962006 C270.2969,158.774739 258.444955,158.829796 258.444955,158.829796 C257.893537,158.834288 257.419486,159.284556 257.386057,159.83674 L256.056803,181.793928 C256.023408,182.345556 256.432485,182.74505 256.988414,182.681979 C256.988414,182.681979 271.694675,181.142777 289.149105,177.32471 C306.603536,173.506643 321.048037,169.232841 321.048037,169.232841 C321.572166,169.080244 321.88322,168.523216 321.743048,167.989645 L318.943993,157.334943 Z"/>
</g>
</svg>
</Grommet.Box>
</Grommet.Box>
</Grommet.App>
);
}
};
var element = document.getElementById('content');
ReactDOM.render(React.createElement(NotFound), element);
</script>
</body>
</html>