Skip to content

Instantly share code, notes, and snippets.

@mbarkhau
Created September 1, 2019 17:57
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save mbarkhau/872fe094a4262e95ae788bc44710f2d6 to your computer and use it in GitHub Desktop.
weekly-micro-journal-template.html
<html>
<head>
<style>
body {
font-family: Bitter;
font-size: 10pt;
}
body, html {
margin: 0;
padding: 0;
line-height: 2em;
}
@media screen {
body {
background: black;
color: white;
}
}
@media print {
/*.info {display: none;}*/
@page {
padding: 0;
margin: 0mm;
size: 210mm 297mm;
}
}
quote {
display: block;
width: 60mm;
font-style: italic;
line-height: 1.3em;
border-bottom: 0.3mm solid #888;
padding-bottom: 0.5em;
margin-bottom: 0.5em;
}
.info {
display: none;
padding: 15mm;
}
.page {
page-break-before: always;
}
.grid-3 {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-2 {
display: grid;
grid-column-gap: 0;
grid-template-columns: 50% 50%;
}
.day {
padding: 5mm;
height: 138mm;
}
.day-tl, .day-tr {
border-bottom: 0.2mm dashed #888;
}
.day-tl, .day-bl {
border-right: 0.2mm dashed #888;
}
.when-where-who-mood {
float: right;
text-align: right;
}
.day {
position: relative;
}
.bottom {
position: absolute;
border-top: 0.2mm solid #888;
bottom: 0;
height: 90mm;
width: 90%;
}
.section {
margin-bottom: 4em;
}
.when {
font-weight: bold;
}
.mood {
margin-top: 8mm;
}
.who {
margin-top: 25mm;
}
</style>
</head>
<body>
<div class="page grid-2">
<div class="day day-tl day-7">
<div class="when-where-who-mood">
<div class="when">{date_str[7]}</div>
<div class="where">Where</div>
<div class="mood">Mood</div>
<div class="who">Who</div>
</div>
<quote>{quotes[7]}</quote>
<div class="section">
<span class="purpose">Your purpose today:</span>
</div>
<div class="bottom">
<div class="section">
<span class="title">What were you up to?</span>
</div>
<div class="section">
<span class="title">What are you thankful for?</span>
</div>
<div class="section">
<span class="title">What's been on your mind?</span>
</div>
</div>
</div>
<div class="day day-tr week">
<div class="when-where-who-mood">
<div class="when">{week_title}</div>
</div>
<quote class="mantra">{mantra}</quote>
<div class="section">
<span class="title">What is your purpose this week?</span>
</div>
</div>
<div class="day day-bl day-5">
<div class="when-where-who-mood">
<div class="when">{date_str[5]}</div>
<div class="where">Where</div>
<div class="mood">Mood</div>
<div class="who">Who</div>
</div>
<quote>{quotes[5]}</quote>
<div class="section">
<span class="purpose">Your purpose today:</span>
</div>
<div class="bottom">
<div class="section">
<span class="title">What were you up to?</span>
</div>
<div class="section">
<span class="title">What are you thankful for?</span>
</div>
<div class="section">
<span class="title">What's been on your mind?</span>
</div>
</div>
</div>
<div class="day day-br day-2">
<div class="when-where-who-mood">
<div class="when">{date_str[2]}</div>
<div class="where">Where</div>
<div class="mood">Mood</div>
<div class="who">Who</div>
</div>
<quote>{quotes[2]}</quote>
<div class="section">
<span class="purpose">Your purpose today:</span>
</div>
<div class="bottom">
<div class="section">
<span class="title">What were you up to?</span>
</div>
<div class="section">
<span class="title">What are you thankful for?</span>
</div>
<div class="section">
<span class="title">What's been on your mind?</span>
</div>
</div>
</div>
</div>
<div class="page grid-2">
<div class="day day-tl day-1">
<div class="when-where-who-mood">
<div class="when">{date_str[1]}</div>
<div class="where">Where</div>
<div class="mood">Mood</div>
<div class="who">Who</div>
</div>
<quote>{quotes[1]}</quote>
<div class="section">
<span class="purpose">Your purpose today:</span>
</div>
<div class="bottom">
<div class="section">
<span class="title">What were you up to?</span>
</div>
<div class="section">
<span class="title">What are you thankful for?</span>
</div>
<div class="section">
<span class="title">What's been on your mind?</span>
</div>
</div>
</div>
<div class="day day-tr day-6">
<div class="when-where-who-mood">
<div class="when">{date_str[6]}</div>
<div class="where">Where</div>
<div class="mood">Mood</div>
<div class="who">Who</div>
</div>
<quote>{quotes[6]}</quote>
<div class="section">
<span class="purpose">Your purpose today:</span>
</div>
<div class="bottom">
<div class="section">
<span class="title">What were you up to?</span>
</div>
<div class="section">
<span class="title">What are you thankful for?</span>
</div>
<div class="section">
<span class="title">What's been on your mind?</span>
</div>
</div>
</div>
<div class="day day-bl day-3">
<div class="when-where-who-mood">
<div class="when">{date_str[3]}</div>
<div class="where">Where</div>
<div class="mood">Mood</div>
<div class="who">Who</div>
</div>
<quote>{quotes[3]}</quote>
<div class="section">
<span class="purpose">Your purpose today:</span>
</div>
<div class="bottom">
<div class="section">
<span class="title">What were you up to?</span>
</div>
<div class="section">
<span class="title">What are you thankful for?</span>
</div>
<div class="section">
<span class="title">What's been on your mind?</span>
</div>
</div>
</div>
<div class="day day-br day-4">
<div class="when-where-who-mood">
<div class="when">{date_str[4]}</div>
<div class="where">Where</div>
<div class="mood">Mood</div>
<div class="who">Who</div>
</div>
<quote>{quotes[4]}</quote>
<div class="section">
<span class="purpose">Your purpose today:</span>
</div>
<div class="bottom">
<div class="section">
<span class="title">What were you up to?</span>
</div>
<div class="section">
<span class="title">What are you thankful for?</span>
</div>
<div class="section">
<span class="title">What's been on your mind?</span>
</div>
</div>
</div>
</div>
<div class="page info">
<hr/>
<h1>Life is finite. Make the best of it.</h1>
<br/>
<p>This is a template for a journal. It gives a structure and ceremony to your life.</p>
<br/>
<div class="grid-3">
<div class="grid-1of3">
<p>Each Sunday this is your cerimony:</p>
<ol>
<li>Print this template in duplex</li>
<li>Cut the page across in half</li>
<li>Lay the two halves on each other</li>
<li>Fold down the center</li>
<li>Staple together</li>
<li>Write your purpose for this week</li>
<li>If you wish to fast, this is the day</li>
</ol>
</div>
<div class="grid-2of3">
<p>Each morning this is your cerimony:</p>
<ol>
<li>Clean your nose</li>
<li>Take a deep breath</li>
<li>Drink some water</li>
<li>Recite your mantra</li>
</ol>
<p>Read:</p>
<ul>
<li>Your purpose for the the week</li>
<li>Your purpose for the the day</li>
<li>Quote of the day</li>
</ul>
</div>
<div class="grid-3of3">
<p>Each evening this is your cerimony:</p>
<ol>
<li>Clean your nose</li>
<li>Take a deep breath</li>
<li>Drink some water</li>
<li>Recite your mantra</li>
</ol>
<p>Write</p>
<ul>
<li>Where were you?</li>
<li>Who were you with?</li>
<li>What did you do?</li>
<li>What have you been thinking about?</li>
<li>What are you greatful for</li>
<li>What opportunites are open to you</li>
<li>Your purpose for the next day</li>
</ul>
</div>
</div>
</div>
<script>
(function(w, d){
'strict';
const MANTRA = [
"Lord give me strength,<br/>&nbsp;to endure what I cannot change,",
"Lord give me courage,<br/>&nbsp;to change what is in my power,",
"Lord give me wisdom,<br/>&nbsp;to know one from the other.",
].join("<br/>");
// https://stackoverflow.com/a/6274381/62997
function shuffle(a) {
var j, x, i;
for (i = a.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
x = a[i];
a[i] = a[j];
a[j] = x;
}
return a;
}
function pad(num, size) {
var s = num+"";
while (s.length < size) s = "0" + s;
return s;
}
Date.prototype.getWeek = function() {
var date = new Date(this.getTime());
date.setHours(0, 0, 0, 0);
// Thursday in current week decides the year.
date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
// January 4 is always in week 1.
var week1 = new Date(date.getFullYear(), 0, 4);
// Adjust to Thursday in week 1 and count number of weeks from date to week1.
return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000
- 3 + (week1.getDay() + 6) % 7) / 7);
}
// Based on http://www.wiseoldsayings.com/stoicism-quotes/
const QUOTES = shuffle([
"All that I seek is already within me.",
"To improve is more important than to be perfect.",
"I will not abuse any substance to distract from my life.",
"Life is but a walking shadow.",
"Out, out brief candle.",
"Hope is for losers.",
"All good things must come to an end.",
"To live in fear is to be a slave.",
"Work is not a wolf, it won't run off into the woods.",
"The light that burns twice as bright burns half as long.",
"All those moments will be lost in time, like tears in rain.",
"No matter what happens, it is in your power to live a life that is good.",
"Before long you will have forgotten everything. Before long, all will have forgotten you.",
"Sometimes in life we must fight without fear, but also without hope.",
"To feel too much is better than not to feel at all.",
"We suffer more in our mind, than we do in reality.",
"You cannot learn what you think you already know.",
"You must cure your soul, more so than your body. It is better to die than to live badly.",
"If it is not right, do not do it,<br/>&nbsp;if it is not true, do not say it.",
"Most men conform and accept misery like a cow standing in the rain.",
"Is it of use to be stoic if nobody notices?",
"You are what you think.",
"If you do not have hope, you neither have dispair.",
"A warrier will suffer in silence.",
"Do not seek contentment. Seek the struggle of pursuing a worth goal.",
"Your mind has the power to not be conquered.",
"Seek to control your emotions, not to eradicate them.",
"Of fear and suffering make prudence, of mistakes make wisdom, of desire make action.",
"Only in part do you control your destiny, but your dignity you can control completely.",
"Despise life and you shall be its master.",
"The experience of life is not a worthy purpose. Seek purpose and dedicate your life to it.",
"We all love ourselves more than others, yet we care more about their opinion than our own.",
]);
const DAY_MS = 86400 * 1000;
var today = new Date().toISOString().slice(0, 10);
var params = new URLSearchParams(w.location.search);
if (params.has("date")) {
var date = new Date(Date.parse(params.get("date")));
} else if (w.location.search.length == 0) {
w.location = w.location + "?" + "date=" + today;
return;
} else {
w.location = w.location + "&" + "date=" + today;
return;
}
const DAY_NAMES = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
var html = d.body.innerHTML;
const week_num = date.getWeek();
const week_title = "Week " + week_num + " of " + date.getFullYear();
for (var i = 1; i < 9; i++) {
var date_str = [
DAY_NAMES[date.getDay()],
" ",
10000 + date.getFullYear(),
"-",
pad(date.getMonth(), 2),
"-",
pad(date.getDate(), 2),
].join("")
html = html.replace("{date_str[" + i + "]}", date_str);
date = new Date(+date + DAY_MS);
}
html = html.replace("{week_title}", week_title);
html = html.replace("{mantra}", MANTRA);
html = html.replace("{quotes[1]}", QUOTES[1]);
html = html.replace("{quotes[2]}", QUOTES[2]);
html = html.replace("{quotes[3]}", QUOTES[3]);
html = html.replace("{quotes[4]}", QUOTES[4]);
html = html.replace("{quotes[5]}", QUOTES[5]);
html = html.replace("{quotes[6]}", QUOTES[6]);
html = html.replace("{quotes[7]}", QUOTES[7]);
d.body.innerHTML = html;
})(window, document);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment