-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.htm
157 lines (157 loc) · 5.31 KB
/
index.htm
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
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<!--
Phone Book
----------
Client HTML
----------
Dylan Bickerstaff
----------
The initial HTML for the client.
-->
<html>
<head>
<title>Phone Book</title>
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="manifest" href="./static/manifest.json">
<link rel="icon" type="image/svg+xml" href="./static/img/logo_512_square.svg">
<link rel="alternate icon" type="image/png" href="./static/img/logo_32_square.png">
<link rel="stylesheet" href="./static/css/index.css">
<script src="./static/js/bootstrap.js"></script>
</head>
<body>
<div id="hamburger" class="hidden blur">
<div class="float" id="hamclose"></div>
<h1>Actions</h1>
<hr class="nocollapse">
<div class="button print" title="Print results...">Print results...<span>Ctrl + P</span></div>
<div class="button export" title="Export as CSV...">Export as CSV...<span>Ctrl + E</span></div>
<hr>
<h1>Help</h1>
<hr class="nocollapse">
<div class="button help" title="User Guide">User Guide</div>
<div class="button feedback" title="Give feedback...">Give feedback...</div>
<hr>
<h1>Info</h1>
<hr class="nocollapse">
<div class="button stats" title="Statistics">Statistics</div>
<div class="button about" title="About">About</div>
</div>
<div id="main" class="blur">
<div id="logo">Phone Book</div>
<div id="tip">Begin typing to start a new search...</div>
<div id="input"><span class="type"></span></div>
<input type="text" placeholder="Enter a description" style="display:none;">
<div id="numbers"></div>
<div id="noresult" class="resultsMessage" style="display:none;">Your search did not match any results.</div>
<div id="endresult" class="resultsMessage" style="display:none;">End of search results.</div>
</div>
<div id="legend" class="menu hidden">
<div>
<h1>Phone Book Guide</h1>
<h3>Definitions</h3>
<ul>
<li><b>Search-Term</b> - A word or phrase without a space that describes what you are looking for.</li>
<li><b>Auto-Fill</b> - A function of the Phone Book that automatically predicts and completes any search-term that you are typing.</li>
</ul>
<h3>Search-Term Legend</h3>
<div class="leg green"> - Existing search-term.</div>
<div class="leg gray"> - Non existing search-term.</div>
<h3>Keyboard Shortcuts</h3>
<ul>
<li><b>Tab</b> - Complete auto-filled text.</li>
<li><b>Space</b> - Start a new search-term.</li>
<li><b>End</b> - Clear the search.</li>
<li><b>Delete</b> - Remove the selected search-term.</li>
<li><b>Left Arrow</b> - Select search-term to the left. (If exists)</li>
<li><b>Right Arrow</b> - Select search-term to the right. (If exists)</li>
</ul>
<h3>Searching Numbers</h3>
<p>
To search in the Phone Book just start typing.<br><br>
While typing, you cannot type a search-term that does not exist.<br><br>
The auto-fill system will stop you from typing if the search-term you are trying to type does not exist.
</p>
</div>
</div>
<div id="about" class="menu hidden">
<div>
<div class="logo"></div>
<h1>Phone Book</h1>
<hr>
<h3>Version</h3>
<p>2.7 - 2022 Release</p>
<hr>
<h3>API Entry Point</h3>
<p><a target="_BLANK" href="./api/">./api/</a></p>
<hr>
<h3>Author</h3>
<p>Dylan Bickerstaff</p>
<hr>
<h3>Credits</h3>
<ul>
<li>jQuery - 3.5.1</li>
<li>mths.be/startswith - 0.2</li>
<li>csv.js - 380fd4e</li>
<li>Medoo - 1.7.10</li>
<li>phpLiteAdmin - 1.9.7.1</li>
<li>Simple Keyboard - 2.32.0</li>
<li>PHPMailer - 5.5</li>
</ul>
</div>
</div>
<div id="feedback" class="menu hidden">
<h1>Feedback</h1>
<select>
<option selected>Select a subject...</option>
</select>
<textarea placeholder="Enter the body of the message here..."></textarea>
<div class="button">Submit Feedback</div>
</div>
<div id="statistics" class="menu hidden">
<h1>Statistics</h1>
<p>At this moment...</p>
<div>
<hr>
<h3>Users online:</h3>
<p class="stat loading usersOnline"></p>
<hr>
<h3>Numbers stored:</h3>
<p class="stat loading numbersStored"></p>
<hr>
<h3>Search terms indexed:</h3>
<p class="stat loading termsIndexed"></p>
<hr>
</div>
<p>In the last hour...</p>
<div>
<hr>
<h3>Queries performed:</h3>
<p class="stat loading queriesPerformed"></p>
<hr>
<h3>Average response time:</h3>
<p class="stat loading averageResponseTime"></p>
<hr>
<h3>Average results returned:</h3>
<p class="stat loading averageResultsReturned"></p>
<hr>
<h3>Top search terms:</h3>
<p class="stat loading popularQueries"></p>
</div>
</div>
<div id="offline" class="menu hidden">
<h1>Uh oh...</h1>
<p>The <b>Phone Book</b> cannot connect to the server.</p>
<p>If your PC is offline, please re-connect it.</p>
<p>If your PC is online, then the server must be down or un-reachable.</p>
<p>Once your PC and server is back online, this message will disappear.</p>
</div>
<div id="printscrn"></div>
<div id="loading" class="menu">
<h1>One moment...</h1>
<img src="./static/img/load.gif">
</div>
<div class="float blur" id="hamopen"></div>
<div class="float hidden" id="exit"></div>
</body>
</html>