Hugging Face's logo

Spaces:
coolspaces
/
windows3.1
Running

App Files Community
Ian Renton commited on
Commit
61e59f4
•
1 Parent(s): 3b7861f

First commit

Browse files
Files changed (11) hide show
  1. code.js +33 -0
  2. fonts/LessPerfectDOSVGA.woff +0 -0
  3. fonts/LessPerfectDOSVGA.woff2 +0 -0
  4. fonts/w95fa.woff +0 -0
  5. fonts/w95fa.woff2 +0 -0
  6. icons/CLOCK001.ICO +0 -0
  7. icons/MORIC001.ICO +0 -0
  8. icons/clock.png +0 -0
  9. icons/dos.png +0 -0
  10. index.html +84 -0
  11. style.css +141 -0
code.js ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Show and bring to top
2
+ function showAndMakeTop(element) {
3
+ $(element).show();
4
+ $(element).bringToTop();
5
+ }
6
+
7
+ $( function() {
8
+ // Window drag
9
+ $( ".window" ).draggable({ handle: "div.windowtitle" });
10
+
11
+ // Window resize
12
+ $( ".window" ).resizable({ handles: "all", alsoresize: ".windowinner" });
13
+
14
+ // Window close
15
+ $('.windowclose').on("click", function () { $(this).parents('div.window').hide(); });
16
+
17
+ // Window click-to-bring-to-top
18
+ (function() {
19
+ var highest = 100;
20
+
21
+ $.fn.bringToTop = function() {
22
+ this.css('z-index', ++highest); // increase highest by 1 and set the style
23
+ };
24
+ })();
25
+ $('.window').click(function() {
26
+ $(this).bringToTop();
27
+ });
28
+
29
+ // Icon single click
30
+ $('.icon').click(function() {
31
+ $(this).find('p').toggleClass('highlight');
32
+ });
33
+ } );
fonts/LessPerfectDOSVGA.woff ADDED
Binary file (24.3 kB). View file
 
fonts/LessPerfectDOSVGA.woff2 ADDED
Binary file (17.2 kB). View file
 
fonts/w95fa.woff ADDED
Binary file (9.46 kB). View file
 
fonts/w95fa.woff2 ADDED
Binary file (7.88 kB). View file
 
