johba/harb
1
0
Fork 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions

added web-app and landing

Browse source
This commit is contained in:
johba 2025-09-23 14:18:04 +02:00
parent af031877a5
commit 769fa105b8
198 changed files with 22132 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web-app/src/assets/arrows.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="68" height="24" viewBox="0 0 68 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.4508 11.9999L15.1008 4.64991C14.8508 4.39991 14.7298 4.10824 14.7378 3.77491C14.7458 3.44157 14.8751 3.14991 15.1258 2.89991C15.3764 2.64991 15.6681 2.52491 16.0008 2.52491C16.3334 2.52491 16.6251 2.64991 16.8758 2.89991L24.5758 10.5749C24.7758 10.7749 24.9258 10.9999 25.0258 11.2499C25.1258 11.4999 25.1758 11.7499 25.1758 11.9999C25.1758 12.2499 25.1258 12.4999 25.0258 12.7499C24.9258 12.9999 24.7758 13.2249 24.5758 13.4249L16.8758 21.1249C16.6258 21.3749 16.3298 21.4959 15.9878 21.4879C15.6458 21.4799 15.3501 21.3506 15.1008 21.0999C14.8514 20.8492 14.7264 20.5576 14.7258 20.2249C14.7251 19.8922 14.8501 19.6006 15.1008 19.3499L22.4508 11.9999Z" fill="#D6D6D6"/>
<path d="M36.4508 11.9999L29.1008 4.64991C28.8508 4.39991 28.7298 4.10824 28.7378 3.77491C28.7458 3.44157 28.8751 3.14991 29.1258 2.89991C29.3764 2.64991 29.6681 2.52491 30.0008 2.52491C30.3334 2.52491 30.6251 2.64991 30.8758 2.89991L38.5758 10.5749C38.7758 10.7749 38.9258 10.9999 39.0258 11.2499C39.1258 11.4999 39.1758 11.7499 39.1758 11.9999C39.1758 12.2499 39.1258 12.4999 39.0258 12.7499C38.9258 12.9999 38.7758 13.2249 38.5758 13.4249L30.8758 21.1249C30.6258 21.3749 30.3298 21.4959 29.9878 21.4879C29.6458 21.4799 29.3501 21.3506 29.1008 21.0999C28.8514 20.8492 28.7264 20.5576 28.7258 20.2249C28.7251 19.8922 28.8501 19.6006 29.1008 19.3499L36.4508 11.9999Z" fill="#D6D6D6"/>
<path d="M50.4508 11.9999L43.1008 4.64991C42.8508 4.39991 42.7298 4.10824 42.7378 3.77491C42.7458 3.44157 42.8751 3.14991 43.1258 2.89991C43.3764 2.64991 43.6681 2.52491 44.0008 2.52491C44.3334 2.52491 44.6251 2.64991 44.8758 2.89991L52.5758 10.5749C52.7758 10.7749 52.9258 10.9999 53.0258 11.2499C53.1258 11.4999 53.1758 11.7499 53.1758 11.9999C53.1758 12.2499 53.1258 12.4999 53.0258 12.7499C52.9258 12.9999 52.7758 13.2249 52.5758 13.4249L44.8758 21.1249C44.6258 21.3749 44.3298 21.4959 43.9878 21.4879C43.6458 21.4799 43.3501 21.3506 43.1008 21.0999C42.8514 20.8492 42.7264 20.5576 42.7258 20.2249C42.7251 19.8922 42.8501 19.6006 43.1008 19.3499L50.4508 11.9999Z" fill="#D6D6D6"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

13
web-app/src/assets/connectors/Coinbase Wallet.svg Normal file
View file

