-
-
Save AlexDev404/dda4e35b36474412fbc93468d07307ba to your computer and use it in GitHub Desktop.
Project 3 - Interactive Wii Menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** Project 3 - Interactive Wii Menu */ | |
| /* | |
| Quick Thought 1: | |
| May want to substitute div class "nav-box"-es for the Bootstrap grid system... | |
| Processing... | |
| Permission granted... | |
| Proceed to add Bootstrap library link to index.html as well as all necessary changes to style.css... | |
| Installation status: complete. | |
| Quick Thought 2: | |
| Rollback actions of Quick Thought 1... | |
| Processing... | |
| Permission granted... | |
| Proceed to remove all Bootstrap and restore previous decision made regarding the CSS and HTML files... | |
| Installation status: complete. | |
| Quick Thought 3: Address difficulty with creation of trapezoid in middle portion of div class "final-row"... | |
| Utilize references... | |
| Processing... | |
| Permission granted... | |
| Proceed to procure CSS trapezoid references... | |
| Installation status: paused. | |
| Quick Thought 4: Add audio file that is hidden, loops, and plays automatically upon main web page loading... | |
| Processing... | |
| Permission granted... | |
| Proceed to add instrumental accessories to index.html... | |
| Installation status: complete. | |
| Quick Thought 5: Requesting backup of multiple Nintendo Wii cursor files... | |
| Processing... | |
| Permission granted... | |
| Proceed to add Nintendo Wii Cursor links below... | |
| https://cur.cursors-4u.net/games/gam-12/gam1111.cur / http://elefantsoftware-en.weebly.com/uploads/4/5/2/2/4522293/364901324.png?69 / http://i497.photobucket.com/albums/rr338/Sx2Kirby/wiicursor1.png... | |
| New request submission... | |
| Processing... | |
| Permission pending... | |
| Further evalulation of third link... | |
| Processing... | |
| Permission granted... | |
| Third link invalid due to cursor appearance... | |
| Proceed to keep third link as suggestion but do not utilize in code... | |
| Installation status: complete. | |
| Quick Thought 6: Add real-time digital clock and run via Javascript... | |
| Processing... | |
| Permission granted... | |
| Proceed to add Javascript based real-time digital clock... | |
| Addition of code of inspiration... | |
| Processing... | |
| Permission granted... | |
| Proceed to add source code link... | |
| https://webdevtrick.com/javascript-real-time-clock/ [] by Webdevtrick ... | |
| Real time digital clock addition... | |
| Rerun processing... | |
| Permission granted... | |
| Continue addition of Javascript based real-time digital clock... | |
| Installation status: complete. | |
| Quick Thought 7: Revise Javascript based real-time digital clock and search for minimal code... | |
| Processing... | |
| Permission granted... | |
| Proceed to research minimal code for clock... | |
| Minimal code found... | |
| Give source... | |
| https://stackoverflow.com/questions/17913681/how-do-i-use-tolocaletimestring-without-displaying-seconds [] by Floris Looijesteijn... | |
| Real time digital clock changes installing... | |
| Installation status: complete. | |
| Quick Thought 8: Remove previous code by Webdevtrick... | |
| Processing... | |
| Permission granted... | |
| Remove previous Javascript based digital clock code... | |
| Installation status: complete. | |
| Quick Thought 9: Organize CSS for purpose of easier viewing... | |
| Processing... | |
| Permission granted... | |
| Proceed to revise placement of CSS code... | |
| Installation status: complete. | |
| Quick Thought 10: Install Nintendo Wii load-up animation before menu display using Javascript... | |
| Processing... | |
| Permission granted... | |
| Proceed to add Nintendo Wii startup animation on window load using Javascript... | |
| Installation status: in progress. | |
| Quick Thought 11: Random Javascript based load times between the values of 1 and 5 (in seconds)... | |
| Processing... | |
| Permission granted... | |
| Proceed to add randomized Nintendo Wii load up times... | |
| Installation status: paused. | |
| Quick Thought 12: Find and place Nintendo Wii button press sounds... | |
| Processing... | |
| Permission granted... | |
| Proceed to search for and place Nintendo Wii button press sounds triggered on click... | |
| Installation status: paused. | |
| */ | |
| /*===================================== | |
| LOADING PAGES | |
| =====================================*/ | |
| /* Id's for both classes are not displayed here, as they are for Javascript use only */ | |
| /* First page seen on startup of Nintendo Wii */ | |
| .HealthSafety { | |
| background: black; | |
| color: rgb(240,240,240); | |
| font-family: 'Source Sans Pro', Arial, sans-serif, Helvetica; | |
| text-align:center; | |
| padding: 55px; | |
| cursor: none; | |
| } | |
| .HealthSafety:hover { | |
| cursor:none; | |
| } | |
| /* Press A to continue section has consistent fade in and fade out animation */ | |
| .PressA {} | |
| /* Wii channels briefly shown in fade animation before Wii Menu loads */ | |
| .ChannelsFade {} | |
| /*===================================== | |
| MAIN BODY | |
| =====================================*/ | |
| /* Universal style for entire document unless overridden with !important */ | |
| * { | |
| background: black !important; /* delete !important to show wii menu again */ | |
| cursor: url(http://elefantsoftware-en.weebly.com/uploads/4/5/2/2/4522293/364901324.png?69), auto !important; | |
| } | |
| /* Entire document styling to lesser extent than universal selector */ | |
| html { | |
| padding: 60px; | |
| margin-left: 40px; | |
| background: rgb(240,240,240); | |
| background-image: repeating-linear-gradient(180deg, rgba(227,227,227,0.4), rgba(227,227,227,0.4) 7px, rgba(242,242,242,0.7) 7px, rgba(242,242,242,0.3) 9.6px); | |
| background: radial-gradient(ellipse at bottom, ); | |
| } | |
| /* All of Wii Menu Page */ | |
| .WiiMenu { | |
| display: none; | |
| } | |
| /* Upon hovering on a wii channel these styles will become present */ | |
| .wii-channel:hover { | |
| box-shadow: 0.5px 0.5px 1px 6px rgb(0,0,0); | |
| border: 2px solid rgb(79,176,228); | |
| animation-name: channelhover; | |
| animation-iteration-count: 1; | |
| animation: channelhover 5s ease-in infinite alternate; | |
| } | |
| /* The following animation styles will occur when hovering over a wii channel */ | |
| @keyframes channelhover { | |
| 0% {box-shadow: 0.5px 0.5px 1px 6px rgb(0,0,0);} | |
| 20% {box-shadow: 0.5px 0.5px 1px 6px rgb(0,0,0) inset;} | |
| 40% {box-shadow: 0.5px 0.5px 1px 6px rgb(0,0,0);} | |
| 60% {box-shadow: 0.5px 0.5px 1px 6px rgb(0,0,0);} | |
| 80% {box-shadow: 0.5px 0.5px 1px 6px rgb(0,0,0) inset;} | |
| 100% {box-shadow: 0.5px 0.5px 1px 6px rgb(0,0,0);} | |
| } | |
| /*===================================== | |
| NAVIGATION ROW 1 | |
| =====================================*/ | |
| /* Topmost horizontal (left to right) row consists of channels 1, 2, 3, and 4. */ | |
| .row-1 {} | |
| /* 1st box on Row 1 labeled as "1". */ | |
| .nav-box1 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| padding: 0px; | |
| top: 48px; | |
| width:390px; | |
| height:200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background:url(https://ia600904.us.archive.org/31/items/wiichannelsoundtracks/Wii.jpg?cnt=0); | |
| background-size: 2192px 1072px; | |
| background-position: 11.5% -95px; | |
| background-repeat: no-repeat; | |
| } | |
| /* 2nd box on Row 1 labeled as "2" */ | |
| .nav-box2 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| top: 48px; | |
| left: 505px; | |
| width: 390px; | |
| height: 200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background: url(https://mytintinnabulary.files.wordpress.com/2009/08/mii_channel.jpg),rgb(252,252,252); | |
| background-position: -15px 79px; | |
| background-size: 408px 121px; | |
| background-repeat: no-repeat; | |
| } | |
| /* 3rd box on Row 1 labeled as "3" */ | |
| .nav-box3 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| top: 48px; | |
| left: 910px; | |
| width: 390px; | |
| height: 200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background:url(https://ia600904.us.archive.org/31/items/wiichannelsoundtracks/Wii.jpg?cnt=0); | |
| background-size: 2192px 1072px; | |
| background-position: 62.9% -95px; | |
| background-repeat: no-repeat; | |
| } | |
| /* 4th box on Row 1 labeled as "4" */ | |
| .nav-box4 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| top: 48px; | |
| left: 1315px; | |
| width: 390px; | |
| height: 200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background: url(https://vignette.wikia.nocookie.net/nintendo/images/b/b3/Wii_Shop_Channel_logo.svg/revision/latest/scale-to-width-down/406?cb=20170319163955&path-prefix=en),white; | |
| background-size: 140px 140px; | |
| background-position: 50% 10px; | |
| background-repeat: no-repeat; | |
| } | |
| /* Text in Row 1 Channel 4 and reads "Wii Shop Channel" */ | |
| .wiiShopChannelText { | |
| font-family: Oswald; | |
| background: linear-gradient(turquoise,rgb(82,191,245), rgb(49,130,242)); | |
| -webkit-text-fill-color: transparent; | |
| -webkit-background-clip: text; | |
| } | |
| /*===================================== | |
| NAVIGATION ROW 2 | |
| =====================================*/ | |
| /* Midmost horizontal (left to right) row consists of channels 5, 6, 7, and 8. */ | |
| .row-2 {} | |
| /* 5th box on Row 2 labeled as "5" */ | |
| .nav-box5 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| padding: 0px; | |
| top: 270px; | |
| width:390px; | |
| height:200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background:url(https://ia600904.us.archive.org/31/items/wiichannelsoundtracks/Wii.jpg?cnt=0); | |
| background-size: 2193px 1073px; | |
| background-position: 12% -321.2px; | |
| } | |
| /* 6th box on Row 2 labeled as "6" */ | |
| .nav-box6 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| padding: 0px; | |
| top: 270px; | |
| left: 505px; | |
| width:390px; | |
| height:200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background:url(https://ia600904.us.archive.org/31/items/wiichannelsoundtracks/Wii.jpg?cnt=0); | |
| background-size: 2193px 1073px; | |
| background-position: 37% -321.2px; | |
| } | |
| /* 7th box on Row 2 labeled as "7" */ | |
| .nav-box7 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| padding: 0px; | |
| top: 270px; | |
| left:910px; | |
| width:390px; | |
| height:200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background: url(https://ia600904.us.archive.org/31/items/wiichannelsoundtracks/Wii.jpg?cnt=0)/*url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Homebrew_channel_logo.png/300px-Homebrew_channel_logo.png), url(https://www.nintendoworldreport.com/media/32751/4/1.png)*/; | |
| background-size: 2193px 1073px /*390px 200px*/; | |
| /*background-position: 63.5% -285px;*/ | |
| background-position: 63.1% -321.2px; | |
| background-repeat: no-repeat; | |
| } | |
| /* 8th box on Row 2 labeled as "8" */ | |
| .nav-box8 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| padding: 0px; | |
| top: 270px; | |
| left: 1315px; | |
| width:390px; | |
| height:200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background: url(https://ia600904.us.archive.org/31/items/wiichannelsoundtracks/Wii.jpg?cnt=0); | |
| background-size: 2193px 1073px; | |
| background-position: 88% -321.2px; | |
| background-repeat: no-repeat; | |
| } | |
| /*===================================== | |
| NAVIGATION ROW 3 | |
| =====================================*/ | |
| /* Bottommost horizontal (left to right) row consists of channels 9, 10, 11, and 12. */ | |
| .row-3 {} | |
| /* 9th box on Row 3 labeled as "9" */ | |
| .nav-box9 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| padding: 0px; | |
| top: 495px; | |
| left: 100px; | |
| width:390px; | |
| height:200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background: url(https://ia600904.us.archive.org/31/items/wiichannelsoundtracks/Wii.jpg?cnt=0); | |
| background-size: 2193px 1073px; | |
| background-position: 88% -321.2px; | |
| background-repeat: no-repeat; | |
| } | |
| /* 10th box on Row 3 labeled as "10" */ | |
| .nav-box10 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| padding: 0px; | |
| top: 495px; | |
| left: 505px; | |
| width:390px; | |
| height:200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background: url(https://ia600904.us.archive.org/31/items/wiichannelsoundtracks/Wii.jpg?cnt=0); | |
| background-size: 2193px 1073px; | |
| background-position: 88% -321.2px; | |
| background-repeat: no-repeat; | |
| } | |
| /* 11th box on Row 3 labeled as "11" */ | |
| .nav-box11 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| padding: 0px; | |
| top: 495px; | |
| left: 910px; | |
| width:390px; | |
| height:200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background: url(https://ia600904.us.archive.org/31/items/wiichannelsoundtracks/Wii.jpg?cnt=0); | |
| background-size: 2193px 1073px; | |
| background-position: 88% -321.2px; | |
| background-repeat: no-repeat; | |
| } | |
| /* 12th box on Row 3 labeled as "12" */ | |
| .nav-box12 { | |
| position: absolute; | |
| margin: 20px 40px; | |
| padding: 0px; | |
| top: 495px; | |
| left: 1315px; | |
| width:390px; | |
| height:200px; | |
| border-radius: 15px; | |
| border: 2px solid rgb(180,180,180); | |
| background: url(https://ia600904.us.archive.org/31/items/wiichannelsoundtracks/Wii.jpg?cnt=0); | |
| background-size: 2193px 1073px; | |
| background-position: 88% -321.2px; | |
| background-repeat: no-repeat; | |
| } | |
| /*===================================== | |
| FINAL ROW - ROW BOX 1 | |
| =====================================*/ | |
| /* All code contained here specifies objects seen in lower left hand corner of webpage */ | |
| /* Blue outline (technically a box) which contains "Wii" button */ | |
| .final-row-box1 { | |
| position: absolute; | |
| top: 750px; | |
| left: 0px !important; | |
| width: 300px; | |
| height: 233px; | |
| border-radius: 0px 20px 20px 0px; | |
| border: 3px solid rgb(79,176,228); | |
| border-right: 2px solid transparent; | |
| border-left: 2px solid transparent; | |
| border-bottom: 2px solid transparent; | |
| } | |
| /* Round, grey outlined block which contains "Wii" button */ | |
| .roundblock { | |
| width: 384px; | |
| height: 240px; | |
| position: absolute; | |
| right: 18px; | |
| bottom: -45px; | |
| border: 6px solid rgb(181,183,189); | |
| border-radius: 0px 195px 195px 0px; | |
| /* box-shadow: 3px 3px 3px rgb(150,150,150); */ | |
| } | |
| /* Round, white outlined block which contains "Wii" button */ | |
| .roundblock-white { | |
| width: 280px; | |
| height: 175px; | |
| position: absolute; | |
| right: 18px; | |
| bottom: 35px; | |
| border: 3px solid rgb(181,183,189); | |
| border-radius: 0px 100px 100px 0px; | |
| } | |
| /* Blue outlined circle which contains "Wii" and serves as button */ | |
| .Wii-circle { | |
| position: absolute; | |
| left: 165px; | |
| bottom: 66px; | |
| border: 3px solid rgb(79,176,228); | |
| border-radius: 50%; | |
| height: 170px; | |
| width: 170px; | |
| background: radial-gradient(closest-corner at 45px 45px, white, whitesmoke, rgb(220,220,220)); | |
| box-shadow: 5px 5px 10px rgb(150,150,150); | |
| } | |
| /* Cloudy white "circle" found in class "Wii-circle" */ | |
| .ssshiny-circle { | |
| position: absolute; | |
| bottom: 80px; | |
| left: 20px; | |
| height: 80px; | |
| width: 90px; | |
| border: 2px solid whitesmoke; | |
| background-color: whitesmoke; | |
| color: whitesmoke; | |
| border-radius: 25%; | |
| transform: skew(20deg); | |
| } | |
| /* Styles words "Wii" located in class "Wii-circle" */ | |
| .Wii { | |
| position: absolute; | |
| bottom:58px; | |
| left: 48px; | |
| letter-spacing: 2px; | |
| font-family: 'Continuum Medium'; | |
| color: grey; | |
| font-size: 54px; | |
| } | |
| /*===================================== | |
| FINAL ROW - ROW BOX 2 | |
| =====================================*/ | |
| /* All code contained here specifies objects seen in lower midmost section of webpage */ | |
| /* Blue outline (technically a box) which contains the day, numeral day date, and month; digital | |
| real time clock located directly above and outside class "final-row-box2" */ | |
| .final-row-box2 { | |
| position: absolute; | |
| bottom: 150px; | |
| left: 590px; | |
| height: 0px; | |
| width: 600px; | |
| border: 3px solid rgb(79,176,228); | |
| border-top: 2px solid transparent; | |
| } | |
| /*===================================== | |
| FINAL ROW - ROW BOX 3 | |
| =====================================*/ | |
| /* All code contained here specifies objects seen in the lower right hand section of webpage */ | |
| /* Blue outline (technically a box) which contains message board */ | |
| .final-row-box3 { | |
| position: absolute; | |
| top: 750px; | |
| right:0px !important; | |
| width: 300px; | |
| height: 233px; | |
| border-radius: 0px 20px 20px 0px; | |
| border: 3px solid rgb(79,176,228); | |
| border-right: 2px solid transparent; | |
| border-left: 2px solid transparent; | |
| border-bottom: 2px solid transparent; | |
| transform: scale(-1,1); | |
| } | |
| /* Round, grey outlined block which contains message board button */ | |
| .roundblock2 { | |
| width: 280px; | |
| height: 175px; | |
| position: absolute; | |
| right: 18px; | |
| bottom: 35px; | |
| border: 6px solid rgb(181,183,189); | |
| border-radius: 0px 100px 100px 0px; | |
| /*box-shadow: 3px 3px 3px rgb(150,150,150);*/ | |
| } | |
| /* Round, white outlined block which contains message board button */ | |
| .roundblock-white2 {} | |
| /* Blue outlined circle which contains message board icon and serves as button */ | |
| .message-circle { | |
| position: absolute; | |
| left: 108px; | |
| bottom: 26px; | |
| border: 3px solid rgb(79,176,228); | |
| border-radius: 50%; | |
| height: 145px; | |
| width: 145px; | |
| background: radial-gradient(closest-corner at 45px 45px, white, whitesmoke, rgb(220,220,220)); | |
| box-shadow: 5px 5px 10px rgb(150,150,150); | |
| transform: scale(-1,1); | |
| } | |
| /* Cloudy white "circle" found in class "message-circle" */ | |
| .ssshiny-circle2 {} | |
| /* Message board icon */ | |
| .message-icon { | |
| position: absolute; | |
| right: 75px; | |
| bottom: 22px; | |
| } | |
| /*===================================== | |
| EXTRA FEATURES | |
| =====================================*/ | |
| /* All code contained here specifies objects seen in various parts of webpage which do not "fit" | |
| into any particular section elsewhere */ | |
| /* Blue arrow located on rightmost side of page */ | |
| .next-page-arrow { | |
| width: 100px; | |
| height: 100px; | |
| position: absolute; | |
| top: 350px; | |
| right: 60px; | |
| transform: rotate(90deg); | |
| } | |
| /* Realtime digital clock located directly between classes "final-row-box 2" and "row-3" */ | |
| .clock { | |
| position: absolute; | |
| top:79.2%; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-50%); | |
| color: rgb(152,152,152); | |
| font-size: 96px; | |
| font-family: DS-Digital; | |
| font-weight: bold; | |
| letter-spacing:5px; | |
| } | |
| /* Blue downwards slanting line that "connects" classes "final-row-box1" and "final-row-box2" */ | |
| .slant-line1 { | |
| position: absolute; | |
| bottom: 236px; | |
| left: 272px; | |
| transform: rotate(30.5deg); | |
| height: 3px; | |
| width: 340px; | |
| background-color: red; | |
| } | |
| /* Blue downwards slanting line that "connects" classes "final-row-box2" and "final-row-box3" */ | |
| .slant-line2 { | |
| position: absolute; | |
| bottom: 230px; | |
| right: 407px; | |
| transform: rotate(152deg); | |
| height: 3px; | |
| width: 340px; | |
| background-color: red; | |
| transform: scale(); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-compatible" content="ie=edge"> | |
| <head> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> | |
| <script src="script.js"></script> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <!-- Nintendo Wii loading pages below --> | |
| <!-- Page below is Health and Safety --> | |
| <div class="HealthSafety" id="HealthSafety"> | |
| <h1 style="font-size:72px; letter-spacing:2px;"><i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:yellow;"></i> | |
| WARNING-HEALTH AND SAFETY</h1> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <h2 style="text-align:center; width: 1172px; margin: 0 auto; font-size: 57px; color: rgb(240,240,240); line-height:1.5;"> | |
| BEFORE PLAYING, READ YOUR OPERATIONS MANUAL FOR IMPORTANT INFORMATION <br> ABOUT YOUR HEALTH AND | |
| SAFETY. | |
| </h2> | |
| <br> | |
| <br> | |
| <br> | |
| <br> | |
| <h3 style="line-height: 1.7;"> | |
| <span style="font-size:25px; color: rgb(240,240,240);">Also online at</span> | |
| <br> | |
| <span style="font-size: 30px;">www.nintendo.com/healthsafety/</span> | |
| </h3> | |
| <br> | |
| <h2 class="PressA" | |
| style="font-size: 36px; box-reflect: below; -webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(35%, transparent), to(rgba(255,255,255,0.3)));"> | |
| Press Ⓐ to continue | |
| </h2> | |
| </div> | |
| <!-- Page below is fading channels displayed before wii menu loads --> | |
| <div class="ChannelsFade" id="ChannelsFade"></div> | |
| <!-- Wii cursor --> | |
| <div class="wii-cursor"></div> | |
| <!-- Nintendo Wii menu pages below --> | |
| <div class="WiiMenu"> | |
| <div class="body-box"> | |
| <!-- Horizontal 1st row below --> | |
| <div class="row-1"> | |
| <div class="nav-box1 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">1</span></div> | |
| <div class="nav-box2 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">2</span></div> | |
| <div class="nav-box3 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">3</span></div> | |
| <div class="nav-box4 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">4</span> | |
| <span style="position: absolute; bottom: 10px; left: 80px; font-size: 36px;" class="wiiShopChannelText">Wii Shop Channel</span></div> | |
| </div> | |
| <!-- Horizontal 2nd row below --> | |
| <div class="row-2"> | |
| <div class="nav-box5 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">5</span></div> | |
| <div class="nav-box6 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">6</span></div> | |
| <div class="nav-box7 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">7</span></div> | |
| <div class="nav-box8 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">8</span></div> | |
| </div> | |
| <!-- Horizontal 3rd row below --> | |
| <div class="row-3"> | |
| <div class="nav-box9 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">9</span></div> | |
| <div class="nav-box10 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">10</span></div> | |
| <div class="nav-box11 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">11</span></div> | |
| <div class="nav-box12 wii-channel"> | |
| <span style="position: absolute; left: 170px; top:70px; font-size: 36px; opacity:0%;">12</span></div> | |
| </div> | |
| <!-- Horizontal final row below --> | |
| <div class="final-row"> | |
| <div class="final-row-box1"> | |
| <div class="roundblock"> | |
| <div class="roundblock-white"></div> | |
| <div class="Wii-circle"> | |
| <div class="shiny-circle"></div> | |
| <span class="Wii">Wii</span> | |
| </div> | |
| </div> | |
| </div> | |
| <svg class="next-page-arrow" viewbox="0 0 200 100" width='200'> | |
| <polygon points="0 50,100 0,200 50,100 40" stroke="rgb(0,17,122)" stroke-width="0.06em" | |
| fill="rgb(44,223,228)"> | |
| </svg> | |
| <!-- | |
| <div class="slant-line1"></div> | |
| <div class="slant-line2"></div> | |
| --> | |
| <div class="final-row-box2"></div> | |
| <div id="digital-clock" class="clock"></div> | |
| </div> | |
| <div class="final-row-box3"> | |
| <div class="roundblock2"> | |
| <div class="roundblock-white2"></div> | |
| <div class="message-circle"> | |
| <span class="message-icon" style="color: rgb(154,154,154); width: 30px;"><i class="fa fa-envelope fa_custom fa-4x"><span style="font-size:28px; font-family:sans-serif; display: block; text-align: center;">1</div></i></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.getElementsByClassName('WiiMenu')[0].style.visibility = 'hidden'; | |
| document.getElementById("HealthSafety").onload | |
| var myVar = setInterval(myTimer, 1000); | |
| function myTimer() { | |
| var d = new Date(); | |
| document.getElementById("digital-clock").innerHTML = d.toLocaleTimeString( | |
| [], | |
| { timeStyle: "short" } | |
| ); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"70","seethrough":"1","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment