Skip to content

Commit 99691a6

Browse files
p-l-p-l-
authored
Merge pull request #44 from gpotter2/minor-cleanup
Minor cleanups
2 parents fcac22a + ffdcb67 commit 99691a6

File tree

3 files changed

+121
-37
lines changed

3 files changed

+121
-37
lines changed

‎src/components/ScapyS.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,13 @@ function calcLogo() {
7474
}).join('');
7575
}
7676
77-
/* Load logo, then refresh again every 100ms */
77+
/* Load logo, then refresh again every 120ms */
7878
let interval: ReturnType<typeof setInterval>;
7979
onMounted(() => {
8080
logo.value = calcLogo();
8181
interval = setInterval(() => {
8282
logo.value = calcLogo();
83-
}, 100);
83+
}, 120);
8484
});
8585
onBeforeUnmount(() => {
8686
clearInterval(interval);

‎src/components/ScapyTerminal.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<v-container class="pa-0 flex-grow-1 flex-shrink-1">
3+
<div class="btnbar">
4+
<div class="d-inline-block btn close"></div>
5+
<div class="d-inline-block btn minimize"></div>
6+
<div class="d-inline-block btn zoom"></div>
7+
</div>
8+
<div class="content">
9+
<pre style="white-space: pre-wrap;" v-html="props.content"></pre>
10+
</div>
11+
</v-container>
12+
</template>
13+
14+
<script lang="ts" setup>
15+
const props = defineProps(['content'])
16+
</script>
17+
18+
<style scoped lang="scss">
19+
.btn {
20+
height: 10px;
21+
width: 10px;
22+
border-radius: 50%;
23+
border: 1px solid #000;
24+
margin-top: 9px;
25+
margin-left: 4px;
26+
margin-right: 2px;
27+
}
28+
29+
.close {
30+
background-color: #ff3b47;
31+
border-color: #9d252b;
32+
}
33+
34+
.minimize {
35+
background-color: #ffc100;
36+
border-color: #9d802c;
37+
}
38+
39+
.zoom {
40+
background-color: #00d742;
41+
border-color: #049931;
42+
}
43+
44+
.btnbar {
45+
height: 25px;
46+
background-color: #bbb;
47+
margin: 0 auto;
48+
border-top-right-radius: 5px;
49+
border-top-left-radius: 5px;
50+
}
51+
52+
.content {
53+
background-color: #151515;
54+
margin: 0 auto;
55+
padding: 10px 0px 10px 20px;
56+
border-bottom-left-radius: 5px;
57+
border-bottom-right-radius: 5px;
58+
}
59+
</style>

‎src/views/Home.vue‎

Lines changed: 60 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,42 @@
22
<div>
33
<!-- The animated Scapy logo box -->
44
<v-container>
5-
<v-row align="center" justify="center">
6-
<v-col cols="auto" class="pl-0">
5+
<v-row align="center" justify="center" aria-hidden="true">
6+
<v-col cols="auto" class="pa-0 pr-2">
77
<ScapyS />
88
</v-col>
9-
<v-col cols="6" class="px-0">
9+
<v-col cols="6" lg="4" class="px-0">
1010
<v-fade-transition>
11-
<v-card v-show="animationOk">
12-
<v-card-text class="scapy-main-box fill-height px-0 text-blue-lighten-2">
13-
<template v-if="!smAndDown">
14-
| <br />
15-
</template>
16-
| Welcome to Scapy<br />
17-
| Version {{ version }}<br />
11+
<div v-show="animationOk" color="transparent" class="scapy-main-box fill-height px-0 text-blue-lighten-2">
12+
<template v-if="!smAndDown">
1813
| <br />
19-
| <span class='text-secondary'><a href="https://github.com/secdev/scapy"><span
20-
class="hidden-xs">https://github.com/</span>secdev/scapy</a>
21-
</span><br />
14+
</template>
15+
| Welcome to Scapy<br />
16+
| Version {{ version }}<br />
17+
| <br />
18+
| <span class='text-secondary'><a href="https://github.com/secdev/scapy"><span
19+
class="hidden-xs">https://github.com/</span>secdev/scapy</a>
20+
</span><br />
21+
| <br />
22+
| Have fun!<br />
23+
<template v-if="!smAndDown">
2224
| <br />
23-
| Have fun!<br />
24-
<template v-if="!smAndDown">
25-
| <br />
26-
| {{ quote[0] }}<br />
27-
| {{ quote[1] }}<br />
28-
| {{ quote[2] }}<br />
29-
| <br />
30-
</template>
31-
</v-card-text>
32-
</v-card>
25+
| {{ quote[0] }}<br />
26+
| {{ quote[1] }}<br />
27+
| {{ quote[2] }}<br />
28+
| <br />
29+
</template>
30+
</div>
3331
</v-fade-transition>
3432
</v-col>
3533
</v-row>
3634
<v-row>
3735
<!-- What is Scapy -->
3836
<v-col cols="12" lg="7" class="d-flex">
39-
<v-card variant="tonal" title="What is Scapy?">
37+
<v-card variant="tonal">
38+
<v-card-title>
39+
<h4>What is Scapy?</h4>
40+
</v-card-title>
4041
<v-card-text>
4142
<v-row>
4243
<v-col cols="12" sm="4">
@@ -77,15 +78,14 @@
7778
</v-col>
7879
<!-- Shell demo -->
7980
<v-col cols="12" lg="5" class="d-flex flex-column">
80-
<v-card variant="tonal" title="Shell demo" class="flex-grow-1 flex-shrink-1">
81-
<v-card-text class="text-body-2">
82-
<pre style="white-space: pre-wrap;" v-html="DEMO_CODE"></pre>
83-
</v-card-text>
84-
</v-card>
81+
<ScapyTerminal :content="DEMO_CODE"></ScapyTerminal>
8582
</v-col>
8683
<!-- Documentation -->
8784
<v-col cols="12" lg="8">
88-
<v-card variant="tonal" title="Documentation">
85+
<v-card variant="tonal">
86+
<v-card-title>
87+
<h4>Documentation</h4>
88+
</v-card-title>
8989
<v-card-text class="text-body-2 align-content-center">
9090
<p>
9191
The official Scapy documentation can be found online on readthedocs:
@@ -159,7 +159,10 @@
159159
</v-col>
160160
<!-- Maintainers -->
161161
<v-col cols="12" lg="4" class="d-flex flex-column">
162-
<v-card variant="tonal" title="Maintainers" class="flex-grow-1 flex-shrink-1">
162+
<v-card variant="tonal" class="flex-grow-1 flex-shrink-1">
163+
<v-card-title>
164+
<h4>Maintainers</h4>
165+
</v-card-title>
163166
<v-card-text class="text-body-2">
164167
<v-row>
165168
<v-col cols="6" sm="4" lg="6">
@@ -181,7 +184,10 @@
181184
<!-- Downloads -->
182185
<v-col cols="12">
183186
<div ref="downloads_section">
184-
<v-card variant="tonal" title="Downloads & Installation">
187+
<v-card variant="tonal">
188+
<v-card-title>
189+
<h4>Downloads & Installation</h4>
190+
</v-card-title>
185191
<v-card-text class="text-body-2">
186192
<p>
187193
There are several ways of installing Scapy, depending on your plateform.
@@ -195,12 +201,12 @@
195201
</a>
196202
</p>
197203
<v-card color="transparent">
198-
<v-tabs v-model="dllTab" bg-color="primary" density="compact" slider-color="#314C46">
204+
<v-tabs show-arrows v-model="dllTab" bg-color="primary" density="compact" slider-color="#314C46">
199205
<v-tab value="pypi">PyPI</v-tab>
206+
<v-tab value="windows">Windows</v-tab>
200207
<v-tab value="github">Github</v-tab>
201208
<v-tab value="conda">Conda</v-tab>
202209
<v-tab value="debian">Debian/Ubuntu</v-tab>
203-
<v-tab value="windows">Windows</v-tab>
204210
<v-tab value="other">More</v-tab>
205211
</v-tabs>
206212
<v-card-text>
@@ -254,9 +260,10 @@
254260
<script lang="ts" setup>
255261
import ScapyS from '@/components/ScapyS.vue'
256262
import SponsorCard from '@/components/SponsorCard.vue'
263+
import ScapyTerminal from '@/components/ScapyTerminal.vue'
257264
258265
import { useDisplay } from 'vuetify';
259-
import { inject, computed, onMounted, ref } from 'vue';
266+
import { inject, computed, onMounted, ref, watchEffect } from 'vue';
260267
import type { Ref } from 'vue'
261268
262269
const version = '2.5.0';
@@ -276,6 +283,17 @@ onMounted(() => {
276283
}
277284
});
278285
286+
/* Size of quote text */
287+
const fontSize = ref('1em');
288+
watchEffect(() => {
289+
/* Select font size based on display size */
290+
if (smAndDown.value) {
291+
fontSize.value = '0.8em';
292+
} else {
293+
fontSize.value = '1em';
294+
}
295+
});
296+
279297
/* Quotes database: web-oriented, unlike the ones in actual Scapy */
280298
const AVAILABLE_QUOTES = [
281299
["Craft packets like it is your last day on earth.", "Lao-Tze"],
@@ -320,6 +338,7 @@ const BASE_URL = import.meta.env.BASE_URL;
320338
.scapy-main-box {
321339
/* Monospace font */
322340
font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
341+
font-size: v-bind(fontSize);
323342
white-space: pre;
324343
}
325344
@@ -333,4 +352,10 @@ a:visited {
333352
code.bash:before {
334353
content: '$ ';
335354
}
355+
356+
/* Thinner h4 titles */
357+
h4 {
358+
font-weight: 500;
359+
padding: 2px 0px 2px 0px;
360+
}
336361
</style>

0 commit comments

Comments
 (0)