New terminal, cleanup logo

Author: gpotter2

src/components/ScapyS.vue

@@ -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);

src/components/ScapyTerminal.vue

@@ -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>

src/views/Home.vue

@@ -2,34 +2,32 @@
   <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>
@@ -77,11 +75,7 @@
         </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">
@@ -195,12 +189,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>
@@ -254,9 +248,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';
@@ -276,6 +271,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"],
@@ -320,6 +326,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;
 }