Skip to content

Commit 25c3969

Browse files
committed
New terminal, cleanup logo
1 parent fcac22a commit 25c3969

File tree

3 files changed

+99
-33
lines changed

3 files changed

+99
-33
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: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,32 @@
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>
@@ -77,11 +75,7 @@
7775
</v-col>
7876
<!-- Shell demo -->
7977
<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>
78+
<ScapyTerminal :content="DEMO_CODE"></ScapyTerminal>
8579
</v-col>
8680
<!-- Documentation -->
8781
<v-col cols="12" lg="8">
@@ -195,12 +189,12 @@
195189
</a>
196190
</p>
197191
<v-card color="transparent">
198-
<v-tabs v-model="dllTab" bg-color="primary" density="compact" slider-color="#314C46">
192+
<v-tabs show-arrows v-model="dllTab" bg-color="primary" density="compact" slider-color="#314C46">
199193
<v-tab value="pypi">PyPI</v-tab>
194+
<v-tab value="windows">Windows</v-tab>
200195
<v-tab value="github">Github</v-tab>
201196
<v-tab value="conda">Conda</v-tab>
202197
<v-tab value="debian">Debian/Ubuntu</v-tab>
203-
<v-tab value="windows">Windows</v-tab>
204198
<v-tab value="other">More</v-tab>
205199
</v-tabs>
206200
<v-card-text>
@@ -254,9 +248,10 @@
254248
<script lang="ts" setup>
255249
import ScapyS from '@/components/ScapyS.vue'
256250
import SponsorCard from '@/components/SponsorCard.vue'
251+
import ScapyTerminal from '@/components/ScapyTerminal.vue'
257252
258253
import { useDisplay } from 'vuetify';
259-
import { inject, computed, onMounted, ref } from 'vue';
254+
import { inject, computed, onMounted, ref, watchEffect } from 'vue';
260255
import type { Ref } from 'vue'
261256
262257
const version = '2.5.0';
@@ -276,6 +271,17 @@ onMounted(() => {
276271
}
277272
});
278273
274+
/* Size of quote text */
275+
const fontSize = ref('1em');
276+
watchEffect(() => {
277+
/* Select font size based on display size */
278+
if (smAndDown.value) {
279+
fontSize.value = '0.8em';
280+
} else {
281+
fontSize.value = '1em';
282+
}
283+
});
284+
279285
/* Quotes database: web-oriented, unlike the ones in actual Scapy */
280286
const AVAILABLE_QUOTES = [
281287
["Craft packets like it is your last day on earth.", "Lao-Tze"],
@@ -320,6 +326,7 @@ const BASE_URL = import.meta.env.BASE_URL;
320326
.scapy-main-box {
321327
/* Monospace font */
322328
font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
329+
font-size: v-bind(fontSize);
323330
white-space: pre;
324331
}
325332

0 commit comments

Comments
 (0)