@ -0,0 +1,13 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_13571_129878)">
<rect width="40" height="40" fill="#0052FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.3312 0H31.6672C36.2704 0 40 4.0128 40 8.9632V31.0368C40 35.9872 36.2704 40 31.6688 40H8.3312C3.7296 40 0 35.9872 0 31.0368V8.9632C0 4.0128 3.7296 0 8.3312 0Z" fill="#0052FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9989 5.79443C27.8453 5.79443 34.2053 12.1544 34.2053 20.0008C34.2053 27.8472 27.8453 34.2072 19.9989 34.2072C12.1525 34.2072 5.79254 27.8472 5.79254 20.0008C5.79254 12.1544 12.1525 5.79443 19.9989 5.79443Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5005 15.459H23.4973C24.0733 15.459 24.5389 15.9614 24.5389 16.579V23.419C24.5389 24.0382 24.0717 24.539 23.4973 24.539H16.5005C15.9245 24.539 15.4589 24.0366 15.4589 23.419V16.579C15.4589 15.9614 15.9261 15.459 16.5005 15.459Z" fill="#0052FF"/>
</g>
<defs>
<clipPath id="clip0_13571_129878">
<rect width="40" height="40" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

5
web-app/src/assets/connectors/WalletConnect.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" fill="#3396FF"/>
<path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#3396FF"/>
<path d="M12.2327 14.8836C16.5225 10.7003 23.4779 10.7003 27.7677 14.8836L28.284 15.3871C28.4985 15.5962 28.4985 15.9353 28.284 16.1445L26.5179 17.8668C26.4106 17.9713 26.2368 17.9713 26.1295 17.8668L25.419 17.1739C22.4263 14.2555 17.5741 14.2555 14.5813 17.1739L13.8204 17.9159C13.7132 18.0205 13.5393 18.0205 13.4321 17.9159L11.666 16.1936C11.4514 15.9845 11.4514 15.6453 11.666 15.4362L12.2327 14.8836ZM31.4203 18.4454L32.9922 19.9782C33.2067 20.1874 33.2067 20.5265 32.9922 20.7356L25.9045 27.6473C25.69 27.8565 25.3422 27.8565 25.1277 27.6473L20.0973 22.742C20.0437 22.6896 19.9568 22.6896 19.9031 22.742L14.8728 27.6473C14.6583 27.8565 14.3106 27.8565 14.096 27.6473L7.00816 20.7355C6.79367 20.5264 6.79367 20.1873 7.00816 19.9782L8.58004 18.4453C8.79454 18.2362 9.1423 18.2362 9.35679 18.4453L14.3873 23.3508C14.4409 23.4031 14.5278 23.4031 14.5814 23.3508L19.6117 18.4453C19.8262 18.2361 20.1739 18.2361 20.3885 18.4453L25.4189 23.3508C25.4726 23.4031 25.5595 23.4031 25.6131 23.3508L30.6436 18.4454C30.858 18.2362 31.2058 18.2362 31.4203 18.4454Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
web-app/src/assets/contracts/harb.json Normal file
View file

File diff suppressed because one or more lines are too long

1
web-app/src/assets/contracts/stake.json Normal file
View file

File diff suppressed because one or more lines are too long

BIN
web-app/src/assets/img/header-image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
web-app/src/assets/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB

20
web-app/src/assets/logo.svg Normal file
View file

