<div style="text-align-center"><h1>Useful Examples of Possible Functions</h1></div>
<hr>
## Dataview Examples
---
```dataview
TABLE wake-up, go-to-sleep, wakeTime
FROM "10 Example Data/dailys"
LIMIT 10
FLATTEN dateformat(file.day, "yyyy-MM-dd") as dt
FLATTEN dur(date(dateformat(file.day, "yyyy-MM-dd")
+ "T" + go-to-sleep)
- date(dateformat(file.day, "yyyy-MM-dd") + "T" + wake-up))
as wakeTime
```
Time Difference Calculation
```dataview
table
work-start,
work-end,
work-end - work-start AS duration
from #Repository
```
## Comments
---
You can add comments by wrapping text with `%%`. Comments are only visible in Editing view.
#### Example:
---
%%
This is a note, this should always be invisible unless you are in editing
%%
---
^ The above space between the lines has a comment in it that is visible in editing mode.
## Useful HTML Snippets
---
<p style="color:blue;font-size:80px;">This is demo text</p>
<div style="text-align:center;font-size:50px;">HTML Align Center Text</div>
## Mermaid Diagram - Flowchart [^1]:
---
Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.
```mermaid
graph TD
id1(Test-01)
id1.1(Test-02)
id1 --> id1.1
```
<br>
<br>
## Mermaid Diagram - Sequence [^2]
<hr>
A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
```mermaid
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
```
<br>
<br>
<br>
## Mermaid Diagram - Timeline[^3]
---
A timeline is a type of diagram used to illustrate a chronology of events, dates, or periods of time. It is usually presented graphically to indicate the passing of time, and it is usually organized chronologically. A basic timeline presents a list of events in chronological order, usually using dates as markers. A timeline can also be used to show the relationship between events, such as the relationship between the events of a person's life.
```mermaid
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
```
## Other Examples
<hr>
```mermaid
timeline
title Test
1987 : Lash was born
: The Last of the Dragons Die
1990 : Jack was born
```
Short Summary
<p>text to hide</p>
</details>
```
rebirths = 4
function checkUnlock() {
if (rebirths >= 4) {
document.getElementById("turtle").visibility = "visible";
} else {
document.getElementById("turtle").visibility = "hidden";
}
if (Magiclv >= 10) {
document.getElementById("lizard").visibility = "visible";
} else {
document.getElementById("lizard").visibility = "hidden";
}
if (wolf >= 1) {
document.getElementById("wolf").visibility = "visible";
} else {
document.getElementById("wolf").visibility = "hidden";
}
function Turtlepassive(){
if (rebirths >= 3){
}
```
## Content Boxes
---
### content-box-white
<div class="content-box-white">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
### content-box-black
<div class="content-box-black">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
### content-box-sheet-AI
<div class="content-box-sheet-AI">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
### content-box-table-black
---
<div class="content-box-table-black">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
### content-box-table-black-small
---
<div class="content-box-table-black">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
### content-box-sheet-left
---
<div class="content-box-sheet-left">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
### content-box-sheet-right
---
<div class="content-box-sheet-right">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
### content-box-sheet-alt
---
<div class="content-box-sheet-alt">
<div img src="Illyria - 01.jpg"
alt="This is supposed to be a profile picture"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
### content-box-dnd-item
---
<div class="content-box-dnd-item">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
### content-box-float
---
<div class="content-box-float">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
### content-box-full
---
<div class="content-box-full">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
### content-box2
---
<div class="content-box2">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
### border-box
---
<div class="border-box">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
### responsive
---
<div class="responsive">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
### box-image
---
<div class="box-image">
<div img src="Illyria - 01.jpg"
align="center"
class="internal-embed"
name="profile"
>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
---
[^1]: Flowchart Diagram: https://mermaid.js.org/syntax/flowchart.html
[^2]: Sequence Diagram: https://mermaid.js.org/syntax/sequenceDiagram.html
[^3]: Timeline Diagram: https://mermaid.js.org/syntax/timeline.html