-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (133 loc) · 7.29 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="assets/MoonAstronautPixelArt.png">
<title>Plate Pilot</title>
<!-- icons -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- style -->
<link rel="stylesheet/less" type="text/css" href="css/main.less"/>
<link rel="stylesheet/less" type="text/css" href="css/style.less"/>
<!-- script -->
<script src="https://cdn.jsdelivr.net/npm/less" ></script>
<script src="../js/index.js" defer></script>
<script src="templates/template.js" type="module" defer></script>
</head>
<body>
<template src="/templates/header.html"></template>
<section class="dashboard-container">
<div class="dashboard-content">
<h3>Dashboard</h3>
<div class="card-wrapper">
<div class="card">
<div class="card-content">
<h5>Nudeln mit Pesto</h5>
<div class="plannedDate">Saturday, 5.10.24</div>
<div class="ingredient">Nudeln</div>
<div class="ingredient">Pesto</div>
<div class="ingredient">Tomaten</div>
<div class="ingredient">Mozarella</div>
<button class="button">View</button>
</div>
</div>
<div class="card">
<div class="card-content">
<h5>Zuckrige Tomaten mit Gurkenhonig</h5>
<div class="plannedDate">Sunday, 6.10.24</div>
<div class="ingredient">Zucker</div>
<div class="ingredient">Honig</div>
<div class="ingredient">Saftiger Lachs</div>
<div class="ingredient">Ziegenfleisch</div>
<button class="button">View</button>
</div>
</div>
<div class="card">
<div class="card-content">
<h5>Zuckrige Tomaten mit Gurkenhonig</h5>
<div class="plannedDate">Monday, 7.10.24</div>
<div class="ingredient">Zucker</div>
<div class="ingredient">Honig</div>
<div class="ingredient">Saftiger Lachs</div>
<div class="ingredient">Ziegenfleisch</div>
<button class="button">View</button>
</div>
</div>
</div>
</div>
</section>
<section class="quick-guide">
<div class="quick-guide-header">
<h3>Quick Introduction</h3>
</div>
<div class="quick-guide-content-wrapper">
<div class="quick-guide-content">
<h5>Why should you use Plate Pilot?</h5>
<span>Plate Pilot is the solution to the problem of wandering aimlessly through the supermarket. Say goodbye to impulse purchases based on the fact of not having a meal plan in place.</span>
</div>
<div class="quick-guide-content">
<h5>The Perks</h5>
<div class="guide-list">
<div class="guide-list-content"><i class='bx bxs-circle'></i></i><span>Save Money</span></div>
<div class="guide-list-content"><i class='bx bxs-circle'></i></i><span>Get a clear plan for your meals</span></div>
<div class="guide-list-content"><i class='bx bxs-circle'></i><span>No more struggle deciding what to buy</span></div>
<div class="guide-list-content"><i class='bx bxs-circle'></i><span>No more resorting to frozen pizza</span></div>
<div class="guide-list-content"><i class='bx bxs-circle'></i><span>Clear overview of your meals (plates)</span></div>
</div>
</div>
<div class="quick-guide-content">
<h5>Features</h5>
<div class="guide-list">
<div class="guide-list-content"><i class='bx bxs-circle'></i></i><span>Add Plates to certain day(s)</span></div>
<div class="guide-list-content"><i class='bx bxs-circle'></i></i><span>Save Plates for the future (re-use)</span></div>
<div class="guide-list-content"><i class='bx bxs-circle'></i><span>Create and use a ToBuy list</span></div>
<div class="guide-list-content"><i class='bx bxs-circle'></i><span>Manage your food in Fridge</span></div>
<div class="guide-list-content"><i class='bx bxs-circle'></i><span>Manage your plates and get an overwiev in the Calendar</span></div>
</div>
</div>
<div class="quick-guide-content">
<h5>Fututre Ideas</h5>
<div class="guide-list">
<div class="guide-list-content"><i class='bx bxs-circle'></i></i><span>Create account to access data from everywhere</span></div>
<div class="guide-list-content"><i class='bx bxs-circle'></i></i><span>Drag n' Drop features</span></div>
<div class="guide-list-content"><i class='bx bxs-circle'></i><span>Contact me for more ideas or things you would change!</span></div>
</div>
</div>
</div>
</section>
<section class="plans-pricing">
<h3>Plans & Pricing</h3>
<h5>The tool is 100% free!</h5>
<div class="plans-pricing-wrapper">
<div class="plans-pricing-content side">
<span class="mphead">Always</span>
<h4>Basic</h4>
<span>Free</span>
<span class="ppcitem">Create Plates<i class='bx bx-check'></i></span>
<span class="ppcitem">Save Plates<i class='bx bx-check'></i></span>
</div>
<div class="plans-pricing-content middle">
<span class="mpstar"><i class='bx bx-star'></i>Most Popular</span>
<h4>Pro</h4>
<span>0.00€ / month</span>
<span class="ppcitem">Create Plates<i class='bx bx-check-double'></i></span>
<span class="ppcitem">Save Plates<i class='bx bx-check-double'></i></span>
<span class="ppcitem">Big thank you for visiting the site<i class='bx bx-check'></i></span>
<span class="ppcitem">No Ads! Forever!!<i class='bx bx-check'></i></span>
</div>
<div class="plans-pricing-content side">
<span class="mphead">Most value</span>
<h4>Enterprise</h4>
<span>0.00€ / month</span>
<span class="ppcitem">Create Plates<i class='bx bx-check-double'></i></span>
<span class="ppcitem">Save Plates<i class='bx bx-check-double'></i></span>
<span class="ppcitem">Big thank you for visiting the site<i class='bx bx-check-double'></i></span>
<span class="ppcitem">No Ads! Forever!!<i class='bx bx-check-double'></i></span>
<span class="ppcitem">No selling of data!<i class='bx bx-check'></i></span>
</div>
</div>
</section>
<template src="templates/footer.html"></template>
</body>
</html>