-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
92 lines (75 loc) · 4.42 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
<!DOCTYPE html>
<!--
This is an example website, using the Web-Based-Windows stylesheets and scripts.
Jack Guianane
2018-07-31
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Windows</title>
<!-- Required scripts and stylesheets -->
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<script src="draggable.js" type="text/javascript"></script>
<!-- Additional stylesheets below, for custom window styling -->
<link href="example-style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="window" id="about" style="width:390px;">
<div class="window-header" id="aboutheader">
About.txt
<button onclick="this.parentNode.parentNode.style.display = 'none';">X</button>
<button onclick="this.parentNode.parentNode.style.display = 'none';">_</button>
</div>
<p>This is a draggable, resizable, and closable window, modeled after the early Windows operating systems.</p>
<p>Developed by Jack Guinane</p>
<p>(c) 2018</p>
</div>
<script>dragElement(document.getElementById("about"));</script>
<div class="window install-page" id="install" style="top:50px;left:100px;">
<div class="window-header" id="installheader">
Installation Wizard
<button onclick="this.parentNode.parentNode.style.display = 'none';">X</button>
<button onclick="this.parentNode.parentNode.style.display = 'none';">_</button>
</div>
<p>>: How to use</p>
<p>Start by downloading the CSS and Javascript files used in the source.</p>
<a href="">Download from Github</a>
<p>>: Add them to HTML</p>
<p>Add the following lines to your <head>:<br></p>
<p> <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet"><br> <link href="style.css" rel="stylesheet" type="text/css"><br> <script src="draggable.js" type="text/javascript"></script></p>
<p>>: Create a window</p>
<p>Replace with new ID tags and content:</p>
<p> <div class="window" id="ADD_CUSTOM_ID">
<br> <div class="window-header" id="ADD_CUSTOM_IDheader">
<br> TITLE_OF_WINDOW
<br> <button onclick="this.parentNode.parentNode.style.display = 'none';">X</button>
<br> <button onclick="this.parentNode.parentNode.style.display = 'none';">_</button>
<br> </div>
<br> CONTENTS_OF_WINDOW
<br> </div>
<br> <script>dragElement(document.getElementById("ADD_CUSTOM_ID"));</script></p>
</div>
<script>dragElement(document.getElementById("install"));</script>
<div class="window baby-image" id="image" style="width:200px;height:400px;top:200px;left:800px;">
<div class="window-header" id="imageheader">
Dancing-Baby.jpg
<button onclick="this.parentNode.parentNode.style.display = 'none';">X</button>
<button onclick="this.parentNode.parentNode.style.display = 'none';">_</button>
</div>
</div>
<script>dragElement(document.getElementById("image"));</script>
<div class="window alert-page" id="alert" style="width:400px;left:900px;top:50px;">
<div class="window-header" id="alertheader">
Alert
<button onclick="this.parentNode.parentNode.style.display = 'none';">X</button>
<button onclick="this.parentNode.parentNode.style.display = 'none';">_</button>
</div>
<p>Windows encountered an error.</p>
<button class="classic-button" onclick="this.parentNode.style.display = 'none';">OK</button>
</div>
<script>dragElement(document.getElementById("alert"));</script>
</body>
</html>