mirror of
https://github.com/johannesjo/super-productivity.git
synced 2026-07-31 19:50:44 +00:00
344 lines
9.9 KiB
HTML
344 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Super Productivity</title>
|
||
|
||
<meta
|
||
content="width=device-width, initial-scale=1"
|
||
name="viewport"
|
||
/>
|
||
<link
|
||
href="favicon.ico"
|
||
rel="shortcut icon"
|
||
type="image/x-icon"
|
||
/>
|
||
<link
|
||
href="assets/icons/apple-touch-icon.png"
|
||
rel="apple-touch-icon"
|
||
sizes="180x180"
|
||
/>
|
||
<link
|
||
href="assets/icons/favicon-16x16.png"
|
||
rel="icon"
|
||
sizes="16x16"
|
||
type="image/png"
|
||
/>
|
||
<link
|
||
href="assets/icons/favicon-32x32.png"
|
||
rel="icon"
|
||
sizes="32x32"
|
||
type="image/png"
|
||
/>
|
||
<link
|
||
href="assets/icons/favicon-192x192.png"
|
||
rel="icon"
|
||
sizes="192x192"
|
||
type="image/png"
|
||
/>
|
||
<link
|
||
color="#5bbad5"
|
||
href="assets/icons/safari-pinned-tab.svg"
|
||
rel="mask-icon"
|
||
/>
|
||
|
||
<meta
|
||
content="assets/icons/s/mstile-150x150.png"
|
||
name="msapplication-TileImage"
|
||
/>
|
||
<meta
|
||
content="#0b77d2"
|
||
name="msapplication-TileColor"
|
||
/>
|
||
|
||
<link
|
||
href="manifest.json"
|
||
rel="manifest"
|
||
/>
|
||
<meta
|
||
content="#0b77d2"
|
||
name="theme-color"
|
||
/>
|
||
<meta
|
||
content="yes"
|
||
name="mobile-web-app-capable"
|
||
/>
|
||
<meta
|
||
content="#2b5797"
|
||
name="msapplication-TileColor"
|
||
/>
|
||
<meta
|
||
content="assets/icons/browserconfig.xml"
|
||
name="msapplication-config"
|
||
/>
|
||
<!-- Enable all requests and inline styles for painless development.
|
||
TODO configure more restrictive Content-Security-Policy
|
||
@see http://content-security-policy.com/
|
||
@see http://www.html5rocks.com/en/tutorials/security/content-security-policy/ -->
|
||
<meta
|
||
content="default-src *;
|
||
frame-src * data:;
|
||
font-src * data:;
|
||
img-src * data: filesystem: file:;
|
||
style-src * 'unsafe-inline' ;
|
||
script-src * 'self' 'unsafe-inline' 'unsafe-eval'"
|
||
http-equiv="Content-Security-Policy"
|
||
/>
|
||
<base href="./" />
|
||
<style type="text/css">
|
||
html,
|
||
body {
|
||
height: 100%;
|
||
}
|
||
|
||
body {
|
||
background-position: center !important;
|
||
background-repeat: no-repeat;
|
||
background-size: cover !important;
|
||
background-image: url(./assets/bg/NIGHT_manuel-will.jpg);
|
||
height: 100%;
|
||
padding: 0;
|
||
margin: 0;
|
||
color: #fff;
|
||
}
|
||
|
||
@media (prefers-color-scheme: light) {
|
||
body {
|
||
background: transparent;
|
||
background-image: none;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.loading-full-page-wrapper {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
cursor: grab;
|
||
-webkit-app-region: drag;
|
||
}
|
||
|
||
.loading-full-page-wrapper:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.app-loading {
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.app-loading .logo {
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 90px;
|
||
height: 90px;
|
||
}
|
||
|
||
.app-loading .spinner {
|
||
width: 140px;
|
||
height: 140px;
|
||
|
||
position: relative;
|
||
margin: 100px auto;
|
||
}
|
||
|
||
.app-loading .double-bounce1,
|
||
.app-loading .double-bounce2 {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
background-color: #6495ed;
|
||
opacity: 0.6;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
-webkit-animation: sk-bounce 2s infinite ease-in-out;
|
||
animation: sk-bounce 2s infinite ease-in-out;
|
||
}
|
||
|
||
.app-loading .double-bounce2 {
|
||
-webkit-animation-delay: -1s;
|
||
animation-delay: -1s;
|
||
}
|
||
|
||
.productivity-tip {
|
||
text-align: center;
|
||
position: absolute;
|
||
width: 400px;
|
||
max-width: 80vw;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
bottom: 70%;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.app-loading .productivity-tip h2 {
|
||
font: 500 20px/32px Roboto, 'Helvetica Neue', sans-serif;
|
||
margin: 0 0 8px !important;
|
||
}
|
||
|
||
.app-loading .productivity-tip p {
|
||
font: 400 14px/20px Roboto, 'Helvetica Neue', sans-serif;
|
||
margin: 0 0 8px !important;
|
||
}
|
||
|
||
@keyframes sk-bounce {
|
||
0%,
|
||
100% {
|
||
transform: scale(0);
|
||
-webkit-transform: scale(0);
|
||
}
|
||
50% {
|
||
transform: scale(1);
|
||
-webkit-transform: scale(1);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="mat-typography">
|
||
<app-root>
|
||
<div class="loading-full-page-wrapper">
|
||
<div class="app-loading">
|
||
<div class="productivity-tip">
|
||
<h2 id="heading">Heading</h2>
|
||
<p id="text">Text</p>
|
||
</div>
|
||
|
||
<div class="spinner">
|
||
<div class="double-bounce1"></div>
|
||
<div class="double-bounce2"></div>
|
||
</div>
|
||
|
||
<svg
|
||
class="logo"
|
||
viewBox="0 0 64 64"
|
||
>
|
||
<path
|
||
d="M 0.65537046,34.582787 32.452267,63.855301 63.791548,0.94356422 30.222644,47.722023 Z"
|
||
id="path3395"
|
||
style="
|
||
fill: #000000;
|
||
fill-opacity: 1;
|
||
fill-rule: evenodd;
|
||
stroke: none;
|
||
stroke-width: 1.46761858;
|
||
stroke-linecap: butt;
|
||
stroke-linejoin: bevel;
|
||
stroke-miterlimit: 13.80000019;
|
||
stroke-dasharray: none;
|
||
stroke-opacity: 1;
|
||
"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</app-root>
|
||
<noscript>Please enable JavaScript to continue using this application.</noscript>
|
||
<script>
|
||
var productivityTips = [
|
||
[
|
||
'There is only one solution to complex problems',
|
||
'Try and correct, try and correct, try and correct, try and correct, try and correct...',
|
||
],
|
||
[
|
||
'2 Step Super Productivity',
|
||
'1. Physically get in your work position. 2. Do one small thing.',
|
||
],
|
||
['Prioritize', 'Do first things first.'],
|
||
[
|
||
'Procrastination',
|
||
'Procrastination is an emotion regulation problem, not a time management problem.',
|
||
],
|
||
[
|
||
'π',
|
||
'When in doubt use the magic programmers estimation factor to calculate time estimates. Programmers estimate times π.',
|
||
],
|
||
['Be realistic', 'Almost everything will take longer than you think.'],
|
||
[
|
||
'Good is good enough',
|
||
'Don`t aim for perfection. Focus on the important things.',
|
||
],
|
||
[
|
||
'Distractions',
|
||
'If something is distracting you, get rid of it. If you can`t get it out of your head and you can deal with it later, write it down.',
|
||
],
|
||
['Fun things first', 'The dopamine can get you through the rest.'],
|
||
[
|
||
'Celebrate!',
|
||
'After completing a task, don`t rush to the next! Give yourself some time to feel good about yourself.',
|
||
],
|
||
[
|
||
'Establish Routines',
|
||
'Decisions cost time. So establishing routines can be very helpful.',
|
||
],
|
||
[
|
||
'Take breaks',
|
||
'They help you clear your mind and make you almost always more productive in the long run. Go! Take a walk!',
|
||
],
|
||
['Mess creates stress', 'Clean up your desk!'],
|
||
['Focus on a single task', 'Multi-tasking is the worst.'],
|
||
[
|
||
'Set your goals',
|
||
'Having a goal to aim for (or even some smaller ones) increases motivation and focus. Remind yourself why you are doing something.',
|
||
],
|
||
[
|
||
'Try to get it right the first time',
|
||
'This can help you to avoid dragging a task on forever.',
|
||
],
|
||
[
|
||
'We are what we repeatedly do.',
|
||
'Excellence, then, is not an act, but a habit. – Aristotle',
|
||
],
|
||
[
|
||
'You don’t learn to walk by following rules.',
|
||
'You learn by doing, and by falling over. – Richard Branson',
|
||
],
|
||
['A problem well-put is half-solved', '― John Dewey'],
|
||
[
|
||
"Either like what you do or know why you're doing it.",
|
||
'If not, consider doing something else.',
|
||
],
|
||
['Wisdom is learning what to overlook', '― William James'],
|
||
[
|
||
'It is not that I’m so smart',
|
||
'But I stay with the questions much longer – Albert Einstein',
|
||
],
|
||
['No problem can withstand the assault of sustained thinking', '― Voltaire'],
|
||
[
|
||
"I have not failed. I've just found 10,000 ways that won't work.",
|
||
'― Thomas A. Edison',
|
||
],
|
||
[
|
||
'Review and Reflect',
|
||
"At the end of the day or week, review your progress and reflect on what worked and what didn't. Adjust your strategies accordingly.",
|
||
],
|
||
[
|
||
'Set Realistic Expectations',
|
||
"Don't overburden yourself with an unrealistic workload. Be honest about what you can accomplish in a given time frame.",
|
||
],
|
||
[
|
||
'Prioritize Tasks',
|
||
"Use techniques like the Eisenhower Matrix (urgent vs. important) to prioritize your tasks. Focus on what's most important and time-sensitive.",
|
||
],
|
||
[
|
||
'Always be kind to yourself',
|
||
'Productivity is impossible without good self care (at the very least in the long run).',
|
||
],
|
||
[
|
||
'The path to progress is all about self evaluation',
|
||
'From time to time you should reflect if your goals and methods serve you well.',
|
||
],
|
||
];
|
||
var randomIndex = Math.floor(Math.random() * productivityTips.length);
|
||
document.getElementById('heading').innerText = productivityTips[randomIndex][0];
|
||
document.getElementById('text').innerText = productivityTips[randomIndex][1];
|
||
</script>
|
||
</body>
|
||
</html>
|