Dashboard

Developer
Daniel Gooß
Size
25,043 Kb
Views
16,192
  1. Dashboard Previews
  2. Dashboard HTML Codes
  3. Dashboard CSS Codes
  4. Dashboard JS Codes

How do I make an dashboard?

Playground for adding different APIs and displaying them in a nice context.Current APIs: * Google Maps JS API V3. What is a dashboard? How do you make a dashboard? This script and codes were developed by Daniel Gooß on 10 November 2022, Thursday.

Dashboard Previews
IQ Test

Dashboard - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dashboard</title> <meta name="viewport" content="width=device-width,minimal-ui"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face { font-family: 'icons'; src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAA1sAAoAAAAADSQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAACeIAAAniYHBo4E9TLzIAAArYAAAAYAAAAGAIIvy+Y21hcAAACzgAAABMAAAATBpVzF9nYXNwAAALhAAAAAgAAAAIAAAAEGhlYWQAAAuMAAAANgAAADYACoPraGhlYQAAC8QAAAAkAAAAJAPiAe5obXR4AAAL6AAAADQAAAA0EwABRm1heHAAAAwcAAAABgAAAAYADVAAbmFtZQAADCQAAAEnAAABJ7xPH+Vwb3N0AAANTAAAACAAAAAgAAMAAAEABAQAAQEBBmljb25zAAECAAEAOvgcAvgbA/gYBB4KABlT/4uLHgoAGVP/i4sMB4tr+JT4dAUdAAAAoA8dAAAApREdAAAACR0AAAnZEgAOAQEGCw0PEhccISYrMDU6P2ljb25zaWNvbnN1MHUxdTIwdUU2MDB1RTYwMXVFNjAydUU2MDN1RTYwNHVFNjA1dUU2MDZ1RTYwN3VFNjA4AAACAYkACwANAgABAAQABwAKAA0A7QJOArYETwVhBf8GsQenCRb8lA78lA78lA77lA73RvdUFZKwq6ayi7KLq3CSZgiriwWEwVy1U4tTi1xhhFUIq4sF2fcUFZSLkpKLlAiLqwWLlISSgouCi4SEi4IIi2sFi4KShJSLCPcnjhWFkYGLhIUIdXQFhYWLgZGFkYWVi5GRCKKhBZGSi5WFkQj7jXQVdaIFhJGBi4WFhYWLgZGECKJ1BZGFlYuRkZGRi5WFkQj3WvsgFftUiwWCi4SEi4KLgpKElIsI91SLBZSLkpKLlIuUhJKCiwhrSxX7FIsFgouEhIuCi4KShJSLCPcUiwWUi5KSi5SLlISSgosIDveU9+QVTYtZWYtNi029WcmLyYu9vYvJi8lZvU2LCIv7VBVfi2evi7eLt6+vt4u3i69ni1+LX2dnX4sIi/d0FZSLkpKLlAiLqwWLlISSgouCi4SEi4IIi2sFi4KShJSLCIv7tBWCi4SEi4IIi2sFi4KShJSLlIuSkouUCIurBYuUhJKCiwj3EPeKFaKhBZGSi5WFkYWRgYuEhQh1dAWFhYuBkYWRhZWLkZEI+4z7YBV0dQWFhIuBkYWRhZWLkpEIoaIFkZGLlYWRhZGBi4WFCHfxFYuUhJKCiwhriwWCi4SEi4KLgpKElIsIq4sFlIuSkouUCPfkmxVriwWCi4SEi4KLgpKElIsIq4sFlIuSkouUi5SEkoKLCPvQ4RWRhZWLkZGRkYuVhZEIdaIFhJGBi4WFhYWLgZGECKJ1BfeM+2AVhZGBi4WFhYWLgZGFCKF0BZKFlYuRkZGRi5WFkgh0oQUO9/L3HRVZWTqLWb1ZvYvcvb2YmJuVnpKRjZGJj4eQh4yEiYV/aJNlpXCmcbGDrpeRjZKKj4YIj4eNhImGhHiBe35+CPsz9zIVZmaLTrBls2PQj624aIhnmHGmcKV+ro6viImIiYiICA73ZPg0FZSLkpKLlAiLqwWLlISSgouCi4SEi4IIi2sFi4KShJSLCPcQYRWioQWRkouVhZGFkYGLhIUIdXQFhYWLgZGFkYWVi5GRCPvQ+woVq4sFlIuSkouUi5SEkoKLCGuLBYKLhISLgouCkoSUiwj35JsVi4KShJSLCKuLBZSLkpKLlIuUhJKCiwhriwWCi4SEi4II+6DxFZGFlYuRkZGRi5WFkQh1ogWEkYGLhYWFhYuBkYQIonUF99D7KhWGi4WLhop6onWccpaJyFq8TotNi1lZi02Leo96k31PiFtai0+LTb1ZyYuZi5iOmI8IqHKwfbGLsouvmaikmIaYiZmLyYu9vYvJi8lZvU2LCPtU9xQVs4usbpFlgY2AjIGLXYtgd25qhZaHl4uZi7evr7eLCPdU+9QVeot7kX6UdG5oeWOLY4tonXSofoJ7hXqLX4tnr4u3i7evr7eLk4uSipKIjouOio2KCJCUkJKRk6Onrp2yi5WLlYqUiJaJlYeUhqJ/n3eXdJSPlY2Wi7eLr2eLX4tfZ2dfiwgO+Ef3bhWQjpCPj4+YmZabkZ2NkYqSho+Hj4SNholnfmWUcaVxpYKxmK+NkYmRh5CGj4WMhYkIeYV7gX19amqAW5dhYIVkdHFohoyFi4aLTYtZWYtNi029WcmLmYuYjpiPqHKvfbKLCLKLr5mopJiHmIiZi8mLvb2LyYu8a7Vemgj7JPc+FY2Njo6OjYlnmGilcKZxrn6vjX16eIB3hm+uY6Ffjn+tkrOmpgj3Afv4FXqLe5F+lHRuaHlji2OLaJ10qH6Ce4V6i1+LZ6+Lt4u3r6+3i5aLlYmUh6Cysqe6jQiNjI6LjYuYi5eJl4ebh5mDmIGXgZV/k36MiIyJjYmUj5WNlou3i69ni1+LX2dnX4sIDvgk99QVhouFi4aKbbRco1iLWItcc21ihoyFi4aLTYtZWYtNi029WcmLmYuYjpiPqHKwfbGLCLKLr5mopJiGmImZi8mLvb2LyYvJWb1NiwiL+1QVeot7kX6UdG5oeWOLY4tonXSofoJ7hXqLX4tnr4u3i7evr7eLlouViZSHobS1qL2LCL2LtW6hYpSPlY2Wi7eLr2eLX4tfZ2dfiwgO+CT4NBWGi4WLhopttFyjWItYi1xzbWKGjIWLhotNi1lZi02LTb1ZyYuZi5iOmI+XgZmCmoUIpKQFc5J2mXyefoJ7hXqLX4tnr4u3i7evr7eLlouViZSHobS1qL2LvYu1bqFilI+VjZaLCLeLr2eLX4tfZ2dfi3qLe5F+lIF+foF8gwh+YwWgkZ+Wm5mYh5iImYvJi729i8mLyVm9TYsI+2T7tBWra2sr6+trq6vrKysFDvgk+DQVhouFi4aKbbRco1iLWItcc21ihoyFi4aLTYtZWYtNi029WcmLmYuYjpiPqHKwfbGLCLKLr5mopJiGmImZi8mLvb2LyYvJWb1NiwiL+1QVeot7kX6UdG5oeWOLY4tonXSofoJ7hXqLX4tnr4u3i7evr7eLlouViZSHobS1qL2LCL2LtW6hYpSPlY2Wi7eLr2eLX4tfZ2dfiwj7Q/t0FYt5mX2di52LmZmLnYuda7mLi4uLa12LeQj3E6sVi3mZfZ2LnYuZmYudi51ruYuLi4trXYt5CPuUyxWLeZl9nYudi5mZi52LnWu5i4uLi2tdi3kIDvfa9xgVeZYFjI6LjouOi4+LjoqOCJ2VBZOQjpaHk4aUgI6Chgh5gAWGkIaOhY0Ii6AFi5WDk4GLgYuDg4uBCIt2BYWJhoiGhgh5lgWCkICIhoKHg46Ak4YInYEFioiLiIuHi4iLiIyICHmABYOGiIGQgo+DloiUkAidlQWQh5CIkYkIi3YFi4GTg5WLlYuTk4uVCIugBZGNkI6QjwidgQWUhpaOkJOPlImVgpAIRY4VgYuDk4uUi5WTk5WLlYuTg4uBi4KDg4GLCPck960VhouFi4aKbbRco1iLWItcc21ihoyFi4aLTYtZWYtNi029WcmLl4uWjZaPjZCMkI6PCI+SkJGSj4iOh46Ij36Be4Z6i1+LZ6+Lt4u3r6+3i5aLlYmUh6G0tai9i72LtW6hYgiUj5WNlou3i69ni1+LX2dnX4t6i3uRfpSIh4eIiIiSh5CFj4SOh42GjIaWh5aJl4sIyYu9vYvJi8lZvU2LCA74lBT4lBWLDAoAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOYIAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAg5gj//f//AAAAAAAg5gD//f//AAH/4xoEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAA0w61BF8PPPUACwIAAAAAAM91oZcAAAAAz3WhlwAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAANAAAAAAAAAAAAAAAAAQAAAAIAAG0CAAAwAgAAqQIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAAAUAAADQAAAAAADgCuAAEAAAAAAAEACgAAAAEAAAAAAAIADgA5AAEAAAAAAAMACgAgAAEAAAAAAAQACgBHAAEAAAAAAAUAFgAKAAEAAAAAAAYABQAqAAEAAAAAAAoAKABRAAMAAQQJAAEACgAAAAMAAQQJAAIADgA5AAMAAQQJAAMACgAgAAMAAQQJAAQACgBHAAMAAQQJAAUAFgAKAAMAAQQJAAYACgAvAAMAAQQJAAoAKABRAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbgBzaWNvbnMAaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAaQBjAG8AbgBzAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); font-weight: normal; font-style: normal;
}
.icon:before { display: inline-block; font-family: 'icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-sunrise:before { content: "\e600";
}
.icon-01d:before { content: "\e601";
}
.icon-01n:before { content: "\e602";
}
.icon-02d:before { content: "\e603";
}
.icon-02n:before { content: "\e604";
}
.icon-03d:before,
.icon-03n:before,
.icon-04d:before,
.icon-04n:before { content: "\e605";
}
.icon-11d:before,
.icon-11n:before { content: "\e606";
}
.icon-09d:before,
.icon-09n:before,
.icon-10d:before,
.icon-10n:before { content: "\e607";
}
.icon-13d:before,
.icon-13n:before { content: "\e608";
}
body { font-family: 'Lato', sans-serif;
}
a { color: #999;
}
.stage { position: relative; padding: 50px 100px; background: no-repeat 50% 0; background-size: cover;
}
.stage time { color: #fff; font-weight: 300; text-align: center; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.stage time span { display: block;
}
.stage time .time { font-size: 7em;
}
.boxwrap { display: flex; justify-content: space-between; flex-flow: wrap; padding: 0; list-style-type: none; perspective: 1000px; perspective-origin: 50% 50%;
}
@keyframes rotateIn { 0% { opacity: 0; transform: rotate3d(0, 1, 0, 90deg) scale(0.5); } 100 { opacity: 1; transform: rotate3d(0, 1, 0, 0deg) scale(1); }
}
.box { position: relative; z-index: 1; padding: 20px; margin: 0 5px 10px; background-color: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); color: #444; vertical-align: top; animation: rotateIn 1s 0.5s cubic-bezier(0.6, 1.8, 0.5, 0.8) both paused;
}
.box.loaded { animation-play-state: running;
}
.box:nth-of-type(2) { animation-delay: 0.75s;
}
.box:nth-of-type(3) { animation-delay: 1s;
}
.box.weather { flex: 1 0 100px; text-align: center;
}
.box.weather .weather-condition,
.box.weather .temperature,
.box.weather .city { display: block; margin: 0 auto;
}
.box.weather .weather-condition { margin-bottom: 0.094em; font-size: 4em;
}
.box.weather .temperature { font-size: 2em; font-weight: 300;
}
.box.map { min-height: 150px; flex: 1 0 250px;
}
.box.quote { position: relative; padding: 20px 50px; flex: 1 1 250px; quotes: "“" "”" "‘" "’";
}
.box.quote .qod-text { line-height: 1.5em;
}
.box.quote:before { position: absolute; content: open-quote; left: 20px; font-size: 6em; font-family: Georgia;
}
.box.quote:after { position: absolute; content: close-quote; height: 50px; right: 20px; bottom: 20px; font-size: 6em; font-family: Georgia;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="stage" style="background-image: url(https://farm7.staticflickr.com/6180/6181662411_57b095c03a_b.jpg)"> <time class="js_time" datetime="2014-04-17T20:15:00+01:00"> <span class="time js_time">20:15</span> <span class="date js_date">17. April 2014</span> </time> <ul class="boxwrap"> <li class="box weather js_weather"> <div class="icon icon-sunrise weather-condition js_weather-condition"></div> <div class="temperature js_temperature">- °C</div> <div class="city js_weather-city"></div> </li> <li class="box map js_map-canvas"></li> <li class="box quote js_quote loaded"> <blockquote id="qod-quote"> ... loading ... </blockquote> </li> </ul>
</div> <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places'></script>
<script src='https://quotesondesign.com/api/3.0/api-3.0.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dashboard - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face { font-family: 'icons'; src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,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lou3i69ni1+LX2dnX4sIDvgk99QVhouFi4aKbbRco1iLWItcc21ihoyFi4aLTYtZWYtNi029WcmLmYuYjpiPqHKwfbGLCLKLr5mopJiGmImZi8mLvb2LyYvJWb1NiwiL+1QVeot7kX6UdG5oeWOLY4tonXSofoJ7hXqLX4tnr4u3i7evr7eLlouViZSHobS1qL2LCL2LtW6hYpSPlY2Wi7eLr2eLX4tfZ2dfiwgO+CT4NBWGi4WLhopttFyjWItYi1xzbWKGjIWLhotNi1lZi02LTb1ZyYuZi5iOmI+XgZmCmoUIpKQFc5J2mXyefoJ7hXqLX4tnr4u3i7evr7eLlouViZSHobS1qL2LvYu1bqFilI+VjZaLCLeLr2eLX4tfZ2dfi3qLe5F+lIF+foF8gwh+YwWgkZ+Wm5mYh5iImYvJi729i8mLyVm9TYsI+2T7tBWra2sr6+trq6vrKysFDvgk+DQVhouFi4aKbbRco1iLWItcc21ihoyFi4aLTYtZWYtNi029WcmLmYuYjpiPqHKwfbGLCLKLr5mopJiGmImZi8mLvb2LyYvJWb1NiwiL+1QVeot7kX6UdG5oeWOLY4tonXSofoJ7hXqLX4tnr4u3i7evr7eLlouViZSHobS1qL2LCL2LtW6hYpSPlY2Wi7eLr2eLX4tfZ2dfiwj7Q/t0FYt5mX2di52LmZmLnYuda7mLi4uLa12LeQj3E6sVi3mZfZ2LnYuZmYudi51ruYuLi4trXYt5CPuUyxWLeZl9nYudi5mZi52LnWu5i4uLi2tdi3kIDvfa9xgVeZYFjI6LjouOi4+LjoqOCJ2VBZOQjpaHk4aUgI6Chgh5gAWGkIaOhY0Ii6AFi5WDk4GLgYuDg4uBCIt2BYWJhoiGhgh5lgWCkICIhoKHg46Ak4YInYEFioiLiIuHi4iLiIyICHmABYOGiIGQgo+DloiUkAidlQWQh5CIkYkIi3YFi4GTg5WLlYuTk4uVCIugBZGNkI6QjwidgQWUhpaOkJOPlImVgpAIRY4VgYuDk4uUi5WTk5WLlYuTg4uBi4KDg4GLCPck960VhouFi4aKbbRco1iLWItcc21ihoyFi4aLTYtZWYtNi029WcmLl4uWjZaPjZCMkI6PCI+SkJGSj4iOh46Ij36Be4Z6i1+LZ6+Lt4u3r6+3i5aLlYmUh6G0tai9i72LtW6hYgiUj5WNlou3i69ni1+LX2dnX4t6i3uRfpSIh4eIiIiSh5CFj4SOh42GjIaWh5aJl4sIyYu9vYvJi8lZvU2LCA74lBT4lBWLDAoAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOYIAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAg5gj//f//AAAAAAAg5gD//f//AAH/4xoEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAA0w61BF8PPPUACwIAAAAAAM91oZcAAAAAz3WhlwAA/+ACAAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAANAAAAAAAAAAAAAAAAAQAAAAIAAG0CAAAwAgAAqQIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAAAUAAADQAAAAAADgCuAAEAAAAAAAEACgAAAAEAAAAAAAIADgA5AAEAAAAAAAMACgAgAAEAAAAAAAQACgBHAAEAAAAAAAUAFgAKAAEAAAAAAAYABQAqAAEAAAAAAAoAKABRAAMAAQQJAAEACgAAAAMAAQQJAAIADgA5AAMAAQQJAAMACgAgAAMAAQQJAAQACgBHAAMAAQQJAAUAFgAKAAMAAQQJAAYACgAvAAMAAQQJAAoAKABRAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbgBzaWNvbnMAaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAaQBjAG8AbgBzAEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff'); font-weight: normal; font-style: normal;
}
.icon:before { display: inline-block; font-family: 'icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.icon-sunrise:before { content: "\e600";
}
.icon-01d:before { content: "\e601";
}
.icon-01n:before { content: "\e602";
}
.icon-02d:before { content: "\e603";
}
.icon-02n:before { content: "\e604";
}
.icon-03d:before,
.icon-03n:before,
.icon-04d:before,
.icon-04n:before { content: "\e605";
}
.icon-11d:before,
.icon-11n:before { content: "\e606";
}
.icon-09d:before,
.icon-09n:before,
.icon-10d:before,
.icon-10n:before { content: "\e607";
}
.icon-13d:before,
.icon-13n:before { content: "\e608";
}
body { font-family: 'Lato', sans-serif;
}
a { color: #999;
}
.stage { position: relative; padding: 50px 100px; background: no-repeat 50% 0; background-size: cover;
}
.stage time { color: #fff; font-weight: 300; text-align: center; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.stage time span { display: block;
}
.stage time .time { font-size: 7em;
}
.boxwrap { display: flex; justify-content: space-between; flex-flow: wrap; padding: 0; list-style-type: none; perspective: 1000px; perspective-origin: 50% 50%;
}
@keyframes rotateIn { 0% { opacity: 0; transform: rotate3d(0, 1, 0, 90deg) scale(0.5); } 100 { opacity: 1; transform: rotate3d(0, 1, 0, 0deg) scale(1); }
}
.box { position: relative; z-index: 1; padding: 20px; margin: 0 5px 10px; background-color: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); color: #444; vertical-align: top; animation: rotateIn 1s 0.5s cubic-bezier(0.6, 1.8, 0.5, 0.8) both paused;
}
.box.loaded { animation-play-state: running;
}
.box:nth-of-type(2) { animation-delay: 0.75s;
}
.box:nth-of-type(3) { animation-delay: 1s;
}
.box.weather { flex: 1 0 100px; text-align: center;
}
.box.weather .weather-condition,
.box.weather .temperature,
.box.weather .city { display: block; margin: 0 auto;
}
.box.weather .weather-condition { margin-bottom: 0.094em; font-size: 4em;
}
.box.weather .temperature { font-size: 2em; font-weight: 300;
}
.box.map { min-height: 150px; flex: 1 0 250px;
}
.box.quote { position: relative; padding: 20px 50px; flex: 1 1 250px; quotes: "“" "”" "‘" "’";
}
.box.quote .qod-text { line-height: 1.5em;
}
.box.quote:before { position: absolute; content: open-quote; left: 20px; font-size: 6em; font-family: Georgia;
}
.box.quote:after { position: absolute; content: close-quote; height: 50px; right: 20px; bottom: 20px; font-size: 6em; font-family: Georgia;
}

