API tools faq
paste
Advertisement
meilke

Dashing HTML

meilke
Apr 9th, 2014
229
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.32 KB | None | 0 0
raw download clone embed print report
  1. <html lang="en"><head>
  2.   <meta charset="utf-8">
  3.   <meta name="description" content="">
  4.   <meta name="viewport" content="width=device-width">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.  
  7.   <title>Executive Dashboard</title>
  8.  
  9.   <!-- The javascript and css are managed by sprockets. The files can be found in the /assets folder-->
  10.   <script type="text/javascript" src="/assets/application.js"></script><style type="text/css"></style>
  11.   <link rel="stylesheet" href="/assets/application.css">
  12.  
  13.   <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css">
  14.   <link rel="icon" href="/assets/favicon.ico">
  15.  
  16. <style type="text/css"> [data-col="16"] { left:1655px;}  [data-col="15"] { left:1545px;}  [data-col="14"] { left:1435px;}  [data-col="13"] { left:1325px;}  [data-col="12"] { left:1215px;}  [data-col="11"] { left:1105px;}  [data-col="10"] { left:995px;}  [data-col="9"] { left:885px;}  [data-col="8"] { left:775px;}  [data-col="7"] { left:665px;}  [data-col="6"] { left:555px;}  [data-col="5"] { left:445px;}  [data-col="4"] { left:335px;}  [data-col="3"] { left:225px;}  [data-col="2"] { left:115px;}  [data-col="1"] { left:5px;}  [data-row="28"] { top:2435px;}  [data-row="27"] { top:2345px;}  [data-row="26"] { top:2255px;}  [data-row="25"] { top:2165px;}  [data-row="24"] { top:2075px;}  [data-row="23"] { top:1985px;}  [data-row="22"] { top:1895px;}  [data-row="21"] { top:1805px;}  [data-row="20"] { top:1715px;}  [data-row="19"] { top:1625px;}  [data-row="18"] { top:1535px;}  [data-row="17"] { top:1445px;}  [data-row="16"] { top:1355px;}  [data-row="15"] { top:1265px;}  [data-row="14"] { top:1175px;}  [data-row="13"] { top:1085px;}  [data-row="12"] { top:995px;}  [data-row="11"] { top:905px;}  [data-row="10"] { top:815px;}  [data-row="9"] { top:725px;}  [data-row="8"] { top:635px;}  [data-row="7"] { top:545px;}  [data-row="6"] { top:455px;}  [data-row="5"] { top:365px;}  [data-row="4"] { top:275px;}  [data-row="3"] { top:185px;}  [data-row="2"] { top:95px;}  [data-row="1"] { top:5px;}  [data-sizey="1"] { height:80px;} [data-sizey="2"] { height:170px;} [data-sizey="3"] { height:260px;} [data-sizey="4"] { height:350px;} [data-sizey="5"] { height:440px;} [data-sizey="6"] { height:530px;} [data-sizey="7"] { height:620px;} [data-sizey="8"] { height:710px;} [data-sizey="9"] { height:800px;} [data-sizey="10"] { height:890px;} [data-sizey="11"] { height:980px;} [data-sizey="12"] { height:1070px;} [data-sizey="13"] { height:1160px;} [data-sizey="14"] { height:1250px;} [data-sizey="15"] { height:1340px;} [data-sizey="16"] { height:1430px;} [data-sizey="17"] { height:1520px;} [data-sizey="18"] { height:1610px;} [data-sizey="19"] { height:1700px;} [data-sizey="20"] { height:1790px;} [data-sizey="21"] { height:1880px;} [data-sizey="22"] { height:1970px;} [data-sizey="23"] { height:2060px;} [data-sizey="24"] { height:2150px;} [data-sizey="25"] { height:2240px;} [data-sizey="26"] { height:2330px;} [data-sizey="27"] { height:2420px;} [data-sizex="1"] { width:100px;} [data-sizex="2"] { width:210px;} [data-sizex="3"] { width:320px;} [data-sizex="4"] { width:430px;} [data-sizex="5"] { width:540px;} [data-sizex="6"] { width:650px;}</style></head>
  17.   <body>
  18.     <div id="container">
  19.      
  20. <div class="gridster ready" style="width: 1650px;">
  21.   <ul style="height: 990px; position: relative;">
  22.  
  23.     <!-- Hack: Setting width of top row to 1640px! -->
  24.  
  25.     <li data-row="1" data-col="1" data-sizex="15" data-sizey="3" style="width: 1640px;" class="gs_w">
  26.       <div data-id="1" data-title="1" style="background-color:#749396" class="widget widget-auction auction_description"><div class="container">
  27.  
  28.     <div class="auction-indicator">
  29.         <p class="slider"><span></span><span class="active"></span><span></span><span></span><span></span></p>
  30.     </div>
  31.  
  32.     <div class="clear"></div>
  33.  
  34.     <div class="right auction-title" data-bind="title">1</div>
  35.  
  36.     <div class="left">
  37.  
  38.         <p class="number">
  39.             No. <span data-bind="number">1</span>
  40.         </p>
  41.  
  42.         <p>
  43.             <!-- <i class="fa fa-clock-o"></i> -->
  44.             <span data-bind="date">1</span>
  45.         </p>
  46.  
  47.         <p>
  48.             <!-- <i class="fa fa-bookmark"></i> -->
  49.             <span data-bind="category">1</span>
  50.         </p>
  51.  
  52.     </div>
  53.  
  54. </div></div>
  55.     </li>
  56.  
  57.     <li data-row="4" data-col="1" data-sizex="5" data-sizey="4" class="gs_w">
  58.       <div data-id="2" data-title="2" data-min="0" data-max="100" class="widget widget-meter auction_lot_ratio"><div style="display:inline;width:200px;height:200px;"><canvas width="200" height="200px"></canvas><input class="meter" data-angleoffset="-125" data-anglearc="250" data-width="200" data-readonly="true" data-bind-value="value | shortenedNumber | append suffix" data-bind-data-min="min" data-bind-data-max="max" data-min="0" data-max="100" data-bgcolor="rgba(255, 255, 255, 0.498039)" data-fgcolor="rgb(255, 255, 255)" readonly="readonly" style="width: 104px; height: 66px; position: absolute; vertical-align: middle; margin-top: 66px; margin-left: -152px; border: 0px; background-image: none; font-weight: bold; font-style: normal; font-variant: normal; font-size: 40px; line-height: normal; font-family: Arial; text-align: center; color: rgb(255, 255, 255); padding: 0px; -webkit-appearance: none; background-position: initial initial; background-repeat: initial initial;"></div>
  59.  
  60. <h1 class="title" data-bind="title">2</h1>
  61.  
  62. <p class="more-info" data-bind="moreinfo"></p>
  63.  
  64. <p class="updated-at" data-bind="updatedAtMessage">Last updated at 10:14</p>
  65. </div>
  66.     </li>
  67.  
  68.     <li data-row="4" data-col="6" data-sizex="5" data-sizey="4" class="gs_w">
  69.       <div data-id="3" data-title="3" style="background-color:#749396" class="widget widget-number auction_lot_count"><h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix">3</h2>
  70.  
  71. <h1 class="title" data-bind="title">3</h1>
  72.  
  73. <p class="change-rate">
  74.   <i data-bind-class="arrow"></i><span data-bind="difference"></span>
  75. </p>
  76.  
  77. <p class="more-info" data-bind="moreinfo"></p>
  78.  
  79. <p class="updated-at" data-bind="updatedAtMessage">Last updated at 10:14</p>
  80. </div>
  81.     </li>
  82.  
  83.     <li data-row="4" data-col="11" data-sizex="5" data-sizey="4" class="gs_w">
  84.       <div data-id="4" data-title="4" style="background-color:#749396" class="widget widget-number auction_lot_goal"><h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix">4</h2>
  85.  
  86. <h1 class="title" data-bind="title">4</h1>
  87.  
  88. <p class="change-rate">
  89.   <i data-bind-class="arrow"></i><span data-bind="difference"></span>
  90. </p>
  91.  
  92. <p class="more-info" data-bind="moreinfo"></p>
  93.  
  94. <p class="updated-at" data-bind="updatedAtMessage">Last updated at 10:14</p>
  95. </div>
  96.     </li>
  97.  
  98.     <li data-row="8" data-col="1" data-sizex="5" data-sizey="4" class="gs_w">
  99.       <div data-id="5" data-title="5" data-min="0" data-max="100" class="widget widget-meter auction_gmv_ratio"><div style="display:inline;width:200px;height:200px;"><canvas width="200" height="200px"></canvas><input class="meter" data-angleoffset="-125" data-anglearc="250" data-width="200" data-readonly="true" data-bind-value="value | shortenedNumber | append suffix" data-bind-data-min="min" data-bind-data-max="max" data-min="0" data-max="100" data-bgcolor="rgba(255, 255, 255, 0.498039)" data-fgcolor="rgb(255, 255, 255)" readonly="readonly" style="width: 104px; height: 66px; position: absolute; vertical-align: middle; margin-top: 66px; margin-left: -152px; border: 0px; background-image: none; font-weight: bold; font-style: normal; font-variant: normal; font-size: 40px; line-height: normal; font-family: Arial; text-align: center; color: rgb(255, 255, 255); padding: 0px; -webkit-appearance: none; background-position: initial initial; background-repeat: initial initial;"></div>
  100.  
  101. <h1 class="title" data-bind="title">5</h1>
  102.  
  103. <p class="more-info" data-bind="moreinfo"></p>
  104.  
  105. <p class="updated-at" data-bind="updatedAtMessage">Last updated at 10:14</p>
  106. </div>
  107.     </li>
  108.  
  109.     <li data-row="8" data-col="6" data-sizex="5" data-sizey="4" class="gs_w">
  110.       <div data-id="6" data-title="6" style="background-color:#749396" class="widget widget-number auction_gmv"><h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix">6</h2>
  111.  
  112. <h1 class="title" data-bind="title">6</h1>
  113.  
  114. <p class="change-rate">
  115.   <i data-bind-class="arrow"></i><span data-bind="difference"></span>
  116. </p>
  117.  
  118. <p class="more-info" data-bind="moreinfo"></p>
  119.  
  120. <p class="updated-at" data-bind="updatedAtMessage">Last updated at 10:14</p>
  121. </div>
  122.     </li>
  123.  
  124.     <li data-row="8" data-col="11" data-sizex="5" data-sizey="4" class="gs_w">
  125.       <div data-id="7" data-title="7" style="background-color:#749396" class="widget widget-number auction_gmv_goal"><h2 class="value" data-bind="current | shortenedNumber | prepend prefix | append suffix">7</h2>
  126.  
  127. <h1 class="title" data-bind="title">7</h1>
  128.  
  129. <p class="change-rate">
  130.   <i data-bind-class="arrow"></i><span data-bind="difference"></span>
  131. </p>
  132.  
  133. <p class="more-info" data-bind="moreinfo"></p>
  134.  
  135. <p class="updated-at" data-bind="updatedAtMessage">Last updated at 10:14</p>
  136. </div>
  137.     </li>
  138.  
  139.    
  140.  
  141.   </ul>
  142. </div>
  143.     </div>
  144.  
  145.    
  146.       <div id="saving-instructions">
  147.         <p>Paste the following at the top of <i>sample.erb</i></p>
  148.         <textarea id="gridster-code"></textarea>
  149.       </div>
  150.       <a href="#saving-instructions" id="save-gridster">Save this layout</a>
  151.    
  152.  
  153. <div id="lean_overlay"></div></body></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!