@ -0,0 +1,20 @@
<svg width="49" height="50" viewBox="0 0 49 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3277_37470)">
<path d="M49 25C49 38.531 38.031 49.5 24.5 49.5C10.969 49.5 0 38.531 0 25C0 11.469 10.969 0.5 24.5 0.5C38.031 0.5 49 11.469 49 25Z" fill="url(#paint0_linear_3277_37470)"/>
<path d="M24.4216 18.4727L46.6369 50.0385H2.20625L24.4216 18.4727Z" fill="#1A54F4"/>
<path d="M27.0679 26.1869L29.2195 26.7659L29.7988 26.1869L24.3369 18.4121L23.5921 19.4046L9.02702 40.1649L8.44773 40.992H10.1856L13.0821 38.5934L15.5648 38.2626L19.206 33.7962L18.7923 31.9766L20.7784 26.9313L24.0059 24.0364L27.0679 26.1869Z" fill="white"/>
<path d="M30.1086 10.4087C29.8314 10.6748 29.5708 10.9456 29.3146 11.2119C28.0608 12.5151 26.9116 13.7097 24.4234 13.7097C22.8617 13.7097 21.8976 13.2834 21.1067 12.6834C20.6977 12.3731 20.3259 12.0093 19.9298 11.6019C19.8504 11.5202 19.7696 11.4364 19.6873 11.351C19.3941 11.0466 19.0818 10.7225 18.7439 10.406C19.0782 10.091 19.3802 9.77848 19.6701 9.47847C20.9318 8.173 21.9643 7.10465 24.4234 7.10465C26.8967 7.10465 27.9868 8.23505 29.2452 9.54003C29.5197 9.82458 29.8021 10.1174 30.1086 10.4087Z" stroke="white" stroke-width="1.22884"/>
<circle cx="24.3315" cy="10.2992" r="2.87241" stroke="white" stroke-width="1.01379"/>
<path d="M27.0342 8.27148H28.1474L29.3997 10.468L28.1474 12.6646H27.0342V8.27148Z" fill="white"/>
<path d="M21.6279 12.666L20.5147 12.666L19.2624 10.4695L20.5147 8.27291L21.6279 8.27291L21.6279 12.666Z" fill="white"/>
</g>
<defs>
<linearGradient id="paint0_linear_3277_37470" x1="24.331" y1="49.5" x2="24.331" y2="2.18965" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#1A54F4"/>
</linearGradient>
<clipPath id="clip0_3277_37470">
<rect y="0.5" width="49" height="49" rx="24.5" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

8
web-app/src/assets/logout.svg Normal file
View file

@ -0,0 +1,8 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_2610_39819" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
<rect x="28" y="27.999" width="27.9984" height="27.9984" transform="rotate(-180 28 27.999)" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_2610_39819)">
<path d="M14.0006 3.50019L14.0006 5.8334L5.83438 5.8334L5.83437 22.1658L14.0006 22.1658L14.0006 24.499L5.83437 24.499C5.19274 24.499 4.64347 24.2706 4.18655 23.8136C3.72963 23.3567 3.50117 22.8074 3.50117 22.1658L3.50117 5.8334C3.50117 5.19176 3.72963 4.64249 4.18655 4.18557C4.64347 3.72865 5.19274 3.50019 5.83438 3.50019L14.0006 3.50019ZM16.3338 8.1666L17.9379 9.85817L14.963 12.833L24.5 12.833L24.5 15.1662L14.963 15.1662L17.9379 18.141L16.3338 19.8326L10.5008 13.9996L16.3338 8.1666Z" fill="#F9F9FA"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 881 B

305
web-app/src/assets/styles/global.sass Normal file
View file

@ -0,0 +1,305 @@
@font-face
font-family: "DM Sans"
src: url("/fonts/DMSans-variable.ttf")
font-style: normal
@font-face
font-family: "DM Sans semi-bold"
src: url("/fonts/DMSans-SemiBold.ttf")
font-weight: 600
font-style: normal
@font-face
font-family: "Crypto Scam"
src: url("/fonts/Crypto-Scam-Regular.ttf")
font-weight: 400
font-style: normal
@font-face
font-family: "Play"
src: url("/fonts/Play-Regular.ttf")
font-weight: 400
font-style: normal
@font-face
font-family: "Play-Bold"
src: url("/fonts/Play-Bold.ttf")
@font-face
font-family: "Audiowide"
src: url("/fonts/Audiowide-Regular.ttf") format('truetype')
:root, [data-theme="default"]
font-family: "DM Sans", sans-serif
color: var(--color-midnight-black)
font-optical-sizing: auto
font-size: 14px
line-height: 20px
letter-spacing: 0.17px
// global
--color-primary: #7550AE
--color-secondary: #07111B
--color-tertiary: #141414
--color-input: #202020
--color-white: #FFF
--color-primary--hovered: var(--color-white-hovered)
--color-primary-light: #FFF
--color-white-hovered: #cccccc
--color-black-hovered: #333333
--color-grey: #858585
--color-quatenary: #FFF
--color-steel-blue: #4682B4
--color-based-blue: #7550AE
--color-based-blue--hovered: #5f4884
--color-bright-white: #FFFFFF
--color-bright-white-hovered: #e6e6e6
--color-very-light-grey: #F0F0F0
--color-light-grey: #D6D6D6
--color-border-main: #A1A3A7
--color-midnight-black: #0F0F0F
--color-midnight-black-hovered: #272727
--color-font: var(--color-white)
--color-bg: white
--color-black: black
--color-blood: #8B0000
--color-white: white
--color-text-primary: #121312
--color-text-primary-hovered: #292b29
--color-contrast-lower: hsl(0, 0%, 95%)
--color-contrast-low: hsl(240, 1%, 83%)
--color-contrast-medium: hsl(240, 1%, 48%)
--color-contrast-high: hsl(240, 4%, 20%)
--color-contrast-higher: black
--color-disabled: #A1A3A7
--color-bg-disabled: #D6D6D6
--border-radius: 16px
//buttons
--btn-color: var(--color-primary)
//todo btn-color hover
--btn-bg-color: var(--color-black)
--btn-padding: 16px 32px
--btn-dense-padding: 8px 16px
--font-size-number-big: 24px
--font-size-number-small: 14px
--font-size-alert-title: 16px
--font-size-navigation: 18px
--font-size-button-small: 13px
--font-size-button-medium: 14px
--font-size-button-large: 20px
--color-button-bg: var(--color-based-blue)
--color-button-font: var(--color-white)
--color-button-bg--outlined: var(--color-white)
--color-button-font--outlined: var(--color-based-blue)
--color-button-border--outlined: var(--color-based-blue)
--color-button-bg--hovered: var(--color-based-blue)
--color-button-font--hovered: var(--color-based-blue)
--color-button-bg--active: var(--color-based-blue)
--color-button-font--active: var(--color-based-blue)
--color-button-bg--light: var(--color-white)
--color-button-font--light: var(--color-secondary)
--color-button-border--light: var(--color-based-blue)
//card
--color-card-font: var(--color-font)
--color-card-bg: var(--color-tertiary)
--color-card-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.20)
--card-border-color: var(--color-border-main)
--card-border-radius: var(--border-radius)
--card-border-width: 1px
--card-border-style: solid
--color-tab-bg: var(--color-primary-light)
--color-tab-font--active: var(--color-based-blue)
--color-tab-border--active: var(--color-based-blue)
--color-navbar-bg: var(--color-secondary)
--color-navbar-font: var(--font-color)
--color-navbar-border: var(--color-black)
--color-font-main: var(--color-font)
--color-social-font: var(--color-black)
--color-social-border: var(--color-black)
--color-collapse-font: var(--color-black)
--color-collapse-bg: var(--color-white)
--color-collapse-border: var(--color-black)
--color-output-bg: var(--color-very-light-grey)
--color-expand-icon: var(--color-black)
--color-icon: var(--color-black)
--chart-button-background-color: var(--color-based-blue)
--chart-button-background-color--hovered: var(--color-based-blue--hovered)
// --color-tab-bg--active:
// --color-tab-font--hovered:
// --color-tab-bg--hovered:
// --color-tab-font:
// --color-tab-bg:
//fonts
--font-h1: 52px
--font-h2: 44px
--font-h3: 32px
--font-h4: 27px
--font-h5: 24px
--font-h6: 20px
--font-subheader1: 16px
--font-subheader2: 14px
--font-body0: 18px
--font-body1: 16px
--font-body2: 14px
--font-caption: 12px
--font-overline: 11px
body
color: var(--color-font-main)
h1,h2,h3,h4,h5, h6
text-align: center
h1
font-size: var(--font-h2)
margin: 24px 0
letter-spacing: -0.5px
font-weight: 700
line-height: 120%
@media (min-width: 768px)
font-size: var(--font-h1)
h2
font-size: var(--font-h2)
letter-spacing: -0.5px
font-weight: 700
line-height: 120%
h3
font-size: var(--font-h3)
h4
font-size: var(--font-h4)
h5
font-size: var(--font-h5)
text-transform: none
font-weight: 700
line-height: 133.4%
h6
font-size: var(--font-h6)
.subheader1
font-size: var(--font-subheader1)
font-weight: bold
letter-spacing: 0.15px
text-decoration: underline
.subheader2
font-size: var(--font-subheader2)
font-weight: bold
letter-spacing: 0.1px
.number-big
font-size: var(--font-size-number-big)
letter-spacing: 4.8px
.number-small
font-size: var(--font-size-number-small)
letter-spacing: 20%
.navigation-font
font-weight: 500
font-size: var(--font-size-navigation)
.button-font
font-weight: 500
font-size: var(--font-size-navigation)
.body2
font-size: var(--font-body2)
font-weight: 400
letter-spacing: 0.17px
.caption
font-size: var(--font-caption)
letter-spacing: 1px
[data-theme="dark"]
--color-primary: black
--color-primary--hovered: var(--color-black-hovered)
--color-secondary: black
--color-steel-blue: #4682B4
--color-based-blue: #1A54F4
--color-bg: black
--color-font: white
--color-black: white
--color-dark-grey: #1F1F1F
--color-contrast-lower: hsl(0, 0%, 95%)
--color-contrast-low: hsl(240, 1%, 83%)
--color-contrast-medium: hsl(240, 1%, 48%)
--color-contrast-high: hsl(240, 4%, 20%)
--color-contrast-higher: white
--color-disabled: #A1A3A7
--color-bg-disabled: #D6D6D6
--border-radius: 12px
--color-navbar-bg: var(--color-midnight-black)
--color-navbar-font: var(--color-white)
--color-navbar-border: var(--color-white)
--color-font-main: var(--color-white)
--color-card-bg: var(--color-midnight-black)
--color-card-font: var(--color-white)
--color-card-box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.2)
--color-tab-bg: var(--color-text-primary)
--color-tab-bg--active: var(--color-text-primary)
--color-output-bg: var(--color-dark-grey)
--color-social-font: var(--color-white)
--color-social-border: var(--color-white)
--color-collapse-font: var(--color-white)
--color-collapse-bg: var(--color-dark-grey)
--color-collapse-border: var(--color-white)
--color-expand-icon: var(--color-white)
--chart-button-background-color: var(--color-primary)
--chart-button-background-color--hovered: var(--color-primary--hovered)
.container
margin-right: auto
margin-left: auto
padding-right: 16px
padding-left: 16px
box-sizing: content-box
// &.container--variant1
// @media (min-width: 768px)
// max-width: 800px
// padding: 24px 64px
@media (min-width: 768px)
max-width: 500px
.container2
@extend .container
@media (min-width: 768px)
max-width: 650px
.container3
@extend .container
@media (min-width: 768px)
max-width: 750px
.container4
@extend .container
@media (min-width: 768px)
max-width: 1100px
.row
display: flex
flex-direction: row
>*
flex: 1 1 auto
body
background-color: var(--color-primary)
margin: 0
*
box-sizing: border-box
a
color: inherit
text-decoration: none

37
web-app/src/assets/styles/main.sass Normal file
View file

@ -0,0 +1,37 @@
@use "./global.sass"
#app
display: flex
flex-direction: column
min-height: 100vh
gap: 64px
position: relative
margin-bottom: 80px
@media (min-width: 768px)
margin-bottom: 0
footer
margin-top: auto
.social-links
display: flex
gap: 24px
.Vue-Toastification__container
&.harb-toast-container
&.top-right
@media (min-width: 768px)
top: 80px
// right: 20px
// left: unset
.pointer
&:hover, &:active, &:focus
cursor: pointer
html
scroll-behavior: smooth
scroll-padding-top: 100px
body
background: radial-gradient(100.02% 132.74% at -4.63% 2.69%, rgba(117, 80, 174, 0.00) 46.5%, rgba(117, 80, 174, 0.50) 100%), radial-gradient(91.35% 111.13% at 12.96% 16.43%, rgba(117, 80, 174, 0.00) 46.5%, rgba(117, 80, 174, 0.50) 100%), var(--Color, #202020)