forked from angrytongan/calendararc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (84 loc) · 3.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
<title>Calendar Arc</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="site/mithril.min.js" type="text/javascript"></script>
<style>
body {
width: 700px;
margin: auto;
}
table {
width: 100%;
}
td {
width: 50%;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const go = document.getElementById('go');
const today = new Date();
const startDate = [
{ label: '1st of this year', value: today.getFullYear() + "0101", },
{ label: 'Today', value: '' },
{ label: '1st of next year', value: (today.getFullYear() + 1) + "0101", },
];
let selectedStartDate = startDate[0].value;
m.render(go, [
m('ul', [
m('li', [
m('span', 'Start date '),
m('select', {
onchange: (e) => {
selectedStartDate = e.currentTarget.value;
},
}, startDate.map((o) => m('option', {
selected: o.value == selectedStartDate,
value: o.value,
}, o.label))),
]),
]),
m('button', {
onclick: () => {
const parms = 'style=colour-wheel&' +
`start=${selectedStartDate}`;
window.location.assign(`site/c.html?${parms}`);
},
}, 'Generate')
]);
});
</script>
</head>
<body>
<h1>Calendar Arc</h1>
<p>The Calendar Arc merges the chain productivity method with a
multi-use calendar to give you a highly functional map of your
year.</p>
<div><img src="site/ca-whole.png" alt="Calendar Arc whole" /></div>
<p>A calendar, but laid out in a circle rather than rectangle, and uses
the principle of the
<a href="https://www.google.com/search?q=chain+productivity+method&oq=chain+productivity+method">chain productivity method</a> to help track progress in your goals.
<a href="https://www.kickstarter.com/projects/1798348595/calendar-arc-an-elegant-one-page-productivity-cale">More about the calendar here.</a></p>
<h2>Generate your own</h2>
<p>You can generate your own version of the calendar arc and print
it out. You may have to scroll your window after generation to see
the calendar, as it's rendered in high resolution.</p>
<p>The generator has only been tested on Google Chrome; YMMV on
other browsers.</p>
<div id="go"></div>
<h2>Some pics</h2>
<img src="site/ca-using.jpeg" title="printuse" alt="In print" />
<img src="site/ca-detail.png" title="Close up" alt="Close up" />
<img src="site/ca-prototypes.jpeg" title="Prototypes" alt="Prototypes" />
<h2>Rationale</h2>
<ul>
<li>I needed to track some goals but see an entire year at a time.</li>
<li>I wanted to learn <a href="https://d3js.org/">d3.js</a>.</li>
</ul>
<h2>Source</h2>
<p>Calendar Arc is open source and available on <a href="https://github.com/angrytongan/calendararc">GitHub</a>.</p>
</body>
</html>