Skip to content

Minor cleanups #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 6, 2023
Merged

Minor cleanups #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
25c3969
New terminal, cleanup logo
gpotter2 Sep 3, 2023
ffdcb67
Accessibility improvements
gpotter2 Sep 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/ScapyS.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,13 @@ function calcLogo() {
}).join('');
}

/* Load logo, then refresh again every 100ms */
/* Load logo, then refresh again every 120ms */
let interval: ReturnType<typeof setInterval>;
onMounted(() => {
logo.value = calcLogo();
interval = setInterval(() => {
logo.value = calcLogo();
}, 100);
}, 120);
});
onBeforeUnmount(() => {
clearInterval(interval);
Expand Down
59 changes: 59 additions & 0 deletions src/components/ScapyTerminal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<template>
<v-container class="pa-0 flex-grow-1 flex-shrink-1">
<div class="btnbar">
<div class="d-inline-block btn close"></div>
<div class="d-inline-block btn minimize"></div>
<div class="d-inline-block btn zoom"></div>
</div>
<div class="content">
<pre style="white-space: pre-wrap;" v-html="props.content"></pre>
</div>
</v-container>
</template>

<script lang="ts" setup>
const props = defineProps(['content'])
</script>

<style scoped lang="scss">
.btn {
height: 10px;
width: 10px;
border-radius: 50%;
border: 1px solid #000;
margin-top: 9px;
margin-left: 4px;
margin-right: 2px;
}

.close {
background-color: #ff3b47;
border-color: #9d252b;
}

.minimize {
background-color: #ffc100;
border-color: #9d802c;
}

.zoom {
background-color: #00d742;
border-color: #049931;
}

.btnbar {
height: 25px;
background-color: #bbb;
margin: 0 auto;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}

.content {
background-color: #151515;
margin: 0 auto;
padding: 10px 0px 10px 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
95 changes: 60 additions & 35 deletions src/views/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,42 @@
<div>
<!-- The animated Scapy logo box -->
<v-container>
<v-row align="center" justify="center">
<v-col cols="auto" class="pl-0">
<v-row align="center" justify="center" aria-hidden="true">
<v-col cols="auto" class="pa-0 pr-2">
<ScapyS />
</v-col>
<v-col cols="6" class="px-0">
<v-col cols="6" lg="4" class="px-0">
<v-fade-transition>
<v-card v-show="animationOk">
<v-card-text class="scapy-main-box fill-height px-0 text-blue-lighten-2">
<template v-if="!smAndDown">
| <br />
</template>
| Welcome to Scapy<br />
| Version {{ version }}<br />
<div v-show="animationOk" color="transparent" class="scapy-main-box fill-height px-0 text-blue-lighten-2">
<template v-if="!smAndDown">
| <br />
| <span class='text-secondary'><a href="https://github.com/secdev/scapy"><span
class="hidden-xs">https://github.com/</span>secdev/scapy</a>
</span><br />
</template>
| Welcome to Scapy<br />
| Version {{ version }}<br />
| <br />
| <span class='text-secondary'><a href="https://github.com/secdev/scapy"><span
class="hidden-xs">https://github.com/</span>secdev/scapy</a>
</span><br />
| <br />
| Have fun!<br />
<template v-if="!smAndDown">
| <br />
| Have fun!<br />
<template v-if="!smAndDown">
| <br />
| {{ quote[0] }}<br />
| {{ quote[1] }}<br />
| {{ quote[2] }}<br />
| <br />
</template>
</v-card-text>
</v-card>
| {{ quote[0] }}<br />
| {{ quote[1] }}<br />
| {{ quote[2] }}<br />
| <br />
</template>
</div>
</v-fade-transition>
</v-col>
</v-row>
<v-row>
<!-- What is Scapy -->
<v-col cols="12" lg="7" class="d-flex">
<v-card variant="tonal" title="What is Scapy?">
<v-card variant="tonal">
<v-card-title>
<h4>What is Scapy?</h4>
</v-card-title>
<v-card-text>
<v-row>
<v-col cols="12" sm="4">
Expand Down Expand Up @@ -77,15 +78,14 @@
</v-col>
<!-- Shell demo -->
<v-col cols="12" lg="5" class="d-flex flex-column">
<v-card variant="tonal" title="Shell demo" class="flex-grow-1 flex-shrink-1">
<v-card-text class="text-body-2">
<pre style="white-space: pre-wrap;" v-html="DEMO_CODE"></pre>
</v-card-text>
</v-card>
<ScapyTerminal :content="DEMO_CODE"></ScapyTerminal>
</v-col>
<!-- Documentation -->
<v-col cols="12" lg="8">
<v-card variant="tonal" title="Documentation">
<v-card variant="tonal">
<v-card-title>
<h4>Documentation</h4>
</v-card-title>
<v-card-text class="text-body-2 align-content-center">
<p>
The official Scapy documentation can be found online on readthedocs:
Expand Down Expand Up @@ -159,7 +159,10 @@
</v-col>
<!-- Maintainers -->
<v-col cols="12" lg="4" class="d-flex flex-column">
<v-card variant="tonal" title="Maintainers" class="flex-grow-1 flex-shrink-1">
<v-card variant="tonal" class="flex-grow-1 flex-shrink-1">
<v-card-title>
<h4>Maintainers</h4>
</v-card-title>
<v-card-text class="text-body-2">
<v-row>
<v-col cols="6" sm="4" lg="6">
Expand All @@ -181,7 +184,10 @@
<!-- Downloads -->
<v-col cols="12">
<div ref="downloads_section">
<v-card variant="tonal" title="Downloads & Installation">
<v-card variant="tonal">
<v-card-title>
<h4>Downloads & Installation</h4>
</v-card-title>
<v-card-text class="text-body-2">
<p>
There are several ways of installing Scapy, depending on your plateform.
Expand All @@ -195,12 +201,12 @@
</a>
</p>
<v-card color="transparent">
<v-tabs v-model="dllTab" bg-color="primary" density="compact" slider-color="#314C46">
<v-tabs show-arrows v-model="dllTab" bg-color="primary" density="compact" slider-color="#314C46">
<v-tab value="pypi">PyPI</v-tab>
<v-tab value="windows">Windows</v-tab>
<v-tab value="github">Github</v-tab>
<v-tab value="conda">Conda</v-tab>
<v-tab value="debian">Debian/Ubuntu</v-tab>
<v-tab value="windows">Windows</v-tab>
<v-tab value="other">More</v-tab>
</v-tabs>
<v-card-text>
Expand Down Expand Up @@ -254,9 +260,10 @@
<script lang="ts" setup>
import ScapyS from '@/components/ScapyS.vue'
import SponsorCard from '@/components/SponsorCard.vue'
import ScapyTerminal from '@/components/ScapyTerminal.vue'

import { useDisplay } from 'vuetify';
import { inject, computed, onMounted, ref } from 'vue';
import { inject, computed, onMounted, ref, watchEffect } from 'vue';
import type { Ref } from 'vue'

const version = '2.5.0';
Expand All @@ -276,6 +283,17 @@ onMounted(() => {
}
});

/* Size of quote text */
const fontSize = ref('1em');
watchEffect(() => {
/* Select font size based on display size */
if (smAndDown.value) {
fontSize.value = '0.8em';
} else {
fontSize.value = '1em';
}
});

/* Quotes database: web-oriented, unlike the ones in actual Scapy */
const AVAILABLE_QUOTES = [
["Craft packets like it is your last day on earth.", "Lao-Tze"],
Expand Down Expand Up @@ -320,6 +338,7 @@ const BASE_URL = import.meta.env.BASE_URL;
.scapy-main-box {
/* Monospace font */
font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;
font-size: v-bind(fontSize);
white-space: pre;
}

Expand All @@ -333,4 +352,10 @@ a:visited {
code.bash:before {
content: '$ ';
}

/* Thinner h4 titles */
h4 {
font-weight: 500;
padding: 2px 0px 2px 0px;
}
</style>