icons/CLOCK001.ICO ADDED
icons/MORIC001.ICO ADDED
icons/clock.png ADDED
icons/dos.png ADDED
index.html ADDED
@@ -0,0 +1,84 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html>
2
+ <head>
3
+ <title>Windows 3.1</title>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href="style.css" type="text/css">
7
+ <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css">
8
+ <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
9
+ <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
10
+ <script src="code.js"></script>
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">Test</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" style="position: absolute; top: 400px; left: 400px; width: 500px; height: 400px; z-index: 3">
39
+ <div class="windowheader">
40
+ <div class="windowclose"></div>
41
+ <div class="windowtitle">Test</div>
42
+ </div>
43
+ <div class="windowinner">
44
+ <div class="fullwindowicons">
45
+ <div class="icon" ondblclick="showAndMakeTop('#clock')">
46
+ <img src="icons/clock.png">
47
+ <p>Clock</p>
48
+ </div>
49
+ <div class="icon" ondblclick="showAndMakeTop('#dosprompt')">
50
+ <img src="icons/dos.png">
51
+ <p>MS-DOS</p>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </div>
56
+
57
+ <div id="clock" class="window" style="position: absolute; top: 260px; left: 260px; width: 250px; height: 250px; z-index: 4; display: none">
58
+ <div class="windowheader">
59
+ <div class="windowclose"></div>
60
+ <div class="windowtitle">Clock</div>
61
+ </div>
62
+ <div class="windowmenubar">
63
+ <div class="menuitem">Settings</div>
64
+ </div>
65
+ <div class="windowinner" style="background-color: lightgrey">
66
+ <div class="fullwindowhtml">
67
+ <div style="margin-top: 70px; font-family: Arial, sans-serif; font-size: 40px; text-align:center">04:20:00 PM</div>
68
+ <div style="margin-top: 5px; font-family: Arial, sans-serif; font-size: 20px; text-align:center">6/9/69</div>
69
+ </div>
70
+ </div>
71
+ </div>
72
+
73
+
74
+ <div id="dosprompt" class="window" style="position: absolute; top: 250px; left: 250px; width: 600px; height: 350px; z-index: 5; display: none">
75
+ <div class="windowheader">
76
+ <div class="windowclose"></div>
77
+ <div class="windowtitle">MS-DOS Prompt</div>
78
+ </div>
79
+ <div class="windowinner">
80
+ <textarea class="fullwindowdosprompt">C:\> </textarea>
81
+ </div>
82
+ </div>
83
+ </body>
84
+ </html>
style.css ADDED
@@ -0,0 +1,141 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Fonts */
2
+ @font-face {
3
+ font-family: 'WinThreeOne';
4
+ src: url('fonts/w95fa.woff2') format('woff2'),
5
+ url('fonts/w95fa.woff') format('woff');
6
+ }
7
+ @font-face {
8
+ font-family: 'DOS';
9
+ src: url('fonts/LessPerfectDOSVGA.woff2') format('woff2'),
10
+ url('fonts/LessPerfectDOSVGA.woff') format('woff');
11
+ }
12
+
13
+ /* Overall */
14
+ html, body {
15
+ width:100%;
16
+ height:100%;
17
+ margin:0;
18
+ overflow: hidden;
19
+ font-family: 'WinThreeOne', sans-serif;
20
+ background-color: #00ADAC;
21
+ font-size: 12px;
22
+ font-smooth: never;
23
+ -webkit-font-smoothing : none;
24
+ }
25
+
26
+ /* Windows */
27
+ .window {
28
+ padding: 4px;
29
+ background-color: white;
30
+ box-shadow:
31
+ inset 0 0 0 1px black,
32
+ inset 0 0 0 3px lightgrey,
33
+ inset 0 0 0 4px black;
34
+ }
35
+
36
+ .windowheader {
37
+ background-color: darkblue;
38
+ border-bottom: 1px solid black;
39
+ font-size: 14px;
40
+ height: 20px;
41
+ }
42
+
43
+ .windowtitle {
44
+ padding: 2px;
45
+ line-height: 16px;
46
+ text-align: center;
47
+ color: white;
48
+ cursor: default;
49
+ }
50
+
51
+ .windowclose {
52
+ float: left;
53
+ display: inline-block;
54
+ width: 15px;
55
+ height: 19px;
56
+ padding: 0 0 1px 5px;
57
+ background-color: lightgrey;
58
+ border-right: 1px solid black;
59
+ font-size: 20px;
60
+ color: white;
61
+ font-weight: bold;
62
+ -webkit-text-stroke-width: 0.5px;
63
+ -webkit-text-stroke-color: black;
64
+ text-shadow: 1px 1px darkgrey;
65
+ cursor: default;
66
+ }
67
+
68
+ .windowmenubar {
69
+ background-color: white;
70
+ border-bottom: 1px solid black;
71
+ font-size: 14px;
72
+ height: 12px;
73
+ padding: 4px;
74
+ line-height: 16px;
75
+ cursor: default;
76
+ }
77
+
78
+ .windowclose::before {
79
+ content: '-';
80
+ }
81
+
82
+ .ui-icon-gripsmall-diagonal-se {
83
+ background-image: none !important;
84
+ }
85
+
86
+ /* Window contents */
87
+ .windowinner {
88
+ height: calc(100% - 21px);
89
+ width: 100%;
90
+ overflow: hidden;
91
+ }
92
+ .windowmenubar + .windowinner {
93
+ height: calc(100% - 42px) !important;
94
+ }
95
+
96
+ .fullwindowhtml {
97
+ padding: 0px 8px;
98
+ }
99
+
100
+ textarea.fullwindowtextarea {
101
+ padding: 5px;
102
+ width: 100%;
103
+ height: 100%;
104
+ resize: none;
105
+ border: none;
106
+ outline: none;
107
+ font-family: 'WinThreeOne', sans-serif;
108
+ font-size: 12px;
109
+ }
110
+
111
+ textarea.fullwindowdosprompt {
112
+ padding: 5px;
113
+ width: 100%;
114
+ height: 100%;
115
+ resize: none;
116
+ border: none;
117
+ outline: none;
118
+ background-color: black;
119
+ color: lightgrey;
120
+ font-family: 'DOS', monospace;
121
+ font-size: 16px;
122
+ }
123
+
124
+ /* Icons */
125
+ .icon {
126
+ display: inline-block;
127
+ margin: 10px;
128
+ text-align: center;
129
+ }
130
+
131
+ .icon p {
132
+ display: block;
133
+ margin: 5px auto 0 auto;
134
+ padding: 2px;
135
+ cursor: default;
136
+ }
137
+
138
+ .icon p.highlight {
139
+ background-color: darkblue;
140
+ color: white;
141
+ }