forked from simonwep/viselect
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (74 loc) · 3.96 KB
/
index.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#57D5E3"/>
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#57D5E3"/>
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#57D5E3"/>
<!-- SEO Stuff -->
<meta name="audience" lang="en" content="all"/>
<meta name="expires" content="7 days"/>
<meta name="robots" content="follow"/>
<meta name="revisit-after" content="7 days"/>
<meta name="page-topic" content="Selection library"/>
<meta name="copyright" content="Simon Reinisch"/>
<meta name="author" content="Simon Reinisch"/>
<meta name="description"
content="Simple and lightweight library to realize visual DOM Selections, like on your Desktop. No jQuery. Supports any CSS library, e.g. Bootstrap. Including vertical & horizontal scroll support."/>
<meta name="keywords" content="selection, javascript, js design, ux-design, ui-design, web-development, programming"/>
<!-- Open Graph / Facebook -->
<meta property="og:image" content="st/favicon.png"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://simonwep.github.io/selection/"/>
<meta property="og:site_name" content="Selectionjs"/>
<meta property="og:title" content="Selectionjs - Selection engine"/>
<meta property="og:description"
content="Simple and lightweight library to realize visual DOM Selections, like on your Desktop. No jQuery. Supports any CSS library, e.g. Bootstrap. Including vertical & horizontal scroll support."/>
<!-- Twitter -->
<meta property="twitter:url" content="https://simonwep.github.io/selection/">
<meta property="twitter:title" content="Selectionjs - Selection engine">
<meta property="twitter:description"
content="Simple and lightweight library to realize visual DOM Selections, like on your Desktop. No jQuery. Supports any CSS library, e.g. Bootstrap. Including vertical & horizontal scroll support.">
<meta property="twitter:image" content="st/favicon.png">
<title>Selection.js</title>
<!-- Icons -->
<link rel="icon" href="st/favicon.png"/>
<link rel="fluid-icon" href="st/favicon.png"/>
<link rel="apple-touch-icon" href="st/favicon.png"/>
<!-- ICONS -->
<link href="st/favicon.png" rel="icon"/>
<link href="st/favicon.png" rel="apple-touch-icon"/>
<!-- CSS STYLESHEETS -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">
<link href="st/styles.css" rel="stylesheet"/>
</head>
<body>
<header>
<h1> Selection<span class="js">.js</span></h1>
<a href="https://github.com/Simonwep/selection">VIEW ON GITHUB</a>
</header>
<main>
<section class="sec demo">
<div class="info">
<p>Click to select the boxes, use <span class="keyboard-key">ctrl</span> / <span class="keyboard-key">cmd</span> + <span class="keyboard-key">shift</span> to select a range. </p>
<p>Click and drag <span class="keyboard-key">left mouse</span> to make a multi-selection or</p>
<p>hold <span class="keyboard-key">ctrl</span> / <span class="keyboard-key">cmd</span> to make multiple selections.</p>
</div>
<h2>Clearly defined boundaries!</h2>
<section class="box-wrap boxes green"></section>
<section class="box-wrap boxes blue"></section>
<h2>Supports scrollable containers!</h2>
<section class="box-wrap boxes red"></section>
</section>
<h2>Code...</h2>
<script src="https://gist.github.com/Simonwep/b0c25725a4715c1c5aab501d6a782a71.js"></script>
</main>
<script src="dist/selection.min.js"></script>
<script src="st/code.js"></script>
</body>
</html>