API tools faq
paste
Advertisement
Guest User

HTML

a guest
Sep 17th, 2013
141
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 15.45 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.     <head>
  4.  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.         <meta name="language" content="en" />
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  8.  
  9.         <meta property="fb:app_id" content="564175250300928" />
  10.  
  11. <title> Welcome2 Test</title>
  12.        
  13.         <!-- CDN includes - highly recommended for fast delivery -->
  14.                 <!-- CDN Fonts -->
  15.  
  16.                 <!-- CDN js -->
  17.                 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
  18.                 <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"type="text/javascript"></script>
  19.                 <link href='//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' rel='stylesheet' type='text/css'>
  20.  
  21.         <!-- EPSILON FRAMEWORK -->
  22.                 <!-- EPSILON css -->
  23.                 <link href="/epsilon/styles/style.css"          rel="stylesheet"    type="text/css"/>
  24.                 <link href="/epsilon/styles/framework.css"      rel="stylesheet"    type="text/css"/>
  25.                 <link href="/epsilon/styles/framework-style.css"    rel="stylesheet"    type="text/css"/>
  26.                 <link href="/epsilon/styles/icons.css"          rel="stylesheet"    type="text/css"/>
  27.                 <!-- EPSILON js  -->
  28.                 <script src="/epsilon/scripts/colorbox.js"      type="text/javascript"></script>
  29.                 <script src="/epsilon/scripts/hammer.js"            type="text/javascript"></script>   
  30.                 <script src="/epsilon/scripts/swipe.js"         type="text/javascript"></script>
  31.                 <script src="/epsilon/scripts/swipebox.js"      type="text/javascript"></script>
  32.                 <script src="/epsilon/scripts/custom.js"            type="text/javascript"></script>
  33.                 <script src="/epsilon/scripts/framework.js"     type="text/javascript"></script>
  34.                 <!-- BOOT STRAP!!! -->
  35.                     <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  36.                     <!-- CDN css -->
  37.                     <link href="//netdna.bootstrapcdn.com/bootswatch/3.0.0/cosmo/bootstrap.min.css" rel="stylesheet">  
  38.         <!-- PULIGINS -->
  39.                 <!-- pJax -->
  40.                 <script src="/js/jquery.pjax.js"            type="text/javascript"></script>           
  41.                 <!-- Glyphicons Pro  -->
  42.                     <link href="/css/glyphicons.css"            rel="stylesheet"    type="text/css"/>
  43.                 <!-- Glyphicons Pro Halflings -->
  44.                     <link href="/css/halflings.css"         rel="stylesheet"    type="text/css"/>
  45.                 <!-- Glyphicons Pro Social -->
  46.                     <link href="/css/social.css"            rel="stylesheet"    type="text/css"/>
  47.        
  48.                 <!-- CUSTOM css --->
  49.                 <link href="/css/styles.css"            rel="stylesheet"    type="text/css"/>
  50.            
  51.             <!-- CUSTOM js -->
  52.                 <script src="/js/pLoad.0.4.js"  type="text/javascript"></script>
  53.                
  54.         <!-- mobile toggler [?] - Cascades to js -->
  55.         <div id="mobileToggle"></div>
  56.     </head>
  57.  
  58.     <body>
  59.     <div class="container">
  60.         <style>
  61.        
  62.        
  63.         .navbar { position:fixed;top:0; left:0;width:100%;min-height: 43px; z-index:10;overflow:visible; min-width:350px;}
  64.         .navbar-inner {overflow:visible;}
  65.         .header1 {
  66.         width:19%;
  67.         float:left;
  68.         display:inline-block;
  69.         margin-left:0.5em;
  70.         margin-top:0.5em;
  71.         }
  72.         .header2 {
  73.         padding-top:0.6em;
  74.         width:58%;
  75.         display:inline-block;
  76.         float:left;
  77.         text-align:center;
  78.         }
  79.         .header3 {
  80.        
  81.         float:right;
  82.         overflow:visible;
  83.         }
  84.         .header_container {
  85.         width:100%;
  86.         display:block;
  87.         }
  88.         .usrmenu li a {
  89.         line-height: 2.428571;
  90.         font-weight:bold;
  91.         }
  92.         </style>
  93.         <script>
  94.         $(document).ready(function (){
  95.             $("#openLeft").click(function(){
  96.                 var $aside=$('.aside');
  97.                 $aside.show();
  98.                 $aside.animate({
  99.                     left: "0%"
  100.                 },250);
  101.             });
  102.         });    
  103.         </script>
  104.        
  105.        
  106.        
  107.         <div class="navbar navbar-default" >
  108.             <div class="navbar-inner">
  109.                 <div class="header_container btn-default"  style="overflow:visible;">
  110.                     <div class="header1"> <a href="/test/index/"><em class="homeBtn icon icon-home1" style="margin-top:0.4em;margin-left:0.2em;"></em></a><button id="openLeft" class="btn btn-default glyphicons white show_lines" style="margin: .2em.4em;"></button></div>
  111.                     <div class="header2"><a href="/test/index/"style="display:inline-block;font-size:24px;color:#eee;">TITLE</a>
  112.                     </div>
  113.                     <div class="header3">
  114.                         <div class="dropdown btn btn-default" style="overflow:visible; padding:0.5em;">
  115.                             <a data-toggle="dropdown" role="button"  href="#" style="overflow:visible;"><em class="glyphicons white cogwheel"></em>
  116.                                 <b class="caret"></b>
  117.                             </a>
  118.                             <ul class="usrmenu dropdown-menu" role="menu" style="font-size:12px;font-weight:bold;text-align:left;list-style-type:none;margin-left:-100%;" aria-labelledby="dLabel">
  119.                                 <li style="list-style-type:none;"><a role="menuitem" href="#">My Account</a></li>
  120.                                 <li style="list-style-type:none;"><a role="menuitem" href="#">My Groups</a></li>
  121.                                 <li style="list-style-type:none;"><a role="menuitem" href="#">My Networks</a></li>
  122.                                 <li style="list-style-type:none;"><a role="menuitem" href="#">View / Edit Profile</a></li>
  123.                                 <li class="divider"></li>
  124.                                 <li style="list-style-type:none;"><a role="menuitem" href="#">Sign out</a></li>
  125.                             </ul>
  126.                         </div>
  127.                     </div>
  128.                 </div> <!--header_container-->
  129.             </div> <!--navbar-inner-->
  130.         </div> <!--navbar-->
  131.         <div class="aside layer9">
  132.             <style>
  133.     #close {
  134.     float:right;
  135.     }
  136.     .users {
  137.     height:auto;
  138.     }
  139.     .user IMG {
  140.         float:left;
  141.     }
  142.     .uInfo {
  143.         padding-left:4px;
  144.     }
  145.     .name, .location {
  146.     font-size:12px;
  147.     font-weight:bold;
  148.     }
  149.     .sidebar-searchbar { background:#a0cbd8;width:100%; height:62px;  }
  150.     .user {
  151.         padding:4px;
  152.         clear:both;
  153.  
  154.     }
  155.     .interests h3 {
  156.     margin-top:0;
  157.     margin-bottom:0;
  158.     text-align:center;
  159.     }
  160.     .interests ul {
  161.     list-style-type:none;
  162.     }
  163.     .interests ul li {
  164.     font-size:14px;
  165.     list-style-type:none;
  166.     float:left;
  167.     margin:9px 9px;
  168.     }
  169.     .interests ul li:hover {
  170.     color:#000;
  171.     cursor:pointer;
  172.     }
  173.    
  174.     .sidebar-header-left {
  175.     color:#fff;
  176.     }
  177.     .morelink {
  178.     clear:both;
  179.     float:right;
  180.     margin-right:24px;
  181.     margin-bottom:24px;
  182.     }
  183.     .morelink:hover {
  184.         color:#000;
  185.         background-color:#ddd;
  186.         cursor:pointer;
  187.     }
  188.     .btn-srch {
  189.         margin-left: -31px;
  190.         padding-top: 5px;
  191.         margin-top: -6px;
  192.         padding-bottom: 0px;
  193.     }
  194.         .btn-srch .halflings{
  195.         padding-left: 11px;
  196.         padding-bottom: 12px;
  197.         padding-right: 0px;
  198.         float: left;
  199.         margin: 3px 1px;   
  200.     }
  201. </style>
  202. <script>
  203. $(document).ready(function (){
  204.     $("#close").click(function(){
  205.         var $aside=$('.aside');
  206.         $aside.animate({
  207.             left: "-150%"
  208.         },250);
  209.     });
  210. });
  211.  
  212. </script>
  213.     <div id="close" class="sidebar-left-close"><button class="btn btn-small btn-danger">x</button></div>
  214.     <div class="side-bar-searchbar">
  215.     <form class="form-search" style="text-align:center; margin-top:8px;">
  216.         <input type="text" class="input-medium search-query" style="float:left; max-width:171px;"placeholder="search ...">
  217.         <button type="submit" class="btn btn-primary btn-xs btn-srch" ><em class="halflings white search btn-srch"></em></button>
  218.     </form>
  219.     </div>
  220.    
  221.     <div class = "users">
  222.         <div class="user">
  223.             <img src="http://placehold.it/90x90" alt="Image" />
  224.             <div class ="uInfo">
  225.                 <div class="name">Steve B</div>
  226.                 <div class="location">Cincinnati, OH</div>
  227.                 <p style="font-size:11px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
  228.             </div>
  229.         </div>
  230.     </div>
  231.     <div class="interests">
  232.     <h3 style="sidebar-divider-text">INTERESTS</h3>
  233.     <ul>
  234.         <li class="badge">entertainment</li>
  235.         <li class="badge">music</li>
  236.         <li class="badge" >live shows</li>
  237.         <li class="badge">funny</li>
  238.         <li class="badge">drama</li>
  239.         <li class="badge">sports</li>
  240.     </ul>
  241.         <div class="morelink badge badge-inverse">more...</div>
  242.     </div>
  243.    
  244.     <div class="menu">
  245.         <button class="btn btn-default btn-block">People to Follow</button>
  246.         <button class="btn btn-default btn-block">Find Friends</button>
  247.         <button class="btn btn-default btn-block">Groups</button>
  248.         <button class="btn btn-default btn-block">Explore</button>
  249.         <button class="btn btn-default btn-block">Favorites</button>
  250.        
  251.         <center><img src="http://placehold.it/220x150" alt="Video" style="margin-top:8px;"/></center>
  252.     </div>
  253.         </div>
  254.         <div id="pjax-container" style="position:relative;">
  255.             <div class="content-box layer0">
  256.                     <style>
  257.  
  258.  
  259. .categories {
  260.     max-width:640px;
  261.     margin:0 auto;
  262. }
  263. .sub-categories {
  264.     display: none;
  265. }
  266. .category {
  267.     display:none;
  268. }
  269. .categories button {
  270. width:84px;
  271. height:84px;
  272. margin:1em;
  273. word-wrap: break-word;
  274. font-size:14px;
  275. font-weight:bold;
  276. }
  277.  
  278. .bar {
  279. background-color: #000;
  280. border: thin solid black;
  281. height: 100%;
  282. color:#fff;
  283. }
  284. .progress {
  285. height:1.25em;
  286. }
  287. </style>
  288.  
  289. <div class="containerTitle"> What do you like?</div>
  290. <div class="progress" ><div class="bar" id="tyl_progress_bar" style="width: 0%;"></div></div>
  291. <div class="nextBtn"></div>
  292. <div class="containerInner">
  293.  
  294.     <div class="categories">
  295.    
  296.         <!------------------------------------------------
  297.  
  298.         Do a for-each and cache all categories from SQL
  299.         button#id is populated from SQL
  300.        
  301.         -------------------------------------------------->
  302.         <button class="tyl_category" id="category1">Category1</button>
  303.         <button class="tyl_category" id="category2">Category2</button>
  304.         <button class="tyl_category" id="category3">Category3</button>
  305.         <button class="tyl_category" id="category4">Category4</button>
  306.         <button class="tyl_category" id="category5">Category5</button>
  307.         <button class="tyl_category" id="category6">Category6</button>
  308.         <button class="tyl_category" id="category7">Category7</button>
  309.         <button class="tyl_category" id="category8">Category8</button>
  310.         <button class="tyl_category" id="category9">Category9</button>
  311.         <!-- end for-each -->
  312.        
  313.     </div> 
  314.  
  315.     <form name ="things-you-like-form" class="sub-categories" action="things-you-like">
  316.         <!--------------------------------------------------
  317.  
  318.         Do a for-each and cache all sub-categories from SQL
  319.         div#id is populated from SQL
  320.         div value is populated from SQL
  321.        
  322.         --------------------------------------------------->
  323.         <div class="control-group">
  324.             <div class="controls category" id="form-category1">
  325.                 Select from Category 1
  326.                 <input type="checkbox" name="tyl_picked1" value="c1s1">
  327.                 <label for "category1-subcategory1">1.1</label>
  328.                 <input type="checkbox" name="tyl_picked1" value="c12">
  329.                 <label for "category1-subcategory2">1.2</label>
  330.                 <input type="checkbox" name="tyl_picked1" value="c1s3">
  331.                 <label for "category1-subcategory3">1.3</label>
  332.                 <input type="checkbox" name="tyl_picked1" value="c1s4">
  333.                 <label for "category1-subcategory4">1.1</label>
  334.             </div>
  335.             <div class="controls category" id="form-category2">
  336.                 Select from Category 2
  337.                 <input type="checkbox" name="tyl_picked" value="category2-subcategory1">2.1
  338.                 <input type="checkbox" name="tyl_picked" value="category2-subcategory2">2.2
  339.                 <input type="checkbox" name="tyl_picked" value="category2-subcategory3">2.3
  340.                 <input type="checkbox" name="tyl_picked" value="category2-subcategory4">2.4
  341.             </div>
  342.             <div class="controls category" id="form-category3">
  343.                 Select from Category 3
  344.                 <input type="checkbox" name="tyl_picked" value="category3-subcategory1">3.1
  345.                 <input type="checkbox" name="tyl_picked" value="category3-subcategory2">3.2
  346.                 <input type="checkbox" name="tyl_picked" value="category3-subcategory3">3.3
  347.                 <input type="checkbox" name="tyl_picked" value="category3-subcategory4">3.4
  348.             </div>
  349.             <div class="controls category" id="form-category4">
  350.                 Select from Category 4
  351.                 <input type="checkbox" name="tyl_picked" value="category4-subcategory1">4.1
  352.                 <input type="checkbox" name="tyl_picked" value="category4-subcategory2">4.2
  353.                 <input type="checkbox" name="tyl_picked" value="category4-subcategory3">4.3
  354.                 <input type="checkbox" name="tyl_picked" value="category4-subcategory4">4.4
  355.             </div>
  356.             <div class="controls category" id="form-category5">
  357.                 Select from Category 5
  358.                 <input type="checkbox" name="tyl_picked" value="category5-subcategory1">5.1
  359.                 <input type="checkbox" name="tyl_picked" value="category5-subcategory2">5.2
  360.                 <input type="checkbox" name="tyl_picked" value="category5-subcategory3">5.3
  361.                 <input type="checkbox" name="tyl_picked" value="category5-subcategory4">5.4
  362.             </div>
  363.             <div class="controls category" id="form-category6">
  364.                 Select from Category 6
  365.                 <input type="checkbox" name="tyl_picked" value="category6-subcategory1">6.1
  366.                 <input type="checkbox" name="tyl_picked" value="category6-subcategory2">6.2
  367.                 <input type="checkbox" name="tyl_picked" value="category6-subcategory3">6.3
  368.                 <input type="checkbox" name="tyl_picked" value="category6-subcategory4">6.4
  369.             </div>
  370.             <div class="controls category" id="form-category7">
  371.                 Select from Category 7
  372.                 <input type="checkbox" name="tyl_picked" value="category7-subcategory1">7.1
  373.                 <input type="checkbox" name="tyl_picked" value="category7-subcategory2">7.2
  374.                 <input type="checkbox" name="tyl_picked" value="category7-subcategory3">7.3
  375.                 <input type="checkbox" name="tyl_picked" value="category7-subcategory4">7.4
  376.             </div>
  377.             <div class="controls category" id="form-category8">
  378.                 Select from Category 8
  379.                 <input type="checkbox" name="tyl_picked" value="category8-subcategory1">8.1
  380.                 <input type="checkbox" name="tyl_picked" value="category8-subcategory2">8.2
  381.                 <input type="checkbox" name="tyl_picked" value="category8-subcategory3">8.3
  382.                 <input type="checkbox" name="tyl_picked" value="category8-subcategory4">8.4
  383.             </div>
  384.             <div class="controls category" id="form-category9">
  385.                 Select from Category 9
  386.                 <input type="checkbox" name="tyl_picked" value="category9-subcategory1">9.1
  387.                 <input type="checkbox" name="tyl_picked" value="category9-subcategory2">9.2
  388.                 <input type="checkbox" name="tyl_picked" value="category9-subcategory3">9.3
  389.                 <input type="checkbox" name="tyl_picked" value="category9-subcategory4">9.4
  390.             </div>
  391.         </div>
  392.         <!-- end for-each sub-categores -->
  393.    
  394.    
  395.     </form>
  396.    
  397.    
  398. </div>
  399.  
  400. <script>
  401. $(document).ready(function() {
  402.     $('form').each(function() { this.reset() });
  403.     var progress = 0;
  404.    
  405.     $categories = $('.categories');
  406.     $sub_categories = $('.sub-categories');
  407.    
  408.     $(document).on('click','.tyl_category', function(e) {
  409.        
  410.         $form = $('#form-'+this.id);
  411.         console.log(this.id);
  412.         $categories.hide('slide', { direction: 'left' }, 250, function() {
  413.             $sub_categories.show();
  414.             $form.show('slide', { direction: 'right' },250);
  415.         });
  416.     });
  417.    
  418.     $(document).on('click','input[type="checkbox"]', function (e) {
  419.         var $this = $(this);
  420.         var $progress_bar = $('#tyl_progress_bar');
  421.         if ($this.is(':checked')) {
  422.             progress +=1;
  423.         } else {
  424.             progress -=1;
  425.         }
  426.         $progress_bar.text('Step '+progress+'/5');
  427.         $progress_bar.css({width: (progress*25)+"%"}); 
  428.         $form = $this.parent('div');
  429.         $form.hide('slide', { direction: 'left' }, 250, function() {
  430.             $sub_categories.show();
  431.             $categories.show('slide', { direction: 'right' },250);
  432.         });
  433.    
  434.    
  435.     });
  436.  
  437. });
  438. </script>           </div> <!--- /content --->
  439.            
  440.         </div>  <!--- /pjax-->
  441.             <div id="footer layer1">
  442.             </div>
  443.        
  444.     </div>
  445.  
  446.     <div id="fb-root"></div><script type="text/javascript">
  447. /*<![CDATA[*/
  448. window.fbAsyncInit = function(){FB.init({'appId':'564175250300928','status':true,'cookie':true,'xfbml':true,'oauth':true,'frictionlessRequests':false});};
  449.                (function(d){
  450.                 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  451.                 js = d.createElement('script'); js.id = id; js.async = true;
  452.                 js.src = '//connect.facebook.net/en_US/all.js';
  453.                 d.getElementsByTagName('head')[0].appendChild(js);
  454.                }(document));
  455. /*]]>*/
  456. </script>
  457. </body>
  458. </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!