Created
August 29, 2021 03:33
-
-
Save Amien3/5fc4bca90a4e8b55de0026a5c333ead7 to your computer and use it in GitHub Desktop.
hello-world
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Hello World!</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.36/dist/web3.min.js"></script> | |
| <!-- TODO: Step 1: Include Fortmatic SDK Script --> | |
| <!-- End Step 1 --> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img alt="logo" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNSAwSDIyLjVIMzBWNy41MTA3NEgyMi41SDE1SDcuNVYxNS4wMjJWMTUuNTAzNFYyMi40ODkzVjIyLjUzMjdWMzBIMFYyMi41MzI3VjIyLjQ4OTNWMTUuNTAzNFYxNS4wMjJWNy41MTA3NFYwSDcuNUgxNVpNMjIuNSAyMi40ODg4SDE1LjA0M1YxNS4wMjE1SDI5Ljk5NDFWMjIuNzUxNUMyOS45OTQxIDI0LjY3MjkgMjkuMjMyNCAyNi41MTYxIDI3Ljg3NyAyNy44NzVDMjYuNTE5NSAyOS4yMzQ0IDI0LjY3OTcgMjkuOTk4NSAyMi43NjE3IDI5Ljk5OTVIMjIuNVYyMi40ODg4WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4xIi8+Cjwvc3ZnPgo=" | |
| /> | |
| <h1>Buy Core</h1> | |
| <div class="divider"></div> | |
| <h2>Amount to send ether</h2> | |
| <input id="input-amount" type="number" name="amount" /> | |
| <h2>Destination Ethereum address</h2> | |
| <textarea id="input-address" name="address" cols="21" rows="2" maxlength="42"></textarea> | |
| <input id="btn-send" type="button" value="Send Transaction" /> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // TODO: Step 2: Setup Developer API Key | |
| // End Step 2 | |
| let handleSendTransaction = function(amount, address) { | |
| // TODO: Step 3: Send Transaction Implementation | |
| // End Step 3 | |
| }; | |
| // Initialize elements and events (no need to change) | |
| const defaultAmount = 0.01; | |
| const defaultAddress = '0x22b05d73097c0a2440d29af61db4b4ed3803e55e'; | |
| const inputAmount = document.getElementById('input-amount'); | |
| inputAmount.setAttribute('placeholder', defaultAmount); | |
| inputAmount.setAttribute('value', defaultAmount); | |
| const inputAddress = document.getElementById('input-address'); | |
| inputAddress.setAttribute('placeholder', defaultAddress); | |
| inputAddress.innerText = defaultAddress; | |
| document.getElementById('btn-send').onclick = function() { | |
| let amount = inputAmount.value ? inputAmount.value : defaultAmount; | |
| let address = inputAddress.value ? inputAddress.value : defaultAddress; | |
| handleSendTransaction(amount, address); | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, | |
| body { | |
| background-color: #211F2B; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-align: center; | |
| } | |
| h1, | |
| h2 { | |
| margin: 0; | |
| } | |
| h1 { | |
| color: white; | |
| font-size: 16px; | |
| font-weight: 500; | |
| margin-top: 10px; | |
| } | |
| h2 { | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 10px; | |
| } | |
| form { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| } | |
| .divider { | |
| width: 100px; | |
| height: 3px; | |
| margin: 20px auto; | |
| background-color: #617BFF; | |
| } | |
| input, | |
| textarea { | |
| position: relative; | |
| text-align: center; | |
| display: block; | |
| margin: 0; | |
| border-radius: 7px; | |
| border: 2px white solid; | |
| background-color: white; | |
| padding: 10px 20px; | |
| width: 100%; | |
| color: #1E1C29; | |
| margin-bottom: 20px; | |
| box-sizing: border-box; | |
| transition: all 0.2s; | |
| } | |
| input:focus, | |
| textarea:focus { | |
| outline: none; | |
| border: 2px #617BFF solid; | |
| } | |
| .container { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| width: 300px; | |
| margin: 0 auto; | |
| border-radius: 14px; | |
| padding: 30px 30px 20px 30px; | |
| margin-top: 50px; | |
| } | |
| input[name="amount"] { | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| input[type=number]::-webkit-inner-spin-button, | |
| input[type=number]::-webkit-outer-spin-button { | |
| -webkit-appearance: none; | |
| margin: 0; | |
| } | |
| #btn-send { | |
| display: block; | |
| text-decoration: none; | |
| border-radius: 7px; | |
| margin-bottom: 10px; | |
| cursor: pointer; | |
| font-size: 20px; | |
| font-weight: 600; | |
| border: 2px #617BFF solid; | |
| color: white; | |
| background-color: #617BFF; | |
| padding: 15px; | |
| transition: all 0.2s; | |
| } | |
| #btn-send:hover { | |
| border: 2px #8095FF solid; | |
| background-color: #8095FF; | |
| } | |
| textarea[name="address"] { | |
| resize: none; | |
| font-size: 16px; | |
| font-weight: 600; | |
| padding: 10px 2.7rem; | |
| font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment