-
Notifications
You must be signed in to change notification settings - Fork 61
/
index.html
79 lines (74 loc) · 3.53 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
<!DOCTYPE html>
<html>
<head>
<title>Selection.js</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="index.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Jua|Francois+One|Noticia+Text" rel="stylesheet">
</head>
<body>
<div class="container center-block">
<img src="logo.png" class="logo img-responsive center-block">
<div class="btns text-center">
<a href="https://drive.google.com/file/d/1wXOwKf50dAGyyv7_jAwN8uMSY1gjirUo/view?usp=sharing" class="lcolor btn-lg" download="selection.min.js"> <i class="fas fa-download"></i> Download</a>
<a href="https://github.com/prateekkalra/Selection.js" target="_" class=" lcolor btn-lg"><i class="fab fa-github"></i> Github</a>
</div>
<h3 class="text-center center-block" style="width: 75%;font-family: Jua">A lightweight javascript library which provides users with a set of options in the form of a small popover over the selected portion of text.</h3>
<div id="note" class="center-block">
<h2 class="text-uppercase text-center" style="font-family: Bree Serif">Try selecting any text on this page</h2>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="text-center header">Features</h3>
<div class="list-group text-center center-block" style="width: 60%">
<a class="list-group-item">Lightweight</a>
<a class="list-group-item">No dependencies</a>
<a class="list-group-item">No need to setup api for facebook and twitter</a>
<a class="list-group-item">Customizable background and icon color</a>
<a class="list-group-item">Customizable popover options</a>
</div>
</div>
<div class="col-md-6">
<h3 class="text-center header">Menu Options Available</h3>
<div class="list-group text-center center-block" style="width: 60%">
<a class="list-group-item">Share on Twitter</a>
<a class="list-group-item">Share on Facebook</a>
<a class="list-group-item">Google Search the text </a>
<a class="list-group-item">Copy the text</a>
<a class="list-group-item">Speak up the text</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2 class="header text-center">Basic Usage</h2>
<script src="https://gist.github.com/prateekkalra/3320fdad383b4ffd8050b87239c5bb2a.js"></script>
<div class="text-center" style="margin-top: 31%">
<p>Designed with <i style="color:red" class="fa fa-heart"></i> by <a style="color: crimson" href="https://www.linkedin.com/in/prateek-kalra/" target="_blank">Prateek Kalra</a>.</p>
</div>
</div>
<div class="col-md-6">
<h2 class="header text-center">Advanced Usage</h2>
<script src="https://gist.github.com/prateekkalra/a858930c0955576892a8aa400a18b472.js"></script>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="selection.js"></script>
<script type="text/javascript">
var selection = new Selection();
selection.config({
facebook: true,
twitter: true,
search:true,
copy:true,
speak:true,
translate:true,
backgroundColor: 'crimson',
iconColor: '#fff',
}).init();
</script>
</html>