diff --git a/how-to-run/index.html b/how-to-run/index.html new file mode 100644 index 0000000..d486435 --- /dev/null +++ b/how-to-run/index.html @@ -0,0 +1,123 @@ + + + HUSH Smart Chain Creator + + + + + + + + +
+ + + +
+ +
+ +
+
+
+
+ + + How To Run + +
+ + +
+ +
+ +

Windows 11

+

This walkthough uses Windows Terminal, it can be downloaded from the microsoft store or github.

+
+ Microsoft Store + Github Repository +
+

Arrakis smart chain are run from the HUSH fullnode, download the latest release of hush3 for windows:

+ HUSH Latest Releases + + + +

After downloading the latest release, unzip the files.

+ + +

After unziping and navigating to the root folder, right click anyhere outside the filelist and select "open in terminal".

+ +

This will open a terminal window in the current folder. Now paste the command and press enter.

+ +

This will start a full node with the specified chain paramters.

+ +

A good way to interact with the running node is to split the tab.

+ +

You may need to navigate back to the correct folder, you can use commands such cd and ls to navigate from the terminal.
+ tab can also be used to autocomplete folder names

+ +

you can get information about the chain with the command
./hush-cli -ac_name=COINNAME getinfo

+ +

This chain specifically was run with the -testnode=1 parameter, allowing a chain to be started with only 1 node
+ with getinfo we can see that the chain has succesfulyl started by looking at the number of blocks and the intial balance or premine.

+ -testnode=1 is a great way to make sure the chain starts with the intended values. +

+ +

When running the chain without -testnode=1 make sure to add the ip address of at least 1 other node, otherwise the chain will not start.

+

For a list of many other commands:

+ List of RPC commands +
+
+ +

Linux
(Ubuntu 20.04.6 LTS)

+

Open a terminal window, create a directory and cd into it
+ run git clone https://git.hush.is/hush/hush3.git

+ +

cd into the hush3 directory and run ./build.sh
+ you can add -j to specify the number of cpu threads to use, more threads will help build faster.
+ a good number to use is 4 +

+ +

After hush is built, cd into the src directory.

+ +

From here you can paste the command generated from the chain builder to start a fullnode with the specified parameters.

+ In this example the -testchain=1 parameter was used to start a chain with only 1 node.

when not using this parameter make sure to use -addnode to specify the ip address + of at least 1 other node in order to succesfulyl start a chain. +

+ + +

In another tab you can use ./hush-cli -ac_name=COINNAME getinfo to see information about the chain.
+ if there are any blocks that means the chain has succesfully started.

+ +

For a list of many other commands:

+ List of RPC commands +
+
+ + diff --git a/img/graphics/button_X.png b/img/graphics/button_X.png new file mode 100644 index 0000000..aa87edc Binary files /dev/null and b/img/graphics/button_X.png differ diff --git a/img/graphics/button_X_white.png b/img/graphics/button_X_white.png new file mode 100644 index 0000000..04267a0 Binary files /dev/null and b/img/graphics/button_X_white.png differ diff --git a/img/graphics/button_burger.png b/img/graphics/button_burger.png new file mode 100644 index 0000000..fc88219 Binary files /dev/null and b/img/graphics/button_burger.png differ diff --git a/img/graphics/icon_question.svg b/img/graphics/icon_question.svg new file mode 100644 index 0000000..cf10f4a --- /dev/null +++ b/img/graphics/icon_question.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/graphics/logo_Arrakis_Chain_Creator.png b/img/graphics/logo_Arrakis_Chain_Creator.png new file mode 100644 index 0000000..180aa96 Binary files /dev/null and b/img/graphics/logo_Arrakis_Chain_Creator.png differ diff --git a/img/graphics/logo_Arrakis_Spice_Chain.png b/img/graphics/logo_Arrakis_Spice_Chain.png new file mode 100644 index 0000000..fc6fc02 Binary files /dev/null and b/img/graphics/logo_Arrakis_Spice_Chain.png differ diff --git a/img/graphics/logo_Arrakis_Spice_Chain_workmark.png b/img/graphics/logo_Arrakis_Spice_Chain_workmark.png new file mode 100644 index 0000000..0ef5069 Binary files /dev/null and b/img/graphics/logo_Arrakis_Spice_Chain_workmark.png differ diff --git a/img/graphics/logo_Arrakis_Spice_Chain_workmarklogo.png b/img/graphics/logo_Arrakis_Spice_Chain_workmarklogo.png new file mode 100644 index 0000000..be5de47 Binary files /dev/null and b/img/graphics/logo_Arrakis_Spice_Chain_workmarklogo.png differ diff --git a/img/graphics/mobile-sidebar-button.png b/img/graphics/mobile-sidebar-button.png new file mode 100644 index 0000000..c74d649 Binary files /dev/null and b/img/graphics/mobile-sidebar-button.png differ diff --git a/img/namibia-2049203_1920.jpg b/img/namibia-2049203_1920.jpg new file mode 100644 index 0000000..fb97f05 Binary files /dev/null and b/img/namibia-2049203_1920.jpg differ diff --git a/img/screenshots/releases_scrn.png b/img/screenshots/releases_scrn.png new file mode 100644 index 0000000..bea808d Binary files /dev/null and b/img/screenshots/releases_scrn.png differ diff --git a/img/screenshots/ubuntu-1.png b/img/screenshots/ubuntu-1.png new file mode 100644 index 0000000..a5a73a8 Binary files /dev/null and b/img/screenshots/ubuntu-1.png differ diff --git a/img/screenshots/ubuntu-2.png b/img/screenshots/ubuntu-2.png new file mode 100644 index 0000000..87442c9 Binary files /dev/null and b/img/screenshots/ubuntu-2.png differ diff --git a/img/screenshots/ubuntu-3.png b/img/screenshots/ubuntu-3.png new file mode 100644 index 0000000..7bce32d Binary files /dev/null and b/img/screenshots/ubuntu-3.png differ diff --git a/img/screenshots/ubuntu-4.png b/img/screenshots/ubuntu-4.png new file mode 100644 index 0000000..f822820 Binary files /dev/null and b/img/screenshots/ubuntu-4.png differ diff --git a/img/screenshots/ubuntu-5.png b/img/screenshots/ubuntu-5.png new file mode 100644 index 0000000..fac9ac6 Binary files /dev/null and b/img/screenshots/ubuntu-5.png differ diff --git a/img/screenshots/ubuntu-6.png b/img/screenshots/ubuntu-6.png new file mode 100644 index 0000000..51d2aa3 Binary files /dev/null and b/img/screenshots/ubuntu-6.png differ diff --git a/img/screenshots/win-1.png b/img/screenshots/win-1.png new file mode 100644 index 0000000..57ad732 Binary files /dev/null and b/img/screenshots/win-1.png differ diff --git a/img/screenshots/win-2.png b/img/screenshots/win-2.png new file mode 100644 index 0000000..49d1151 Binary files /dev/null and b/img/screenshots/win-2.png differ diff --git a/img/screenshots/win-3.png b/img/screenshots/win-3.png new file mode 100644 index 0000000..2e4464e Binary files /dev/null and b/img/screenshots/win-3.png differ diff --git a/img/screenshots/win-4.png b/img/screenshots/win-4.png new file mode 100644 index 0000000..1a4251d Binary files /dev/null and b/img/screenshots/win-4.png differ diff --git a/img/screenshots/win-5.png b/img/screenshots/win-5.png new file mode 100644 index 0000000..2a9dc27 Binary files /dev/null and b/img/screenshots/win-5.png differ diff --git a/img/screenshots/win-6.png b/img/screenshots/win-6.png new file mode 100644 index 0000000..cc64e60 Binary files /dev/null and b/img/screenshots/win-6.png differ diff --git a/img/screenshots/win-7.png b/img/screenshots/win-7.png new file mode 100644 index 0000000..b3b90de Binary files /dev/null and b/img/screenshots/win-7.png differ diff --git a/img/screenshots/win-8.png b/img/screenshots/win-8.png new file mode 100644 index 0000000..275bc5c Binary files /dev/null and b/img/screenshots/win-8.png differ diff --git a/img/screenshots/win-9.png b/img/screenshots/win-9.png new file mode 100644 index 0000000..6c8fc3e Binary files /dev/null and b/img/screenshots/win-9.png differ diff --git a/index.html b/index.html index 9f533cd..3d79187 100644 --- a/index.html +++ b/index.html @@ -1,146 +1,465 @@ - - HUSH Smart Chain Creator - - - - - - - - - -
-
- -

Hush Smart Chain Creator

- -
-
-

Let's create a HUSH Smart Chain!

-
You have great power at your fingertips! Use it wisely, for Good
-
More detailed docs here and more background here
-
-
-
-
-

Options

-
-
-
General
-

Customize general Hush settings

-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - 
    This is in satoshis. 1 COIN = 100000000 satoshis.
    - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
Addnodes
-

Add trusted bootstrap nodes. Remove by clicking.

- -
    -
  • {{ item }}
    • -
-
-
+ + HUSH Smart Chain Creator + + + + + + + + +
+ -
  • - - 
    Use this for testing. Requires only a single node.
    - -
    • + +
    + +
    + +
    +
    +
    +
    +
    + + Create A Chain +
    -
  • - - 
    Enable mining.
    - -
    • +
    + +
    +

    + Customize Your Chain +

    +
    +
    +
    +
    +
    +
    + + +

    + -ac_name
    + The name of your coin (ALL CAPS) +

    +
    +
    + +

    Fully Shielded z2z

    + + +
    + +
    + +
    +
    +
    + +
    +
  • +
    + +

    Mining Algorithm

    + + +
    + + +
    • +
    + +
    + + +

    + -ac_supply
    + The premine, denominated in coins +

    +
    +
    + + +

    + -ac_reward
    + The reward for finding a block, denominated in satoshis (1 + coin = 100000000 sats) +

    +
    +
    + + +

    + -ac_blocktime
    + The time it will take to mine a block in seconds. +

    +
    +
    + + +

    + -ac_halving
    + After how many blocks the block reward will be reduced by + half. +

    +
    +
    +
    +
    +

    Addnodes

    + +

    + -addnode
    + Add trusted nodes to start syncing your chain from. +

    +
    +
    +
      +
    • +
      + {{ item }} +
      • +
    + +
    + +

    Enable Mining

    + + +
    +
    + +
    +
    +
    + +
    + +
    +
    + + +

    + -ac_founders
    + This parameter creates a "founder's reward." and requires + -ac_perc. If the + -ac_perc value is not declared, the + -ac_founders value defaults to 35%. Also, + either -ac_pubkey OR + -ac_script must be set. +

    +
    +
    + + +

    + -ac_founders_reward
    + This parameter functions in a manner that is similar to a + combination of the ac_perc and ac_founders parameters. + However, the value specified in the ac_founders_reward + parameter is given in satoshis, as opposed to a percentage + of the block reward. Also, the founder's reward does not + accumulate over several blocks. +

    +
    +
    + + +

    + -ac_perc
    + When used without -ac_founders the chain + will follow an inflation-tax model in which the + -ac_perc parameter is the percentage added + to the block reward, and the transactions that allocate + these rewards are sent to the + -ac_pubkey address.
    +
    + For example, if -ac_reward=100000000 and + -ac_perc=10000000, for each block mined the + miner receives 100000000 satoshis (1 coin), and the owner of + the -ac_pubkey address receives 10000000 + satoshis (0.1 coin, which is 10% of the miner's reward) +

    +
    +
    + + +

    + -ac_pubkey
    + Designate a public key address for recieving funds from the + network such as a with devtax. This parameter must only be + used if -ac_perc, + -ac_founders, or + -ac_import=PUBKEY is used. +

    +
    + +
    + +

    Test Mode

    + + +
    + +
    +
    +
    +
    -
    - - -
    -
    -
    - You have selected {{ flavor }} as your flavor. A wise decision. -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - - - - + + + + + + +
    +
    +
    + + How To Run +
    + + +
    +

    Detailed Documentation and background

    + Chain Creator Code + Arrakis Spice Chains + All ASC options +
    +
    +
    + + + + +
    + diff --git a/main.js b/main.js index 2b4099d..ed3f994 100644 --- a/main.js +++ b/main.js @@ -17,12 +17,15 @@ new Vue({ tempAllowlist: '', customPath: 0, customMinerToAddress: 0, - optionName: 'TUSH', + optionName: 'COINNAME', optionAlgo: ' -ac_algo=randomx ', + optionFoundersPerc: '', + optionFoundersSats: '', + optionPerc: '', optionPubkey: '', optionReward: '1250000000', // in puposhis optionz2z: 1, - optionSupply: '21000000', + optionSupply: '0', optionBlocktime: 60, optionHalving: 210000, optionRpcAllowIp: '127.0.0.1', @@ -93,29 +96,48 @@ new Vue({ + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() - this.command = "git clone https://git.hush.is/hush/hush3
    cd hush3
    ./build.sh
    cd src
    ./hush-smart-chain -ac_name=" + this.optionName + this.optionAlgo + this.command = "

    ./hush-smart-chain -ac_name=" + this.optionName + this.optionAlgo + " -ac_supply=" + this.optionSupply + " -ac_blocktime=" + this.optionBlocktime + " -ac_private=" + this.optionz2z; this.command += " -ac_reward=" + this.optionReward + " -ac_halving=" + this.optionHalving; + if(this.optionFoundersPerc != '') + this.command += " -ac_founders=" + this.optionFoundersPerc; + if(this.optionFoundersSats != '') + this.command += " -ac_founders_reward=" + this.optionFoundersSats; + if(this.optionPerc != '') + this.command += " -ac_perc=" + this.optionPerc; if(this.optionPubkey != '') this.command += " -ac_pubkey=" + this.optionPubkey; if(this.optionTestNode) this.command += " -testnode=1"; if(this.optionGen) this.command += " -gen=1"; - /* + + + + if (this.optionAllowList.length != 0) { - this.command = this.conf + "

    whitelist=" + this.optionAllowList + this.command += " -addnode=" + this.optionAllowList } for (var i = 0; i< this.peersList.length; i++) { if (i == 0) { - this.command = this.conf + "
    " + this.command += this.conf + "
    " } - this.command = this.conf + "
    addnode=" + this.peersList[i] + this.command += this.conf + "
    addnode=" + this.peersList[i] } - */ + + this.command += "

    "; + $('#profile').show() $('#clapping').show(); } } }); +function copyText() { + var copyText = document.getElementById("commandOutput").innerText; + // copyText.select(); + // copyText.setSelectionRange(0, 99999); + navigator.clipboard.writeText(copyText); + +} + diff --git a/style.css b/style.css index a4458cc..10e527e 100644 --- a/style.css +++ b/style.css @@ -1,163 +1,472 @@ +:root { + /* ----- Text Colors ----- */ + --color-text-main: rgba(255, 255, 255, 1); + --color-text-main-80: rgba(255, 255, 255, .8); + --color-text-main-50: rgba(255, 255, 255, .5); + --color-text-main-25: rgba(255, 255, 255, .25); + --color-text-black: black; + + /* ----- Background Colors ----- */ + --color-yellow: #ffd000; + --color-yellow-50: rgba(255, 208, 0, 0.5); + --color-yellow-75: rgba(255, 208, 0, 0.75); + --color-orange: #ff8000; + --color-orange-50: rgba(255, 128, 0, 0.5); + --color-dark-grey: #302722; + --color-dark-grey-75: rgba(48, 39, 34, 0.75); + --color-dark-grey-50: rgba(48, 39, 34, 0.5); + --color-dark-grey-25: rgba(48, 39, 34, 0.25); + --color-black: black; + + /* ----- Border Radius ----- */ + --border-radius-xsmall: 0.5rem; + --border-radius-small: 1rem; + --border-radius-med: 2rem; + --border-radius-large: 4rem; + + /* ----- Fonts ----- */ + font-family: "Ubuntu Mono"; + --font-size-xs: 1rem; + --font-size-s: 1.25rem; + --font-size-m: 1.75rem; + --font-size-l: 2.75rem; + --font-size-xl: 4rem; + + /* ----- Transforms ----- */ + --mod-translate-y: 0%; + --mod-translate-x: 0%; +} + +* { + box-sizing: border-box; +} + +html { + overflow-x: hidden; + scroll-behavior: smooth; + font-size: 16px; +} body { font-family: 'Poppins', sans-serif; + z-index: 999; + margin: 0; + background-color: var(--color-dark-grey); + color: var(--color-text-main-80); } - -.text-center { - text-align: center; +input { + border: none; + border-radius: .25rem; + padding: .5rem .75rem; + outline: .1rem solid rgb(130, 130, 130) ; + background-color: var(--color-dark-grey-25); + color: var(--color-text-main-50); } - -.column { - width: 45%; +ul, +li { + list-style: none; } - -.row { - width: 95%; +#options { + width: 100%; } - -.center { - margin: 0 auto; +fieldset { + border: none; + margin: 0; + padding: 0; + width: 100%; } - -.button-white { - background-color: white; - border-color: white; +input::-webkit-input-placeholder{ + color: var(--color-text-main-50); } - -.button-dark { - background-color: #2d2d2d; - border-color: #2d2d2d; +input:-moz-placeholder { + color: var(--color-text-main-50); } - -.button-white.button-clear, -.button-white.button-outline { - background-color: transparent; - color: white; +input[type="radio"] ~ a label a { + pointer-events: none; } - -.button-white.button-outline:hover { - background-color: transparent; - color: white; +input:focus { + border-color: var(--color-yellow-75) !important; } - -.button-white.button-clear { - border-color: transparent; +section { + display: flex; + min-height: 100vh; } - -code.dark { - background-color: #2d2d2d; - color: #fff; +header { + z-index: 20; + display: flex; + position: relative; + justify-content: center; + align-items: center; + height: 4rem; + width: 100%; } - -code.light { - color: #2d2d2d; +a { + font-size: var(--font-size-m); + text-align: center; + text-decoration: none; + color: white; } - -.jumbo { - padding: 20px 20px 75px 20px; - background-color: #2d2d2d; - color: #ffffff; -} - -.jumbo .logo { - max-width: 1024px; - margin: 0 auto; -} - -.jumbo .logo img { - height: 30%; - max-width: 80%; -} - -.jumbo #flavor { - margin: 40px 0px 0px 0px; - text-align: center; -} -.jumbo #flavor li { - display: inline; - margin: 0px 5px 0px 5px; -} - -.content { - max-width: 1024px; - margin: 0 auto; - padding: 50px 50px 50px 50px; -} -.content form { - text-align: left; -} -.content form h4 { - margin-top: 25px; - text-align: center; -} -.content form h5 { - clear: both; - margin-bottom: 0px; -} - -.content form p { - margin: 0px 0px 15px 0px; -} -.content .toggles li { - float: left; - display: inline; - margin: 0px 10px 20px 0px; -} -.content .toggles #threads { - display: none; - float: left; - list-style-type: none; -} -.content .toggles .thread-count { - position: relative; - font-size: 150%; - top: 4px; +.component-button { + transition: all ease-in-out 200ms; + display: flex; + justify-content: center; + align-items: center; + height: 3rem; + margin: 0 0.5rem; + padding: 0rem 1rem; + border-radius: .25rem; + outline: .15rem solid var(--color-text-main-25); + background: var(--color-dark-grey-25); + -webkit-tap-highlight-color: transparent; + color: var(--color-text-main-80); + user-select: none; + font-weight: 300; + border: none; cursor: pointer; - cursor: hand; - -webkit-touch-callout: none; - /* iOS Safari */ - -webkit-user-select: none; - /* Safari */ - -khtml-user-select: none; - /* Konqueror HTML */ - -moz-user-select: none; - /* Firefox */ - -ms-user-select: none; - /* Internet Explorer/Edge */ - user-select: none; } -.content .profile { - display: none; - margin-top: 50px; - text-align: left; - border: 1px solid #cccccc; - border-radius: 5px; - padding: 5px 10px 5px 10px; - word-wrap: none; +.component-button:hover { + background: var(--color-dark-grey-50); + color: var(--color-yellow); + outline: .15rem solid var(--color-yellow); } -.content .clapping { - display: none; - margin-top: 50px; - text-align: left; - border: 0px; - border-radius: 5px; - padding: 5px 10px 5px 10px; - word-wrap: none; +.btn-sm { + font-size: .85rem; + padding: .5rem; + width: 10rem; + margin: 0 auto; + font-weight: 400; } -.content .flavor-banner { - display: none; - width: 75%; - margin: 25px auto; - padding: 10px; - background: #333; - color: #fff; - border-radius: 5px; +.info-btn { + transition: all ease-in-out 200ms; + width: 2rem; + height: 2rem; + margin: 0 -3rem 0 1rem; + cursor: pointer; +} +.info-btn:hover { + transform: scale(1.05); +} +#info-z2z:checked ~ .popup-text { + opacity: 100%; + pointer-events: all; +} +#info-z2z:not(:checked) ~ .popup-text { + opacity: 0; + pointer-events: none; +} +#info-mining:checked ~ .popup-text { + opacity: 100%; + pointer-events: all; +} +#info-mining:not(:checked) ~ .popup-text { + opacity: 0; + pointer-events: none; +} +.input-label:checked ~ .popup-text { + opacity: 100%; + pointer-events: all; +} +.input-label:not(:checked) ~ .popup-text { + opacity: 0; + pointer-events: none; } -.content .flavor-banner .path { - margin: 5px 0px 0px 0px; - font-size: 13px; - font-weight: bold; - word-wrap: break-word; +.popup-text { + position: absolute; + width: 100%; + height: 100%; + z-index: 999; +} +.input-wrapper { + width: 100%; +} + +.input-wrapper input, +.input-wrapper p{ + width: 100%; +} +.input-wrapper label{ + width: 100%; + text-align: center; + margin-bottom: .5rem; +} + + +.page-bg { + width: 100vw !important; + height: 100% !important; + position: fixed !important; + top: 0; + background-image: url(./img/namibia-2049203_1920.jpg); + background-repeat: no-repeat; + background-size: auto 100%; + z-index: -10; +} +.bg-overlay { + width: 100% !important; + height: 100% !important; + position: fixed !important; + top: 0; + z-index: -9; + background-color: rgba(255, 183, 0, 0.15); +} + + + + + + + + + + + +.nav-logo { + display: flex; + align-items: center; + justify-content: center; + z-index: 12; + height: 100%; + width: 20%; + position: relative; + +} +.header-logo { + z-index: 10; + position: absolute; + left: 1rem; + top: 0; + display: inline-block; + margin: auto; + height: 4rem; + width: 4rem; + background-image: url(./img/graphics/logo_Arrakis_Spice_Chain.png); + background-size: 80%; + background-repeat: no-repeat; + background-position: center; +} +.nav-center { + z-index: 12; + position: relative; + height: 100%; + width: 20rem; + pointer-events: none; +} +.nav-buttons { + display: flex; + position: relative; + align-items: center; + justify-content: center; + height: 100%; + + width: 60rem; +} +.header-gradient { + position: absolute; + /* display: none; */ + background-image: linear-gradient( + to bottom, + rgba(var(--color-bg-darker), 1) 65%, + rgba(var(--color-bg-darker), 0.9) 75%, + rgba(var(--color-bg-darker), 0) 100% + ); + top: 0rem; + width: 100vw; + height: 8rem; + pointer-events: none; + + /* outline: 0.1rem solid rgb(255, 213, 0); */ +} +.header-nav { + height: 3rem; +} +.nav-logo { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + left: 1rem; + top: 0rem; + width: 3rem; + height: 3rem; + padding: 0.5rem; + -webkit-tap-highlight-color: transparent; +} +.header-gradient { + z-index: 11; + height: 5rem; + pointer-events: none; +} +.nav-menu-btn { + z-index: 20; + background-image: url(./img/graphics/button_burger.png); + background-size: contain; + position: absolute; + top: 1rem; + right: 1rem; + width: 2rem; + height: 2rem; + filter: drop-shadow(0 0 .1rem rgba(21, 21, 21, 0.75)); +} +.nav-menu-btn:hover, +.nav-menu-btn:active, +.nav-menu-btn:focus { + cursor: pointer; +} +#nav-check:checked ~ .nav-menu-btn { + + background-image: none; +} +#nav-check:checked ~ .nav-menu-btn::after { + content: ""; + z-index: 20; + background-image: url(./img/graphics/button_X.png); + background-size: contain; + position: absolute; + top: 0rem; + right: 0rem; + width: 2rem; + height: 2rem; +} +.nav-buttons { + z-index: 10; + transition: all ease-in-out 300ms; + flex-direction: column; + position: absolute; + margin: auto 0 auto 0; + width: 100%; + right: 0; + left: 0; + top: -40rem; +} +#nav-check:checked ~ .nav-buttons { + top: 16rem; +} +.nav-bg { + position: fixed; + transition: all ease-in-out 500ms; + background-color: transparent; + pointer-events: none; + +} +#nav-check:checked ~ .nav-bg { + position: fixed; + top: 0; + width: 100%; + height: 100%; + background-color: var(--color-dark-grey-50); + backdrop-filter: blur(15px); +} +.nav-buttons a { + width: 14rem; + margin: 1rem 0; +} + +.hero { + min-height: calc(100vh - 4rem); + min-height: calc(100svh - 4rem); + position: relative; +} + +.hero img { + position: absolute; + width: 80%; + filter: drop-shadow(0 0 2rem rgba(62, 0, 0, 0.37)); + top: 35%; +} +.hero a { + position: absolute; + backdrop-filter: blur(15px); + font-size: 1.25rem; + bottom: 20%; +} + + + +.toggles, .addnodes { + z-index: 0; + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 90%; + margin: 0 auto !important; + padding: 0; + +} +.popup-info { + + transition: all ease-in-out 400ms; + position: absolute; + user-select: none; + pointer-events: none; + opacity: 0; + bottom: 0; + left: 0; + right: 0; + text-align: center; + border-radius: .25rem; + background-color: var(--color-dark-grey-75); + color: var(--color-text-main-80); + border: none; + box-shadow: 0 0 .5rem black; + /* backdrop-filter: blur(15px); */ + padding: 1.75rem .5rem; + z-index: 0; + width: 100%; + +} +.popup-info::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + backdrop-filter: blur(20px); + z-index: -1; + + +} +input:focus + .popup-info { + opacity: 100%; + bottom: 3.5rem; + +} + +.popup-info-2 { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transition: all ease-in-out 400ms; + position: absolute; + user-select: none; + /* pointer-events: none; */ + /* opacity: 0; */ + bottom: 0; + left: 0; + right: 0; + text-align: center; + border-radius: .25rem; + background-color: var(--color-dark-grey-75); + color: var(--color-text-main-80); + border: none; + box-shadow: 0 0 .5rem black; + /* backdrop-filter: blur(15px); */ + padding: 1.75rem .5rem; + z-index: 0; + width: 100%; +} +.popup-info-2::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + backdrop-filter: blur(20px); + z-index: -1; } /* The switch - the box around the slider */ @@ -182,7 +491,7 @@ code.light { left: 0; right: 0; bottom: 0; - background-color: #ccc; + background-color: var(--color-dark-grey-50); -webkit-transition: .4s; transition: .4s; } @@ -194,13 +503,13 @@ code.light { width: 26px; left: 4px; bottom: 4px; - background-color: white; + background-color: rgba(255, 255, 255, 0.75); -webkit-transition: .4s; transition: .4s; } input:checked + .slider { - background-color: #2d2d2d; + background-color: var(--color-dark-grey); } input:focus + .slider { @@ -211,6 +520,7 @@ input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); + background-color: white; } /* Rounded sliders */ @@ -222,87 +532,464 @@ input:checked + .slider:before { border-radius: 50%; } -.whitelist { - position: relative; - list-style-type: none; - float: left; - left: -5px; - right: -5px; -} -.whitelist li { - position: relative; - float: left; - font-size: 125%; - top: 0px; - margin: 0px 5px -15px 5px; - padding: 3px 10px 3px 10px; - border-radius: 5px; - background: #2d2d2d; - color: #FFF; -} -#paths { - display: none; -} -#miner, #minerAddress, #minerInput { - display: none; - list-style-type: none; + +li .input, +li select{ + background-color: var(--color-dark-grey-50); + /* backdrop-filter: blur(15px); */ + color: var(--color-text-main-80); + width: 100%; + height: 2rem; + border-radius: .25rem; + text-align: center; +} +option { + + background-color: var(--color-dark-grey-50); + border-radius: 0 !important; + text-align: center; + color: var(--color-text-main-80); + appearance: none; } input { - color: #606060; + appearance: none; } -.compile { - width: 50%; - margin: 20px auto; -} -.donate { +.optional-params { + width: 100%; + height: fit-content; + padding: 0rem 0; + border-radius: 0 0 .25rem .25rem; + outline: .1rem solid var(--color-text-main-25); + outline: .1rem solid transparent; position: relative; - margin: 50 auto; - margin-bottom: 0px; - word-wrap: break-word; - font-weight: lighter; } -.donate span { - position: relative; - top: 5px; +.optional-params .input-wrapper { + width: 90%; + margin: 2rem auto; } -.tooltip { - position: relative; - display: inline; -} -.tooltip span { +#optionalLabel { + position: absolute; - width:140px; - color: #2D2D2D; - background: #FFF; - height: 40px; - line-height: 40px; + top: -3rem; + outline: .1rem solid var(--color-text-main-25); + background-color: var(--color-dark-grey-50); + color: var(--color-text-main-50); + padding: .5rem; + border-radius: .25rem .25rem; + height: 3rem; + width: 100%; text-align: center; - visibility: hidden; - border-radius: 6px; + line-height: 2rem; + z-index: 0; } -.tooltip span:after { + + + +#optionalLabel + div { + transition: all ease-in-out 500ms; + height: 0; + overflow: hidden; +} + +#optionalParams:checked ~ * #optionalLabel{ + + background-color: var(--color-dark-grey-75); + color: var(--color-text-main-80); + outline: .1rem solid var(--color-text-main-50); + border-radius: .25rem .25rem 0 0; +} +#optionalParams:checked ~ * #optionalLabel + div { + height: fit-content; + height: calc(fit-content + 2rem); + height: 42rem; + overflow: visible; +} +#optionalParams:checked + .optional-params { + outline: .1rem solid var(--color-text-main-25); +} + +.allowlist { + display: flex; + background-color: var(--color-dark-grey-50); + + line-height: 3rem; + height: 3rem; + width: 80%; + margin: 1rem auto; + border-radius: .5rem; + position: relative; +} +.allowlist li { + margin: 0 0 0 1rem; +} +.li-delete { + transition: all ease-in-out 200ms; + background-image: url(./img/graphics/button_X_white.png); + width: 2rem; + height: 2rem; + background-size: 1.5rem; + background-repeat: no-repeat; + background-position: center; + border-radius: .25rem; + position: absolute; + left: .5rem; + top: .5rem; + outline: .15rem solid var(--color-text-main-50); + cursor: pointer; +} +.li-delete:hover { + transform: scale(1.05); +} + +#profile { + outline: .1rem solid var(--color-text-main-25); + padding: 1rem; + width: 90%; + margin: 2rem auto; + border-radius: .25rem; + +} +.chain-command { + outline: .1rem solid var(--color-text-main-25); + padding: 1rem; + border-radius: .25rem; + background-color: var(--color-dark-grey-25); +} +.chain-command:hover, +.chain-command:focus { + background-color: var(--color-dark-grey-50); + outline: .1rem solid var(--color-text-main-50); +} + +#copyCommandBtn { + position: relative; +} +#copyCommandBtn::after { + transition: all ease-in-out 300ms; + content: 'Copied To Clipboard'; + position: absolute; + top: 0; + bottom: 0; + background-color: var(--color-dark-grey-75); + display: flex; + align-items: center; + justify-content: center; + border-radius: .25rem; + outline: .1rem solid var(--color-yellow-50); + opacity: 0%; + height: 1rem; + padding: .5rem .5rem; +} +#copyCommandBtn:focus::after { + top: -3rem; + opacity: 100%; +} + +#howto { + + scroll-margin: 6rem; + position: relative; + width: 100vw; + width: 100svw; + + height: fit-content; + margin: 12rem 0 12rem 0; + +} + +article a { + font-size: 1rem !important; + +} + +article div { + flex-direction: column; +} + +#howto p { + text-align: center; + width: 100%; + margin-top: 4rem; + font-size: 1.15rem; +} + +#howto label { + width: 14rem; + position: absolute; + top: -4rem; + left: 0rem; +} +#howto label::before { content: ''; position: absolute; - bottom: 100%; - left: 50%; - margin-left: -8px; - width: 0; height: 0; - border-bottom: 8px solid #FFF; - border-right: 8px solid transparent; - border-left: 8px solid transparent; + width: 100%; + height: 100%; + top: 0rem; + backdrop-filter: blur(20px); + z-index: -1; } -#tooltip1:hover.tooltip span { - visibility: visible; - opacity: 0.8; - top: 50px; - left: 50%; - margin-left: -76px; - z-index: 999; +#linuxBtn { + right: 0; + left: unset !important; } +body { + overflow: hidden; +} + +.article-col { + transition: all ease-in-out 500ms; + outline: .1rem solid var(--color-text-main-25); + width: 95%; + height: fit-content; + position: absolute; + top: 0; + left: 0; + right: 0; + margin: auto; + background-color: var(--color-dark-grey-50); + border-radius: .25rem; +} + +#howTo article:first-of-type{ + transform: translate(0vw); + position: relative; +} +#howTo article:last-child{ + transform: translate(100vw); + position: absolute; +} + +#switchTutorial:checked ~ article:last-child { + transform: translate(0vw); + position: absolute; +} +#switchTutorial:checked ~ article:first-of-type { + transform: translate(-100vw); + position: relative; +} + +@media (min-width: 1024px) { + .article-col { + width: 75%; + } + + article a { + font-size: 1.75rem !important; + } + article div { + flex-direction: row; + } +} + + + + + + + +.m-1 { + margin: .5rem; +} +.m-2 { + margin: 1rem; +} +.mx2 { + margin-left: 1rem; + margin-right: 1rem; +} +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.mt-2 { + margin-top: 1rem; +} +.mt-4 { + margin-top: 2rem; +} +.mt-8 { + margin-top: 4rem; +} +.mt-12 { + margin-top: 6rem; +} +.mt-24 { + margin-top: 12rem; +} +.mt-32 { + margin-top: 16rem; +} +.my-2 { + margin-top: 1rem; + margin-bottom: 1rem; +} +.my-4 { + margin-top: 2rem; + margin-bottom: 2rem; +} +.my-8 { + margin-top: 4rem; + margin-bottom: 4rem; +} +.my-16 { + margin-top: 8rem; + margin-bottom: 8rem; +} +.mb-2 { + margin-bottom: 1rem; +} +.mb-4 { + margin-bottom: 2rem; +} +.mb-8 { + margin-bottom: 4rem; +} +.top-neg-3 { + top: -1.5rem; +} +.p-1 { + padding: .5rem; +} +.p-2 { + padding: 1rem; +} +.py-2 { + padding-top: 1rem; + padding-bottom: 1rem; +} +.br-25 { + border-radius: .25rem; +} +.text-center { + text-align: center; +} +.bg-dark { + background-color: var(--color-dark-grey-25); +} +.bg-dark-50 { + background-color: var(--color-dark-grey-50); +} +.bg-blur { + /* backdrop-filter: blur(15px); */ +} +.bg-blur::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + backdrop-filter: blur(20px); + z-index: -10; +} +.pos-rel { + position: relative; +} +.pos-absolute { + position: absolute; +} +.w-full { + width: 100%; +} +.w-90 { + width: 90%; +} +.w-80 { + width: 80%; +} +.w-70 { + width: 70%; +} +.font-w-200 { + font-weight: 200; +} +.font-w-500 { + font-weight: 500; +} +.font-w-800 { + font-weight: 800; +} +.font-s-2 { + font-size: 2rem; +} +.font-s-3 { + font-size: 3rem; +} + +.outline-white { + outline: .15rem solid var(--color-text-main-25); +} +.box-shadow-dark { + box-shadow: 0 0 .5rem var(--color-dark-grey-75); +} +.flex-center { + display: flex; + justify-content: center; + align-items: center; +} +.flex-start { + display: flex; + justify-content: start; + align-items: start; +} + +.flex-col { + flex-direction: column; +} + + +.hover-scale { + transition: all ease-in-out 200ms; +} +.hover-scale:hover { + transform: scale(1.05); +} + +.hover-glow:hover { + filter: drop-shadow(0 0 .5rem var(--color-yellow-50)); +} + + +@media (min-width: 1024px) { + .page-bg { + background-size: 100% auto; + } + + .hero img { + + width: 25%; + + } + +#optionalLabel { + cursor: pointer; +} + + fieldset { + width: 100%; + margin: 0 auto; + } + + fieldset > h3 { + font-size: 3rem; + } + + .content-container { + display: flex; + align-items: start; + margin: 0 auto; + width: 60%; + } + + .content-container > div { + width: 50%; + } + +} \ No newline at end of file