|
|
| Line 13: |
Line 13: |
| | <h1 align="center">Notebook</h1> | | <h1 align="center">Notebook</h1> |
| | | | |
| − | <head>
| |
| − | <style>
| |
| − | .firstHeading {
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | padding: 0px;
| |
| − | margin: 0px;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | [class*='col-'] {
| |
| − | float: left;
| |
| − | padding-right: 20px;
| |
| − | }
| |
| − |
| |
| − | .grid-pad {
| |
| − | padding: 20px 0px 20px 20px;
| |
| − | }
| |
| − |
| |
| − | .sub-grid-pad {
| |
| − | padding: 20px 0px 20px 0px;
| |
| − | }
| |
| − |
| |
| − | .grid-pad > .row > [class*='col-']:last-of-type, .grid-pad > [class*='col-']:last-of-type {
| |
| − | padding-right: 20px;
| |
| − | }
| |
| − |
| |
| − | .col-1-1 {
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .col-1-2, .col-2-4, .col-3-6, .col-5-10 {
| |
| − | width: 50%;
| |
| − | }
| |
| − |
| |
| − | .col-1-3, .col-2-6, .col-3-9 {
| |
| − | width: 33.33%;
| |
| − | }
| |
| − |
| |
| − | .col-2-3, .col-4-6, .col-6-9 {
| |
| − | width: 66.66%;
| |
| − | }
| |
| − |
| |
| − | .col-1-4, .col-2-8 {
| |
| − | width: 25%;
| |
| − | }
| |
| − |
| |
| − | .col-3-4 {
| |
| − | width: 75%;
| |
| − | }
| |
| − |
| |
| − | .col-1-5, .col-2-10 {
| |
| − | width: 20%;
| |
| − | }
| |
| − |
| |
| − | .col-2-5, .col-4-10 {
| |
| − | width: 40%;
| |
| − | }
| |
| − |
| |
| − | .col-3-5, .col-6-10 {
| |
| − | width: 60%;
| |
| − | }
| |
| − |
| |
| − | .col-4-5, .col-8-10 {
| |
| − | width: 80%;
| |
| − | }
| |
| − |
| |
| − | .col-1-6 {
| |
| − | width: 16.66%;
| |
| − | }
| |
| − |
| |
| − | .col-5-6 {
| |
| − | width: 83.33%;
| |
| − | }
| |
| − |
| |
| − | .col-1-7 {
| |
| − | width: 14.28%;
| |
| − | }
| |
| − |
| |
| − | .col-2-7 {
| |
| − | width: 28.57%;
| |
| − | }
| |
| − |
| |
| − | .col-3-7 {
| |
| − | width: 42.85%;
| |
| − | }
| |
| − |
| |
| − | .col-4-7 {
| |
| − | width: 57.14%;
| |
| − | }
| |
| − |
| |
| − | .col-5-7 {
| |
| − | width: 71.42%;
| |
| − | }
| |
| − |
| |
| − | .col-6-7 {
| |
| − | width: 85.71%;
| |
| − | }
| |
| − |
| |
| − | .col-1-8 {
| |
| − | width: 12.5%;
| |
| − | }
| |
| − |
| |
| − | .col-2-8 {
| |
| − | width: 25%;
| |
| − | }
| |
| − |
| |
| − | .col-3-8 {
| |
| − | width: 37.5%;
| |
| − | }
| |
| − |
| |
| − | .col-4-8 {
| |
| − | width: 50%;
| |
| − | }
| |
| − |
| |
| − | .col-5-8 {
| |
| − | width: 62.5%;
| |
| − | }
| |
| − |
| |
| − | .col-6-8 {
| |
| − | width: 75%;
| |
| − | }
| |
| − |
| |
| − | .col-7-8 {
| |
| − | width: 87.5%;
| |
| − | }
| |
| − |
| |
| − | .col-1-9 {
| |
| − | width: 11.11%;
| |
| − | }
| |
| − |
| |
| − | .col-2-9 {
| |
| − | width: 22.22%;
| |
| − | }
| |
| − |
| |
| − | .col-4-9 {
| |
| − | width: 44.44%;
| |
| − | }
| |
| − |
| |
| − | .col-5-9 {
| |
| − | width: 55.55%;
| |
| − | }
| |
| − |
| |
| − | .col-7-9 {
| |
| − | width: 77.77%;
| |
| − | }
| |
| − |
| |
| − | .col-8-9 {
| |
| − | width: 88.88%;
| |
| − | }
| |
| − |
| |
| − | .col-1-10 {
| |
| − | width: 10%;
| |
| − | }
| |
| − |
| |
| − | .col-3-10 {
| |
| − | width: 30%;
| |
| − | }
| |
| − |
| |
| − | .col-7-10 {
| |
| − | width: 70%;
| |
| − | }
| |
| − |
| |
| − | .col-9-10 {
| |
| − | width: 90%;
| |
| − | }
| |
| − |
| |
| − | .grid:after {
| |
| − | content: "";
| |
| − | display: table;
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | *, *:after, *:before {
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | [class*='col-']:last-of-type {
| |
| − | padding-right: 0;
| |
| − | }
| |
| − |
| |
| − | .show {
| |
| − | background-color:#FFFFFF;
| |
| − | color: #081D38;
| |
| − | box-shadow: 0px 0px 25px #888888;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .hide {
| |
| − | background-color: auto;
| |
| − | }
| |
| − |
| |
| − | #pad {
| |
| − | padding: 5px;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | background-color:#DFEDFF;
| |
| − | }
| |
| − |
| |
| − | #head {
| |
| − | font-family: 'Open Sans', sans-serif;
| |
| − | }
| |
| − |
| |
| − | #mainhead {
| |
| − | font-family:'Ubuntu', sans-serif;
| |
| − | font-size: 50px;
| |
| − | }
| |
| − |
| |
| − | a{text-decoration:none;}
| |
| − |
| |
| − | #navbar > div > a > p.show {
| |
| − | box-shadow: 10px 10px 5px #888888;
| |
| − | }
| |
| − |
| |
| − | .currentpage {
| |
| − | background-color:#FFFFFF;
| |
| − | color: #081D38;
| |
| − | box-shadow: 0px 0px 25px #888888;
| |
| − | }
| |
| − |
| |
| − | #navbar > div > a :hover{
| |
| − | background-color: #C1CDCd;
| |
| − | color: #081D38;
| |
| − | }
| |
| − |
| |
| − | #navbar > div > a:active > p.show {
| |
| − | box-shadow: 0px 0px 25px #888888;
| |
| − | }
| |
| − |
| |
| − | .image-wrapper
| |
| − | {
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − | .scale-image
| |
| − | {
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | }
| |
| − | /* Styling for the title (Month and Year) of the calendar */
| |
| − | div.title
| |
| − | {
| |
| − | font: x-large Verdana, Arial, Helvetica, sans-serif;
| |
| − | text-align: center;
| |
| − | height: 40px;
| |
| − | background-color: white;
| |
| − | color: black;
| |
| − | }
| |
| − | /* Styling for the footer */
| |
| − | div.footer
| |
| − | {
| |
| − | font: small Verdana, Arial, Helvetica, sans-serif;
| |
| − | text-align: center;
| |
| − | }
| |
| − | /* Styling for the overall table */
| |
| − | table
| |
| − | {
| |
| − | font: 100% Verdana, Arial, Helvetica, sans-serif;
| |
| − | table-layout: fixed;
| |
| − | border-collapse: collapse;
| |
| − | width: 100%;
| |
| − | }
| |
| − | /* Styling for the column headers (days of the week) */
| |
| − | th
| |
| − | {
| |
| − | padding: 0 0.5em;
| |
| − | text-align: center;
| |
| − | background-color:gray;
| |
| − | color:white;
| |
| − | }
| |
| − | /* Styling for the individual cells (days) */
| |
| − | td
| |
| − | {
| |
| − | font-size: medium;
| |
| − | padding: 0.25em 0.25em;
| |
| − | width: 14%;
| |
| − | height: 80px;
| |
| − | text-align: left;
| |
| − | vertical-align: top;
| |
| − | }
| |
| − | /* Styling for the date numbers */
| |
| − | .date
| |
| − | {
| |
| − | font-size: large;
| |
| − | padding: 0.25em 0.25em;
| |
| − | text-align: left;
| |
| − | vertical-align: top;
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | var monthSelector = 0;
| |
| − | function count(direction)
| |
| − | {
| |
| − | if (direction == "up")
| |
| − | {
| |
| − | monthSelector++;
| |
| − | }
| |
| − | else if (direction == "down")
| |
| − | {
| |
| − | monthSelector--;
| |
| − | }
| |
| − |
| |
| − | if (monthSelector > 6)
| |
| − | {
| |
| − | monthSelector = 0;
| |
| − | }
| |
| − | else if (monthSelector < 0)
| |
| − | {
| |
| − | monthSelector = 6;
| |
| − | }
| |
| − | console.log(monthSelector);
| |
| − | refresh();
| |
| − | };
| |
| − |
| |
| − | window.onload = function() {refresh()};
| |
| − |
| |
| − | function refresh()
| |
| − | {
| |
| − | var calendar = new Array(7);
| |
| − | for (var y = 0; y < 7; y++)
| |
| − | {
| |
| − | calendar[y] = document.getElementById("month" + y.toString());
| |
| − | if (monthSelector == y)
| |
| − | {
| |
| − | calendar[y].style.display = "table-row";
| |
| − | }
| |
| − | else
| |
| − | {
| |
| − | calendar[y].style.display = "none";
| |
| − | }
| |
| − | }
| |
| − | };
| |
| − | </script>
| |
| − | </head>
| |
| | <table> | | <table> |
| | <tr> | | <tr> |
