PageSourceSearch

https://sharnirio-work.github.io/

html sharnirio-work.github.io collected 2026-10-03 09:56:12 UTC 36,853 bytes, 763 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<title>Module 1</title>
8	<link media="all" rel="stylesheet" href="assets/css/module.css">
9	<link media="all" rel="stylesheet" href="assets/css/style.css">
10</head>
11<body id="body-module" class="body-module">
12	<div class="container">
13		<div class="module-links">
14			<a href="#tabs">tabs</a>
15			<a href="#tabs-to-accordion">tabs-to-accordion</a>
16			<a href="#tab-to-accordion-vert">tab-to-accordion-vert</a>
17			<a href="#tab-to-select">tab-to-select</a>
18			<a href="#accordion">accordion</a>
19			<a href="#viewportchecker-animate">viewportchecker-animate</a>
20			<a href="#slider-run">slider-run</a>
21			<a href="#js-custom-forms">js-custom-forms</a>
22			<a href="#jcf-select2">jc-select2</a>
23			<a href="#smooth-scroll">smooth-scroll</a>
24			<a href="#countdown">countdown</a>
25			<a href="#sticky-box">sticky-box</a>
26			<a href="#browser-detect">browser-detect</a>
27			<a href="#scriptToggleClassParents">scriptToggleClassParents</a>
28			<a href="#jquery-validate-form">jquery-validate-form</a>
29			<a href="#arrow-up-wrapper">arrow-up</a>
30			<a href="#magnific-popup">magnific-popup</a>
31			<a href="#jquery-rating-stars">jquery-rating-stars</a>
32			<a href="#table-responsive">table-responsive</a>
33			<a href="#fancybox">fancybox</a>
34			<a href="#datepicker">datepicker</a>
35			<a href="#tooltip">tooltip</a>
36			<a href="#Touch-Device-Detect">Touch-Device-Detect</a>
37			<a href="#add-class-for-focus">add-class-for-focus</a>
38			<a href="#lazy-load-img">lazy-load-img</a>
39			<a href="#input-mask">input-mask</a>
40		</div>
41	</div>
42<!-- module tabs start -->
43<div id="tabs" class="container module-block">
44	<h2>Folder ./module/tabs</h2>
45	<h2>FADE табы</h2>
46	<div class="fade-tabset">
47		<ul class="tabset">
48			<li><a href="#first-2" class="btn btn-default">First</a></li>
49			<li><a href="#second-2" class="btn btn-default">Second</a></li>
50			<li><a href="#third-2" class="btn btn-default">Third</a></li>
51		</ul>
52		<div class="tab-content">
53			<div id="first-2" class="tab">
54				<h2>First</h2>
55				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p>
56			</div>
57			<div id="second-2" class="tab active">
58				<h2>Second</h2>
59				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p>
60			</div>
61			<div id="third-2" class="tab">
62				<h2>Third</h2>
63				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias rem aut recusandae voluptatem, temporibus error magnam distinctio, vitae, esse, debitis et omnis dolore ratione. Sit numquam enim officia delectus odit!</p>
64			</div>
65		</div>
66	</div>
67	<h2>SLIDE табы</h2>
68	<div class="slide-tabset">
69		<ul class="tabset">
70			<li><a href="#first-1" class="btn btn-default active">First</a></li>
71			<li><a href="#second-1" class="btn btn-default">Second</a></li>
72			<li><a href="#third-1" class="btn btn-default">Third</a></li>
73		</ul>
74		<div class="tab-content">
75			<div id="first-1" class="tab active">
76				<h2>First</h2>
77				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p>
78			</div>
79			<div id="second-1" class="tab">
80				<h2>Second</h2>
81				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p>
82			</div>
83			<div id="third-1" class="tab">
84				<h2>Third</h2>
85				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias rem aut recusandae voluptatem, temporibus error magnam distinctio, vitae, esse, debitis et omnis dolore ratione. Sit numquam enim officia delectus odit!</p>
86			</div>
87		</div>
88	</div>
89	<h2>Табы без эффекта</h2>
90	<div class="no-effect-tabset">
91		<ul class="tabset">
92			<li><a href="#first-3" class="btn btn-default active">First</a></li>
93			<li><a href="#second-3" class="btn btn-default">Second</a></li>
94			<li><a href="#third-3" class="btn btn-default">Third</a></li>
95		</ul>
96		<div class="tab-content">
97			<div id="first-3" class="tab active">
98				<h2>First</h2>
99				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p>
100			</div>
101			<div id="second-3" class="tab">
102				<h2>Second</h2>
103				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p>
104			</div>
105			<div id="third-3" class="tab">
106				<h2>Third</h2>
107				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias rem aut recusandae voluptatem, temporibus error magnam distinctio, vitae, esse, debitis et omnis dolore ratione. Sit numquam enim officia delectus odit!</p>
108			</div>
109		</div>
110	</div>
111	<h2>CUSTOM EFFECT табы</h2>
112	<div class="custom-tabset">
113		<ul class="tabset">
114			<li><a href="#first-4" class="btn btn-default active">First</a></li>
115			<li><a href="#second-4" class="btn btn-default">Second</a></li>
116			<li><a href="#third-4" class="btn btn-default">Third</a></li>
117		</ul>
118		<div class="tab-content">
119			<div id="first-4" class="tab active">
120				<h2>First</h2>
121				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p>
122			</div>
123			<div id="second-4" class="tab">
124				<h2>Second</h2>
125				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p>
126			</div>
127			<div id="third-4" class="tab">
128				<h2>Third</h2>
129				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias rem aut recusandae voluptatem, temporibus error magnam distinctio, vitae, esse, debitis et omnis dolore ratione. Sit numquam enim officia delectus odit!</p>
130			</div>
131		</div>
132	</div>
133</div>
134<!-- module tabs -->
135<!-- module tabs-to-accordion start -->
136<div id="tabs-to-accordion" class="container module-block">
137	<h2>Folder ./module/tabs-to-accordion</h2>
138	<div class="tab-to-accordion">
139		<ul class="tabset-list">
140			<li><a href="#tab1">Tab 1</a></li>
141			<li><a href="#tab2">Tab 2</a></li>
142			<li><a href="#tab3">Tab 3</a></li>
143			<li class="active"><a href="#tab4">Tab 4</a></li>
144		</ul>
145		<div class="tab-container">
146			<div id="tab1">
147				<h2>Tab 1 Lorem ipsum dolor sit amet</h2>
148				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod labore sapiente sit facilis nemo incidunt adipisci tenetur aliquam iusto eum! Expedita vel sit, laudantium eos error veritatis unde vero. Eveniet!</p>
149			</div>
150			<div id="tab2">
151				<h2>Tab 2 Lorem ipsum dolor sit amet</h2>
152				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod labore sapiente sit facilis nemo incidunt adipisci tenetur aliquam iusto eum! Expedita vel sit, laudantium eos error veritatis unde vero. Eveniet!</p>
153			</div>
154			<div id="tab3">
155				<h2>Tab 3 Lorem ipsum dolor sit amet</h2>
156				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod labore sapiente sit facilis nemo incidunt adipisci tenetur aliquam iusto eum! Expedita vel sit, laudantium eos error veritatis unde vero. Eveniet!</p>
157			</div>
158			<div id="tab4">
159				<h2>Tab 4 Lorem ipsum dolor sit amet</h2>
160				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod labore sapiente sit facilis nemo incidunt adipisci tenetur aliquam iusto eum! Expedita vel sit, laudantium eos error veritatis unde vero. Eveniet!</p>
161			</div>
162		</div>
163	</div>
164</div>
165<!-- module accordion end -->
166<!-- module tab-to-select start -->
167<div id="tab-to-select" class="container module-block">
168	<h2>Folder ./module/tab-to-select</h2>
169	<div class="tab-container">
170		<div class="tabset-select">
171			<span class="tabset-toggle"></span>
172			<ul class="tabset-tab">
173				<li class="active">
174					<a href="#tab1-0">Home</a>
175				</li>
176				<li>
177					<a href="#tab2-0">Products</a>
178				</li>
179				<li>
180					<a href="#tab3-0">About</a>
181				</li>
182			</ul>
183		</div>
184		<div class="tab-content">
185			<div id="tab1-0"><h2>Home tab</h2>
186				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa repellat incidunt ratione eum ducimus sit voluptatibus reprehenderit atque? Consequuntur incidunt iste totam rerum magni illum velit molestiae sed maxime aliquam?</p>
187			</div>
188			<div id="tab2-0"><h2>Products tab</h2>
189				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa repellat incidunt ratione eum ducimus sit voluptatibus reprehenderit atque? Consequuntur incidunt iste totam rerum magni illum velit molestiae sed maxime aliquam?</p>
190			</div>
191			<div id="tab3-0"><h2>About tab</h2>
192				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa repellat incidunt ratione eum ducimus sit voluptatibus reprehenderit atque? Consequuntur incidunt iste totam rerum magni illum velit molestiae sed maxime aliquam?</p>
193			</div>
194		</div>
195	</div>
196</div>
197<!-- module tab-to-select -->
198<!-- module tabs-to-accordion start -->
199<div id="tab-to-accordion-vert" class="container module-block">
200	<h2>Folder ./module/tab-to-accordion-vert</h2>
201	<div id="tab-acc">
202		<ul class="resp-tabs-list tab-acc">
203			<li>Cucumber</li>
204			<li>Ashwagandha</li>
205			<li>Comfrey root</li>
206			<li>Elderflower</li>
207		</ul>
208		<div class="resp-tabs-container tab-acc">
209			<div>
210				<p>1Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.</p>
211			</div>
212			<div>
213				<p>2Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.</p>
214			</div>
215			<div>
216				<p>3Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.</p>
217			</div>
218			<div>
219				<p>4Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.</p>
220			</div>
221		</div>
222	</div>
223</div>
224<!-- module tabs-to-accordion end -->
225<!-- module accordion start -->
226<div id="accordion" class="container module-block">
227	<h2>Folder ./module/accordion</h2>
228	<div class="description-block">
229		<pre>		jQuery('ul.accordion').slideAccordion({
230		activeClass:'open',      // класс "active" открытого состояния
231		opener:'>a.opener',      // селектор ссылки-opener
232		slider:'>div.slide',     // селектор дропа аккордиона
233		collapsible:false,       // разрешать сворачивать активный элемент аккордиона
234		animSpeed: 300,          // скорость анимации аккордиона
235		scrollToActiveItem: {    // прокрутка к активному элементу аккордиона
236			enable: true,
237			breakpoint: 1920, // max-width
238			animSpeed: 600,
239			extraOffset: null
240		}
241	});</pre>
242	</div>
243	<div class="live-example">
244		<h3>Обычный аккордион</h3>
245		<ul class="accordion simple-accordion">
246			<li class="active">
247				<a href="#" class="opener">opener 1</a>
248				<div class="slide">
249					<p>Slide content 1<br /> Lorem ipsum</p>
250				</div>
251			</li>
252			<li>
253				<a href="#" class="opener">opener 2</a>
254				<div class="slide">
255					<p>Slide content 2</p>
256				</div>
257			</li>
258			<li>
259				<a href="#" class="opener">opener 3</a>
260				<div class="slide">
261					<p>Slide content 3 Lorem ipsum<br /> dolor sit amet</p>
262				</div>
263			</li>
264		</ul>
265	</div>
266	<div class="live-example">
267		<h3>Многоуровневый аккордион</h3>
268		<ul class="accordion multilevel-accordion">
269			<li>
270				<a href="#" class="opener">opener 1</a>
271				<div class="slide">
272					<ul class="accordion-sub">
273						<li>
274							<a class="opener" href="#">Sub Item 1</a>
275							<div class="slide">
276								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi.</p>
277							</div>
278						</li>
279						<li>
280							<a class="opener" href="#">Sub Item 2</a>
281							<div class="slide">
282								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi.</p>
283							</div>
284						</li>
285						<li>
286							<a class="opener" href="#">Sub Item 3</a>
287							<div class="slide">
288								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi.</p>
289							</div>
290						</li>
291					</ul>
292					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus officiis obcaecati voluptatum enim minima ullam vitae quo corporis tenetur officia, quas nesciunt blanditiis velit cumque iste recusandae quam! Cupiditate, neque.</p>
293				</div>
294			</li>
295			<li>
296				<a href="#" class="opener">opener 2</a>
297				<div class="slide">
298					<p>Slide content 2</p>
299					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus officiis obcaecati voluptatum enim minima ullam vitae quo corporis tenetur officia, quas nesciunt blanditiis velit cumque iste recusandae quam! Cupiditate, neque.</p>
300				</div>
301			</li>
302			<li>
303				<a href="#" class="opener selected">opener 3</a>
304				<div class="slide">
305					<p>Slide content 3</p>
306					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus officiis obcaecati voluptatum enim minima ullam vitae quo corporis tenetur officia, quas nesciunt blanditiis velit cumque iste recusandae quam! Cupiditate, neque.</p>
307				</div>
308			</li>
309		</ul>
310	</div>
311</div>
312<!-- module tabs-to-accordion end -->
313<!-- module viewportchecker-animate start -->
314<div id="viewportchecker-animate" class="container module-block">
315	<h2>Folder ./module/viewportchecker-animate</h2>
316	<h2 class="a-up">just example animate - add class "a-up" to you block</h2>
317</div>
318<!-- module viewportchecker-animate end -->
319<!-- module slider-run start -->
320<div id="slider-run" class="container module-block">
321	<h2>Folder ./module/slider-run</h2>
322	<div class="ticker-left" style="margin-bottom: 30px">
323		<div class="ticker-item"><img src="assets/img/img.png" /></div>
324		<div class="ticker-item"><img src="assets/img/img.png" /></div>
325		<div class="ticker-item"><img src="assets/img/img.png" /></div>
326		<div class="ticker-item"><img src="assets/img/img.png" /></div>
327		<div class="ticker-item"><img src="assets/img/img.png" /></div>
328		<div class="ticker-item"><img src="assets/img/img.png" /></div>
329		<div class="ticker-item"><img src="assets/img/img.png" /></div>
330	</div>
331	<div class="ticker-right">
332		<div class="ticker-item"><img src="assets/img/img.png" /></div>
333		<div class="ticker-item"><img src="assets/img/img.png" /></div>
334		<div class="ticker-item"><img src="assets/img/img.png" /></div>
335		<div class="ticker-item"><img src="assets/img/img.png" /></div>
336		<div class="ticker-item"><img src="assets/img/img.png" /></div>
337		<div class="ticker-item"><img src="assets/img/img.png" /></div>
338		<div class="ticker-item"><img src="assets/img/img.png" /></div>
339	</div>
340</div>
341<!-- module slider-run -->
342<!-- module js-custom-formsn start -->
343<div id="js-custom-forms" class="container module-block">
344	<h2>Folder ./module/js-custom-forms</h2>
345	<div class="description-block">Для отмены действия плагина на каком либо элементе добавить класс "jcf-ignore" на этот элемент</div>
346	<div class="jcf">
347		<section class="intro">
348			<h1>JavaScript Custom Forms</h1>
349			<p>This library allows crossbrowser form elements customization using CSS.</p>
350			<p>Supported elements are following: <strong>select, checkbox, radio, file input</strong> (and more coming)</p>
351		</section>
352		<section class="demo-number">
353			<h2>Number inputs</h2>
354			<input type="number" min="-3" max="20" step="2">
355			<input type="number" value="2">
356			<input type="number" step="7" value="5" min="-20" max="45">
357			<input type="number" disabled value="7">
358		</section>
359		<section class="demo-selects" style="padding: 20px 0">
360			<h2>Select</h2>
361			<p>Select module provides an ability to customize not only select area but also its dropdown. Multiple selects, keyboard navigation and custom scrollbars are supported in the option list.</p>
362			<div>
363				<div>
364					<select>
365						<option value="v1">Native dropdown</option>
366						<option value="v2">Option 1</option>
367						<option value="v3">Option 2</option>
368						<option value="v4">Option 3</option>
369						<option value="v5">Option 4</option>
370						<option value="v6">Option 5</option>
371					</select>
372				</div>
373				<div>
374					<select multiple placeholder="Multiple select" data-jcf="{&quot;multipleCompactStyle&quot;: true}">
375						<option value="v2">Option 1</option>
376						<option value="v3">Option 2</option>
377						<option value="v4">Option 3</option>
378						<option value="v5">Option 4</option>
379						<option value="v6">Option 5</option>
380					</select>
381				</div>
382				<div>
383					<select>
384						<option class="circle red" value="v2">Option 1</option>
385						<option class="circle grenn" value="v3">Option 2</option>
386						<option value="v4">Option 3</option>
387						<option value="v5">Option 4</option>
388						<option value="v6">Option 5</option>
389					</select>
390				</div>
391				<div>
392					<select disabled="disabled">
393						<option value="v4">Option 1</option>
394						<option value="v5" selected>Disabled select</option>
395					</select>
396				</div>
397			</div>
398			<div>
399				<div>
400					<select size="6">
401						<optgroup label="Test group1">
402							<option value="v1">Option 1</option>
403							<option value="v2">Option 2</option>
404							<option value="v3" selected>Option 3</option>
405						</optgroup>
406						<option value="v4">Option 4</option>
407						<option value="v5">Option 5</option>
408						<optgroup label="Test group2">
409							<option value="v6">Option 6</option>
410							<option value="v7" disabled>Option 7 (disabled)</option>
411							<option value="v8">Option 8</option>
412							<option value="v9">Option 9</option>
413						</optgroup>
414						<option value="v10">Option 10</option>
415						<option value="v11">Option 11</option>
416					</select>
417					<select class="multitest" size="7" multiple>
418						<optgroup label="Multiple select test">
419							<option>Option 1</option>
420							<option>Option 2</option>
421							<option>Option 3</option>
422							<option>Option 4</option>
423							<option>Option 5</option>
424						</optgroup>
425						<optgroup label="Test group3">
426							<option>Option 6</option>
427							<option selected>Option 7</option>
428							<option selected>Option 8</option>
429							<option>Option 9</option>
430						</optgroup>
431						<option>Option 10</option>
432						<option>Option 11</option>
433						<option>Option 12</option>
434						<option>Option 13</option>
435						<option>Option 14</option>
436						<option>Option 15</option>
437						<option>Option 16</option>
438						<option>Option 17</option>
439						<option>Option 18</option>
440						<option>Option 19</option>
441						<option>Option 20</option>
442						<option>Option 21</option>
443						<option>Option 22</option>
444						<option>Option 23</option>
445					</select>
446				</div>
447			</div>
448		</section>
449		<section class="demo-checkboxes">
450			<h2>Checkboxes and radios</h2>
451			<p>Focused and pressed states are also handled.</p>
452			<div>
453				<div>
454					<input type="checkbox" id="chk1" />
455					<label title="Unchecked state" for="chk1">Unchecked</label>
456				</div>
457				<div>
458					<input type="checkbox" checked="checked" id="chk2" />
459					<label title="Checked state" for="chk2">Checked</label>
460				</div>
461				<div>
462					<input type="checkbox" disabled="disabled" id="chk3" />
463					<label title="Checked state" for="chk3">Disabled</label>
464				</div>
465				<div>
466					<input type="checkbox" disabled="disabled" checked="checked" id="chk4" />
467					<label title="Checked state" for="chk4">Disabled checked</label>
468				</div>
469			</div>
470			<div>
471				<div>
472					<input type="radio" name="rtest" id="rad1" />
473					<label for="rad1" title="Unchecked state">Unchecked</label>
474				</div>
475				<div>
476					<input type="radio" name="rtest" checked="checked" id="rad2" data-jcf='{"wrapNative": true}' />
477					<label for="rad2" title="Checked state">Checked</label>
478				</div>
479				<div>
480					<input type="radio" name="rtest" disabled="disabled" checked="checked" id="rad3" />
481					<label for="rad3" title="Disabled state">Disabled</label>
482				</div>
483			</div>
484		</section>
485		<section class="demo-file">
486			<h2>File input</h2>
487			<p>Simple file input customization. Custom browse button text, focus/pressed state, selected file extension class.</p>
488			<div>
489				<label>Normal:</label>
490				<input type="file">
491			</div>
492			<div>
493				<label>Disabled:</label>
494				<input type="file" disabled>
495			</div>
496		</section>
497	</div>
498</div>
499<!-- module js-custom-forms end -->
500<!-- module jcf-select2 start -->
501<div id="jcf-select2" class="container module-block">
502	<h2>Folder ./module/jcf-select2</h2>
503	<div class="description-block">More info see - <a href="https://github.com/select2/select2">https://github.com/select2/select2</a></div>
504	<div class="js-select2-wrapper">
505		<select class="js-example-basic">
506			<option value="AL">Option for 1</option>
507			<option value="WY">Option 2</option>
508			<option value="v-1">Option 3</option>
509			<option value="v-2">Option 4</option>
510			<option value="v-3">Option 5</option>
511			<option value="v-4">Option 6</option>
512			<option value="v-5">Option 7</option>
513			<option value="v-6">Option 8</option>
514			<option value="v-7">Option 9</option>
515			<option value="v-8">Option 10</option>
516		</select>
517	</div>
518</div>
519<!-- module jcf-select2 -->
520<!-- module smooth-scroll start -->
521<div id="smooth-scroll" class="container module-block">
522	<h2>Folder ./module/smooth-scroll</h2>
523	<div class="description-block">Для плавного перемещения по якорным ссылкам</div>
524	<div class="just-example-block" style="text-align: center;margin: 10px 0;font-size: 25px;"><a class="scroll-link" href="#body-module">LINK UP TO BODY</a></div>
525	<div class="just-example-block" style="text-align: center;margin: 10px 0;font-size: 25px;"><a class="scroll-link" href="#body-module" data-scrollTime="10000" data-scrollBottom="1000">LINK UP TO BODY WITH DATA OPTIONS</a></div>
526</div>
527<!-- module smooth-scroll end -->
528<!-- module countdown start -->
529<div id="countdown" class="container module-block">
530	<h2>Folder ./module/countdown</h2>
531	<div id="timer" class="timer"></div>
532	<br>
533	<div id="timer1" class="timer"></div>
534</div>
535<!-- module countdown end -->
536<!-- module sticky-box start -->
537<div id="sticky-box" class="container module-block">
538	<h2>Folder ./module/sticky-box</h2>
539	<div id="example-sticky-block" style="background: tomato; padding: 20px;">example-sticky-block</div>
540	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore nesciunt perferendis optio ut reprehenderit animi doloremque nisi fugiat debitis, facilis ab praesentium commodi quam, incidunt iusto! Dolores, voluptate excepturi explicabo incidunt asperiores molestias iusto perferendis molestiae deserunt commodi consequuntur quidem, enim aliquid praesentium debitis dignissimos quibusdam, nulla corporis ullam blanditiis dolorum est quaerat aperiam ab id. Eveniet velit vitae odio perferendis porro, obcaecati veritatis! Autem dicta, beatae deleniti a placeat perferendis ab veniam? Maxime et aperiam, nam sed totam fugiat labore illum, dolor neque adipisci aspernatur magni ipsam eum beatae aliquid sunt fuga consequatur nemo alias delectus optio dignissimos ab! Earum ex laborum accusamus beatae ipsa iste et perspiciatis molestiae, blanditiis sint illo voluptas voluptate culpa autem id quaerat impedit voluptatibus laudantium cupiditate optio cum odit totam! Dignissimos suscipit expedita odit, placeat sit possimus. Voluptates quia accusantium quod quae aspernatur aliquid. Vero magnam similique, nulla labore, obcaecati dolorem, quas eum error sed alias assumenda dolor necessitatibus provident ullam! Incidunt ut laboriosam est quisquam deserunt eaque tenetur nisi aliquid repudiandae! Facere a perferendis officiis ut sunt saepe, deleniti totam ipsum quaerat animi, in nesciunt maxime blanditiis temporibus. Modi cum commodi obcaecati accusamus. Illo odit reiciendis sapiente culpa iure ad explicabo alias architecto facere, mollitia quia neque eius cum et nulla sit voluptas modi error atque nemo, placeat cumque itaque dolorum minima delectus! Mollitia, doloribus, aliquid at velit voluptatem harum, optio impedit repellendus unde tempore voluptatum ad sunt, vitae amet. Veritatis, blanditiis! Eveniet delectus soluta neque, quod debitis sapiente numquam sequi.</p>
541</div>
542<!-- module sticky-box end -->
543<!-- module tabs-to-accordion start -->
544<div id="browser-detect" class="container module-block">
545	<h2>Folder ./module/browser-detect</h2>
546	<div class="description-block">Скрипт определения браузера, движка и OS, срабатывает при подключении прописывает название в тег html</div>
547	
548</div>
549<!-- module tabs-to-accordion end -->
550<!-- module scriptToggleClassParents start -->
551<div id="scriptToggleClassParents" class="container module-block">
552	<h2>Folder ./module/scriptToggleClassParents</h2>
553	<div class="description-block">Скрытие показ блока по другому блоку, с привязкой к родителю + добавления класса родителю</div>
554	<div class="toggle-block-wrapper">
555		<div class="toggle-block">
556			<h2>Toggle block - click me</h2>
557		</div>
558		<div class="toggle-block-hide" style="display: none;">
559			<h2>Toggle block</h2>
560		</div>
561	</div>
562</div>
563<!-- module scriptToggleClassParents -->
564<!-- module jquery-validate-form start -->
565<div id="jquery-validate-form" class="container module-block">
566	<h2>Folder ./module/jquery-validate-form</h2>
567	<div class="description-block">Валидация формы + отправка ajax</div>
568	<form class="sub-form ajax-form-sent" method="post" action="../../module/jquery-validate-form/email-sender.php">
569		<fieldset>
570			<p> <input class="am-send-me" type="text" placeholder="Your name" name="name" minlength="4" data-rule-maxlength="16" data-rule-required="true"> </p>
571			<p> <input class="am-send-me" type="email" placeholder="Your email" data-rule-email="true" data-rule-required="true"> </p>
572			<p> <textarea class="am-send-me" placeholder="Your message" minlength="10" name="text"  data-rule-required="true"></textarea> </p>
573			<p><input type="submit" value="Submit"></p>
574			<div class="success-response">Email sent successfully</div>
575			<div class="error-response">Something went wrong, please try again later</div>
576		</fieldset>
577	</form>
578</div>
579<!-- module jquery-validate-form -->
580<!-- module arrow-up start -->
581<div id="arrow-up-wrapper" class="container module-block">
582	<h2>Folder ./module/arrow-up</h2>
583	<div class="description-block">Кнопка вверх с небольшой анимацией появления исчезания вверху</div>
584	<a class="arrow-up" id="arrow-up" href="#">↑</a>
585</div>
586<!-- module arrow-up -->
587<!-- module magnific-popup start -->
588<div id="magnific-popup" class="container module-block">
589	<h2>Folder ./module/magnific-popup</h2>
590	<!-- popup__link start -->
590<a href="#request" class="popup-show" style="display: block; width: 100px; margin: 30px auto; font-size: 25px; color: red;">Popup</a>
591	<!-- popup__link end -->
592	<!-- popup__content start -->
593	<div id="request" class="modal mfp-hide">
594		<div class="modal__header">
595			<h4 class="modal__title">Заголовок</h4><button class="modal__close mfp-close">×</button></div>
596		<div class="modal__body">
597			<p>Текст</p>
598		</div>
599		<div class="modal__footer"><button class="modal__btn popup-close">Закрыть</button></div>
600	</div>
601	<!-- popup__content end -->
602</div>
603<!-- module magnific-popup -->
604<!-- module jquery-rating-stars start -->
605<div id="jquery-rating-stars" class="container module-block">
606	<h2>Folder ./module/jquery-rating-stars</h2>
607	<div class="description-block">Рейтинг с возможностью выбора - более подробно http://biznesguide.ru/coding/156.html</div>
608	<div id="rating_1">
609		<input type="hidden" name="vote-id" value="1">
610	</div>
611</div>
612<!-- module jquery-rating-stars -->
613<!-- module table-responsive start -->
614<div id="table-responsive" class="container module-block">
615	<h2>Folder ./module/table-responsive</h2>
616	<table class="table-responsive">
617		<thead>
618			<tr>
619				<th>First Name</th>
620				<th>Last Name</th>
621				<th>Job data-label</th>
622				<th>Favorite Color</th>
623				<th>Wars or Trek?</th>
624				<th>What is Lorem Ipsum?</th>
625				<th>Date of Birth</th>
626			</tr>
627		</thead>
628		<tbody>
629			<tr>
630				<td data-label="First Name"><span>James</span></td>
631				<td data-label="Last Name"><span>Matman</span></td>
632				<td data-label="Job data-label"><span>Chief Sandwich Eater Chief Sandwich Eater</span></td>
633				<td data-label="Favorite Color"><span>Lettuce Green</span></td>
634				<td data-label="Wars or Trek?"><span>Trek</span></td>
635				<td data-label="What is Lorem Ipsum?"><span>Digby Green</span></td>
636				<td data-label="Date of Birth"><span>January 13, 1979</span></td>
637			</tr>
638			<tr>
639				<td data-label="First Name"><span>The</span></td>
640				<td data-label="Last Name"><span>Tick</span></td>
641				<td data-label="Job data-label"><span>Crimefighter Sorta</span></td>
642				<td data-label="Favorite Color"><span>Blue</span></td>
643				<td data-label="Wars or Trek?"><span>Wars</span></td>
644				<td data-label="What is Lorem Ipsum?"><span>John Smith</span></td>
645				<td data-label="Date of Birth"><span>July 19, 1968</span></td>
646			</tr>
647		</tbody>
648	</table>
649</div>
650<!-- module table-responsive -->
651<!-- module fancybox start -->
652<div id="fancybox" class="container module-block">
653	<h2>Folder ./module/fancybox</h2>
654	<a class="single_image" href="assets/img/img.png"><img src="assets/img/img.png" alt=""/></a>
655</div>
656<!-- module fancybox -->
657<!-- module datepicker start -->
658<div id="datepicker" class="container module-block">
659	<h2>Folder ./module/datepicker</h2>
660	<input class="datepicker" type="text" placeholder="Date" readonly>
661</div>
662<!-- module datepicker -->
663<!-- module tooltip start -->
664<div id="tooltip" class="container module-block">
665	<h2>Folder ./module/tooltip</h2>
666	<div class="live-example">
667		<h2>Пример работы Tooltip для инлайновых ссылок (наведите на ссылки в тексте)</h2>
668		<p>Proin tincidunt, <a title="tooltip text 1...tooltip text 1...tooltip text 1...tooltip text 1...tooltip text 1...tooltip text 1...tooltip text 1..." href="#">orci eu consectetur interdum</a>, enim tellus imperdiet odio, <a title="tooltip text 2..." href="#">id porttitor enim pede sit amet erat</a>..</p>
669		<div class="live-example">
670			<h2>Пример работы Tooltip с различными способами позиционирования</h2>
671			<ul class="tooltip-demo-list">
672				<li><a title="Tooltip at top-left position..." rel="top-left" href="#">&#8598; TopLeft</a></li>
673				<li><a title="Tooltip at top-center position..." rel="top-center" href="#">TopCenter &#8593;</a></li>
674				<li><a title="Tooltip at top-right position..." rel="top-right" href="#">TopRight &#8599;</a></li>
675				<li><a title="CenterLeft" rel="center-left" href="#">&#8592; CenterLeft</a></li>
676				<li>
677					<!-- CenterCenter? -->
678				</li>
679				<li><a title="CenterRight" rel="center-right" href="#">CenterRight &#8594;</a></li>
680				<li><a title="BottomLeft" rel="bottom-left" href="#">&#8601; BottomLeft</a></li>
681				<li><a title="BottomCenter" rel="bottom-center" href="#">BottomCenter &#8595;</a></li>
682				<li><a title="BottomRight" rel="bottom-right" href="#">BottomRight &#8600;</a></li>
683			</ul>
684		</div>
685		<div class="live-example">
686			<h2>Пример работы Tooltip с кастомной структурой</h2>
687			<div class="custom-example">
688				<button title="test custom tooltip content...">Test Button</button>
689			</div>
690		</div>
691	</div>
692</div>
693<!-- module tooltip -->
694<!-- module Touch-Device-Detect start -->
695<div id="Touch-Device-Detect" class="container module-block">
696	<h2>Folder ./module/Touch-Device-Detect</h2>
697	<div class="message-touch"></div>
698</div>
699<!-- module Touch-Device-Detect -->
700<!-- module add-class-for-focus start -->
701<div id="add-class-for-focus" class="container module-block">
702	<h2>Folder ./module/add-class-for-focus</h2>
703	<form>
704		<h1>Add class parents for focus input example:</h1>
705		<div class="focus-block-ex">
706			<input type="text" style="background: #ccc;">
707		</div>
708			<div class="focus-block-ex">
709				<input type="text" style="background: #ccc;">
710		</div>
711	</form>
712</div>
713<!-- module add-class-for-focus -->
714<!-- module input-mask start -->
715<div id="input-mask" class="container module-block">
716	<h2>Folder ./module/input-mask</h2>
717	<form>
718		<input class="number" placeholder="xxxx xxxx xxxx xxxx" maxlength="19" im-insert="true">
719		<input class="phone" type="tel" placeholder="(xxx) xxx-xx-xx"  maxlength="15" im-insert="true">
720		<button>Send</button>
721	</form>
722</div>
723<!-- module input-mask -->
724<!-- loading JS Start -->
725<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
vendor: 2 bytes, line 725
725
726<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
vendor: 2 bytes, line 726
726
727<script>
728	window.jQuery || document.write('
728<script src="js/jquery-3.2.1.min.js" defer><\/script>')
729</script>
vendor: 2 bytes, line 729
729
730<script src="assets/js/module.js" defer></script>
730
731<!-- loading JS End -->
732<!--<Deject>-->
733<!--Removing zone start -->
734<link rel="stylesheet" href="assets/css/development.css">
735<div class="dev-scripts-block">
736	<div class="responsive-breakpoint">
737		<div class="responsive-breakpoint-checkbox">
738			<input class="responsive-breakpoint-checkbox__checkbox" type="checkbox" id="responsive-breakpoint-checkbox__checkbox" />
739			<label class="responsive-breakpoint-checkbox__label" for="responsive-breakpoint-checkbox__checkbox"></label>
740		</div>
741		<!-- <div class="responsive-breakpoint__min">MOBILE FIRST</div> -->
742		<div class="responsive-breakpoint__max">breakpoint</div>
743		<div class="responsive-breakpoint__strictly"></div>
744		<div class="responsive-breakpoint__pixel-ratio"></div>
745	</div>
746	<div class="scroll-up-plugins">
747		<div class="scroll-up-plugins__button scroll-up-plugins__button--25"></div>
748		<div class="scroll-up-plugins__button scroll-up-plugins__button--50"></div>
749		<div class="scroll-up-plugins__button scroll-up-plugins__button--75"></div>
750	</div>
751	<div class="widget_wrap"><div class="widget_list"></div></div>
752</div>
753<div class="button-all-off">
754		<div class="button-all-off button-all-off--aava">
755		<input id="button-all-off" type="checkbox" checked="checked">
756		<label for="button-all-off" data-on-text="On" data-off-text="Off"></label>
757		</div>
758</div>
759<script src="assets/js/development.js"></script>
759
760<!--Removing zone end -->
761<!--</Deject>-->
762</body>
763</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.