API tools faq
paste
Advertisement
Guest User

handlebars_rendered_output_html

a guest
Jul 11th, 2019
152
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.37 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.         <title>Todo App</title>
  4.         <link rel="stylesheet" href="layouts/layout.css">
  5.     <style type="text/css">.backpack.dropzone {
  6.   font-family: 'SF UI Display', 'Segoe UI';
  7.   font-size: 15px;
  8.   text-align: center;
  9.   display: flex;
  10.   flex-direction: column;
  11.   justify-content: center;
  12.   align-items: center;
  13.   width: 250px;
  14.   height: 150px;
  15.   font-weight: lighter;
  16.   color: white;
  17.   will-change: right;
  18.   z-index: 2147483647;
  19.   bottom: 20%;
  20.   background: #333;
  21.   position: fixed;
  22.   user-select: none;
  23.   transition: left .5s, right .5s;
  24.   right: 0px; }
  25.   .backpack.dropzone .animation {
  26.     height: 80px;
  27.     width: 250px;
  28.     background: url("chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/assets/backpack/dropzone/hoverstate.png") left center; }
  29.   .backpack.dropzone .title::before {
  30.     content: 'Save to'; }
  31.   .backpack.dropzone.closed {
  32.     right: -250px; }
  33.   .backpack.dropzone.hover .animation {
  34.     animation: sxt-play-anim-hover 0.91s steps(21);
  35.     animation-fill-mode: forwards;
  36.     background: url("chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/assets/backpack/dropzone/hoverstate.png") left center; }
  37.  
  38. @keyframes sxt-play-anim-hover {
  39.   from {
  40.     background-position: 0px; }
  41.   to {
  42.     background-position: -5250px; } }
  43.   .backpack.dropzone.saving .title::before {
  44.     content: 'Saving to'; }
  45.   .backpack.dropzone.saving .animation {
  46.     background: url("chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/assets/backpack/dropzone/saving_loop.png") left center;
  47.     animation: sxt-play-anim-saving steps(59) 2.46s infinite; }
  48.  
  49. @keyframes sxt-play-anim-saving {
  50.   100% {
  51.     background-position: -14750px; } }
  52.   .backpack.dropzone.saved .title::before {
  53.     content: 'Saved to'; }
  54.   .backpack.dropzone.saved .animation {
  55.     background: url("chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/assets/backpack/dropzone/saved.png") left center;
  56.     animation: sxt-play-anim-saved steps(20) 0.83s forwards; }
  57.  
  58. @keyframes sxt-play-anim-saved {
  59.   100% {
  60.     background-position: -5000px; } }
  61. </style></head>
  62.     <body>
  63.         <!-- TODO: Add this to tempalte -->
  64.         <div id="menu-table">
  65.             <div id="menu-table-body">
  66.                 <div id="menu-table-row">
  67.                     <div class="menu-table-cell">
  68.                         <h1>Todo App</h1>
  69.                     </div>
  70.                     <div class="menu-table-cell">
  71.                         <a class="menu-anchor" href="/">Home</a>
  72.                     </div>
  73.                     <div class="menu-table-cell">
  74.                         <a class="menu-anchor" href="/register">Register</a>
  75.                     </div>
  76.                     <div class="menu-table-cell">
  77.                         <a class="menu-anchor" href="/login">Login</a>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.         </div>
  82.         <div id="app">
  83.         <div id="todo-table">
  84.             <div id="todo-table-body">
  85.                 <div id="todo-table-row">
  86.                     <div id="todo-table-cell-left" class="todo-table-cell">
  87.                         <div id="todo-list-menu-table">
  88.                             <div id="todo-list-menu-body">
  89.                                 <div id="todo-list-menu-column">
  90.                                     <div id="todo-list-menu-cell">
  91.                                         <a class="todo-list-menu-anchor" id="todo-create-form-link" href="/todo_create">Create Todo</a>
  92.                                     </div>
  93.                                 </div>
  94.                             </div>
  95.                         </div>
  96.                     </div>
  97.                     <div id="todo-table-cell-right" class="todo-table-cell">
  98.                        
  99.                                 <div id="todo-create" style="display: none;">
  100.                                 <h1>Create Todo</h1>
  101.                                 <div id="create-todo-table">
  102.                                     <div id="create-todo-table-body">
  103.                                         <form action="." method="GET">
  104.                                             <div class="create-todo-table-row">
  105.                                                 <div class="create-todo-table-cell">
  106.                                                     <p>Parent Todo:
  107.                                                        
  108.                                                         <!-- Pre-populate -->
  109.                                                         <select id="parent-todo-create">
  110.                                                            
  111.                                                         </select>
  112.                                                        
  113.                                                     </p>
  114.                                                 </div>
  115.                                             </div>
  116.                                             <div class="create-todo-table-row">
  117.                                                
  118.                                                 <p><scan class="required">*</scan>Name:
  119.                                                     <input type="text" name="name" size="64">
  120.                                                 </p>
  121.                                             </div>
  122.                                         </form>
  123.                                     </div>
  124.                                 </div>
  125.                                 </div>
  126.                                                 </div>
  127.                 </div>
  128.             </div>
  129.         </div>
  130.     </div>
  131.        
  132.    
  133.     <script src="scripts/jquery/dist/jquery.min.js"></script>
  134.     <script src="scripts/semantic-ui-css/semantic.min.js"></script>
  135.     <script src="scripts/handlebars/dist/handlebars.min.js"></script>
  136.     <script src="scripts/vanilla-router/dist/vanilla-router.min.js"></script>
  137.     <script src="js/app.js"></script>
  138.    
  139.     <!-- Error Template -->
  140.     <script id="error-template" type="text/x-handlebars-template">
  141.         <div>
  142.             <h1>Error: {{title}}</h1>
  143.         </div>
  144.     </script>
  145.  
  146.     <script id="todo-home-template" type="text/x-handlebars-template">
  147.         <h1>Welcome!</h1>
  148.     </script>
  149.    
  150.     <script id="todo-list-template" type="text/x-handlebars-template">
  151.         <div id="todo-table">
  152.             <div id="todo-table-body">
  153.                 <div id="todo-table-row">
  154.                     <div id="todo-table-cell-left" class="todo-table-cell">
  155.                         <div id="todo-list-menu-table">
  156.                             <div id="todo-list-menu-body">
  157.                                 <div id="todo-list-menu-column">
  158.                                     <div id="todo-list-menu-cell">
  159.                                         <a class="todo-list-menu-anchor" id="todo-create-form-link" href="/todo_create" >Create Todo</a>
  160.                                     </div>
  161.                                 </div>
  162.                             </div>
  163.                         </div>
  164.                     </div>
  165.                     <div id="todo-table-cell-right" class="todo-table-cell">
  166.                         {{> todoCreateTemplate }}
  167.                     </div>
  168.                 </div>
  169.             </div>
  170.         </div>
  171.     </script>
  172.  
  173.     <script id="todo-create-template" type="text/x-handlebars-template">
  174.         <div id="todo-create" style="display: none;">
  175.         <h1>Create Todo</h1>
  176.         <div id="create-todo-table">
  177.             <div id="create-todo-table-body">
  178.                 <form action="." method="GET">
  179.                     <div class="create-todo-table-row">
  180.                         <div class="create-todo-table-cell">
  181.                             <p>Parent Todo:
  182.                                
  183.                                 <!-- Pre-populate -->
  184.                                 <select id="parent-todo-create">
  185.                                    
  186.                                 </select>
  187.                                
  188.                             </p>
  189.                         </div>
  190.                     </div>
  191.                     <div class="create-todo-table-row">
  192.                        
  193.                         <p><scan class="required">*</scan>Name:
  194.                             <input type="text" name="name" size="64" />
  195.                         </p>
  196.                     </div>
  197.                 </form>
  198.             </div>
  199.         </div>
  200.         </div>
  201.     </script>
  202.    
  203.     <script id="todo-login-template" type="text/x-handlebars-template">
  204.         <h1>Login</h1>
  205.         <form action="/api/login" method="POST">
  206.             <p>Username: <input type="text" name="username" /></p>
  207.             <p>Password: <input type="password" name="password" /></p>
  208.             <p><input id="submit" type="button" value="Log In" /></p>
  209.         </form>
  210.     </script>
  211. </body>
  212. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!