-
Notifications
You must be signed in to change notification settings - Fork 1
/
cli.html
234 lines (210 loc) · 14.2 KB
/
cli.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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mohamed Firas Adil - CLI</title>
<meta name="description" content="Personal Portfolio Website by Mohamed Firas Adil, an astute Computer Science student with a zeal for learning." />
<meta name="keywords" content="Mohamed Firas Adil,Firas Adil,Mohamed Firas,Firas,Personal Portfolio,Portfolio,technology,software,cli,gui,websites,apps,python" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
<link rel="manifest" href="images/favicon/site.webmanifest">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="js/secondmain.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="js/popper.js"></script>
<script src="js/bstrap4.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/secondstyle.css">
</head>
<body onload="init();" style="background-color: #000000;">
<div id="backgrounddiv" style="position:fixed; top:0;left:0;z-index:-1;margin: 0; padding: 0; background-color:#000000;width:100vw;height:100vh;">
<canvas id="canvas" width="1280" height="720" style="display:block;margin:0 auto;"></canvas>
</div>
<div class="container" style="z-index:0;">
<div class="row">
<div class="col-sm-12" style="text-align: center;"><h1 style="font-size:xx-large;color:white;font-weight: bolder;margin-top: 30px;margin-bottom: 30px;"><a href="/index.html"><i class="fa fa-home" aria-hidden="true"></i></a> > CLI</h1></div>
<div class="col-sm-10" id="cardmain">
<div id="theunderground" class="carousel slide" data-ride="carousel" style="height:min(60vh,50vw);overflow:hidden;" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active" id="imgcarousel" style="background-image: url('/images/theunderground/1.jpg');"></div>
<div class="carousel-item" id="imgcarousel" style="background-image: url('/images/theunderground/2.jpg');"></div>
<div class="carousel-item" id="imgcarousel" style="background-image: url('/images/theunderground/3.jpg');"></div>
</div>
<a class="carousel-control-prev" href="#theunderground" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#theunderground" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="col-sm-12" style="margin-top:20px;font-size: large;">
<div class="col-sm-12">
<div class="col-sm-10">
<br>
<h1><b>TheUnderGround</b> <a href="#theunderground" style="color:blue;"><i class="fa fa-link" aria-hidden="true"></i></a></h1><br>
<p style="font-size: medium;">
When WhatsApp changed their privacy features back in the peak of lockdown I took it personally, I took it upon myself to build an alternative for me and my friends which lead to the development of TheUnderGround, the first cli software of TheGrounds.
<br><br>Over time it has developed several features. Initially it was a very basic software, with hit enter to update messages and http get based messaging, but later I hosted a python server in my raspberry pi 4 and using TCP sockets achieved real time messaging additionally, using a multithreading approach I was able to achieve a CLI curses style input so messages can be printed at the same time as input was entered.
<br><Br>TheUnderGround gave me a much deeper understanding of messaging, data encryption, and account management.
<br><br>Part of <A style="color:blue" href="/other.html#thegrounds">TheGrounds</A>
</p>
</div>
<div class="col-sm-2"><br>
<h1><b>Links</b></h1><br>
<a style="color:blue" target="_blank" href="https://thegrounds.pythonanywhere.com/theunderground">WEBSITE</a>
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-6">
<br>
<h2><b>Features</b></h1>
<ul style="font-size: medium;">
<li>Real-time messaging</li>
<li>Can send text, images, and audio</li>
<li>Fun features such as funky, self-deleting, autocorrected messages, dad jokes etc</li>
<li>Settings bar with several options: skins, message updates, initialisation settings etc</li>
<li>Full Privacy no Zuckerberg reading your messages here!</li>
</ul>
</div>
<div class="col-sm-6"><br>
<h2><b>Technologies</b></h1>
<ul style="font-size: medium;">
<li><u>Main Language:</u> Python</li>
<li><u>Server and API:</u> Python Flask</li>
<li><u>Database:</u> MySQL </li>
<li><u>TCP Server:</u> Python code running on a Raspberry Pi 4</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-10" id="cardmain">
<div id="theaboveground" class="carousel slide" data-ride="carousel" style="height:min(60vh,50vw);overflow:hidden;" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active" id="imgcarousel" style="background-image: url('/images/theaboveground/1.jpg');"></div>
<div class="carousel-item" id="imgcarousel" style="background-image: url('/images/theaboveground/2.jpg');"></div>
<div class="carousel-item" id="imgcarousel" style="background-image: url('/images/theaboveground/3.jpg');"></div>
</div>
<a class="carousel-control-prev" href="#theaboveground" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#theaboveground" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="col-sm-12" style="margin-top:20px;font-size: large;">
<div class="col-sm-12">
<div class="col-sm-10">
<br>
<h1><b>TheAboveGround</b> <a href="#theaboveground" style="color:blue;"><i class="fa fa-link" aria-hidden="true"></i></a></h1><br>
<p style="font-size: medium;">
TheAboveGround too was created in response to a rumoured privacy infringement during the pandemic, it is a CLI voice chatting software, since it’s so lightweight it’s great to use to chat with friends while gaming, multi-tasking or even just for casual chatting.
<br><Br>It can handle up to 10 people or more concurrently in a call, limited only due to sever bandwidth, server being a Raspberry Pi 4 at home, Additionally, people can text chat during the call.
<br><br>This project was great to learn about UDP sockets, implemented with python.
<br><br>Part of <A style="color:blue" href="/other.html#thegrounds">TheGrounds</A>
</p>
</div>
<div class="col-sm-2"><br>
<h1><b>Links</b></h1><br>
<a style="color:blue" target="_blank" href="https://thegrounds.pythonanywhere.com/theaboveground">WEBSITE</a>
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-6">
<br>
<h2><b>Features</b></h1>
<ul style="font-size: medium;">
<li>Real-time voice calls with several people</li>
<li>Fully encrypted data over a UDP socket</li>
<li>Very Lightweight yet still performs the same as other voice chatting software such as zoom/google meet</li>
</ul>
</div>
<div class="col-sm-6"><br>
<h2><b>Technologies</b></h1>
<ul style="font-size: medium;">
<li><u>Main Language:</u> Python</li>
<li><u>Server:</u> Python code running on Raspberry Pi 4</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-10" id="cardmain">
<div id="themusicground" class="carousel slide" data-ride="carousel" style="height:min(60vh,50vw);overflow:hidden;" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active" id="imgcarousel" style="background-image: url('/images/themusicground/1.jpg');"></div>
<div class="carousel-item" id="imgcarousel" style="background-image: url('/images/themusicground/2.jpg');"></div>
<div class="carousel-item" id="imgcarousel" style="background-image: url('/images/themusicground/3.jpg');"></div>
<div class="carousel-item" id="imgcarousel" style="background-image: url('/images/themusicground/4.jpg');"></div>
</div>
<a class="carousel-control-prev" href="#themusicground" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#themusicground" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="col-sm-12" style="margin-top:20px;font-size: large;">
<div class="col-sm-12">
<div class="col-sm-10">
<br>
<h1><b>TheMusicGround</b> <a href="#themusicground" style="color:blue;"><i class="fa fa-link" aria-hidden="true"></i></a></h1><br>
<p style="font-size: medium;">
TheMusicGround as the name suggests is a CLI software to listen to music (makes use of YouTube as a source).
<br><br>It takes the help of several different music-based API’s to facilitate it’s many features. The python-vlc module helps in playing the audio seamlessly.
<br><br>Part of <A style="color:blue" href="/other.html#thegrounds">TheGrounds</A>
</p>
</div>
<div class="col-sm-2"><br>
<h1><b>Links</b></h1><br>
<a style="color:blue" target="_blank" href="https://thegrounds.pythonanywhere.com/themusicground">WEBSITE</a>
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-6">
<br>
<h2><b>Features</b></h1>
<ul style="font-size: medium;">
<li>Search by Song, Artists, and Lyrics</li>
<li>Custom Playlists based on your listening preferences</li>
<li>Songs can be downloaded for offline mode</li>
<li>Podcasts are available</li>
<li>Web Radio stations are available from 100+ countries</li>
<li>Shazam API allows for song recognition</li>
<li>User Playlists can be shared</li>
<li>Also has strong error handling and an error logger to catch the inevitable bugs for later debugging.</li>
</ul>
</div>
<div class="col-sm-6"><br>
<h2><b>Technologies</b></h1>
<ul style="font-size: medium;">
<li><u>Main Language/Tech:</u> Python, VLC, MPV</li>
<li><u>Server and API:</u> Python Flask, MySQL</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-12" style="text-align: center;margin-bottom:10vh;font-size: large;color:white;"><a href="/websites.html">WEBSITES</a> ◉ <a href="/cli.html">CLI</a> ◉ <a href="/apps.html">APPS</a> ◉ <a href="/gui.html">GUI</a> ◉ <a href="/other.html">OTHER</a></div>
</div>
</div>
</div>
</body>
<script>
</script>
</html>