Website 6
Replace script in editor and save as
index.html
.
Note extra css and js files.
<!DOCTYPE html> <html> <head> <title>CITG Website</title> <meta charset="UTF-8"> <meta name="description" content="CUA Web Project"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="vasey" > <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/styles.css"> <link rel="stylesheet" href="assets/map.css"> <script src="assets/jquery.min.js"></script> <script src="assets/translate.js"></script> <script src="assets/team.js"></script> </head> <body> <div id="top"></div><br/><br/> <nav> <a href="#top">Top</a> <a href="#team">The Team</a> <a href="#map">Map</a> <a href="#community">Community</a> <a href="#translate">Translations</a> </nav> <div style="padding: 20px";> <!-- open div padding --> <br/><br/> <!-- About --> <h1>About This Website</h1> <table align="center"> <tr><td> This website identifies local knowledge and protocols that will inform the users of the site. The training that produced websites like this holds young people accountable for their actions, encourages their reintegration into the community and promotes community awareness.</td> <td> <canvas id="logo" width="300" height="300"> Your browser does not support the HTML5 canvas tag </canvas> <script> var canvas=document.getElementById("logo"); var ctx=canvas.getContext("2d"); var origin = canvas.height / 2; ctx.translate(origin, origin); // Outer Circle var radius = 115; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI, false); ctx.fillStyle = "black"; ctx.fill(); ctx.lineWidth = 5; ctx.strokeStyle = "red"; ctx.stroke(); // Inner Circle var radius = 70; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI, false); ctx.fillStyle = "yellow"; ctx.fill(); // Small Circles var radius = 15; var xpos = [0,0,90,-90, 65, 65, -65, -65, 35, 35, -35, -35, 85, -85, 85, -85]; var ypos = [90,-90,0,0, 65, -65, 65, -65, 85, -85, 85, -85, 35, 35, -35, -35]; ctx.fillStyle = "yellow"; for (num = 0; num < 17; num++){ ctx.beginPath(); ctx.arc(xpos[num], ypos[num], radius, 0, 2 * Math.PI, false); ctx.fill(); } // Red Bars var xpos = [55, 55, 55, -145, -145, -145, 55, 55, 55,-145, -145, -145]; var ypos = [-30,-7.5,15, -30,-7.5, 15, 12.5, -7.5, -30, 15,-7.5, -30]; ctx.fillStyle="red"; ctx.rotate(45 * Math.PI / 180); for (num = 0; num<3; num++) { ctx.beginPath(); ctx.rect(xpos[num], ypos[num], 90, 15); ctx.fill(); } ctx.rotate(-90 * Math.PI / 180); for (num = 3; num<6; num++) { ctx.beginPath(); ctx.rect(xpos[num], ypos[num], 90, 15); ctx.fill(); } ctx.rotate(-90 * Math.PI / 180); for (num = 6; num<9; num++) { ctx.beginPath(); ctx.rect(xpos[num], ypos[num], 90, 15); ctx.fill(); } ctx.rotate(-90 * Math.PI / 180); for (num = 9; num<12; num++) { ctx.beginPath(); ctx.rect(xpos[num], ypos[num], 90, 15); ctx.fill(); } </script> </td> <td>The goal is to provide a fair and balanced response to young people who may have become disengaged from traditional learning. There are opportunities across the state, country and even the world offering real jobs to young people including those needing assistance to get back on track. </td></tr> </table> <!-- End About --> <div id="team"></div><br/><br/> <h1>Team Members</h1> <main> <p><img id="myImage" src="images/team1.jpg" style="width:800px"></p> <button onMouseDown="return playImage1()">Cathie</button> <button onMouseDown="return playImage2()">Kenneth</button> <button onMouseDown="return playImage3()">Jasmine</button> <button onMouseDown="return playImage4()">Christopher</button> <button onMouseDown="return playImage5()">Taylor</button> </main> <table align="center"> <tr><th>Given Name</th><th>Family Name</th><th>Community</th><th>Clan</th></tr> <tr><td>Cathie</td><td>Harris</td><td>Bundaberg</td><td>Gubbi</td></tr> <tr><td>Kenneth</td><td>Jackson</td><td>Hervey Bay</td><td>Badtjala</td></tr> <tr><td>Jasmine</td><td>Johnson</td><td>Gin Gin</td><td>Wakka</td></tr> <tr><td>Christopher</td><td>Miller</td><td>Turkey Beach</td><td>Gooreng</td></tr> <tr><td>Taylor</td><td>Johnson</td><td>Murgon</td><td>Wakka</td></tr> </table> <div id="map"></div><br/><br/> <h1>Community Map</h1> <div id="info-box"></div> <div align="center"> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 500" height="500" width="300" id="svg2" version="1.1"> <g style="stroke:#0000ff;stroke-width:2;"> <path id="Gooreng Gooreng" data-info="<div>Gooreng Gooreng</div>" d="m 19.435819,52.933534 c 18.794473,57.411126 11.259813,74.450936 0,85.778836 -2.735008,12.54814 -8.310415,24.22231 1.504892,40.63209 l 9.029351,38.37474 c 2.91691,12.80798 6.55847,24.3478 13.49796,30.11627 3.53597,-11.26585 11.22874,-24.17802 31.6488,-41.40296 l 28.592938,-21.06849 c 8.53414,-4.6455 17.08365,-9.20396 28.59295,3.00979 l 12.79158,12.03913 27.8405,-9.7818 13.54403,-11.28668 4.51468,2.25733 14.29647,-12.03913 -29.75387,-29.68937 -19.90756,-25.99163 c -4.42011,-10.56029 -5.43343,-20.552774 -3.76223,-30.097842 L 136.06494,68.734899 C 132.64399,61.611624 133.09988,51.719174 123.27336,49.171304 L 100.69998,30.360155 90.165742,16.816128 C 69.527782,28.267526 45.122372,40.472415 19.435819,52.933534 Z" style="fill:#00ffff;" /> <path id="Waka Waka" data-info="<div>Waka Waka</div>" d="m 43.468022,247.83547 c -5.5862,9.68757 46.46669,71.21228 28.01863,122.46749 -8.25629,11.86753 -3.95341,27.37822 7.23577,33.89385 18.6813,10.87841 36.018138,31.43434 46.080398,75.02347 12.52428,-9.097 24.83089,-15.14678 36.11934,-6.94223 6.54651,1.65117 12.27541,8.20801 18.24426,13.32516 4.55066,9.10133 13.58346,3.78623 15.32825,-4.09796 6.47411,-11.04405 15.99485,-14.47153 15.99485,-14.47153 l 5.01416,-0.90454 c -37.8475,-79.63375 -96.485,-118.75354 -70.40939,-265.71624 -11.7977,-4.32996 -16.67956,-29.25461 -41.38453,-15.04892 l -28.592938,21.06849 c -11.20944,11.16161 -23.36635,18.53339 -31.6488,41.40296 z" style="fill:#ffff00;" /> <path id="Gubbi Gubbi" data-info="<div>Gubbi Gubbi</div>" d="m 145.09429,200.41294 27.8405,-9.7818 13.54403,-11.28668 4.51468,2.25733 14.29647,-12.03913 1.40725,31.98182 c 5.53579,0.69197 9.05746,13.01767 10.32746,14.6009 2.10219,2.62067 9.25911,11.75194 9.25911,11.75194 -4.69727,-1.34208 -21.54776,12.20909 -26.70896,22.79165 -11.62389,13.17642 -4.28128,29.55791 -1.06836,29.55791 6.4325,9.19374 14.128,17.37709 25.28448,22.79165 l 22.79165,3.91731 1.06835,17.44986 v 16.02537 l -5.34179,14.24478 -5.34179,15.31314 7.83463,22.07941 -3.5612,27.06507 -0.35612,7.47851 -7.83462,34.89971 -17.54638,4.61749 c -20.88395,-41.21861 -55.10073,-87.35089 -69.86591,-140.45172 -10.69969,-38.47987 -9.36038,-80.60121 -0.54348,-125.26452 z" style="fill:#00ff00;" /> <path id="Badtjala" data-info="<div>Badtjala</div>" d="m 226.28379,227.89732 c -12.11187,3.31871 -19.35745,13.1258 -26.70896,22.79165 -10.4142,15.05509 -6.09248,22.48816 -1.06836,29.55791 6.19435,9.54582 15.05466,16.76607 25.28448,22.79165 l 22.79165,3.91731 0.71223,-7.12239 7.83463,-6.05403 c 0.83147,-9.41564 3.69626,-12.05351 6.05403,-16.38149 0.5724,-13.40782 4.00561,-11.55803 6.05403,-17.09374 l 2.84896,-21.72328 8.54687,-11.75195 -1.7806,-9.97134 -8.90299,3.56119 -0.35612,4.98568 -6.05403,-4.27344 -5.69791,5.3418 0.71224,11.75194 3.20508,6.05403 c -2.07098,2.32985 -2.27197,17.86911 -1.42448,13.88866 0.41951,-1.97035 -7.83463,13.53254 -6.41015,12.10806 1.42448,-1.42448 -3.5612,8.19075 -3.5612,8.19075 l -1.78059,9.61522 c 0,0 0.71223,5.69791 -0.71224,4.98567 -1.42448,-0.71223 -9.25911,-21.01104 -9.25911,-21.01104 l 1.42448,-19.94269 -2.49284,-11.75195 z" style="fill:#d40000;" /> </g> </svg> <script src="assets/map.js"></script> </div> <!-- End Map --> <div id="community"></div><br/><br/> <!-- Community --> <h1>Community Information</h1> <div class="row"> <div class="column"> <h2>Aunty Sally - Lowmead <br/> June 2021</h2> <p><img src="images/image1.jpg" alt="image1"></p> <h3>Mob</h3> <h4>Lorem ipsum dolor sit amet</h4> <h3>Clan</h3> <h4>Consectetur adipiscing elit</h4> <h3>Location</h3> <h4>Maecenas sit amet pretium urna</h4> <h3>Contacts</h3> <h4>Vivamus venenatis velit nec</h4> <h4>Neque ultricies eget elementum</h4> <h4>Magna tristique</h4> </div> <div class="column"> <h2>Aunty Rena - Rosedale <br/> June 2021</h2> <p><img src="images/image2.jpg" alt="image2"></p> <h3>Mob</h3> <h4>Lorem ipsum dolor sit amet</h4> <h3>Clan</h3> <h4>Consectetur adipiscing elit</h4> <h3>Location</h3> <h4>Maecenas sit amet pretium urna</h4> <h3>Contacts</h3> <h4>Vivamus venenatis velit nec</h4> <h4>Neque ultricies eget elementum</h4> <h4>Magna tristique</h4> </div> <div class="column"> <h2>Uncle John - Wartburg <br/> August 2021</h2> <p><img src="images/image3.jpg" alt="image3"></p> <h3>Mob</h3> <h4>Lorem ipsum dolor sit amet</h4> <h3>Clan</h3> <h4>Consectetur adipiscing elit</h4> <h3>Location</h3> <h4>Maecenas sit amet pretium urna</h4> <h3>Contacts</h3> <h4>Vivamus venenatis velit nec</h4> <h4>Neque ultricies eget elementum</h4> <h4>Magna tristique</h4> </div> <div class="column"> <h2>Uncle Mick - Rules Beach <br/> August 2021</h2> <p><img src="images/image4.jpg" alt="image4"></p> <h3>Mob</h3> <h4>Lorem ipsum dolor sit amet</h4> <h3>Clan</h3> <h4>Consectetur adipiscing elit</h4> <h3>Location</h3> <h4>Maecenas sit amet pretium urna</h4> <h3>Contacts</h3> <h4>Vivamus venenatis velit nec</h4> <h4>Neque ultricies eget elementum</h4> <h4>Magna tristique</h4> </div> </div> <!-- End Community --> <div id="translate"></div><br/><br/> <!-- Language Table --> <h1 align="center">Translation</h1> <h2 align="center">Gooreng Gooreng - English</h2> <main> <button onMouseDown="playBina()">Bina - Ears</button> <button onMouseDown="playBii()">Bii - Knee</button> <button onMouseDown="playBiru()">Biru - Hand</button> <button onMouseDown="playBulu()">Bulu - Belly</button> <br/> <button onMouseDown="playDaigil()">Daigil - Bone</button> <button onMouseDown="playDii()">Dii- Blood</button> <button onMouseDown="playDira()">Dira - Teeth</button> <button onMouseDown="playDjanyar()">Djanyar - Leg</button> <br/> <button onMouseDown="playDjina()">Djina - Foot</button> <button onMouseDown="playDulga()">Dulga - Heart</button> <button onMouseDown="playDunga()">Dunga - Tongue</button> <button onMouseDown="playGaman()">Gaman - Hip</button> <br/> <button onMouseDown="playGana()">Gana - Liver</button> <button onMouseDown="playGeem()">Geem - Mouth</button> <button onMouseDown="playGilun()">Gilun - Shoulders</button> <button onMouseDown="playGini()">Gini - Arm</button> <br/> <button onMouseDown="playGoomoo()">Goomoo - Elbow</button> <button onMouseDown="playGubu()">Gubu - Hair</button> <button onMouseDown="playGunGun()">Gun Gun - Face</button> <button onMouseDown="playMil()">Mil - Eyes</button> <br/> <button onMouseDown="playMundi()">Mundi - Bottom</button> <button onMouseDown="playMuru()">Muru - Nose</button> <button onMouseDown="playMundoie()">Mundoie - Toes</button> <button onMouseDown="playTeeping()">Teeping - Eyebrow</button> <br/> <button onMouseDown="playWandal()">Wandal - Neck</button> <button onMouseDown="playWogoo()">Wogoo - Belly Button</button> <button onMouseDown="playWugul()">Wugul - Ankle</button> <button onMouseDown="playWurul()">Wurul - Head</button> <br/> <button onMouseDown="playYillim()">Yillim - Lip</button> <button onMouseDown="playYinboo()">Yinboo - Chin</button> <button onMouseDown="playYulan()">Yulan - Skin</button> <br/> </main> <br/><br/> <footer>Website Under Construction</footer> </body> </html>
Website 6
