-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
176 lines (173 loc) · 11 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
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calendary - Vanilla Datepicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Flamenco" rel="stylesheet">
<link rel="stylesheet" href="calendary.min.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<style type="text/css">
@keyframes bg-degrade{
0%{transform: rotate(0deg)}
100%{transform: rotate(360deg)}
}
@keyframes logo{
0%{stroke-dashoffset: 1170px;}
100%{stroke-dashoffset: -50px;}
}
@keyframes logo-opacity{
0%{opacity: 0;}
100%{opacity: 1;}
}
*{margin: 0;padding: 0;box-sizing: border-box;}
body{font-family: 'Flamenco', Arial, sans-serif;background-image: linear-gradient(-9deg, transparent 900px, #fff 901px), linear-gradient(10deg, #ddd 900px, #fff 901px);background-size: 100vw;background-position: 0 0;}
.stage{display: flex;height: 90vh;align-items: center;position: relative;overflow: hidden;}
.stage--bg{position: absolute;z-index: -1;top: 0;left: 0;height: 100%;width: 100%;background-image: linear-gradient(to bottom, #fff 0%, #ddd 100%);}
.stage--bg:before{content: '';height: 200vw;width: 100vw;position: absolute;animation: bg-degrade 10s linear infinite;transform-origin: 50% 50%;
background-color: rgba(0,0,0,.1);filter: blur(100px);border-radius: 30%;}
.stage--content{width: 100%;}
.stage--subtitle{text-align: center;font-size: 30px;}
.stage--size{color: #a00;font-weight: lighter;}
.stage--size-number{font-weight: bold;}
.stage--logo{width: 300px;display: block;margin: 0 auto;}
.stage--logo .border{fill:#fff;stroke: #000;stroke-width: 10px;stroke-dasharray: 1170px;stroke-dashoffset: 1170px;animation: logo 1s 1s forwards;}
.stage--logo .st1, .stage--logo .st2{animation-fill-mode: forwards;animation-duration: 0.5s;animation-name: logo-opacity;opacity: 0;}
.stage--logo .st1{fill:#a00;}
.stage--logo .st2{fill:#333;}
.stage--logo .st1:nth-child(1){animation-delay: 0.1s;}
.stage--logo .st1:nth-child(2){animation-delay: 0.2s;}
.stage--logo .st1:nth-child(3){animation-delay: 0.3s;}
.stage--logo .st2:nth-child(1){animation-delay: 0.4s;}
.stage--logo .st2:nth-child(2){animation-delay: 0.5s;}
.stage--logo .st2:nth-child(3){animation-delay: 0.6s;}
.stage--logo .st2:nth-child(4){animation-delay: 0.7s;}
.stage--logo .st2:nth-child(5){animation-delay: 0.8s;}
.stage--logo .st2:nth-child(6){animation-delay: 0.9s;}
.stage--logo .st1:nth-child(7){animation-delay: 2.2s;}
.content{width: 90%;max-width: 1200px;margin: 0 auto;padding: 40px 0;}
.content p{font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;font-size: 20px;line-height: 1.6em;margin-bottom: 10px;}
.content a{font-size: 16px;color: #a00;}
.content--first{color: #333;}
.content--second{padding-top: 120px;padding-bottom: 20px;}
.content--second .content--h1{text-align: center;font-size: 60px;color: #a00;}
.content--third{background-color: #fff;background-size: auto 100px;background-image: linear-gradient(to bottom, #ddd 0%, transparent 99%);background-repeat: repeat-x;}
.content--h1{font-size: 50px;font-weight: bold;margin-bottom: 20px;}
.content--h2{font-size: 40px;font-weight: bold;margin-bottom: 10px;}
.content--h3{font-size: 24px;font-weight: bold;margin-bottom: 10px;}
.code{background-color: #222;display: block;padding: 5px;color: #fff;border-radius: 3px;white-space: pre;margin-bottom: 10px;}
.code--tag{color: #f92672;}
.code--attr{color: #a6e22e;}
.code--value{color: #e6db74;}
.code--important{color: #66d9ef;font-weight: bold;font-style: italic;}
.example{display: flex;flex-wrap: wrap;margin: 10px 0 20px;align-items: center;}
.example--box{width: 50%;}
.example--item{max-width: 400px;width: 90%;margin: 0 auto;}
.example--text{text-align: center;font-weight: bold;font-size: 20px;margin-bottom: 10px;}
.example--input{width: 100%;border: 2px solid #aaa;border-radius: 4px;padding: 10px;font-size: 20px;}
</style>
</head>
<body>
<div class="stage">
<div class="stage--bg"></div>
<div class="stage--content">
<svg class="stage--logo" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265 334">
<polygon class="border" points="46.1,290 5,290 5,35.7 36.2,35.7 36.2,12.6 45.7,6.1 55.4,12.6 55.4,35.7 209,35.7 209,12.7 219.2,6 229.2,12.5 229.3,35.7 260,35.7 260,290 78.2,290 46.1,322 "/>
<g>
<path class="st1" d="M63.5,85l-3.7,3.6c-2.5-2.7-5.4-4-8.6-4c-2.7,0-5,0.9-6.8,2.8c-1.8,1.8-2.8,4.1-2.8,6.8c0,1.9,0.4,3.5,1.2,5 c0.8,1.5,2,2.6,3.5,3.4s3.1,1.2,5,1.2c1.6,0,3-0.3,4.3-0.9s2.7-1.6,4.2-3.2l3.6,3.8c-2.1,2-4,3.4-5.9,4.2c-1.9,0.8-4,1.2-6.3,1.2 c-4.4,0-8-1.4-10.7-4.2c-2.8-2.8-4.2-6.3-4.2-10.7c0-2.8,0.6-5.3,1.9-7.5c1.3-2.2,3.1-3.9,5.5-5.3c2.4-1.3,4.9-2,7.6-2 c2.3,0,4.6,0.5,6.7,1.5C60.1,81.8,61.9,83.2,63.5,85z"/>
<path class="st1" d="M131.4,80.1h5.4l10.8,28.2h-5.6l-2.2-5.8h-11.5l-2.3,5.8h-5.6L131.4,80.1z M134.1,87.5l-3.8,9.7h7.5L134.1,87.5 z"/>
<path class="st1" d="M206.3,80.1h5.4v23h7.8v5.1h-13.2V80.1z"/>
</g>
<g>
<path class="st2" d="M39.8,143.6h15.4v5.2h-10v5.1h10v5.1h-10v7.4h10v5.3H39.8V143.6z"/>
<path class="st2" d="M119.2,143.6h5.1l12,18.5v-18.5h5.4v28.2h-5.2l-12-18.5v18.5h-5.4V143.6z"/>
<path class="st2" d="M207.3,143.6h6.3c4.1,0,7.1,0.5,9.1,1.5c2,1,3.6,2.7,4.9,4.9c1.3,2.3,1.9,5,1.9,8c0,2.2-0.4,4.2-1.1,6 s-1.7,3.3-3,4.5c-1.3,1.2-2.6,2-4.1,2.5c-1.5,0.5-4,0.7-7.7,0.7h-6.4V143.6z M212.7,148.8v17.8h2.5c2.4,0,4.2-0.3,5.3-0.8 c1.1-0.6,2-1.5,2.7-2.8c0.7-1.3,1.1-3,1.1-4.9c0-3-0.8-5.3-2.5-7c-1.5-1.5-3.9-2.2-7.3-2.2H212.7z"/>
<path class="st2" d="M46.2,211.2h5.4l10.8,28.2h-5.6l-2.2-5.8H43.2l-2.3,5.8h-5.6L46.2,211.2z M49,218.6l-3.8,9.7h7.5L49,218.6z"/>
<path class="st2" d="M121.9,211.2h5.7c3.1,0,5.3,0.3,6.6,0.8c1.3,0.6,2.4,1.5,3.2,2.8c0.8,1.3,1.2,2.8,1.2,4.6 c0,1.8-0.4,3.4-1.3,4.6c-0.9,1.2-2.2,2.2-4,2.8l6.7,12.5h-5.9l-6.3-11.9h-0.5v11.9h-5.4V211.2z M127.3,222.2h1.7 c1.7,0,2.9-0.2,3.5-0.7c0.6-0.4,1-1.2,1-2.2c0-0.6-0.2-1.1-0.5-1.6c-0.3-0.5-0.7-0.8-1.3-1c-0.5-0.2-1.5-0.3-2.9-0.3h-1.5V222.2z"/>
<path class="st2" d="M197.3,211.2h5.8l5.3,10.1l5.2-10.1h5.7l-8.2,16v12.2h-5.4v-12.2L197.3,211.2z"/>
<polygon class="st1" points="229.8,238 220.5,247.3 229.8,247.3 "/>
</g>
</svg>
<div class="stage--subtitle">No Dependences, Easy Setup, Mobile Compatibility and <strong class="stage--size">only <span class="stage--size-number">6 kb</span></strong></div>
</div>
</div>
<div class="content">
<div class="content--first">
<h1 class="content--h1">Calendary - Vanilla Datepicker</h1>
<p class="content--p">A Javascript library without a dependency of jQuery, Zepto, and etc ... Very simple to install and use. With only 6kb (minified) code, it's also well accepted on mobile devices</p>
<div class="content--block">
<h2 class="content--h2">Install / Usage</h2>
<h3 class="content--h3">Add script file</h3>
<code class="code"><span data-clipboard><<span class="code--tag">script</span> <span class="code--attr">src</span>=<span class="code--value">"https://cdn.rawgit.com/figuarnieri/calendary/master/calendary.min.js"</span>></<span class="code--tag">script</span>></span>
or
<span data-clipboard><<span class="code--tag">script</span> <span class="code--attr">src</span>=<span class="code--value">"path/js/calendary.min.js"</span>></<span class="code--tag">script</span>></span></code>
<h3 class="content--h3">Add style file</h3>
<code class="code"><span data-clipboard><<span class="code--tag">link</span> <span class="code--attr">rel</span>=<span class="code--value">"stylesheet"</span> <span class="code--attr">href</span>=<span class="code--value">"https://cdn.rawgit.com/figuarnieri/calendary/master/calendary.min.css"</span>></span>
or
<span data-clipboard><<span class="code--tag">link</span> <span class="code--attr">rel</span>=<span class="code--value">"stylesheet"</span> <span class="code--attr">href</span>=<span class="code--value">"path/css/calendary.min.css"</span>></span></code>
<h3 class="content--h3">Javascript Init</h3>
<code class="code"><span data-clipboard><<span class="code--tag">script</span>>
<span class="code--tag">new</span> <span class="code--value">Calendary('</span><span class="code--important">.selector-class</span><span class="code--value">')</span>;
</<span class="code--tag">script</span>></span>
or
<span data-clipboard><<span class="code--tag">script</span>>
<span class="code--tag">new</span> <span class="code--value">Calendary(</span>{
<span class="code--important">tag:</span> <span class="code--value">'.selector-class'</span>
}<span class="code--value">)</span>;
</<span class="code--tag">script</span>></span></code>
</div>
</div>
<div class="content--second">
<div class="content--block">
<h2 class="content--h1">Examples</h2>
<div class="example">
<div class="example--box">
<div class="example--item">
<h3 class="example--text">Simple Calendary</h3>
<div data-calendary=""></div>
</div>
</div>
<div class="example--box">
<div class="example--item">
<h3 class="example--text">Float Calendary <small>(input text</small>)</h3>
<input class="example--input" type="text" data-calendary="" name="" id="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content--third">
<div class="content">
<div class="content--block">
<h2 class="content--h2">Source</h2>
<p>
<a href="https://github.com/figuarnieri/calendary" target="_blank">Github</a> | <a href="https://twitter.com/figuarnieri" target="_blank">@figuarnieri</a>
</p>
</div>
<div class="page--block">
<h2 class="content--h2">License</h2>
<p>
The MIT License<br>
Copyright 2018 <sup>©</sup> <a href="https://figuarnieri.github.io/" target="_blank">Filipe Guarnieri</a>
</p>
</div>
</div>
</div>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.7.1/dist/clipboard.min.js"></script>
<script>const clipcode=new Clipboard('[data-clipboard]',{target:(e)=>{e.setAttribute('data-clipboard-copy','');return document.querySelector(e.dataset.clipboard==='data'?'[data-clipboard-copy] .code--important':'[data-clipboard-copy]')}});clipcode.on('success',(e)=>{e.trigger.removeAttribute('data-clipboard-copy');});</script>
<!-- <div data-calendary=""></div> -->
</div>
<script src="calendary.min.js"></script>
<script>
new Calendary('[data-calendary]');
/*new Calendary({
tag: '[data-calendary]',
todayTitle: 'Hoje',
date: '2018-01-01',
i18n: 'pt'
});*/
</script>
</body>
</html>