czoczo
/
BetterBash
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

wip on preview

Browse Source
main
czoczo 7 months ago
parent 4c31d98a77
commit e55505fe94
1 changed files with 67 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 86
      webpage/BetterBash/src/App.vue

86
webpage/BetterBash/src/App.vue
Unescape View File

@ -22,8 +22,7 @@
:key="name" :key="name"
:value="color.code" :value="color.code"
> >
{{ name }} ({{ color.code }}) {{ name }} </option>
</option>
</select> </select>
</div> </div>
</div> </div>
@ -35,12 +34,17 @@
:class="getColorClass(colors.SECONDARY_COLOR)" :class="getColorClass(colors.SECONDARY_COLOR)"
>user</span >user</span
><span :class="getColorClass(colors.WHITEB)">@</span ><span :class="getColorClass(colors.WHITEB)">@</span
><span :class="getColorClass(colors.PRIMARY_COLOR)">hostname</span ><span :class="getColorClass(colors.PRIMARY_COLOR)">hostname:pts/5</span
><span :class="getColorClass(colors.WHITEB)">:pts/5)</span ><span :class="getColorClass(colors.WHITEB)">)</span
><span :class="getColorClass(colors.BORDCOL)">──</span ><span :class="getColorClass(colors.BORDCOL)">──</span
><span :class="getColorClass(colors.WHITEB)">(</span><span ><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.PRIMARY_COLOR)" :class="getColorClass(colors.PRIMARY_COLOR)"
>◢▼◢◆◆◣▼◣</span >▶▬▲◀▶▲▬◀</span
><span :class="getColorClass(colors.WHITEB)">)</span
><span :class="getColorClass(colors.BORDCOL)">──</span
><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.SECONDARY_COLOR)"
>1 ↻</span
><span :class="getColorClass(colors.WHITEB)">)</span ><span :class="getColorClass(colors.WHITEB)">)</span
><span :class="getColorClass(colors.BORDCOL)" ><span :class="getColorClass(colors.BORDCOL)"
>───────────────────────</span >───────────────────────</span
@ -59,13 +63,63 @@
<span :class="getColorClass(colors.BORDCOL)">└─</span <span :class="getColorClass(colors.BORDCOL)">└─</span
><span :class="getColorClass(colors.WHITEB)">(</span><span ><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.PATH_COLOR)" :class="getColorClass(colors.PATH_COLOR)"
>~</span >~)</span
><span :class="getColorClass(colors.WHITEB)">)─</span ><span :class="getColorClass(colors.BORDCOL)">─</span
><span :class="getColorClass(colors.BORDCOL)">(</span><span ><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.PRIMARY_COLOR)" :class="getColorClass(colors.PRIMARY_COLOR)"
>$</span >$</span
><span :class="getColorClass(colors.WHITEB)">)-></span> ><span :class="getColorClass(colors.WHITEB)">)</span
><span :class="getColorClass(colors.BORDCOL)">-&gt;</span>
</div> </div>
<div class="ps1-line">&nbsp;</div>
<div class="ps1-line">
<span :class="getColorClass(colors.BORDCOL)">┌─</span
><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.SECONDARY_COLOR)"
>user</span
><span :class="getColorClass(colors.WHITEB)">@</span
><span :class="getColorClass(colors.PRIMARY_COLOR)">hostname:pts/5</span
><span :class="getColorClass(colors.WHITEB)">)</span
><span :class="getColorClass(colors.BORDCOL)">──</span
><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.PRIMARY_COLOR)"
>▶▬▲◀▶▲▬◀</span
><span :class="getColorClass(colors.WHITEB)">)</span
><span :class="getColorClass(colors.BORDCOL)">──</span
><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.SECONDARY_COLOR)"
>1 ↻</span
><span :class="getColorClass(colors.WHITEB)">)</span
><span :class="getColorClass(colors.BORDCOL)"
>───────────────────────</span
><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.TIME_COLOR)"
>Wed May 14</span
><span :class="getColorClass(colors.WHITEB)">)</span
><span :class="getColorClass(colors.BORDCOL)">───</span
><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.PRIMARY_COLOR)"
>00:40:00</span
><span :class="getColorClass(colors.WHITEB)">)</span
><span :class="getColorClass(colors.BORDCOL)">────</span>
</div>
<div class="ps1-line">
<span :class="getColorClass(colors.BORDCOL)">└─</span
><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.PATH_COLOR)"
>~)</span
><span :class="getColorClass(colors.BORDCOL)">─</span
><span :class="getColorClass(colors.WHITEB)">(</span><span
:class="getColorClass(colors.PRIMARY_COLOR)"
>$</span
><span :class="getColorClass(colors.WHITEB)">)</span
><span :class="getColorClass(colors.BORDCOL)">-&gt;</span>
</div>
</div> </div>
<div class="info-section"> <div class="info-section">
@ -128,7 +182,6 @@ const colorLabels = {
ERR_COLOR: 'Error Color', ERR_COLOR: 'Error Color',
WHITEB: 'White Bold', WHITEB: 'White Bold',
RST: 'Reset', RST: 'Reset',
BOLD: 'Bold',
BORDCOL: 'Border Color', BORDCOL: 'Border Color',
PATH_COLOR: 'Path Color', PATH_COLOR: 'Path Color',
}; };
@ -142,7 +195,6 @@ const colors = ref({
ERR_COLOR: '\\[\\033[00;31;1m\\]', ERR_COLOR: '\\[\\033[00;31;1m\\]',
WHITEB: '\\[\\033[00;97;1m\\]', WHITEB: '\\[\\033[00;97;1m\\]',
RST: '\\[\\033[0m\\]', RST: '\\[\\033[0m\\]',
BOLD: '\\[\\033[1m\\]',
BORDCOL: '\\[\\033[00;90;1m\\]', BORDCOL: '\\[\\033[00;90;1m\\]',
PATH_COLOR: '\\[\\033[00;97;1m\\]', PATH_COLOR: '\\[\\033[00;97;1m\\]',
}); });
@ -213,7 +265,7 @@ h1 {
background-color: #2d2d2d; background-color: #2d2d2d;
padding: 15px; padding: 15px;
border-radius: 8px; border-radius: 8px;
font-family: Consolas, Monaco, 'Lucida Console', monospace; /* Apply terminal font */ font-family: Consolas, Monaco, 'Lucida Console', monospace;
} }
label { label {
margin-bottom: 8px; margin-bottom: 8px;
@ -225,14 +277,14 @@ select {
color: #fff; color: #fff;
border: 1px solid #555; border: 1px solid #555;
border-radius: 4px; border-radius: 4px;
font-family: Consolas, Monaco, 'Lucida Console', monospace; /* Apply terminal font */ font-family: Consolas, Monaco, 'Lucida Console', monospace;
} }
.terminal { .terminal {
background-color: #000; background-color: #000;
padding: 20px; padding: 20px;
border-radius: 8px; border-radius: 8px;
min-height: 180px; min-height: 180px;
font-family: Consolas, Monaco, 'Lucida Console', monospace; /* Apply terminal font */ font-family: Consolas, Monaco, 'Lucida Console', monospace;
overflow-x: auto; overflow-x: auto;
margin-top: 20px; margin-top: 20px;
white-space: pre-wrap; white-space: pre-wrap;
@ -351,10 +403,6 @@ select {
} }
.text-red-on-white { .text-red-on-white {
color: #ffffff; color: #ffffff;
background-color: #cc0000; background-color: #cc0;
font-weight: bold;
}
.text-reset {
color: inherit;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save