-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (102 loc) · 4.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark light" />
<!-- icon from icon8.com https://icons8.com/icons/set/favicon-dollar-sign -->
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<title>Selling my Stuff</title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body class="dark">
<nav id="top-nav">
<span class="flexbox-container">
<a id="hamburguer-menu" onclick="
this.querySelector('#icon').classList.toggle('open');
const menu = this.parentElement;
if (!menu.classList.contains('active')) { // i.e., don't run this if user clicks on menu button to close it
menu.classList.add('active');
setTimeout(() => window.addEventListener('click', () => {
this.parentElement.classList.remove('active');
this.querySelector('#icon').classList.remove('open');
}, {once: true}), 0);
}
">
<span id="icon"></span>
</a>
<a href="#sale">Stuff on sale</a>
<a onclick="document.getElementById('sort').showModal();">Sort stuff</a>
<a onclick="listItems();">List stuff</a>
<a href="#faq">FAQ</a>
<a href="#contact">Contact</a>
</span>
<div id="dark-mode-component">🌜<input type="range" min="0" max="1" value="0" />🌞</div>
</nav>
<main>
<div id="loading">
<div>Loading content <span class="loading-circle"></span></div>
<div>Please activate Javascript for this site to work!</div>
<div>This website is optimized only for Firefox and Chrome</div>
</div>
<section id="sale">
</section>
<section id="contact">
<h2>Contact</h2>
Send me an email! <a href="mailto:[email protected]">[email protected]</a>
</section>
<section id="faq">
<h2>FAQ</h2>
<ol>
<li>
<p>What is this?</p>
<p>This is a site to sell stuff. The open source code is here on Github.</p>
</li>
<li>
<p>How does "Sort stuff" work?</p>
<p>It won't filter out any stuff that doesn't match the criteria you selected (i.e., it won't make them invisible), it will just <b>present first</b> whatever matches the sorting criteria you chose. This way you can still see the rest of the stuff at the bottom.</p>
<p>If you see an item that doesn't match the sort criteria you chose, it's because from that item downwards nothing else matches the criteria, since all matching items are presented at the beginning of the sales section.</p>
<p>You can sort items by alphabetic order or by price, and restrict sorting to just music items.</p>
</li>
<li>
<p>How do I purchase these?</p>
<p>With cash or via Interac e-transfer, by contacting me to get the deets.</p>
</li>
<li>
<p>Do you ship?</p>
<p>Shipping costs would be paid by the buyer and I'd only ship the item after receiving the full amount. Local pickup is the preferred method though.</p>
</li>
</ol>
</section>
</main>
<dialog id="sort">
<div class="dialog-body">
<div class="dialog-title">Sort stuff</div>
<h4>Sort by:</h4>
<label><input type="radio" name="sort" value="name">Name</label><br>
<label><input type="radio" name="sort" value="price">Price</label><br>
<label><input type="radio" name="direction" value="ascending">ascending</label>
<label><input type="radio" name="direction" value="descending" checked>descending</label><br>
<label><input type="checkbox">Musical instruments</label><br>
<h4>Sort by price range:</h4>
<div class="flexbox-container">
<label>$<input type="text" placeholder="Min" name="min" pattern="\d+\.?\d*" title="Use only numbers"></label>
<span class="separator" style="display: inline-block; height: 1px; position: relative; align-self: center; background-color: var(--color); width: 1rem; margin: 0;"></span>
<label>$<input type="text" placeholder="Max" name="max" pattern="\d+\.?\d*" title="Use only numbers"></label>
</div>
<div class="flexbox-container buttons">
<button onclick="sortSales();">Do it!</button>
<button onclick="closeDialog();">Cancel</button>
</div>
</div>
</dialog>
<dialog id="list">
<div class="dialog-body">
<div class="dialog-title">List all stuff to sell</div>
<p style="text-align: center;">(click on item to scroll to there)</p>
<ol id="list-items"></ol>
</div>
</dialog>
</body>
</html>