Hugging Face's logo

Spaces:
coolspaces
/
windows3.1
Running

App Files Community
Ian Renton commited on
Commit
d949fc5
•
1 Parent(s): 5be30bb

Tidying up

Browse files
Files changed (6) hide show
  1. README.md +33 -1
  2. code.js +1 -1
  3. icons/CLOCK001.ICO +0 -0
  4. icons/MORIC001.ICO +0 -0
  5. icons/write.png +0 -0
  6. index.html +21 -16
README.md CHANGED
@@ -1,2 +1,34 @@
1
- # web3.1
2
  Recreating Windows 3.1 design elements in HTML, JS & CSS for no reason
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Web 3.1
2
  Recreating Windows 3.1 design elements in HTML, JS & CSS for no reason
3
+
4
+ ## Why?
5
+
6
+ Boredom
7
+
8
+ ## Can I Use This?
9
+
10
+ Sure
11
+
12
+ ## Can I Contribute to This?
13
+
14
+ Sure
15
+
16
+ ## Can I Claim I Wrote This?
17
+
18
+ Sure (my code is released into the Public Domain)
19
+
20
+ ## Can it run DOOM?
21
+
22
+ Yes
23
+
24
+ ## Is this all your work?
25
+
26
+ HTML, CSS and JS are mine.
27
+
28
+ I have also included (with many thanks):
29
+
30
+ * [Windows 3.1 Icons](https://github.com/mRB0/many-windows-3.1-icons-in-png-format)
31
+ * [W95FA font](https://fontsarena.com/w95fa-by-fontsarena/)
32
+ * [Less Perfect DOS VGA font](https://laemeur.sdf.org/fonts/)
33
+
34
+ The software also loads jQuery, jQuery UI, JS-DOS and DOOM from 3rd party CDNs
code.js CHANGED
@@ -34,7 +34,7 @@ $( function() {
34
  $( ".window" ).resizable({ handles: "all", alsoresize: ".windowinner" });
35
 
36
  // Window close
37
- $('.windowclose').on("click", function () { $(this).parents('div.window').hide(); });
38
 
39
  // Window click-to-bring-to-top
40
  (function() {
 
34
  $( ".window" ).resizable({ handles: "all", alsoresize: ".windowinner" });
35
 
36
  // Window close
37
+ $('.windowclose').on("dblclick", function () { $(this).parents('div.window').hide(); });
38
 
39
  // Window click-to-bring-to-top
40
  (function() {
icons/CLOCK001.ICO DELETED
Binary file (766 Bytes)
 
icons/MORIC001.ICO DELETED
Binary file (766 Bytes)
 
icons/write.png ADDED
index.html CHANGED
@@ -11,31 +11,21 @@
11
 
12
  </head>
13
  <body>
14
- <div id="window1" class="window" style="position: absolute; top: 100px; left: 100px; width: 500px; height: 400px; z-index: 1">
15
  <div class="windowheader">
16
  <div class="windowclose"></div>
17
  <div class="windowtitle">Introduction</div>
18
  </div>
19
  <div class="windowinner">
20
  <div class="fullwindowhtml">
21
- <p>This is a test of trying to replicate Windows 3.1 style and interations in HTML, CSS & JS.</p>
22
- <p>Created by <a href="https://ianrenton.com">Ian Renton</a>.</p>
23
- <p>But nobody knows why...</p>
24
  </div>
25
  </div>
26
  </div>
27
 
28
- <div id="window2" class="window" style="position: absolute; top: 250px; left: 200px; width: 500px; height: 400px; z-index: 2">
29
- <div class="windowheader">
30
- <div class="windowclose"></div>
31
- <div class="windowtitle">Write - TEXTBO~1.WRI</div>
32
- </div>
33
- <div class="windowinner">
34
- <textarea class="fullwindowtextarea">This text is editable</textarea>
35
- </div>
36
- </div>
37
-
38
- <div id="window3" class="window selectedwindow" style="position: absolute; top: 400px; left: 400px; width: 500px; height: 300px; z-index: 3">
39
  <div class="windowheader">
40
  <div class="windowclose"></div>
41
  <div class="windowtitle">Program Manager</div>
@@ -46,6 +36,10 @@
46
  <img src="icons/clock.png">
47
  <p>Clock</p>
48
  </div>
 
 
 
 
49
  <div class="icon" ondblclick="newWindow('#dosprompt')">
50
  <img src="icons/dos.png">
51
  <p>MS-DOS</p>
@@ -58,6 +52,17 @@
58
  </div>
59
  </div>
60
 
 
 
 
 
 
 
 
 
 
 
 
61
  <div id="clock" class="window" style="position: absolute; top: 260px; left: 260px; width: 250px; height: 250px; z-index: 4; display: none">
62
  <div class="windowheader">
63
  <div class="windowclose"></div>
@@ -74,7 +79,7 @@
74
  </div>
75
  </div>
76
 
77
- <div id="dosprompt" class="window" style="position: absolute; top: 250px; left: 250px; width: 600px; height: 350px; z-index: 5; display: none">
78
  <div class="windowheader">
79
  <div class="windowclose"></div>
80
  <div class="windowtitle">MS-DOS Prompt</div>
 
11
 
12
  </head>
13
  <body>
14
+ <div id="intro" class="window" style="position: absolute; top: 100px; left: 100px; width: 500px; height: 120px; z-index: 1">
15
  <div class="windowheader">
16
  <div class="windowclose"></div>
17
  <div class="windowtitle">Introduction</div>
18
  </div>
19
  <div class="windowinner">
20
  <div class="fullwindowhtml">
21
+ <p>This is a test of trying to replicate some Windows 3.1 styles and interactions in HTML, CSS & JS.</p>
22
+ <p>Created by <a href="https://ianrenton.com">Ian Renton</a>, but nobody knows why.</p>
23
+ <p><a href="https://github.com/ianrenton/web3point1">Source Code is on GitHub</a> and is in the Public Domain.</p>
24
  </div>
25
  </div>
26
  </div>
27
 
28
+ <div id="progman" class="window selectedwindow" style="position: absolute; top: 250px; left: 150px; width: 500px; height: 300px; z-index: 2">
 
 
 
 
 
 
 
 
 
 
29
  <div class="windowheader">
30
  <div class="windowclose"></div>
31
  <div class="windowtitle">Program Manager</div>
 
36
  <img src="icons/clock.png">
37
  <p>Clock</p>
38
  </div>
39
+ <div class="icon" ondblclick="newWindow('#write')">
40
+ <img src="icons/write.png">
41
+ <p>Write</p>
42
+ </div>
43
  <div class="icon" ondblclick="newWindow('#dosprompt')">
44
  <img src="icons/dos.png">
45
  <p>MS-DOS</p>
 
52
  </div>
53
  </div>
54
 
55
+ <div id="write" class="window" style="position: absolute; top: 150px; left: 400px; width: 500px; height: 400px; z-index: 3; display: none;">
56
+ <div class="windowheader">
57
+ <div class="windowclose"></div>
58
+ <div class="windowtitle">Write - TEXTBO~1.WRI</div>
59
+ </div>
60
+ <div class="windowinner">
61
+ <textarea class="fullwindowtextarea">Yo what up this is a text box</textarea>
62
+ </div>
63
+ </div>
64
+
65
+
66
  <div id="clock" class="window" style="position: absolute; top: 260px; left: 260px; width: 250px; height: 250px; z-index: 4; display: none">
67
  <div class="windowheader">
68
  <div class="windowclose"></div>
 
79
  </div>
80
  </div>
81
 
82
+ <div id="dosprompt" class="window" style="position: absolute; top: 220px; left: 250px; width: 600px; height: 350px; z-index: 5; display: none">
83
  <div class="windowheader">
84
  <div class="windowclose"></div>
85
  <div class="windowtitle">MS-DOS Prompt</div>