├── README.md ├── bootstrap.unity.css ├── index.css ├── index.html ├── index.js └── jquery.js /README.md: -------------------------------------------------------------------------------- 1 | # Fibonacci Clock - web version 2 | 3 | The clock for geeks now in web version. 4 | 5 | ## Getting Started 6 | 7 | To tell time on the Fibonacci clock you need to do some math. To read the hour, simply add up the corresponding values of the red and blue squares. To read the minutes, do the same with the green and blue squares. The minutes are displayed in 5 minute increments (0 to 12) so you have to multiply your result by 5 to get the actual number. 8 | 9 | To know more about fibonacci clock follow this link : https://goo.gl/uvkHHf 10 | ## License 11 | 12 | This project is licensed under the MIT License 13 | 14 | ## Acknowledgments 15 | 16 | * Thanks to https://github.com/pchretien and his project https://github.com/pchretien/fibo 17 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | .ratio1 { 2 | height: 50px; 3 | width: 50px; 4 | text-align: center; 5 | color:#fff; 6 | } 7 | 8 | .ratio2 { 9 | height: 100px; 10 | width:100px; 11 | text-align: center; 12 | color:#fff; 13 | } 14 | 15 | .ratio3 { 16 | height: 150px; 17 | width: 150px; 18 | text-align: center; 19 | color:#fff; 20 | } 21 | 22 | .ratio5 { 23 | width: 250px; 24 | text-align: center; 25 | color:#fff; 26 | } 27 | 28 | 29 | td, th { 30 | border: 2px solid #fff; 31 | color: silver; 32 | font-size:30px; 33 | background-color: #fff; 34 | -webkit-transition: background-color 1s; /* Safari */ 35 | transition: background-color 1s; 36 | } 37 | 38 | .red { 39 | background-color:rgb(255,0,0); 40 | } 41 | 42 | .green { 43 | background-color:rgb(0,255,0); 44 | } 45 | 46 | .blue { 47 | background-color:rgb(0,0,255); 48 | } 49 | 50 | .info-font{ 51 | font-weight: bold; 52 | color: #000; 53 | -webkit-text-stroke-width:2px; 54 | -webkit-text-stroke-color:#fff; 55 | } 56 | 57 | .big-font{ 58 | font-size: 2em; 59 | font-weight: bold; 60 | } 61 | 62 | .white-text{ 63 | color: #fff; 64 | } 65 | 66 | h4 a:hover{ 67 | color: #46b798; 68 | } 69 | footer{ 70 | background-color: #E95420; 71 | color: #fff; 72 | } 73 | 74 | .footer-distributed{ 75 | background-color: #E95420; 76 | box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 77 | box-sizing: border-box; 78 | width: 100%; 79 | text-align: left; 80 | font: bold 16px; 81 | 82 | padding: 55px 50px; 83 | margin-top: 80px; 84 | } 85 | 86 | .footer-distributed .footer-left, 87 | .footer-distributed .footer-center, 88 | .footer-distributed .footer-right{ 89 | display: inline-block; 90 | vertical-align: top; 91 | } 92 | 93 | /* Footer left */ 94 | 95 | .footer-distributed .footer-left{ 96 | width: 40%; 97 | } 98 | 99 | /* The company logo */ 100 | 101 | .footer-distributed h3{ 102 | color: #ffffff; 103 | font-size: 36px; 104 | margin: 0; 105 | } 106 | 107 | 108 | /* Footer links */ 109 | 110 | .footer-distributed .footer-links{ 111 | color: #ffffff; 112 | margin: 20px 0 12px; 113 | padding: 0; 114 | } 115 | 116 | .footer-distributed .footer-links a{ 117 | display:inline-block; 118 | line-height: 1.8; 119 | text-decoration: none; 120 | color: inherit; 121 | } 122 | 123 | .footer-distributed .footer-company-name{ 124 | 125 | font-size: 14px; 126 | font-weight: normal; 127 | margin: 0; 128 | } 129 | 130 | /* Footer Center */ 131 | 132 | .footer-distributed .footer-center{ 133 | width: 35%; 134 | } 135 | 136 | .footer-distributed .footer-center i{ 137 | color: #ffffff; 138 | font-size: 25px; 139 | width: 38px; 140 | height: 38px; 141 | border-radius: 50%; 142 | text-align: center; 143 | line-height: 42px; 144 | margin: 10px 15px; 145 | vertical-align: middle; 146 | } 147 | 148 | .footer-distributed .footer-center i.fa-envelope{ 149 | font-size: 17px; 150 | line-height: 38px; 151 | } 152 | 153 | .footer-distributed .footer-center p{ 154 | display: inline-block; 155 | color: #ffffff; 156 | vertical-align: middle; 157 | margin:0; 158 | } 159 | 160 | .footer-distributed .footer-center p span{ 161 | display:block; 162 | font-weight: normal; 163 | font-size:14px; 164 | line-height:2; 165 | } 166 | 167 | .footer-distributed .footer-center p a{ 168 | color: #ffffff; 169 | text-decoration: none;; 170 | } 171 | 172 | 173 | /* Footer Right */ 174 | 175 | .footer-distributed .footer-right{ 176 | width: 20%; 177 | } 178 | 179 | .footer-distributed .footer-company-about{ 180 | line-height: 20px; 181 | font-size: 13px; 182 | font-weight: normal; 183 | margin: 0; 184 | } 185 | 186 | .footer-distributed .footer-company-about span{ 187 | display: block; 188 | color: #ffffff; 189 | font-size: 14px; 190 | font-weight: bold; 191 | margin-bottom: 20px; 192 | } 193 | 194 | .footer-distributed .footer-icons{ 195 | margin-top: 25px; 196 | } 197 | 198 | .footer-distributed .footer-icons a{ 199 | display: inline-block; 200 | width: 35px; 201 | height: 35px; 202 | cursor: pointer; 203 | background-color: #ffffff; 204 | border-radius: 2px; 205 | 206 | font-size: 20px; 207 | color: #ffffff; 208 | text-align: center; 209 | line-height: 35px; 210 | 211 | margin-right: 3px; 212 | margin-bottom: 5px; 213 | } 214 | 215 | /* If you don't want the footer to be responsive, remove these media queries */ 216 | 217 | @media (max-width: 880px) { 218 | 219 | .footer-distributed{ 220 | font: bold 14px; 221 | } 222 | 223 | .footer-distributed .footer-left, 224 | .footer-distributed .footer-center, 225 | .footer-distributed .footer-right{ 226 | display: block; 227 | width: 100%; 228 | margin-bottom: 40px; 229 | text-align: center; 230 | } 231 | 232 | .footer-distributed .footer-center i{ 233 | margin-left: 0; 234 | } 235 | } 236 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 || 2 | 23 |1 | 24 |5 | 25 |
| 1 | 28 |||
| 3 | 31 |||