Skip to content

Commit

Permalink
Adding accordion style instructions.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonjampen
jonjampen committed Feb 24, 2024
1 parent c4f5136 commit 577c5c0
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 47 deletions.
131 changes: 85 additions & 46 deletions app/(info)/instructions/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,106 @@
import React from 'react'
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"

export const metadata = {
title: "Instructions",
}

export default function Instructions() {
let css = `
h3 {
font-size: 22px;
font-weight: 500;
margin-top: 20px
iframe {
margin-bottom: 16px;
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
h4 {
font-size: 20px;
font-weight: 400;
margin-top: 4px
margin-top: 4px;
margin-bottom: 8px;
}`

return (
<div className="flex justify-center">
<section className="mx-10 max-w-[750px] text-justify mb-6">
<h1>Instructions</h1>

<p>Watch this video or read the text below to learn how to use Fatigue Diary.</p>
<div class="aspect-w-16 aspect-h-9 my-2">
<iframe src="https://www.youtube.com/embed/V73Hobz1Sgw?si=iGxJFEZBx7nH8T-T" frameborder="0" allow="accelerometer; autoplay; fullscreen; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<h2>Written Instructions</h2>
<p>Welcome to Fatigue Diary. In this guide, you&apos;ll learn how to effectively manage and improve your energy levels using the app Fatigue Diary.</p>


<h3>Energy Entries</h3>
<h4>Creating Energy Entries</h4>

<p>To maximize the use of Fatigue Diary, create an entry after each activity throughout your day. Click the plus icon.</p>

<p>Choose your current energy level to reflect how you&apos;re feeling. Use lower levels for fatigue and higher levels for energy. The emojis can help you decide.</p>

<p>List the activities you&apos;ve completed since your last entry. Initially, this list may be empty. Start by adding an activity with the plus icon, then select it. Edit or delete activities by tapping the edit icon and selecting the activity you want to modify.</p>

<p>Don&apos;t forget to add notes and, if necessary, adjust the date and time for past entries.</p>

<h4>Managing Energy Entries</h4>

<p>The &apos;Entries&apos; page organizes all your energy entries into daily blocks. Easily edit or delete entries by clicking on them.</p>

<h3>Health Metrics</h3>

<p>You can track your symptoms, medication, therapies, and other health metrics in the metrics tab. Create your own metric, select a color and decide in which chart the metric should be displayed. Then each day, come back to this page and select the desired level for your metrics.</p>

<h3>Dashboard and Analysis</h3>

<p>Now, let&apos;s analyze your data on the &apos;Dashboard.&apos; Select the date and the range you&apos;d like to explore.</p>

<p>Use the interactive charts to understand how your activities, the time of day, and other factors influence your energy levels. Below that, you&apos;ll find automated analysis with color-coded insights into how certain activities influence your energy.</p>
<p>By clicking on &quot;Edit Dashboard&quot; you can create custom charts that display your selected health metrics. Just create a new chart, give it a name, and select which metrics to display in it.</p>

<h3>Developer</h3>

<p>Fatigue Diary is a project developed by <a href="https://jonjampen.ch/">Jon Jampen</a>. Feel free to reach out if you have any questions or need assistance.
Thank you for choosing Fatigue Diary, your ultimate companion for managing your energy levels. Begin your journey toward mastering pacing now!</p>

<p>Welcome to Fatigue Diary. On this page, you&apos;ll learn how to effectively manage and improve your energy levels using the Fatigue Diary app. Watch this video or read the instructions below to learn how to use Fatigue Diary.</p>
<br />
<iframe width="560" height="315" src="https://www.youtube.com/embed/V73Hobz1Sgw?si=sIyQJh9lKhpyQqQD" title="Fatigue Diary App Guide" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<Accordion type="single" collapsible className="w-full mt-4">
<AccordionItem value="item-1">
<AccordionTrigger>What are energy levels?</AccordionTrigger>
<AccordionContent>
<p>To maximize the use of Fatigue Diary, you should create an entry with an energy level after each activity throughout your day. Energy levels are an objective value of how energized you feel. So if the fatigue is worse, choose a lower number than when the fatigue is better. There are also emojis that can help you decide your current energy level.</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>How to track your energy levels and activities?</AccordionTrigger>
<AccordionContent>
<iframe width="560" height="315" src="https://www.youtube.com/embed/V73Hobz1Sgw?si=sIyQJh9lKhpyQqQD&amp;start=16" title="Track energy levels and activities" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>To maximize the use of Fatigue Diary, create an entry after each activity throughout your day. First click the plus icon.</p>
<br />
<p>Choose your current energy level to reflect how you&apos;re feeling. Use lower levels for fatigue and higher levels for energy. The emojis can help you decide.</p>
<br />
<p>List the activities you&apos;ve completed since your last entry. Initially, this list may be empty. Start by adding an activity with the plus icon, then select it. Edit or delete activities by tapping the edit icon and selecting the activity you want to modify.</p>
<br />
<p>Don&apos;t forget to add notes and, if necessary, adjust the date and time for past entries.</p>

</AccordionContent>
</AccordionItem>
<AccordionItem value="item-3">
<AccordionTrigger>How to use Health Metrics to track symptoms, medications, etc?</AccordionTrigger>
<AccordionContent>
{/* TODO add video */}
You can track your symptoms, medication, therapies, and other health metrics in the metrics tab. Create your own metric, select a color and decide in which chart the metric should be displayed. Then each day, come back to this page and select the desired level for your metrics.
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-4">
<AccordionTrigger>How to analyze your data?</AccordionTrigger>
<AccordionContent>
<iframe width="560" height="315" src="https://www.youtube.com/embed/V73Hobz1Sgw?si=sIyQJh9lKhpyQqQD&amp;start=72" title="Analyze your data" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>To analyze your data, go to the &apos;Dashboard.&apos; page. Select the date and the range you&apos;d like to explore.</p>
<br />
<p>Use the interactive charts to understand how your activities, the time of day, and other factors influence your energy levels. Below that, you&apos;ll find automated activity analysis with color-coded insights into how certain activities influence your energy.</p>
<br />
<p>By clicking on &quot;Edit Dashboard&quot; you can create custom charts that display your selected health metrics. Just create a new chart, give it a name, and select which metrics to display in it.</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-5">
<AccordionTrigger>How to edit or delete energy entries?</AccordionTrigger>
<AccordionContent>
<iframe width="560" height="315" src="https://www.youtube.com/embed/V73Hobz1Sgw?si=sIyQJh9lKhpyQqQD&amp;start=96" title="Edit and delete energy entries" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>The &apos;Entries&apos; page organizes all your energy entries into daily blocks. Easily edit or delete entries by clicking on them.</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-6">
<AccordionTrigger>How to edit, delete, or hide activities?</AccordionTrigger>
<AccordionContent>
<iframe width="560" height="315" src="https://www.youtube.com/embed/V73Hobz1Sgw?si=sIyQJh9lKhpyQqQD&amp;start=42" title="edit, delete and hide activities" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
On the &apos;Add Energy Level&apos; screen you can click on the edit icon above the activities. Then, by clicking on the desired activity, you can edit, delete or hide it. Hidden activities are no longer displayed anywhere in the app but they will not be removed from past entries. Deleting an activity will delete it from all past entries. This action cannot be undone!
</AccordionContent>
</AccordionItem>
<AccordionItem value="item-7">
<AccordionTrigger>How to edit, delete, and reorder health metrics?</AccordionTrigger>
<AccordionContent>
{/* TODO add video */}
Health metrics can be edited, delete and reordered from the health tab. Click on the edit icon and then choose the action you want to perform. Hidden metrics will no longer be displayed in the app, this action <b>can</b> be undone and past entries will not be deleted. Deleting a metric will delete all references of the selected metric from past entries. This action <b>cannot</b> be undone!
</AccordionContent>
</AccordionItem>
</Accordion>

<br />
<h4>About the project and developer</h4>
<p>
Fatigue Diary is a project developed by <a href="https://jonjampen.ch/">Jon Jampen</a>. Feel free to reach out if you have any questions or need assistance.
Thank you for choosing Fatigue Diary, your ultimate companion for managing your energy levels. Begin your journey toward mastering pacing now!
</p>
<style>{css}</style>
</section>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/ui/accordion.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const AccordionTrigger = React.forwardRef(({ className, children, ...props }, re
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
"flex flex-1 text-left items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}>
Expand Down

0 comments on commit 577c5c0

Please sign in to comment.