git/web_workshop

save load

Hunter
Monday, July 7th, 2025 at 11:20 PM

resources/images/Coffeeclipart.webp -> images/Coffeeclipart.webp
 
 
resources/images/clippy.jpg -> images/clippy.jpg
 
 
resources/images/clock.jpg -> images/clock.jpg
 
 
resources/images/297434.png -> images/mac.png
 
 
resources/images/scared_mouse.gif -> images/scared_mouse.gif
 
 
resources/images/sun.png -> images/sun.png
 
 
resources/images/under-construction-pikachu.gif -> images/under-construction-pikachu.gif
 
 
resources/images/underconstruction.gif -> images/underconstruction.gif
 
 
resources/images/welcome.gif -> images/welcome.gif
 
 
resources/images/windows.gif -> images/windows.gif
 
 
index.html
+31
-13
pages/my_homepage.html
new

Binary files differ.

Binary files differ.

Binary files differ.

Binary files differ.

Binary files differ.

Binary files differ.

Binary files differ.

Binary files differ.

Binary files differ.

Binary files differ.

  4  	<meta charset="UTF-8">
  5  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6  	<title>HTML Laboratory</title>
  7 +	<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛼</text></svg>">
  8  	<script type="module">
  9  		import {EditorView, keymap} from "https://esm.sh/@codemirror/view@6"
 10  		import {EditorState} from "https://esm.sh/@codemirror/state@6"

196  			return '';
197  		}
198  
    -		// Save functionality with Cmd+S
    -		document.addEventListener('keydown', function(e) {
    -			if ((e.metaKey || e.ctrlKey) && e.key === 's') {
    -				e.preventDefault();
    -				saveFile();
    -			}
    -		});
    -
    -		function saveFile() {
199 +		// Simple file operations
200 +		window.saveFile = function() {
201  			const code = editorView.state.doc.toString();
202  			const blob = new Blob([code], { type: 'text/html' });
203  			const url = URL.createObjectURL(blob);
    -			
204  			const a = document.createElement('a');
205  			a.href = url;
206  			a.download = 'index.html';
207  			a.click();
    -			
208  			URL.revokeObjectURL(url);
    -		}
209 +		};
210 +
211 +		window.loadFile = function() {
212 +			const input = document.createElement('input');
213 +			input.type = 'file';
214 +			input.accept = '.html,.htm';
215 +			input.onchange = function(event) {
216 +				const file = event.target.files[0];
217 +				if (!file) return;
218 +				
219 +				const reader = new FileReader();
220 +				reader.onload = function(e) {
221 +					editorView.dispatch({
222 +						changes: { from: 0, to: editorView.state.doc.length, insert: e.target.result }
223 +					});
224 +					saveToStorage();
225 +					updatePreview();
226 +				};
227 +				reader.readAsText(file);
228 +			};
229 +			input.click();
230 +		};
231  
232  		// Wait for CodeMirror to be available
233  		function initializeCodeMirror() {

246  				state: EditorState.create({
247  					doc: savedContent,
248  					extensions: [
    -						keymap.of([indentWithTab, ...defaultKeymap]),
249 +						keymap.of([
250 +							{key: "Mod-o", run: () => { window.loadFile(); return true; }},
251 +							{key: "Mod-s", run: () => { window.saveFile(); return true; }},
252 +							indentWithTab, 
253 +							...defaultKeymap
254 +						]),
255  						html(),
256  						githubDark,
257  						indentUnit.of("\t"),

 1 +<html>
 2 +	<head>
 3 +		<style>
 4 +			body {
 5 +				color: white;
 6 +				background-color:mediumslateblue;
 7 +				text-shadow: 2px 2px 2px black;
 8 +			}
 9 +			.heading {
10 +				font-size: 40px;
11 +				background-color: teal;
12 +				padding:8px;
13 +				box-shadow: 4px 4px black;
14 +				border: 1px solid black;
15 +			}
16 +			p {
17 +				font-size: 35px;
18 +			}
19 +			h3 {
20 +				font-size: 35px;
21 +			}
22 +		</style>
23 +	</head>
24 +	<body>
25 +		<h1 class="heading">
26 +			Welcome to my World Wide Web Site 🌞
27 +		</h1>
28 +		<center>
29 +			<img src="images/welcome.gif" width=400px>
30 +			<p>
31 +				brace yourself. you are in for a wild ride!!
32 +			</p>
33 +			<a href="https://hunterirving.com"><img src="images/windows.gif"></a>
34 +			<h3>enter by "clicking" on the window above....<br>if you <i><span style="color:red">dare</span></i>.....!</h3>
35 +			<img src="images/scared_mouse.gif" style="transform: scaleX(-1); margin-bottom:25px"><img src="images/mac.png" width=200px>
36 +		</center>
37 +	</body>
38 +</html>