Window-Engine/example/index.html at fc2792133dac09304512ecb18cca2d86096983bc · GStaehler/Window-Engine · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="author" content="Gauthier Staehler">
	<meta name="description" content="Lightweight and touchscreen friendly zero-dependency JavaScript library for draggable windows">
	<meta name="keywords" content="JavaScript, CSS, Window, Draggable">
	<title>Window Engine - JavaScript Library</title>
	<link rel="stylesheet" href="demo.css">
	<link rel="stylesheet" href="../src/window-engine.css">
</head>

<body>

	<header>
		<p>Window Engine 4.3.7</p>
	</header>

	<div class="windowGroup">

		<!-- WINDOW 1 -->

		<div id="window1" class="window" style="display: initial;">
			<div class="purple">
				<p class="windowTitle">Window Engine</p>
			</div>
			<div class="mainWindow">
				<p>Welcome to Window Engine !</p>
				<p>Window Engine helps you start projects that need draggable windows.</p>
			</div>
		</div>

		<!-- WINDOW 2 -->

		<div id="window2" class="window fade">
			<div class="cyan">
				<p class="windowTitle">Second Window</p>
			</div>
			<div class="mainWindow">
				<p>Cyan</p>
				<p>With fade effect !</p>
			</div>
		</div>

		<!-- WINDOW 3 -->

		<div id="window3" class="window fade">
			<div class="brown">
				<p class="windowTitle">Third Window</p>
			</div>
			<div class="mainWindow">
				<p>Brown</p>
				<p>With fade effect !</p>
			</div>
		</div>

		<!-- WINDOW 4 -->

		<div id="window4" class="window small">
			<div class="orange">
				<p class="windowTitle">Fourth Window</p>
			</div>
			<div class="mainWindow">
				<p>Orange - Small</p>
			</div>
		</div>

		<!-- WINDOW 5 -->

		<div id="window5" class="window large">
			<div class="crimson">
				<p class="windowTitle">Fifth Window</p>
			</div>
			<div class="mainWindow">
				<p>Crimson - Large</p>
			</div>
		</div>

		<!-- WINDOW 6 -->

		<div id="window6" class="window">
			<div class="green">
				<p class="windowTitle">Sixth Window</p>
			</div>
			<div class="mainWindow">
				<p>Green</p>
			</div>
		</div>

	</div>

	<footer>
		<span id="button1">1</span>
		<span id="button2">2</span>
		<span id="button3">3</span>
		<span id="button4">4</span>
		<span id="button5">5</span>
		<span id="button6">6</span>
	</footer>

</body>

</html>

<script src="../src/window-engine.js"></script>