Dashboard - Script Codes JS Codes

//Time
var Clock = function(elem){ var timeNode = elem; var timeNodeTime = timeNode.querySelector('.js_time'); var timeNodeDate = timeNode.querySelector('.js_date'); var lastMinute; this.update = function(){ requestAnimationFrame(this.update); var date = new Date; if(date.getMinutes() != lastMinute){ timeNode.setAttribute('datetime', date.toISOString()); timeNodeTime.textContent = date.getHours() + ':' + (date.getMinutes()<10?'0':'') + date.getMinutes(); timeNodeDate.textContent = date.toLocaleDateString(); lastMinute = date.getMinutes(); } else{ lastMinute = date.getMinutes(); } }.bind(this);	};	var mainClock = new Clock(document.querySelector('.js_time'));	mainClock.update();
//AJAX
var ajax = function(method,url,callback){ var response; var r = new XMLHttpRequest(); r.open(method.toUpperCase(), url, true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; callback(r.responseText) }; r.send();	};
//Quote
/*var Quote = function(elem){ var quoteNode = elem; this.initialize = function(){ ajax('POST','https://quotesondesign.com/api/3.0/api-3.0.json?callback=callback', function(response){ var quoteObject = JSON.parse(response); quoteNode.textContent = quoteObject.quote; quoteNode.classList.add('loaded'); }); };
};
var topQuote = new Quote(document.querySelector('.js_quote'));
topQuote.initialize();*/
//Weather
if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(position) { var geoLocation = new CustomEvent('geoLocation', { 'detail' : {'latitude' : position.coords.latitude, 'longitude': position.coords.longitude }}); window.dispatchEvent(geoLocation); },function() { var geoLocation = new CustomEvent('geoLocation', { 'detail' : false }); window.dispatchEvent(geoLocation); });
}
var Meteo = function(elem){ var meteoNode = elem; var temperatureNode = meteoNode.querySelector('.js_temperature'); var conditionNode = meteoNode.querySelector('.js_weather-condition'); var nameNode = meteoNode.querySelector('.js_weather-city'); this.initialize = function(latitude, longitude){	ajax('get', 'http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + ',de&units=metric', function(response){ response = JSON.parse(response); conditionNode.classList.add('icon-' + response.weather[0].icon); temperatureNode.textContent = Math.round(response.main.temp) + '°C'; nameNode.textContent = response.name; meteoNode.classList.add('loaded'); }); }.bind(this);
};
var topMeteo = new Meteo(document.querySelector('.js_weather'));
//Google Maps API
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.
var GoogleMap = function(elem){ var map; this.initialize = function(latitude,longitude) { var mapOptions = { zoom: 15, mapTypeControl: false, zoomControl: false, streetViewControl: false }; map = new google.maps.Map(elem, mapOptions); // Try HTML5 geolocation if(latitude && longitude) { var pos = new google.maps.LatLng(latitude,longitude); var marker = new google.maps.Marker({ map: map, position: pos, }); // Google Places /*var request = { location: pos, radius: 5000, types: ['subway_station', 'transit_station', 'train_station'] }; infowindow = new google.maps.InfoWindow(); var service = new google.maps.places.PlacesService(map); service.nearbySearch(request, this.places);*/ map.setCenter(pos); } else if(e.detail === false){ this.handleNoGeolocation(true); } else { // Browser doesn't support Geolocation thihandleNoGeolocation(false); } elem.classList.add('loaded'); }.bind(this); this.handleNoGeolocation = function(errorFlag) { if (errorFlag) { var content = 'Error: The Geolocation service failed.'; } else { var content = 'Error: Your browser doesn\'t support geolocation.'; } var options = { map: map, position: new google.maps.LatLng(60, 105), content: content }; var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); }.bind(this); //Google Places /*this.places = function(results, status) { console.log(results, status); if (status == google.maps.places.PlacesServiceStatus.OK) { for (var i = results.length - 1; i >= 0; i--) { this.createMarker(results[i]); } } }.bind(this); this.createMarker = function(place) { console.log('Place: ',place); var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name); infowindow.open(map, this); }); }.bind(this);*/
};
var topMap = new GoogleMap(document.querySelector('.js_map-canvas'));
window.addEventListener('geoLocation', function(e){ topMap.initialize(e.detail.latitude, e.detail.longitude); topMeteo.initialize(e.detail.latitude, e.detail.longitude);
});
Dashboard - Script Codes
Dashboard - Script Codes
Home Page Home
Developer Daniel Gooß
Username daniel_gooss
Uploaded November 10, 2022
Rating 4
Size 25,043 Kb
Views 16,192
Do you need developer help for Dashboard?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Gooß (daniel_gooss) Script Codes
Name
Apple menu redesign
CSSConf EU
CSS Tab-Nav
Text Transition Effect
Base-Style
Navigation concept
Revolver Slideshow with Touch
CSS Blur Effect
SVG Cheat-Sheet
Revolver Slideshow
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!