/lenasys/0.1

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/lenasys/0.1
1 by Henrik G.
First seed of Lenasys ... Needs to be Organized Further
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>Webbprogrammering DA330G</title>
5
    <style>
6
7
        .group 
8
        {
9
			display: block;
10
        	padding: 1em;
11
	    	width: 100%;
12
        	margin: auto auto;
13
			font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
14
		}
15
16
        .group h1
17
        {
18
        	font-weight: normal;
19
        	font-size: 1.8em;
20
					margin-bottom: 1em;
21
22
					font-family: Cambria, Georgia, serif;
23
        }
24
25
		.group .info
26
		{	
27
			padding: 0.4em;
28
			margin: 0.5em;
29
			font-size: 1em;
30
			color: #000;
31
		}
32
33
		.group .info:first-letter
34
		{	
35
			font-size:1.3em;
36
		}
37
38
        .group h2
39
        {
40
			font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
41
			border-bottom: 2px solid #000;
42
			color: #fff;
43
			background: #c0d0e0;
44
			background-color: #c0d0e0;
45
	
46
			text-shadow: 1px 1px 2px #000;
47
			font-weight:normal;            
48
49
			background: linear-gradient(to top, #abc 10%, #89a 90%, #678 99% );
50
			background: -webkit-linear-gradient(bottom, #abc 10%, #89a 90%, #678 99%);
51
			background: -moz-linear-gradient(bottom, #abc 10%, #89a 90%, #678 99%);
52
            
53
			font-size: 1.4em;
54
			margin-top: 1em;
55
	    	margin-bottom: 0;
56
			padding:3px;
57
        
58
        	padding-left:20px;
59
        }
60
61
        a
62
        {
63
        	line-height: 2em;
64
        	margin-left: 1.3em;
65
        	color: black;
66
        	text-decoration: underline;
67
        	font-size: 1em;
68
        }
69
        
70
        li
71
        {
72
			color: #555;
73
        }
74
    
75
        a:hover
76
        {
77
        	text-decoration: none;
78
        }
79
80
				.container
81
				{
82
					border-left: 2px dotted #ddd;
83
					margin-left: 8px;	
84
				}
85
			
86
				.container .demo
87
				{
88
					float:right;
89
				}
90
		
91
				body{
92
					margin:0;
93
				}
94
		
95
				#menu
96
				{
97
					position:fixed;
98
					top:40px;
99
					width:10.5%;
100
					padding: 10px 0 1% 0.3%;
101
					background: #c0d0e0;
102
					background-color: #c0d0e0;
103
					border-bottom-right-radius: 1.3em;
104
					border-top-right-radius: 1.3em;
105
					border-bottom: 2px solid #000;
106
					border-right: 1px solid #000;
107
					color: #fff;
108
109
					text-shadow: 1px 1px 2px #000;
110
					font-weight:bolder;
111
112
					background:#678;
113
					background-color:#678;
114
115
 					background: linear-gradient(to top, #abc 10%, #89a 90%, #678 99% );
116
					background: -webkit-linear-gradient(bottom, #abc 10%, #89a 90%, #678 99%);
117
					background: -moz-linear-gradient(bottom, #abc 10%, #89a 90%, #678 99%);
118
119
				}
120
				
121
				#menu #menuHeader{
122
					margin:0 0 1.5% 0;
123
					background:#333333;
124
					width:97%;
125
					height:31px;
126
					padding-left:10px;
127
					margin-left:-10px;
128
					border-radius: 0 10px 10px 0
129
				}
130
				
131
				#menuHeader h3{
132
					float:left;
133
					font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
134
					font-size:1.2em;
135
					background-color:#333;
136
					color:#fff;
137
					width:80%;
138
					margin-top:4px;
139
					padding:0;
140
				}
141
				
142
				#menuArrow{
143
					float:left;
144
					padding:0;
145
					margin-top:8px;
146
					width:15%;
147
				}
148
				
149
				#menu a{
150
					display:block;color:#fff;
151
					font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
152
					text-decoration: none; 
153
					margin-left:1%;
154
					font-size:100%
155
				}
156
				
157
				#menu a:hover{
158
					font-weight:bolder;
159
					text-decoration:underline;
160
				}
161
				
162
				#menuItems{
163
					float:left;
164
					width:80%;
165
				}
166
				
167
				#sidebar{
168
					float:left;
169
					min-width:11%;
170
					min-height:100px;
171
					overflow:auto;
172
				}
173
				
174
				#content{
175
					float:left;
176
					width:75%;
177
				}
178
				
179
				.arrow{
180
					-webkit-transition-duration: 0.9s;
181
					-moz-transition-duration: 0.9s;
182
					-o-transition-duration: 0.9s;
183
					transition-duration: 0.9s;
184
					 
185
					-webkit-transition-property: -webkit-transform;
186
					-moz-transition-property: -moz-transform;
187
					-o-transition-property: -o-transform;
188
					transition-property: transform;
189
					overflow:auto;
190
				}
191
				
192
				.rotateArrowCW{	
193
					-webkit-transform:rotate(180deg);
194
					-moz-transform:rotate(180deg); 
195
					-o-transform:rotate(180deg);
196
				}
197
		
198
    </style>
199
    
200
	<script type="text/javascript" src="jquery/jquery-1.8.2.min.js"></script>	
201
	<script type="text/javascript">
202
		var menuTopOffset=40;
203
		var menuLeftOffset=25;
204
		
205
		$(document).ready(function() {
206
			window.onresize = fixMenuLeft;
207
			//$('#menu').offset({ top: menuTopOffset, left: $('#menu').offset().left });
208
			//window.onscroll = moveMenu;
209
			$('#menuHeader').click(toggleMenu);
210
			$("a.menuLink").click(function(event) {
211
					event.preventDefault();
212
					event.stopPropagation();
213
					var destination=event.target.href.substring(event.target.href.lastIndexOf('/')+1);
214
					scrollTo(destination);
215
					});
216
		});
217
		
218
		function fixMenuLeft(ev){
219
			//$('#menu').offset({ top: bodyelem.scrollTop()+menuTopOffset, left: -($('#menu').width()-30) });
220
			if($('#menu').offset().left!=0)
221
			$('#menu').offset({ top: $('#menu').offset().top, left: -($('#menu').width()-menuLeftOffset) });
222
		}
223
		
224
		function toggleMenu(ev){
225
			
226
			if($('#menu').offset().left==0) {
227
				$('#menu').animate({ left: -($('#menu').width()-menuLeftOffset) },{duration:900});
228
				$("#menuArrow").addClass("rotateArrowCW");
229
			}else{
230
			$('#menu').animate({ left: 0 },{duration:900});
231
				$("#menuArrow").removeClass("rotateArrowCW");
232
			}
233
		
234
		}
235
		
236
		function moveMenu(ev){
237
			if($.browser.webkit) bodyelem = $("body");
238
			else bodyelem = $("html,body");
239
			$('#menu').offset({ top: bodyelem.scrollTop()+menuTopOffset, left: $('#menu').offset().left });
240
		}
241
		
242
		function scrollTo(id){
243
			$('html,body').animate({scrollTop: $("#"+id).offset().top},{duration:900});
244
			return false;
245
		}
246
247
248
	</script>
249
</head>
250
<body>
251
	<div id="sidebar">
252
		<div id="menu">
253
			<div id="menuHeader">
254
				<h3>Quick links</h3>
255
				<img id="menuArrow" class="arrow" src="img/menuArrow.png" alt="arrow" />
256
			</div>
257
			<div id="menuItems">
258
				<a href="javascript" class="menuLink">JavaScript</a>
259
				<a href="jquery" class="menuLink">jQuery</a>
260
				<a href="SVG" class="menuLink">SVG Converter</a>
261
				<a href="html5" class="menuLink">HTML5</a>
262
				<a href="ajaxapi" class="menuLink">AJAX API</a>
263
				<a href="ajaxapiexamples" class="menuLink">API Examples</a>
264
			</div>
265
			
266
		</div>
267
	</div>
268
	<div id="content">
269
    <div class="group">
270
271
    	<h1>Code examples</h1>
272
273
        <h2 id="javascript">JavaScript Examples</h2>
274
			<div class="container">
275
					<div class="info">A couple of short tutorials introducing Firebug</div>
276
					<a href='Tutorials/Tutorial_Firebug.gif'>Firebug Tutorial</a><br>
277
					<a href='Tutorials/Tutorial_Firebug_II.gif'>Firebug Tutorial II</a><br>
278
					<div class="info">Some simple JavaScript code examples</div>
279
					<a href='Javascript/JavaScriptExample0_setEvent.php'>Example 0: Events, DOM access and console.log</a><br>
280
					<a href='Javascript/JavaScriptExample1_DOM.php'>Example 1: Adding and removing elements in the DOM</a><br>
281
					<a href='Javascript/JavaScriptExample2_validateForm.php'>Example 2: Validating form data</a><br>
282
					<div class="info">Some simple JavaScript demo examples</div>
283
					<a href='Javascript/Small_Example_Menudiv.html'>Menu with images using divs</a><br>
284
					<a href='Javascript/Small_Example_DropdownDiv.html'>Dropdown Menu</a><br>
285
					<a href='Javascript/Small_Example_Expandcontract.html'>Expand and Contract Data</a><br>
286
					<a href='Javascript/Small_Example_Expandcontract2.html'>Expand and Contract Hierarchical Menu</a><br>
287
					<a href='Javascript/Small_Example_DragDrop1.html'>Drag and drop start (reading coordinates)</a><br>
288
					<a href='Javascript/Small_Example_DragDrop2.html'>Drag and drop div (read class or id from clicked div)</a><br>
289
					<a href='Javascript/Small_Example_DragDrop3.html'>Drag and drop divs (update divs)</a><br>
290
					<a href='Javascript/Small_Example_Timer.html'>Timer example</a><br>
291
					<a href='Javascript/Small_Example_TimerClipping.html'>Timer example with Clipping Rectangle</a><br>
292
					<a href='Javascript/Small_Example_History'>History Example</a><br>
293
					
294
	    	</div>
295
	
296
        <h2 id="jquery">Examples on jQuery and jQuery UI</h2>
297
				<div class="container">
298
					<div class="info">Some simple examples showcasing jQuery and jQuery UI</div>
299
					<a href='JqueryDemos/JQueryExample1.html'>jQuery Example 1</a><br>
300
					<a href='JqueryDemos/JQueryExample2.html'>jQuery Example 2</a><br>
301
					<a href='JqueryDemos/JQueryExample3.html'>jQuery Example 3</a><br>
302
					<a href='JqueryDemos/JQueryExample4.html'>jQuery Example 4</a><br>
303
					<a href='JqueryDemos/JQueryExample5.html'>jQuery Example 5</a><br>
304
					<a href='JqueryDemos/JQueryExample6.html'>jQuery Example 6</a><br>
305
					<br>
306
					<a href='http://jquery.com/'>Offical jQuery website</a><br>
307
					<a href='http://jqueryui.com/'>Offical jQuery UI website</a><br>
308
				</div> <!---- End Container div ----> 
309
310
		
311
        <h2 id="SVG">SVG Viewer</h2>
312
				<div class="container">
313
					<div class="info">The SVG converter application converts (many) SVG files to HTML5 code that can be used to draw vector graphics. <i><b>Note!</b> that not all SVG files work.</i></div>
314
					<a href='SVG'>SVG Converter</a><br>
315
					<a href='SVG/SVG.rar'>SVG Converter Source Code</a><br>
316
				</div> <!---- End Container div ----> 
317
318
319
				<h2 id="html5">HTML5 Examples</h2>
320
				<div class="container">
321
					<div class="info">Some simple HTML5 code examples</div>
322
					<a href='HTML5/HTML5Example1_canvas.php'>Example 1: Basic canvas graphics</a><br>
323
					<a href='HTML5/HTML5Example2_canvas2.php'>Example 2: Canvas Gradients and Transformations</a><br>
324
					<a href='HTML5/HTML5Example3_canvas3.php'>Example 3: Animation and drawing images</a><br>
325
					<a href='HTML5/HTML5Example4_canvas4.php'>Example 4: Shadows</a><br>
326
327
					<a href='HTML5/HTML5Example5_canvas5.php'>Example 5: Reading mouse coordinates</a><br>
328
					<a href='HTML5/HTML5Example6_canvas6.php'>Example 6: 2D Tile Map</a><br>
329
					<a href='HTML5/HTML5Example7_canvas7.php'>Example 7: Isometric Tile Map</a><br>
330
					<!--simple cookies-->
331
					<!--basic localstorage-->
332
					<a href='HTML5/HTML5Example8_basiccookies.php'>Example 8: Basic cookies</a><br>
333
					<a href='HTML5/HTML5Example9_basiclocalStorage.php'>Example 9: Basic localStorage API</a><br>
334
					
335
					<a href='HTML5/HTML5Example10_cookies.php'>Example 10: Cookies</a><br>
336
					<a href='HTML5/HTML5Example11_localStorage.php'>Example 11: localStorage API</a><br>
337
					
338
					<a href='HTML5/HTML5Example12_history.php'>Example 12: History API</a><br>
339
					<a href='HTML5/HTML5Example13_draganddrop.php'>Example 13: HTML5 Drag and drop</a><br>
340
					<a href='HTML5/HTML5Example14_imagezoom.php'>Example 14: Image zoom</a><br>
341
					<a href='HTML5/HTML5Example15_clipping.php'>Example 15: Canvas clipping region</a><br>
342
					<a href='HTML5/HTML5Example16_masking.php'>Example 16: Canvas compositing</a><br>
343
					<a href='HTML5/HTML5Example17_html5video.php'>Example 17: HTML5 Video</a><br>
344
					<a href='HTML5/HTML5Example18_canvasvideo.php'>Example 18: Canvas video and screenshots</a><br>
345
					<a href='HTML5/HTML5Example19_contenteditable.php'>Example 19: Contenteditable</a><br>
346
					<a href='HTML5/HTML5Example20_contenteditable2.php'>Example 20: Rich text editor</a><br>
347
					<div class="info">Some simple HTML5 demo examples</div>
348
					<!--<a href='HTML5/localstorage_cookies.html'>Local Storage Cookies</a><br>
349
					<a href='HTML5/localstorage_localstorage.html'>Local Storage</a><br>-->
350
					<a href='HTML5/canvas_test_curve_0.html'>Canvas Curve Example 1</a><br>
351
					<a href='HTML5/canvas_test_curve.html'>Canvas Curve Example 2 Simple Detect Click</a><br>
352
					<!--<a href='HTML5/canvas_test_clock.html'>Canvas Gradient and Transformation Example (Clock)</a><br>-->
353
					<a href='HTML5/canvas_test_lines.html'>Lines Example</a><br>
354
					<!--<a href='HTML5/canvas_test_pattern_II.html'>Patterns Example 1</a><br>
355
					<a href='HTML5/canvas_test_pattern_III.html'>Patterns Example 2 With Shadows</a><br>-->
356
					<a href='HTML5/canvas_shadowGlow.html'>Shadows for Glow Effect</a><br>
357
					<a href='HTML5/canvas_test_svgimported.html'>Imported SVG</a><br>
358
					<a href='HTML5/canvas_test_starso.html'>Particles 1 Starspiral</a><br>
359
					<a href='HTML5/canvas_test_particles.html'>Particles 2 Fireworks</a><br>
360
					<a href='HTML5/canvas_3dtest.html'>3D Example 1</a><br>
361
					<a href='HTML5/canvas_3dtest_II.html'>3D Example 2</a><br>
362
					<a href='HTML5/canvas_3dtest_III.html'>3D Example 3</a><br>
363
					<a href='HTML5/canvas_3dtest_IV.html'>3D Example 4</a><br>
364
					<br>
365
					<a href='HTML5/Enkelgrafik_Curves.html'>Simple graphics with clickable geometry</a><br>
366
					<a href='HTML5/Enkelgrafik_Gradients.html'>Simple graphics with gradients</a><br>
367
					<a href='HTML5/Enkelgrafik_Rasterisering.html'>Simple graphics with DrawImage and Compositing</a><br>
368
					<a href='HTML5/Enkelgrafik_Transformationer.html'>Simple graphics with transformations</a><br>
369
					<div class="info">You may also find the quick reference sheet below useful</div>
370
					<a href='http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html'>Canvas Cheat Sheet</a><br>
371
				</div> <!---- End Container div ----> 
372
    </div> <!---- End Group div ----> 
373
 <div class="group">
374
375
    	<h1>AJAX API documentation & Management</h1>
376
377
        <h2 id="ajaxapi">AJAX API Administration</h2>
378
		<div class="container">
379
	<div class="info">Management of resources, customers, bookings, availability</div>
380
        <a href="admin/editresource.php">Edit resources</a> </br>
