<!Doctype html> <head> <title>Learn Firebase Storage Quickly</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css" /> </head> <body> <section class="ui two column center aligned grid" id="signup-view"> <div class="column ui secondary segment"> <form class="ui form"> <div class="field"> <input type="text" placeholder="E-mail address" id="email" /> </div> <div class="field"> <input type="password" placeholder="Password" id="pword" /> </div> <div class="field"> <input type="file" onchange="chooseFile(event)" /> </div> <div class=" ui fluid teal submit button" onclick="signUpButtonPressed()">Sign Up</div> </form> </div> </section> <section class="ui two column center aligned grid" id="profile-view"> <div class="column ui segment"> <img src="https://lehrmannlondon.com/wp-content/uploads/2017/03/jk-placeholder-image.jpg" style="width: 200px" class="ui img centered" id="img"> <button class="ui button red" onclick="signOutButtonPressed()">Sign out</button> </div> </section> <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-storage.js"></script> <script src="app.js"></script> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter