Advertisement
Guest User

Untitled

a guest
Sep 15th, 2015
131
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.30 KB | None
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function sliceSize(dataNum, dataTotal) {
  6. return (dataNum / dataTotal) * 360;
  7. }
  8. function addSlice(sliceSize, pieElement, offset, sliceID, color) {
  9. $(pieElement).append("<div class='slice "+sliceID+"'><span></span></div>");
  10. var offset = offset - 1;
  11. var sizeRotation = -179 + sliceSize;
  12. $("."+sliceID).css({
  13. "transform": "rotate("+offset+"deg) translate3d(0,0,0)"
  14. });
  15. $("."+sliceID+" span").css({
  16. "transform" : "rotate("+sizeRotation+"deg) translate3d(0,0,0)",
  17. "background-color": color
  18. });
  19. }
  20. function iterateSlices(sliceSize, pieElement, offset, dataCount, sliceCount, color) {
  21. var sliceID = "s"+dataCount+"-"+sliceCount;
  22. var maxSize = 179;
  23. if(sliceSize<=maxSize) {
  24. addSlice(sliceSize, pieElement, offset, sliceID, color);
  25. } else {
  26. addSlice(maxSize, pieElement, offset, sliceID, color);
  27. iterateSlices(sliceSize-maxSize, pieElement, offset+maxSize, dataCount, sliceCount+1, color);
  28. }
  29. }
  30. function createPie(dataElement, pieElement) {
  31. var listData = [];
  32. $(dataElement+" span").each(function() {
  33. listData.push(Number($(this).html()));
  34. });
  35. var listTotal = 0;
  36. for(var i=0; i<listData.length; i++) {
  37. listTotal += listData[i];
  38. }
  39. var offset = 0;
  40. var color = [
  41. "cornflowerblue",
  42. "olivedrab",
  43. "orange",
  44. "tomato",
  45. "crimson",
  46. "purple",
  47. "turquoise",
  48. "forestgreen",
  49. "navy",
  50. "gray"
  51. ];
  52. for(var i=0; i<listData.length; i++) {
  53. var size = sliceSize(listData[i], listTotal);
  54. iterateSlices(size, pieElement, offset, i, 0, color[i]);
  55. $(dataElement+" li:nth-child("+(i+1)+")").css("border-color", color[i]);
  56. offset += size;
  57. }
  58. }
  59. createPie(".pieID.legend", ".pieID.pie");
  60.  
  61. </script>
  62. <style>
  63.  
  64.  
  65. @font-face {
  66. font-family: 'Open Sans';
  67. font-style: normal;
  68. font-weight: 400;
  69. src: local('Open Sans'), local('OpenSans'), url(cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  70. }
  71. @font-face {
  72. font-family: 'Open Sans';
  73. font-style: normal;
  74. font-weight: 700;
  75. src: local('Open Sans Bold'), local('OpenSans-Bold'), url(k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
  76. }
  77.  
  78.  
  79. @keyframes bake-pie {
  80. from {
  81. transform: rotate(0deg) translate3d(0,0,0);
  82. }
  83. }
  84.  
  85. body {
  86. font-family: "Open Sans", Arial;
  87. background: #EEE;
  88. }
  89. main {
  90. width: 400px;
  91. margin: 30px auto;
  92. }
  93. section {
  94. margin-top: 30px;
  95. }
  96. .pieID {
  97. display: inline-block;
  98. vertical-align: top;
  99. }
  100. .pie {
  101. height: 200px;
  102. width: 200px;
  103. position: relative;
  104. margin: 0 30px 30px 0;
  105. }
  106. .pie::before {
  107. content: "";
  108. display: block;
  109. position: absolute;
  110. z-index: 1;
  111. width: 100px;
  112. height: 100px;
  113. background: #EEE;
  114. border-radius: 50%;
  115. top: 50px;
  116. left: 50px;
  117. }
  118. .pie::after {
  119. content: "";
  120. display: block;
  121. width: 120px;
  122. height: 2px;
  123. background: rgba(0,0,0,0.1);
  124. border-radius: 50%;
  125. box-shadow: 0 0 3px 4px rgba(0,0,0,0.1);
  126. margin: 220px auto;
  127.  
  128. }
  129. .slice {
  130. position: absolute;
  131. width: 200px;
  132. height: 200px;
  133. clip: rect(0px, 200px, 200px, 100px);
  134. animation: bake-pie 1s;
  135. }
  136. .slice span {
  137. display: block;
  138. position: absolute;
  139. top: 0;
  140. left: 0;
  141. background-color: black;
  142. width: 200px;
  143. height: 200px;
  144. border-radius: 50%;
  145. clip: rect(0px, 200px, 200px, 100px);
  146. }
  147. .legend {
  148. list-style-type: none;
  149. padding: 0;
  150. margin: 0;
  151. background: #FFF;
  152. padding: 15px;
  153. font-size: 13px;
  154. box-shadow: 1px 1px 0 #DDD,
  155. 2px 2px 0 #BBB;
  156. }
  157. .legend li {
  158. width: 110px;
  159. height: 1.25em;
  160. margin-bottom: 0.7em;
  161. padding-left: 0.5em;
  162. border-left: 1.25em solid black;
  163. }
  164. .legend em {
  165. font-style: normal;
  166. }
  167. .legend span {
  168. float: right;
  169. }
  170. footer {
  171. position: fixed;
  172. bottom: 0;
  173. right: 0;
  174. font-size: 13px;
  175. background: #DDD;
  176. padding: 5px 10px;
  177. margin: 5px;
  178. }
  179.  
  180. </style>
  181. </head>
  182.  
  183.  
  184.  
  185.  
  186.  
  187.  
  188.  
  189. <body>
  190. <main>
  191.  
  192.  
  193. <section>
  194. <div class="pieID pie">
  195.  
  196. </div>
  197. <ul class="pieID legend">
  198. <li>
  199. <em>Open Ports</em>
  200. <span>3</span>
  201. </li>
  202. <li>
  203. <em>Findings</em>
  204. <span>1</span>
  205. </li>
  206. <li>
  207. <em>Vulnerabilities</em>
  208. <span>1</span>
  209. </li>
  210.  
  211. </ul>
  212. </section>
  213.  
  214. </main>
  215.  
  216. </body>
  217. </html>
Advertisement
RAW Paste Data Copied
Advertisement