-
Notifications
You must be signed in to change notification settings - Fork 0
/
cookingTimerGuide.html
146 lines (99 loc) · 5.72 KB
/
cookingTimerGuide.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
137
138
139
140
141
142
143
144
145
146
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Guide for Application</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "container">
<div class = "navbar">
<img src='images/ingredilistlogo.png' class = 'logo' id=logo>
<nav>
<ul id=menulist>
<li>
<a href="loginScreenGuide.html"> Login </a>
</li>
<li>
<a href="myMealsGuide.html"> Meals </a>
</li>
<li>
<a href="socialsGuide.html"> Socials </a>
</li>
<li>
<a href="shoppingListGuide.html"> ShoppingList </a>
</li>
<li>
<a href="index.html"> Homepage</a>
</li>
<li>
<a href="mySettingsGuide.html"> Settings </a>
</li>
</ul>
</nav>
<img src="images/menuicon.png" class="menu-icon" onclick="togglemenu()">
</div>
<div class = "row">
<center> <div class = "col-1" id=col1>
<h1><strong>Cooking Timer</strong></h1>
<h2><strong>User Guide for The Cooking Timer Screen Screen. </strong></h2>
<p><em><strong>This page will give a break down of all the functionality available on the Cooking Timer screen and how it's accessed and used.</strong></em></p>
</div></center>
<div class = "col-2" id = col2>
<center><img src='images/TimerIconWebView.png' class = 'icons'></center>
</div>
</div>
<div class = "row" style="background-color:beige" id = row2>
<div class = "col-2" id = col21>
<center><img src='images/User Guide Screenshots/Cooking Timer/Screenshot_1620308015.png' class = 'icons'style="width:250px"></center>
</div>
<center><div class = "col-1" id=col11>
<h1 style="text-align: left;"><strong>1. Cooking List</strong></h1>
<p style="text-align: left;"><em><strong>The Cooking Timer screen can be accessed by pressing the timer icon in the bottom navigation bar. To access the cooking timer itself, press the cooking timer button. You can create an instructions list regarding your cooking process by typing in the instruction, folowed by the number of minutes it'll take to do, and then by pressing the add button the instruction list in appended in the space below the buttons. The add button will also convert the duration you enter into seconds. This is so that you can use the timer which is set in seconds </strong></em></p>
</div></center>
</div>
<div class = "row" style="background-color:burlywood">
<div class = "col-2">
<center><img src='images/User Guide Screenshots/Cooking Timer/Screenshot_1620308130.png' class = 'icons'style="width:250px"></center>
</div>
<center><div class = "col-1">
<h1 style="text-align: left;"><strong>2. Setting the timer </strong></h1>
<p style="text-align: left;"><em><strong> After pressing the cooking timer button, you will be taken to a screen where you can set the timer in seconds and begin it with the begin button once you start to prepare your meal. In order to prevent any cooking accidents, this timer runs using a service, Which means you can leave the screen or the application and it will continue to run. </strong></em></p>
<p style="text-align: left;"><em><strong>Note that this activity ends on the first instance of pressing the start button, however only on the first instance does it end and the application itself still stays running. Thus on any attempt after the first it'll run fine without any bugs.</strong></em></p>
</div></center>
</div>
<div class = "row" style="background-color:burlywood">
<div class = "col-2">
<center><img src='images/User Guide Screenshots/Cooking Timer/Screenshot_1620308327.png' class = 'icons'style="width:250px"></center>
</div>
<center><div class = "col-1">
<h1 style="text-align: left;"><strong>3. Broadcast </strong></h1>
<p style="text-align: left;"><em><strong>Once you set a timer and press begin timer, it starts counting down right away until it reaches 0 seconds. Whilst the timer is running, you will receive a broadcasted notification on your device for the duration from the Ingredilist Application essentially informing you that the timer is running and how much time is remaining. The timer then automatically resets and can be used again for the next cooking instruction once done.</strong></em></p>
</div></center>
</div>
<!-- Website responsiveness here in the javascript code, and in the css styles sheet and viewport.-->
</div>
<script>
var menulist = document.getElementById("menulist");
var col2 = document.getElementById("col2");
var col1 = document.getElementById("col1");
var logo = document.getElementById("logo");
var row2 = document.getElementById("row2");
menulist.style.maxHeight = "0px";
function togglemenu(){
if(menulist.style.maxHeight == "0px"){
menulist.style.maxHeight = "120px"
col2.style.top = "70px"
col1.style.top="70px"
logo.style.width ="70px"
row2.style.marginTop = "100px"
}
else{
menulist.style.maxHeight = "0px"
col2.style.top = "30px"
col1.style.top="30px"
logo.style.width ="100px"
row2.style.marginTop="30px"
}
}
</script>
</body>