-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathindex.html
168 lines (141 loc) · 8.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HystModal DEMO</title>
</head>
<body>
<div class="scr3">
<div class="container">
<div class="block-title block-title--white">HystModal Demo</div>
<div class="scr3__wrap flexi">
<button class="button demobuttons" data-hystmodal="#modalSimple">Simple windows</button>
<button class="button demobuttons" data-hystmodal="#modalLong">Long text</button>
<button class="button demobuttons" data-hystmodal="#modalForms">Modal Form</button>
<button class="button demobuttons" data-hystmodal="#modalVideo">Modal Video</button>
</div>
<a href="https://addmorescripts.github.io/hystModal/" class="button demobuttons demobuttons--min">HystModal
Documentation</a>
</div>
</div>
<div class="fxied-el" data-hystfixed>
Пример фиксированного элемента на весь экран. Когда скролл пропадает - к элементу добавляется margin-right
</div>
<div class="fxied-el2" data-hystfixed>
Элемент справа
</div>
<div class="hystmodal" id="modalLoading" aria-hidden="true">
<div class="hystmodal__window hystmodal__window--loading" role="dialog" aria-modal="true">
<button class="hystmodal__close" data-hystclose>Закрыть</button>
</div>
</div>
<div class="hystmodal" id="modalSimple" aria-hidden="true">
<div class="hystmodal__window" role="dialog" aria-modal="true">
<button class="hystmodal__close" data-hystclose>Закрыть</button>
<div class="hystmodal__styled">
<div class="h1">Website Overview</div>
<p>
Websites have many functions and can be used in various fashions; a website can be a personal website, a
commercial website, a government website or a non-profit organization website. Websites can be the work of
an individual, a business or other organization, and are typically dedicated to a particular topic or
purpose.
</p>
<p>Any website can contain a hyperlink to any other website, so the distinction between individual sites, as
perceived by the user, can be blurred. Websites are written in, or converted to, HTML (Hyper Text Markup
Language) and are accessed using a software interface classified as a user agent. </p>
<p>text from <a href="https://en.wikipedia.org/wiki/Website">Wikipedia</a></p>
<button data-hystmodal="#modalLong">Open long modal</button>
</div>
</div>
</div>
<div class="hystmodal hystmodal--simple" id="modalLong" aria-hidden="true">
<div class="hystmodal__window hystmodal__window--long" role="dialog" aria-modal="true">
<button class="hystmodal__close" data-hystclose>Закрыть</button>
<div class="hystmodal__styled">
<div class="h1">Website Overview</div>
<p>
Websites have many functions and can be used in various fashions; a website can be a personal website, a
commercial website, a government website or a non-profit organization website. Websites can be the work of
an individual, a business or other organization, and are typically dedicated to a particular topic or
purpose.
</p>
<p>Any <a href="https://en.wikipedia.org/wiki/Website">website</a> can contain a hyperlink to any other
website, so the distinction between individual sites, as perceived by the user, can be blurred. Websites are
written in, or converted to, HTML (Hyper Text Markup Language) and are accessed using a software interface
classified as a user agent. </p>
<div class="h2">Static website</div>
<p>A static website is one that has web pages stored on the server in the format that is sent to a client web
browser. It is primarily coded in Hypertext Markup Language (HTML); Cascading Style Sheets (CSS) are used to
control appearance beyond basic HTML. Images are commonly used to effect the desired appearance and as part
of the main content. Audio or video might also be considered "static" content if it plays automatically or
is generally non-interactive. This type of website usually displays the same information to all visitors.
Similar to handing out a printed brochure to customers or clients, a static website will generally provide
consistent, standard information for an extended period of time. Although the website owner may make updates
periodically, it is a manual process to edit the text, photos and other content and may require basic
website design skills and software. Simple forms or marketing examples of websites, such as classic website,
a five-page website or a brochure website are often static websites, because they present pre-defined,
static information to the user. This may include information about a company and its products and services
through text, photos, animations, audio/video, and navigation menus.</p>
<img src="https://addmorescripts.github.io/hystModal/demo/sample1.jpg" alt="Sample Image">
<p>Static websites can be edited using four broad categories of software:</p>
<button data-hystmodal="#modalSimple" data-stacked>Open simple modal</button>
<button data-hystmodal="#modalForms">Another button</button>
<ul>
<li>Text editors, such as Notepad or TextEdit, where content and HTML markup are manipulated directly within
the editor program</li>
<li>WYSIWYG offline editors, such as Microsoft FrontPage and Adobe Dreamweaver (previously Macromedia
Dreamweaver), with which the site is edited using a GUI and the final HTML markup is generated
automatically by the editor software</li>
<li>WYSIWYG online editors which create media rich online presentation like web pages, widgets, intro,
blogs, and other documents.</li>
<li>Template-based editors such as iWeb allow users to create and upload web pages to a web server without
detailed HTML knowledge, as they pick a suitable template from a palette and add pictures and text to it
in a desktop publishing fashion without direct manipulation of HTML code.</li>
</ul>
<p>text from <a href="https://en.wikipedia.org/wiki/Website">Wikipedia</a></p>
</div>
</div>
</div>
<div class="hystmodal hystmodal--simple" id="modalForms" aria-hidden="true">
<div class="hystmodal__wrap">
<div class="hystmodal__window hystmodal__window--form" role="dialog" aria-modal="true">
<button class="hystmodal__close" data-hystclose>Закрыть</button>
<div class="hystmodal__styled">
<div class="loginblock__h1">Modal form example</div>
<form action="#" method="POST">
<div class="formitem">
<input type="text" name="username" placeholder="Your name" value="">
</div>
<div class="formitem">
<input type="email" name="useremail" placeholder="Your E-mail" value="">
</div>
<div class="formitem">
<input type="password" name="userpass" placeholder="Enter password" value="">
</div>
<div class="loginblock__bottom flexi">
<label class="formcheckbox">
<input type="checkbox" name="remember" tabindex="0">
<span class="flexi"><i class="checkplace"><img
src="https://addmorescripts.github.io/hystModal/img/check.svg" alt=""></i>Remember me</span>
</label>
<a href="#" class="loginblock__link">Forget Password</a>
</div>
<div class="formsubmit">
<button type="submit" class="button" onclick="alert('All is OK.'); return false;">Submit Form
(example)</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="hystmodal hystmodal--simple" id="modalVideo" aria-hidden="true">
<div class="hystmodal__window hystmodal--video" role="dialog" aria-modal="true">
<button class="hystmodal__close hystmodal__close--wh" data-hystclose>Закрыть</button>
<div class="hystmodal--video__inner">Длинное меню</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>