web-stack-schema/index.html at master · FLighter7/web-stack-schema · 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
<!DOCTYPE html>
<html lang='ru'>
<head>
		<meta charset='utf-8'>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
		<title>Схема веб-стека</title>
		<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Mono&display=block&subset=cyrillic'>
		<link rel='stylesheet' href='dist/index.css'>
		<script src='dist/data.js' defer></script>
		<script src='dist/index.js' defer></script>
</head>
<body>
	<div class='about'>
		<a class='about__link' href='https://github.com/FLighter7/web-stack-schema' target='_blank'>Что это?</a>
	</div>
	<svg class='svg' id='svg'>
		<defs>
				<!-- Line arrow - html -->
				<marker
						id='arrow-html'
						viewBox='0 0 10 10'
						refX='10'
						refY='5'
						orient='auto'
						markerUnits='strokeWidth'
						markerWidth='10'
						markerHeight='10'
				>
						<path class='line-arrow_html' d='M0,0 L0,10 L10,5 Z'></path>
				</marker>
				<!-- Line arrow - css -->
				<marker
						id='arrow-css'
						viewBox='0 0 10 10'
						refX='10'
						refY='5'
						orient='auto'
						markerUnits='strokeWidth'
						markerWidth='10'
						markerHeight='10'
				>
						<path class='line-arrow_css' d='M0,0 L0,10 L10,5 Z'></path>
				</marker>
				<!-- Line arrow - js -->
				<marker
						id='arrow-javascript'
						viewBox='0 0 10 10'
						refX='10'
						refY='5'
						orient='auto'
						markerUnits='strokeWidth'
						markerWidth='10'
						markerHeight='10'
				>
						<path class='line-arrow_javascript' d='M0,0 L0,10 L10,5 Z'></path>
				</marker>
				<!-- Focused circle (from here: https://codepen.io/mullany/pen/sJopz) -->
				<filter id='dropshadow' width='150%' height='150%' x='-25%' y='-25%'>
						<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="SA-o-blur"/>
						<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
								<feFuncA type="table" tableValues="0.65 0.68 0.75 0.95 1 1 1 "/>
						</feComponentTransfer>
						<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>
						<feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
								<feFuncA type="linear" slope="10"/>
						</feComponentTransfer>
						<feColorMatrix in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0.302 0 0 0 0 0.565 0 0 0 0 0.996 0 0 0 1 0" result="SA-o-b-c-s-recolor"/>
						<feMerge>
								<feMergeNode in="SA-o-b-c-s-recolor"/>
								<feMergeNode in="SourceGraphic"/>
						</feMerge>
				</filter>
		</defs>
	</svg>
	<aside class='sidebar sidebar_hidden' id='sidebar'>
		<button class='sidebar__close' id='close' title='Закрыть' aria-label='Закрыть боковую панель'>Закрыть</button>
		<div class='sidebar__loader' id='loader'>
			<span class='sidebar__loader-1'></span>
			<span class='sidebar__loader-2'></span>
			<span class='sidebar__loader-3'></span>
		</div>
		<section class='sidebar__content markdown-body sidebar__content_hidden' id='content'></section>
	</aside>
</body>
</html>