-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
164 lines (163 loc) · 5.04 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
<!--
@project: SwipeEventsManager - https://CodiTheck.github.io/swipe_events_manager
@fileoverview: The html structure for package testing.
@author: Obrymec - https://obrymec.vercel.app
@created: 2023-10-06
@updated: 2024-10-24
@file: index.html
@version: 0.0.3
-->
<!--Swipe events manager-->
<!Doctype html>
<!--Structure-->
<html lang = "en">
<!--Header-->
<head>
<!--General title-->
<title>Swipe Events Manager | Testing</title>
<!--Package favicon-->
<link ref = "./favicon.ico" rel = "shortcut icon" type = "image/ico"/>
<link href = "./favicon.ico" type = "image/ico" rel = "icon"/>
<!--Meta configurations-->
<meta name = "twitter:image:alt" content = "The demonstration page."/>
<meta name = "tweetmeme-title" content = "The demonstration page"/>
<meta property = "og:site_name" content = "Swipe Events Manager"/>
<meta name = "twitter:title" content = "The demonstration page"/>
<meta property = "og:title" content = "The demonstration page"/>
<meta property = "og:type" content = "article"/>
<meta property = "og:local" content = "en_US"/>
<meta
content = "This Node Package Manager (NPM) is a front-end library for managing touch screen events on mobile devices. It provides a support for Javascript and Typescript."
name = "twitter:description"
/>
<meta
content = "This Node Package Manager (NPM) is a front-end library for managing touch screen events on mobile devices. It provides a support for Javascript and Typescript."
property = "og:description"
/>
<meta
content = "This Node Package Manager (NPM) is a front-end library for managing touch screen events on mobile devices. It provides a support for Javascript and Typescript."
name = "description"
/>
<meta
content = "https://CodiTheck.github.io/swipe_events_manager/render/render_1.png"
name = "twitter:image"
/>
<meta
content = "https://CodiTheck.github.io/swipe_events_manager/render/render_1.png"
property = "og:image"
/>
<meta
content = "https://CodiTheck.github.io/swipe_events_manager"
property = "og:url"
/>
<meta
content = "https://CodiTheck.github.io/swipe_events_manager"
name = "twitter:card"
/>
<meta
content = "width=device-width, initial-scale=1"
name = "viewport"
charset = "utf-8"
/>
<!--Stylesheets-->
<style type = "text/css" media = "screen">
/** Hover effect */
button:hover {
background-color: skyblue;
}
/** Top card */
div.top-card {
transform: translate(-50%, -25%) translate3d(0, 0, 0);
top: 25%;
}
/** Bottom card */
div.bottom-card {
transform: translate(-50%, 0) translate3d(0, 0, 0);
bottom: 16%;
}
/** Active span */
div.active > span {
visibility: visible !important;
cursor: auto;
}
/** Top span */
span {
transform: translate(-50%, -50%);
visibility: hidden;
top: 50%;
}
/** Active card */
div.active {
border: 3px solid salmon !important;
background-color: green !important;
cursor: auto;
}
/** Cards and content */
div.bottom-card, div.top-card, span {
cursor: pointer;
position: fixed;
left: 50%;
}
/** Cards */
div.bottom-card, div.top-card {
border: 3px solid transparent;
background-color: red;
height: 160px;
width: 160px;
}
/** Body */
body {
font-family: Arial;
user-select: none;
font-size: 16px;
color: white;
}
/** Info */
div.info {
font-weight: bolder;
text-align: center;
color: #646464;
position: fixed;
bottom: 32px;
right: 20px;
left: 20px;
}
/** Button */
button {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: steelblue;
transition: all .2s linear;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
padding: 10px;
border: none;
}
</style>
</head>
<!--Global container-->
<body>
<!--Global content-->
<main class = "content">
<!--Top card-->
<div class = "top-card active" name = "Top card">
<!--Label text-->
<span>Swipe me !</span>
</div>
<!--Bottom card-->
<div class = "bottom-card" name = "Bottom card">
<!--Label text-->
<span>Swipe me !</span>
</div>
<!--Free swipe control-->
<button>Destroy event effects</button>
</main>
<!--Info-->
<div class = "info">
It's recommended to open the website from your mobile
phone to get a better result.
</div>
<!--Test-->
<script src = "./index.test.js" type = "module"></script>
</body>
</html>