quack.gay/stoplight.html

99 lines
6.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<title>Stoplight Schema</title>
<link rel="stylesheet" href="./stoplight-styles.css">
<link rel="icon" href="./res/icon.png">
</head>
<body>
<div id="wrapper">
<header>
<h1>Stoplight Schema</h1>
<nav>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="./stoplight">Stoplight Schema</a>
</li>
</ul>
</nav>
<hr>
</header>
<div id="content">
<p>Managing routines is a very important part of me being able to function as a person. In trying to do this, there's one major problem I'd consistently come across.</p>
<p>In every system I make to manage my routines, I would create it for one version of me. It would work best for my headspace and energy level at the time, and when that headspace would shift the system would fall apart.</p>
<p>Enter, the Stoplight Schema...</p>
<div class="example-img-container">
<img width="100%" src="./res/stoplight-habit-v2.png" alt="Habit Tracker with additional energy level indicators, and markers to associate tasks with energy levels.">
</div>
<hr>
<p>This may look like your standard habit tracker, but it has a few unique traits that help you get stuff done, no matter your energy level.</p>
<p>It does this by allowing you to:</p>
<ul>
<li>Keep your energy level in mind as best you can.</li>
<li>Do only what is required with respect to your energy level.</li>
</ul>
<p>Both of these things together help you avoid burnout while getting what's required done. Now, how does this work?</p>
<hr>
<svg width="24", height="32">
<rect x="0", y="24", width="16", height="8", fill="#FC6467"></rect>
<rect x="0", y="12", width="16", height="8", fill="#FFD483"></rect>
<rect x="0", y="0", width="16", height="8", fill="#6E9277"></rect>
</svg>
<hr>
<p>These "stoplights" represent your energy level. Green being high-energy, yellow being mid-energy, and red being low-energy. You'll see these next to spots where you can write a task, and above each date.</p>
<p>Here's how you use it:</p>
<ol>
<li>Write each task on the list in the space provided.</li>
<li>Mark the energy level associated with each task.
<ul>
<li>Red items are tasks that must be done, like brushing your teeth or taking medicine.</li>
<li>Yellow items are tasks that should be done, like showering or applying deodorant.</li>
<li>Green items are tasks that can be done, like applying lotion or planning for tomorrow.</li>
</ul>
</li>
<li>Each day, mark your energy level when you start the routine (or day in the habit tracker version).</li>
<ul>
<li>You are only required to do tasks labeled at or below the energy level you marked down.</li>
</ul>
</ol>
<hr>
<p>This system has benefit me in allowing my routines to be as flexible as I require, and by allowing me to be kinder to myself for not getting everything done every day; especially cutting myself some slack on low-energy days.</p>
<p>Feel free to take elements from this or modify it however you wish, hope you're able to find some benefit from it as well!</p>
<hr>
<div id="downloads">
<h3>Downloads</h3>
<div class="img-container">
<a href="./res/stoplight-habit-v2.pdf"><img class="dl-img" src="./res/stoplight-habit-v2.png" alt="stoplight schema habit tracker download"></a>
<figcaption>A basic habit tracker.</figcaption>
</div>
<div class="img-container">
<a href="./res/stoplight-routine-v2.pdf"><img class="dl-img" src="./res/stoplight-routine-v2.png" alt="stoplight schema routine tracker download"></a>
<figcaption>A routine tracker, allowing you to split up things a bit more.</figcaption>
</div>
<div class="img-container">
<a href="./res/stoplight-routine-weekly-v2.pdf"><img class="dl-img" src="./res/stoplight-routine-weekly-v2.png" alt="stoplight schema weekly routine tracker download"></a>
<figcaption>A weekly routine tracker, for routines done only once a week, like laundry.</figcaption>
</div>
<div class="img-container">
<a href="./res/stoplight-key-v2.pdf"><img class="dl-img" src="./res/stoplight-key-v2.png" alt="stoplight schema key download"></a>
<figcaption>A printable key to help track any custom symbols you come up with.</figcaption>
</div>
<div class="img-container">
<a href="./res/stoplight-routine-v2-bw.pdf"><img class="dl-img" src="./res/stoplight-routine-v2-bw.png" alt="stoplight schema black and white routine tracker download"></a>
<figcaption>A black and white version of the routine tracker, colorblind friendly. :)</figcaption>
</div>
</div>
</div>
<footer>
<hr>
<p>ur gay <3</p>
</footer>
</div>
</body>
</html>