forked from cra1gg/dialy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
192 lines (156 loc) · 9.4 KB
/
about.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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Dialy converts your phone number into easy to remember 2 words. Then, convert back into numbers!">
<meta name="author" content="Co-authored by Craig (cra1gg), Soham (shmkane)">
<link rel="icon" href="assets/favicon.ico">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- FontAwesome -->
<link rel="stylesheet" href="css/styles.css">
<title>Dialy | Click, Convert, Call</title>
</head>
<body class="">
<!-- This is the small navbar -->
<div class="mynav">
<ul class="">
<li class="">
<a class="" href="index.html">Home</a>
</li>
<li class="">
<a class="" href="index.html#numbers_result">Results</a>
</li>
<li class="">
<a id="active" class="" href="about.html">About</a>
</li>
</ul>
</div>
<!-- This will be the top of the page right before the form -->
<div class="intro text-white">
<!-- spacer -->
<div class="position-relative text-center">
<div class="mx-auto my-5">
<h1 class="ml1">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">DIALY</span>
<span class="line line2"></span>
</span>
</h1>
</div>
</div>
</div>
<!-- begin accordion -->
<div class="accordion position-relative text-center" style="margin: auto; width: 50%">
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx1" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingTwo1">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx1" href="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">
<h5 class="mb-0">
What Dialy is<i class="fas fa-fingerprint"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseTwo1" class="collapse" role="tabpanel" aria-labelledby="headingTwo1" data-parent="#accordionEx1">
<div class="card-body">
Dialy is a radical new take on phone numbers.
<hr>Instead of having to memorize a random sequence of ten digits, phone numbers are assigned Dialys; two short words that are easy to remember.
<hr> Now, instead of having to memorize all these random digits, all you have to remember is two simple words!
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingTwo2">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx1" href="#collapseTwo21" aria-expanded="false" aria-controls="collapseTwo21">
<h5 class="mb-0">
Why Dialy was created<i class="fas fa-question"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseTwo21" class="collapse" role="tabpanel" aria-labelledby="headingTwo21" data-parent="#accordionEx1">
<div class="card-body">
Dialy was heavily inspired by <a href="https://what3words.com">What3Words.</a>
<hr>The founders of Dialy were curious as to what in what other applications words could be used to reduce the difficulty of remembering things -- phone numbers were one of the first things that came to mind, they are hard to remember
and can easily be replaced with two unique words.
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingThree31">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx1" href="#collapseThree31" aria-expanded="false" aria-controls="collapseThree31">
<h5 class="mb-0">
How Dialy is used <i class="fas fa-chalkboard-teacher"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseThree31" class="collapse" role="tabpanel" aria-labelledby="headingThree31" data-parent="#accordionEx1">
<div class="card-body">
You will be greeted with a search bar: You can enter either a Dialy (two words separated by a colon), or a phone number.
<hr> When beginning to type a word, an auto complete dropdown will appear to choose the appopriate Dialy. Then, the user will be with the original phone number assigned to the entered Dialy, as well as some accompanying metadata and
search history.
<hr> Dialy takes advantage of Firebase's lightning fast indexing with its low latency autocomplete.
<hr> Conversely, if a user enters a phone number, they will be shown the Dialy assigned to it
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingFour41">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx1" href="#collapseFour41" aria-expanded="false" aria-controls="collapseFour41">
<h5 class="mb-0">
How Dialy works <i class="fas fa-microchip"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseFour41" class="collapse" role="tabpanel" aria-labelledby="headingFour41" data-parent="#accordionEx1">
<div class="card-body">
Dialy works by splitting all phone numbers up into two groups of 5 digits. Because of this, Dialy only supports North American phone numbers at the moment. Changes to the codebase would need to be made to support numbers from other countries.
<hr> Dialy assigns one word to each 5 digit number, so it uses a total of 10^5 (100,000) words and assigns two words to every possible ten digit number (even if they are not valid North American phone numbers)
<hr> Dialy was created using Vanilla JS and Bootstrap. Dialy uses Firebase for storage of phone/word assignments as well lightning fast indexing with its low latency autocomplete.
<hr> The website itself is also hosted on Firebase (Yay for free hosting!). Dialy uses its own api, repository here to get accompanying phone number metadata. It acheives this using Google's libphonenumber with a Python wrapper.
<hr> Dialy was developed over the Summer of 2020 by two amateur CS students. As a result, you're almost guaranteed to encounter bugs. If you do, feel free to open a detailed bug report.
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!-- Accordion wrapper -->
</div>
<!-- end accordion -->
<!-- Footer -->
<footer class="footer">
<div class="container text-center">
<p class="credit">Made by <a href="https://cra1g.ca/currentprojects.html">Cra1g</a> & <a href="https://shmkane.com/">shmkane</a> ©Dialy 2020
</p>
</div>
</footer>
<!-- spacer -->
<div style="height: 30em;"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script src="https://kit.fontawesome.com/bb678533cc.js" crossorigin="anonymous"></script>
<script src="js/animation.js"></script>
</body>
</html>