SHARE
TWEET

handlebars_rendered_output_html

a guest Jul 11th, 2019 110 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
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
 
Top