Skip to content

Instantly share code, notes, and snippets.

@mfrobben
Created November 21, 2012 14:07
Show Gist options
  • Save mfrobben/4125013 to your computer and use it in GitHub Desktop.
Save mfrobben/4125013 to your computer and use it in GitHub Desktop.
Circle stats output changes after compiling dependencies.
<div class="circleStats">
<div class="span2 offset4" ontablet="span4" ondesktop="span2">
<div class="circleStatsItem green">
<i class="fa-icon-bar-chart"></i>
<span class="percent">%</span>
<input type="text" value="4" class="greenCircle">
</div>
<div class="box-small-title">Bounce rate</div>
</div>
<div class="span2" ontablet="span4" ondesktop="span2">
<div class="circleStatsItem blue">
<i class="fa-icon-bullhorn"></i>
<span class="plus">+</span>
<span class="percent">%</span>
<input type="text" value="8" class="blueCircle">
</div>
<div class="box-small-title">Number of signups last hour</div>
</div>
<div class="span2" ontablet="span4" ondesktop="span2">
<div class="circleStatsItem lightorange">
<i class="fa-icon-shopping-cart"></i>
<span class="plus">+</span>
<span class="percent">%</span>
<input type="text" value="42" class="lightOrangeCircle">
</div>
<div class="box-small-title">Things sold vs. posted</div>
</div>
</div>
</div>
<div class="circleStats">
<div class="span2 offset4" ontablet="span4" ondesktop="span2">
<div class="circleStatsItem green">
<i class="fa-icon-bar-chart"></i>
<span class="percent">%</span>
<div style="width:120px;display:inline;&quot;"><canvas width="120" height="120"></canvas><input type="text" value="4" class="greenCircle" style="width: 60px; position: absolute; margin-top: 42.857142857142854px; margin-left: -90px; font-size: 30px; border: none; background-image: none; font-family: Arial; font-weight: bold; text-align: center; color: rgb(185, 230, 114); padding: 0px; -webkit-appearance: none; background-position: initial initial; background-repeat: initial initial;" readonly="readonly"></div>
</div>
<div class="box-small-title">Bounce rate</div>
</div>
<div class="span2" ontablet="span4" ondesktop="span2">
<div class="circleStatsItem blue">
<i class="fa-icon-bullhorn"></i>
<span class="plus">+</span>
<span class="percent">%</span>
<div style="width:120px;display:inline;&quot;"><canvas width="120" height="120"></canvas><input type="text" value="8" class="blueCircle" style="width: 60px; position: absolute; margin-top: 42.857142857142854px; margin-left: -90px; font-size: 30px; border: none; background-image: none; font-family: Arial; font-weight: bold; text-align: center; color: rgb(47, 171, 233); padding: 0px; -webkit-appearance: none; background-position: initial initial; background-repeat: initial initial;" readonly="readonly"></div>
</div>
<div class="box-small-title">Number of signups last hour</div>
</div>
<div class="span2" ontablet="span4" ondesktop="span2">
<div class="circleStatsItem lightorange">
<i class="fa-icon-shopping-cart"></i>
<span class="plus">+</span>
<span class="percent">%</span>
<div style="width:120px;display:inline;&quot;"><canvas width="120" height="120"></canvas><input type="text" value="42" class="lightOrangeCircle" style="width: 60px; position: absolute; margin-top: 42.857142857142854px; margin-left: -90px; font-size: 30px; border: none; background-image: none; font-family: Arial; font-weight: bold; text-align: center; color: rgb(244, 167, 12); padding: 0px; -webkit-appearance: none; background-position: initial initial; background-repeat: initial initial;" readonly="readonly"></div>
</div>
<div class="box-small-title">Things sold vs. posted</div>
</div>
</div>
<!-- Perfectum dependencies -->
<script src="/js/perfectum/jquery-1.7.2.min.js"></script>
<script src="/js/perfectum/jquery-ui-1.8.21.custom.min.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/js/perfectum/jquery.cookie.js"></script>
<script src='/js/perfectum/fullcalendar.min.js'></script>
<script src='/js/perfectum/jquery.dataTables.min.js'></script>
<script src="/js/perfectum/excanvas.js"></script>
<script src="/js/perfectum/jquery.flot.min.js"></script>
<script src="/js/perfectum/jquery.flot.pie.min.js"></script>
<script src="/js/perfectum/jquery.flot.stack.js"></script>
<script src="/js/perfectum/jquery.flot.resize.min.js"></script>
<script src="/js/perfectum/jquery.chosen.min.js"></script>
<script src="/js/perfectum/jquery.uniform.min.js"></script>
<script src="/js/perfectum/jquery.cleditor.min.js"></script>
<script src="/js/perfectum/jquery.noty.js"></script>
<script src="/js/perfectum/jquery.elfinder.min.js"></script>
<script src="/js/perfectum/jquery.raty.min.js"></script>
<script src="/js/perfectum/jquery.iphone.toggle.js"></script>
<script src="/js/perfectum/jquery.uploadify-3.1.min.js"></script>
<script src="/js/perfectum/jquery.gritter.min.js"></script>
<script src="/js/perfectum/jquery.imagesloaded.js"></script>
<script src="/js/perfectum/jquery.masonry.min.js"></script>
<script src="/js/perfectum/jquery.knob.js"></script>
<script src="/js/perfectum/jquery.sparkline.min.js"></script>
<script src="/js/perfectum/custom.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment