[ Mini Kiebo ]
Server: Windows NT AKFAR_SERVER 10.0 build 26200 (Windows 10) AMD64
Path:
D:
/
xampp
/
htdocs
/
bem
/
assets
/
sweetalert
/
docs
/
[
Home
]
File: index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title>SweetAlert</title> <meta name="description" content="A beautiful replacement for JavaScript's 'alert'"> <link rel="stylesheet" href="assets/css/app.css"> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> <script src="assets/sweetalert/sweetalert.min.js"></script> </head> <body> <header class="global-header"> <div class="page-container"> <a href="/" class="logo"> </a> <nav> <ul> <li> <a href="/guides">Guides</a> </li> <li> <a href="/docs">Docs</a> </li> <li> <a href="https://www.paypal.me/edwards" target="_blank">Donate</a> </li> <li> <a href="https://github.com/t4t5/sweetalert" class="github-icon"></a> </li> </ul> </nav> </div> </header> <svg width="0" height="0" class="hidden"> <defs> <clippath id="top-transition-clip-shape" clippathunits="objectBoundingBox"> <polygon points="0 0, 1 0, 1 1, 0 0.8"/> </clippath> <clippath id="customization-transition-clip-shape" clippathunits="objectBoundingBox"> <polygon points="0 0.05, 1 0, 1 1, 0 1"/> </clippath> </defs> </svg> <div class="landing-top"> <div class="bg"></div> <div class="page-container"> <div class="desc"> <h2> A beautiful replacement for <span class="text-rotater"> success messages </span> </h2> <div class="install"> <div class="buttons"> <span class="button"></span> <span class="button"></span> <span class="button"></span> </div> <div class="command"> npm install sweetalert </div> </div> </div> <div class="swal-modal-example" data-type="success"> <div class="example-content success show"> <div class="swal-icon swal-icon--success"> <div class="swal-icon--success__line swal-icon--success__line--long"></div> <div class="swal-icon--success__line swal-icon--success__line--tip"></div> <div class="swal-icon--success__ring"></div> <div class="swal-icon--success__hide-corners"></div> </div> <h3 class="swal-title"> You've arrived! </h3> <p class="swal-text"> How lovely. Let me take your coat. </p> </div> <div class="example-content error"> <div class="swal-icon swal-icon--error"> <div class="swal-icon--error__x-mark"> <span class="swal-icon--error__line swal-icon--error__line--left"></span> <span class="swal-icon--error__line swal-icon--error__line--right"></span> </div> </div> <h3 class="swal-title"> Oops! </h3> <p class="swal-text"> Seems like something went wrong! </p> </div> <div class="example-content warning"> <div class="swal-icon swal-icon--warning"> <span class="swal-icon--warning__body"> <span class="swal-icon--warning__dot"></span> </span> </div> <h3 class="swal-title"> Delete important stuff? </h3> <p class="swal-text"> That doesn't seem like a good idea. Are you sure you want to do that? </p> <div class="swal-footer"> <div class="swal-button-container"> <button class="swal-button swal-button--cancel"> Cancel </button> </div> <div class="swal-button-container"> <button class="swal-button swal-button--confirm swal-button--danger"> Yes, delete it! </button> </div> </div> </div> <div class="modal-content-overlay"></div> </div> </div> </div> <div class="comparison-container"> <h3> SweetAlert makes popup messages easy and pretty. </h3> <div class="page-container"> <div class="code-container"> <h5> Normal alert </h5> <div class="highlight js"> <div class="editor"> <div class="line"> <span class="name function js">alert</span> <span class="bracket js">(</span> <span class="string">"Oops, something went wrong!"</span> <span class="bracket js">)</span> </div> </div> </div> <button class="preview" onclick="alert('Oops, something went wrong!')"> Preview </button> </div> <div class="versus"></div> <div class="code-container"> <h5 class="swal-logo"> SweetAlert </h5> <div class="highlight js"> <div class="editor"> <div class="line"> <span class="name function js">swal</span> <span class="bracket js">(</span> <span class="string">"Oops"</span> <span class="comma">,</span> <span class="string"> "Something went wrong!"</span> <span class="comma">,</span> <span class="string"> "error"</span> <span class="bracket js">)</span> </div> </div> </div> <button class="preview" onclick="swal('Oops', 'Something went wrong!', 'error')"> Preview </button> </div> </div> <p class="remark"> Pretty cool, huh? </p> <a class="get-started-button" href="/guides"> Get started! </a> </div> <div class="customize-container"> <h3> You can customize SweetAlert to fit your needs </h3> <div class="example-modals"></div> <a class="view-api-button" href="/docs"> View docs </a> </div> <div id="app"></div> <footer> <p> Hand-crafted with <span class="love-icon"></span> by <a href="http://tristanedwards.me"> Tristan Edwards </a> + <a href="https://github.com/t4t5/sweetalert/graphs/contributors"> contributors </a> </p> </footer> <script src="assets/js/index.js"></script> </body> </html>