/lenasys/0.1

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/lenasys/0.1

« back to all changes in this revision

Viewing changes to trunk/Code Viewer Alt/index.html

  • Committer: Henrik G.
  • Date: 2013-03-26 23:22:55 UTC
  • Revision ID: henrik.gustavsson@his.se-20130326232255-ik6snyatlbkf3zs1
First seed of Lenasys ... Needs to be Organized Further

Show diffs side-by-side

added added

removed removed

Lines of Context:
trunk/Code Viewer Alt/index.html
 
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>