update
This commit is contained in:
parent
0bfdd8d247
commit
fbb41ed09d
|
|
@ -1,4 +1,4 @@
|
|||
```rust
|
||||
```json
|
||||
█████╗ ██╗ ██╗██╗ ██╗███╗ ███╗ ██████╗ ██████╗ ████████╗███████╗███╗ ███╗
|
||||
██╔══██╗╚██╗██╔╝██║ ██║████╗ ████║██╔═══██╗██╔══██╗╚══██╔══╝██╔════╝████╗ ████║
|
||||
███████║ ╚███╔╝ ██║ ██║██╔████╔██║██║ ██║██████╔╝ ██║ █████╗ ██╔████╔██║
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
██║ ██║██╔╝ ██╗╚██████╔╝██║ ╚═╝ ██║╚██████╔╝██║ ██║ ██║ ███████╗██║ ╚═╝ ██║
|
||||
╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝╚═╝ ╚═╝
|
||||
```
|
||||
#### >>> [Live Demo](axumortem.carterperez-dev.com)
|
||||
|
||||
[](https://github.com/CarterPerez-dev/Cybersecurity-Projects/tree/main/PROJECTS/intermediate/binary-analysis-tool)
|
||||
[](https://www.rust-lang.org)
|
||||
|
|
|
|||
|
|
@ -24,6 +24,12 @@
|
|||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Epilogue:wght@400;500;600;700&family=Poetsen+One&family=Montserrat:wght@400;500;600;700;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>Binary Analysis Tool</title>
|
||||
<meta
|
||||
name="description"
|
||||
|
|
|
|||
|
|
@ -78,6 +78,33 @@ export function Component(): React.ReactElement {
|
|||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<div className={styles.grain} aria-hidden="true">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="100%"
|
||||
height="100%"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<filter id="grain-bat">
|
||||
<feTurbulence
|
||||
type="turbulence"
|
||||
baseFrequency="1.16"
|
||||
numOctaves="1"
|
||||
seed="2"
|
||||
stitchTiles="stitch"
|
||||
>
|
||||
<animate
|
||||
attributeName="seed"
|
||||
from="0"
|
||||
to="100"
|
||||
dur="2.67s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</feTurbulence>
|
||||
</filter>
|
||||
<rect width="100%" height="100%" filter="url(#grain-bat)" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className={styles.hexMargin} aria-hidden="true">
|
||||
{HEX_OFFSETS.map((offset) => (
|
||||
<span key={offset}>{offset}</span>
|
||||
|
|
@ -92,7 +119,7 @@ export function Component(): React.ReactElement {
|
|||
<header className={styles.metaStrip}>
|
||||
<span>AXM-001</span>
|
||||
<span className={styles.metaCenter}>STATIC ANALYSIS SUITE</span>
|
||||
<span>v0.1.0</span>
|
||||
<span>v0.1.1</span>
|
||||
</header>
|
||||
|
||||
<div className={styles.rule} />
|
||||
|
|
@ -102,9 +129,9 @@ export function Component(): React.ReactElement {
|
|||
<p className={styles.subtitle}>BINARY DISSECTION ENGINE</p>
|
||||
<p className={styles.formats}>
|
||||
<span>ELF</span>
|
||||
<span className={styles.formatDivider}>/</span>
|
||||
<span className={styles.formatDivider}>·</span>
|
||||
<span>PE</span>
|
||||
<span className={styles.formatDivider}>/</span>
|
||||
<span className={styles.formatDivider}>·</span>
|
||||
<span>MACH-O</span>
|
||||
</p>
|
||||
</section>
|
||||
|
|
@ -196,6 +223,7 @@ export function Component(): React.ReactElement {
|
|||
|
||||
<footer className={styles.footer}>
|
||||
<span>© ANGELAMOS 2026</span>
|
||||
<span className={styles.footerDesignation}>SYS AXM-BDE // UNIT-001</span>
|
||||
<span>AXUMORTEM</span>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,23 @@ $content-max: 860px;
|
|||
}
|
||||
}
|
||||
|
||||
.grain {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
z-index: $z-max;
|
||||
mix-blend-mode: multiply;
|
||||
opacity: 1;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.hexMargin {
|
||||
display: none;
|
||||
position: fixed;
|
||||
|
|
@ -201,17 +218,23 @@ $content-max: 860px;
|
|||
}
|
||||
|
||||
.title {
|
||||
font-family: $font-display;
|
||||
font-size: $font-size-6xl;
|
||||
font-weight: $font-weight-black;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: $font-weight-medium;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: $line-height-none;
|
||||
color: $text-default;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include breakpoint-up('sm') {
|
||||
font-size: $font-size-7xl;
|
||||
font-size: $font-size-5xl;
|
||||
}
|
||||
|
||||
@include breakpoint-up('md') {
|
||||
font-size: $font-size-7xl;
|
||||
}
|
||||
|
||||
@include breakpoint-up('lg') {
|
||||
font-size: $font-size-8xl;
|
||||
}
|
||||
}
|
||||
|
|
@ -277,27 +300,78 @@ $content-max: 860px;
|
|||
}
|
||||
}
|
||||
|
||||
$bracket-size: 14px;
|
||||
$bracket-weight: 1px;
|
||||
$bracket-inset: $space-3;
|
||||
|
||||
.dropZone {
|
||||
border: 1px solid $border-default;
|
||||
position: relative;
|
||||
border: 1px dashed $border-strong;
|
||||
padding: $space-10 $space-6;
|
||||
cursor: pointer;
|
||||
transition-property: border-color, background-color;
|
||||
transition-property: border-color, background-color, border-style;
|
||||
transition-duration: $duration-fast;
|
||||
transition-timing-function: $ease-out;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: $bracket-size;
|
||||
height: $bracket-size;
|
||||
pointer-events: none;
|
||||
transition: border-color $duration-fast $ease-out;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: $bracket-inset;
|
||||
left: $bracket-inset;
|
||||
border-top: $bracket-weight solid $border-stronger;
|
||||
border-left: $bracket-weight solid $border-stronger;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: $bracket-inset;
|
||||
right: $bracket-inset;
|
||||
border-top: $bracket-weight solid $border-stronger;
|
||||
border-right: $bracket-weight solid $border-stronger;
|
||||
}
|
||||
|
||||
@include hover {
|
||||
border-color: $border-strong;
|
||||
border-color: $border-stronger;
|
||||
|
||||
&::before,
|
||||
&::after,
|
||||
.dropPrompt::before,
|
||||
.dropPrompt::after {
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&.dragActive {
|
||||
border-style: solid;
|
||||
border-color: $accent;
|
||||
background: $accent-dim;
|
||||
|
||||
&::before,
|
||||
&::after,
|
||||
.dropPrompt::before,
|
||||
.dropPrompt::after {
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
&.hasFile {
|
||||
border-style: solid;
|
||||
border-color: $border-default;
|
||||
cursor: default;
|
||||
background: $bg-surface-75;
|
||||
padding: $space-6;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -307,6 +381,30 @@ $content-max: 860px;
|
|||
align-items: center;
|
||||
gap: $space-3;
|
||||
text-align: center;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: $bracket-size;
|
||||
height: $bracket-size;
|
||||
pointer-events: none;
|
||||
transition: border-color $duration-fast $ease-out;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: $bracket-inset;
|
||||
left: $bracket-inset;
|
||||
border-bottom: $bracket-weight solid $border-stronger;
|
||||
border-left: $bracket-weight solid $border-stronger;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: $bracket-inset;
|
||||
right: $bracket-inset;
|
||||
border-bottom: $bracket-weight solid $border-stronger;
|
||||
border-right: $bracket-weight solid $border-stronger;
|
||||
}
|
||||
}
|
||||
|
||||
.dropStatus {
|
||||
|
|
@ -410,6 +508,8 @@ $content-max: 860px;
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: $space-3;
|
||||
padding-left: $space-3;
|
||||
border-left: 2px solid $accent;
|
||||
}
|
||||
|
||||
.passNumber {
|
||||
|
|
@ -435,9 +535,18 @@ $content-max: 860px;
|
|||
align-items: center;
|
||||
padding: $space-6 0 $space-4;
|
||||
font-family: $font-mono;
|
||||
font-size: $font-size-3xs;
|
||||
font-size: $font-size-2xs;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: $tracking-widest;
|
||||
color: $text-muted;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.footerDesignation {
|
||||
display: none;
|
||||
color: $border-strong;
|
||||
|
||||
@include breakpoint-up('sm') {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@
|
|||
|
||||
@use 'tokens' as *;
|
||||
|
||||
$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto,
|
||||
'Helvetica Neue', Arial, sans-serif;
|
||||
$font-display: 'Montserrat', sans-serif;
|
||||
|
||||
$font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
|
||||
'Liberation Mono', monospace;
|
||||
$font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
|
||||
$font-mono: 'Epilogue', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@ $space-32: 8rem;
|
|||
// ============================================================================
|
||||
// TYPOGRAPHY SCALE
|
||||
// ============================================================================
|
||||
$font-size-3xs: 0.625rem;
|
||||
$font-size-2xs: 0.6875rem;
|
||||
$font-size-xs: 0.75rem;
|
||||
$font-size-3xs: 0.65rem;
|
||||
$font-size-2xs: 0.695rem;
|
||||
$font-size-xs: 0.765rem;
|
||||
$font-size-sm: 0.875rem;
|
||||
$font-size-base: 1rem;
|
||||
$font-size-lg: 1.125rem;
|
||||
|
|
@ -80,43 +80,41 @@ $tracking-widest: 0.1em;
|
|||
// ============================================================================
|
||||
// COLORS
|
||||
// ============================================================================
|
||||
$white: hsl(0, 0%, 100%);
|
||||
$black: hsl(0, 0%, 0%);
|
||||
$white: hsl(220, 15%, 97%);
|
||||
$black: hsl(227, 21%, 4%);
|
||||
|
||||
// Auth
|
||||
$bg-page: hsl(0, 0%, 10.5%);
|
||||
$bg-card: hsl(0, 0%, 6.2%);
|
||||
$bg-page: hsl(260, 16%, 10%);
|
||||
$bg-card: hsl(260, 18%, 6%);
|
||||
|
||||
// Home/landing
|
||||
$bg-landing: hsl(0, 0%, 10.8%);
|
||||
$bg-landing: hsl(260, 16%, 10%);
|
||||
|
||||
$bg-default: hsl(0, 0%, 7.1%);
|
||||
$bg-alternative: hsl(0, 0%, 5.9%);
|
||||
$bg-surface-75: hsl(0, 0%, 9%);
|
||||
$bg-surface-100: hsl(0, 0%, 12.2%);
|
||||
$bg-surface-200: hsl(0, 0%, 14.1%);
|
||||
$bg-surface-300: hsl(0, 0%, 16.1%);
|
||||
$bg-control: hsl(0, 0%, 10%);
|
||||
$bg-selection: hsl(0, 0%, 19.2%);
|
||||
$bg-overlay: hsl(0, 0%, 14.1%);
|
||||
$bg-overlay-hover: hsl(0, 0%, 18%);
|
||||
$bg-default: hsl(260, 18%, 7%);
|
||||
$bg-alternative: hsl(260, 18%, 5.5%);
|
||||
$bg-surface-75: hsl(260, 15%, 9.5%);
|
||||
$bg-surface-100: hsl(260, 13%, 12.5%);
|
||||
$bg-surface-200: hsl(260, 11%, 14.5%);
|
||||
$bg-surface-300: hsl(260, 9%, 16.5%);
|
||||
$bg-control: hsl(260, 15%, 10%);
|
||||
$bg-selection: hsl(260, 9%, 19.5%);
|
||||
$bg-overlay: hsl(260, 11%, 14.5%);
|
||||
$bg-overlay-hover: hsl(260, 9%, 18.5%);
|
||||
|
||||
$border-muted: hsl(0, 0%, 11.1%);
|
||||
$border-default: hsl(0, 0%, 18%);
|
||||
$border-strong: hsl(0, 0%, 22.4%);
|
||||
$border-stronger: hsl(0, 0%, 27.1%);
|
||||
$border-control: hsl(0, 0%, 22.4%);
|
||||
$border-muted: hsl(260, 12%, 21.5%);
|
||||
$border-default: hsl(260, 9%, 28.5%);
|
||||
$border-strong: hsl(260, 7%, 33.5%);
|
||||
$border-stronger: hsl(260, 5%, 37.5%);
|
||||
$border-control: hsl(260, 7%, 33.5%);
|
||||
|
||||
$text-default: hsl(0, 0%, 98%);
|
||||
$text-light: hsl(0, 0%, 70.6%);
|
||||
$text-lighter: hsl(0, 0%, 53.7%);
|
||||
$text-muted: hsl(0, 0%, 30.2%);
|
||||
$text-default: hsl(255, 14%, 98%);
|
||||
$text-light: hsl(258, 9%, 87%);
|
||||
$text-lighter: hsl(258, 7%, 80%);
|
||||
$text-muted: hsl(260, 9%, 50%);
|
||||
|
||||
$error-default: hsl(0, 72%, 51%);
|
||||
$error-light: hsl(0, 72%, 65%);
|
||||
|
||||
$accent: hsl(25, 85%, 55%);
|
||||
$accent-dim: hsl(25, 35%, 14%);
|
||||
$accent: hsl(160, 85%, 50%);
|
||||
$accent-dim: hsl(160, 35%, 12%);
|
||||
|
||||
// ============================================================================
|
||||
// BORDER RADIUS
|
||||
|
|
|
|||
|
|
@ -3,9 +3,6 @@
|
|||
# justfile
|
||||
# =============================================================================
|
||||
|
||||
set dotenv-filename := ".env.development"
|
||||
set dotenv-load
|
||||
set export
|
||||
set shell := ["bash", "-uc"]
|
||||
set windows-shell := ["powershell.exe", "-NoLogo", "-Command"]
|
||||
|
||||
|
|
@ -105,35 +102,35 @@ tunnel-logs:
|
|||
|
||||
[group('dev')]
|
||||
dev-up *ARGS:
|
||||
docker compose -f dev.compose.yml up {{ARGS}}
|
||||
docker compose --env-file .env.development -f dev.compose.yml up {{ARGS}}
|
||||
|
||||
[group('dev')]
|
||||
dev-start *ARGS:
|
||||
docker compose -f dev.compose.yml up -d {{ARGS}}
|
||||
docker compose --env-file .env.development -f dev.compose.yml up -d {{ARGS}}
|
||||
|
||||
[group('dev')]
|
||||
dev-down *ARGS:
|
||||
docker compose -f dev.compose.yml down {{ARGS}}
|
||||
docker compose --env-file .env.development -f dev.compose.yml down {{ARGS}}
|
||||
|
||||
[group('dev')]
|
||||
dev-stop:
|
||||
docker compose -f dev.compose.yml stop
|
||||
docker compose --env-file .env.development -f dev.compose.yml stop
|
||||
|
||||
[group('dev')]
|
||||
dev-build *ARGS:
|
||||
docker compose -f dev.compose.yml build {{ARGS}}
|
||||
docker compose --env-file .env.development -f dev.compose.yml build {{ARGS}}
|
||||
|
||||
[group('dev')]
|
||||
dev-rebuild:
|
||||
docker compose -f dev.compose.yml build --no-cache
|
||||
docker compose --env-file .env.development -f dev.compose.yml build --no-cache
|
||||
|
||||
[group('dev')]
|
||||
dev-logs *SERVICE:
|
||||
docker compose -f dev.compose.yml logs -f {{SERVICE}}
|
||||
docker compose --env-file .env.development -f dev.compose.yml logs -f {{SERVICE}}
|
||||
|
||||
[group('dev')]
|
||||
dev-ps:
|
||||
docker compose -f dev.compose.yml ps
|
||||
docker compose --env-file .env.development -f dev.compose.yml ps
|
||||
|
||||
# =============================================================================
|
||||
# Utilities
|
||||
|
|
|
|||
Loading…
Reference in New Issue