381
        <a href="admin/editcustomers.php">Edit customers</a> </br>
382
        <a href="admin/editbooking.php">Edit bookings</a> </br>
383
        <a href="admin/editavailability.php">Edit resource availability</a> </br>
384
    </div> <!---- End Container div ----> 
385
	 <h2 id="ajaxapiexamples">AJAX API Examples & Demos</h2>
386
        <!--<h2>AJAX API Overview</h2>-->
387
		<div class="container">
388
	<div class="info">Documentation of parameters and calls</div>
389
        <a href="calls.html">Overview</a> </br>
390
	</div> <!---- End Container div ----> 
391
       
392
		<div class="container cols">
393
	<div class="info">Create and get information about a customer</div>
394
        <a href="AJAX/AjaxDemoApp1_storeCustomer.php">Creation of Customer</a>
395
	 <a class="demo" href="AJAX/AjaxDemoApp1_storeCustomer.html">demo</a> </br>
396
        <a href="AJAX/AjaxDemoApp0_getCustomer.php">Get customer information</a>
397
	 <a class="demo" href="AJAX/AjaxDemoApp0_getCustomer.html">demo</a> </br>
398
399
	 
400
	<div class="info">Get information about resources. (create a resource and edit availability in the administration panel)</div>
401
   	<a href="AJAX/AjaxDemoApp3_getResources.php">Get resources</a>
402
		<a class="demo" href="AJAX/AjaxDemoApp3_getResources.html">demo</a> </br>
403
        <a href="AJAX/AjaxDemoApp8_getResourceAvailability.php">Get resource availability</a>
404
		<a class="demo" href="AJAX/AjaxDemoApp8_getResourceAvailability.html">demo</a> </br>
405
406
	<div class="info">Make and get information about bookings</div>
407
        <a href="AJAX/AjaxDemoApp6_makeBookings.php">Make bookings</a>
408
	 <a class="demo" href="AJAX/AjaxDemoApp6_makeBookings.html">demo</a> </br>
409
410
        <a href="AJAX/AjaxDemoApp5_showBookings.php">Get bookings</a>
411
		<a class="demo" href="AJAX/AjaxDemoApp5_showBookings.html">demo</a> </br>
412
413
        <a href="AJAX/AjaxDemoApp4_getBookingsForDate.php">Get bookings for date</a>
414
		<a class="demo" href="AJAX/AjaxDemoApp4_getBookingsForDate.html">demo</a> </br>
415
416
        <a href="AJAX/AjaxDemoApp2_getCustomerBookings.php">Get customer bookings</a> 
417
	 <a class="demo" href="AJAX/AjaxDemoApp2_getCustomerBookings.html">demo</a> </br>
418
419
        <a href="AJAX/AjaxDemoApp7_makeBookingsTimer.php">Make bookings with timer</a>
420
	 <a class="demo" href="AJAX/AjaxDemoApp7_makeBookingsTimer.html">demo</a> </br>
421
422
	<div class="info">Make and get clicks</div>
423
        <a href="javascript:void(0);" onclick="alert('Only demo');">Make clicks</a>
424
	 <a class="demo" href="AJAX/AjaxDemoApp9_makeClick.html">demo</a> </br>
425
        <a href="javascript:void(0);" onclick="alert('Only demo');">Get clicks</a>
426
		<a class="demo" href="AJAX/AjaxDemoApp10_getClicks.html">demo</a> </br>
427
	</div> <!---- End Container div ----> 
428
	 <h2>Source Code Download</h2>
429
		<div class="container">
430
	<div class="info">AJAX API source code</div>
431
		<a href="Bookingsystem_1.3.zip">Source Code (v 1.3) Download</a><br>
432
		<a href="Bookingsystem_1.2.zip">Source Code (v 1.2) Download</a><br>
433
		<!--<a href="makebooking_XML.zip">Fixed Version of makebooking_XML.php</a><br>
434
		<a href="Bookingsystem_1.1.rar">Source Code (v 1.1) Download</a><br>
435
		<a href="Bookingsystem_1.0.zip">Source Code (v 1.0) Download</a><br>-->
436
		<a href="Bookingsystem.sql">SQL Source Code for Running Database at Home</a><br>
437
    </div> <!---- End Container div ----> 
438
    </div> <!---- End Group div ----> 
439
	</div>
440
</body>
441
</html>