API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 22nd, 2018
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.49 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>Page Title</title>
  4. <script type="text/javascript">
  5. var call = 0;
  6. var PSU = 0;
  7. var percent = 1;
  8. function addCall() {
  9. if (call < 0) {
  10. call = 0;
  11. } else {
  12. call = call + 1;
  13. }
  14. var cView = document.getElementById("callViewer");
  15. cView.setAttribute("data-result", call);
  16. cView.innerHTML = call;
  17. if (percent < 0) {
  18. percent = 0;
  19. } else {
  20. percent = Math.round(PSU / call * 100);
  21. }
  22. if (isNaN(percent)) {
  23. percent = 0;
  24. } else if (percent === Infinity) {
  25. percent = 0;
  26. }
  27. if (percent >= 120) {
  28. document.documentElement.style.setProperty(`--my-color`, "gold");
  29. } else if (percent >= 75) {
  30. document.documentElement.style.setProperty(`--my-color`, "green");
  31. } else if (percent >= 1) {
  32. document.documentElement.style.setProperty(`--my-color`, "red");
  33. } else {
  34. document.documentElement.style.setProperty(`--my-color`, "white");
  35. }
  36. var view = document.getElementById("pViewer");
  37. view.setAttribute("data-result", percent + "%");
  38. view.innerHTML = percent + "%";
  39. }
  40. function subtractCall() {
  41. if (call < 1) {
  42. call = 0;
  43. } else {
  44. call = call - 1;
  45. }
  46. var cView = document.getElementById("callViewer");
  47. cView.setAttribute("data-result", call);
  48. cView.innerHTML = call;
  49. if (percent < 0) {
  50. percent = 0;
  51. } else {
  52. percent = Math.round(PSU / call * 100);
  53. }
  54. if (isNaN(percent)) {
  55. percent = 0;
  56. } else if (percent === Infinity) {
  57. percent = 0;
  58. }
  59. if (percent >= 120) {
  60. document.documentElement.style.setProperty(`--my-color`, "gold");
  61. } else if (percent >= 75) {
  62. document.documentElement.style.setProperty(`--my-color`, "green");
  63. } else if (percent >= 1) {
  64. document.documentElement.style.setProperty(`--my-color`, "red");
  65. } else {
  66. document.documentElement.style.setProperty(`--my-color`, "white");
  67. }
  68. var view = document.getElementById("pViewer");
  69. view.setAttribute("data-result", percent + "%");
  70. view.innerHTML = percent + "%";
  71. }
  72. function addPSU() {
  73. if (PSU < 0) {
  74. PSU = 0;
  75. } else {
  76. PSU = PSU + 1;
  77. }
  78. var pView = document.getElementById("PSUViewer");
  79. pView.setAttribute("data-result", PSU);
  80. pView.innerHTML = PSU;
  81. if (percent < 0) {
  82. percent = 0;
  83. } else {
  84. percent = Math.round(PSU / call * 100);
  85. }
  86. if (isNaN(percent)) {
  87. percent = 0;
  88. } else if (percent === Infinity) {
  89. percent = 0;
  90. }
  91. if (percent >= 120) {
  92. document.documentElement.style.setProperty(`--my-color`, "gold");
  93. } else if (percent >= 75) {
  94. document.documentElement.style.setProperty(`--my-color`, "green");
  95. } else if (percent >= 1) {
  96. document.documentElement.style.setProperty(`--my-color`, "red");
  97. } else {
  98. document.documentElement.style.setProperty(`--my-color`, "white");
  99. }
  100. var view = document.getElementById("pViewer");
  101. view.setAttribute("data-result", percent + "%");
  102. view.innerHTML = percent + "%";
  103. }
  104.  
  105. function subtractPSU() {
  106. if (PSU < 1) {
  107. PSU = 0;
  108. } else {
  109. PSU = PSU - 1;
  110. }
  111. var pView = document.getElementById("PSUViewer");
  112. pView.setAttribute("data-result", PSU);
  113. pView.innerHTML = PSU;
  114. if (percent < 0) {
  115. percent = 0;
  116. } else {
  117. percent = Math.round(PSU / call * 100);
  118. }
  119. if (isNaN(percent)) {
  120. percent = 0;
  121. } else if (percent === Infinity) {
  122. percent = 0;
  123. }
  124. if (percent >= 120) {
  125. document.documentElement.style.setProperty(`--my-color`, "gold");
  126. } else if (percent >= 75) {
  127. document.documentElement.style.setProperty(`--my-color`, "green");
  128. } else if (percent >= 1) {
  129. document.documentElement.style.setProperty(`--my-color`, "red");
  130. } else {
  131. document.documentElement.style.setProperty(`--my-color`, "white");
  132. }
  133. var view = document.getElementById("pViewer");
  134. view.setAttribute("data-result", percent + "%");
  135. view.innerHTML = percent + "%";
  136. }
  137. </script>
  138. <style type="text/css">
  139. :root {
  140. --my-color: white;
  141. }
  142. html {
  143. background-image: radial-gradient(50% 30% ellipse at center top, #000000 0%, rgba(0, 0, 0, 0) 200%), radial-gradient(60% 50% ellipse at center bottom, #201e40 0%, #000000 150%);
  144. background-attachment: fixed;
  145. }
  146. .text-effect {
  147. overflow: hidden;
  148. position: relative;
  149. filter: contrast(110%) brightness(190%);
  150. }
  151. .neon {
  152. position: relative;
  153. background: black;
  154. color: #100a1c;
  155. }
  156. .neon::before, .neon::after {
  157. content: attr(data-result);
  158. color: white;
  159. filter: blur(0.02em);
  160. position: absolute;
  161. top: 0;
  162. left: 0;
  163. pointer-events: none;
  164. }
  165. .neon::after {
  166. mix-blend-mode: difference;
  167. }
  168.  
  169. .neon2::before, .neon2::after {
  170. content: attr(data-result);
  171. color: white;
  172. filter: blur(0.02em);
  173. position: absolute;
  174. top: 0;
  175. left: 0;
  176. pointer-events: none;
  177. }
  178. .neon2::after {
  179. mix-blend-mode: difference;
  180. }
  181. .gradient, .spotlight {
  182. position: absolute;
  183. top: 0;
  184. left: 0;
  185. bottom: 0;
  186. right: 0;
  187. pointer-events: none;
  188. z-index: 10;
  189. }
  190. .gradient {
  191. background: var(--my-color);
  192. mix-blend-mode: multiply;
  193. }
  194. .spotlight {
  195. animation: light 5s infinite linear;
  196. background: radial-gradient(circle, white, transparent 25%) 0 0 / 25% 25%, radial-gradient(circle, white, black 25%) 50% 50% / 12.5% 12.5%;
  197. top: -100%;
  198. left: -100%;
  199. mix-blend-mode: color-dodge;
  200. }
  201. @keyframes light {
  202. 100% {
  203. transform: translate3d(50%, 50%, 0);
  204. }
  205. }
  206. .neon {
  207. font: 600 200px "Lato", sans-serif;
  208. text-transform: uppercase;
  209. text-align: left;
  210. margin: 0;
  211. }
  212. .neon:focus {
  213. outline: none;
  214. border: 1px dotted white;
  215. }
  216. .neon2 {
  217. font: 600 150px "Lato", sans-serif;
  218. text-transform: uppercase;
  219. text-align: left;
  220. margin: 0;
  221. }
  222. .neon2:focus {
  223. outline: none;
  224. border: 1px dotted white;
  225. }
  226. .neon3 {
  227. font: 600 50px "Lato", sans-serif;
  228. margin: 0;
  229. color: black;
  230. -webkit-text-stroke: 2px SlateBlue;
  231. text-shadow:
  232. 3px 3px 0 #000,
  233. -2px -2px 0 #000,
  234. 2px -2px 0 #000,
  235. -2px 2px 0 #000,
  236. 2px 2px 0 #000;
  237. }
  238. body {
  239. display: flex;
  240. min-height: 100vh;
  241. justify-content: center;
  242. align-content: center;
  243. align-items: center;
  244. }
  245. .fill:hover, .fill:focus {
  246. box-shadow: inset 0 0 0 2em var(--hover);
  247. }
  248. .pulse:hover, .pulse:focus {
  249. animation: pulse 1s;
  250. box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
  251. }
  252. @keyframes pulse {
  253. 0% {
  254. box-shadow: 0 0 0 0 var(--hover);
  255. }
  256. }
  257. .raise1:hover {
  258. box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  259. transform: translateY(-0.25em);
  260. }
  261. .raise2:hover {
  262. box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  263. transform: translateY(-0.25em);
  264. }
  265. .raise1 {
  266. --color: SlateBlue;
  267. --hover: green;
  268. }
  269. .raise2 {
  270. --color: SlateBlue;
  271. --hover: red;
  272. }
  273. button, button:focus{
  274. color: var(--color);
  275. transition: 0.25s;
  276. width: 175px;
  277. background: none;
  278. border: 2px solid;
  279. font: inherit;
  280. line-height: 1;
  281. margin: 0.5em;
  282. padding: 1em 2em;
  283. }
  284. button:hover {
  285. border-color: var(--hover);
  286. color: #fff;
  287. }
  288. </style>
  289. </head>
  290. <body>
  291. <table width="100%">
  292. <tr>
  293. <td colspan="2">
  294. <table align="center">
  295. <tr>
  296. <th>
  297. <div class="text-effect" id="pPosition">
  298. <!-- Select the text in the preview and type in your own -->
  299. <h1 class="neon" id="pViewer" data-result="0%">0%</h1>
  300. <div class="gradient"></div>
  301. <div class="spotlight"></div>
  302. </div>
  303. </th>
  304. </tr>
  305. </table>
  306. </td>
  307. </tr>
  308. <tr>
  309. <th>
  310. <h1 class="neon3">Calls</h1>
  311. </th>
  312. <th>
  313. <h1 class="neon3">PSUs</h1>
  314. </th>
  315. </tr>
  316. <tr>
  317. <th>
  318. <table align="center">
  319. <tr>
  320. <th>
  321. <div class="text-effect">
  322. <!-- Select the text in the preview and type in your own -->
  323. <h1 class="neon2" id="callViewer" data-result="0">0</h1>
  324. </div>
  325. </th>
  326. </tr>
  327. </table>
  328. <div class="buttons">
  329. <button class="raise1" onclick="addCall()">Add Call</button>
  330. <button class="raise2" onclick="subtractCall()">Subtract Call</button>
  331. </div>
  332. </th>
  333. <th>
  334. <table align="center">
  335. <tr>
  336. <th>
  337. <div class="text-effect">
  338. <!-- Select the text in the preview and type in your own -->
  339. <h1 class="neon2" id="PSUViewer" data-result="0">0</h1>
  340. </div>
  341. </th>
  342. </tr>
  343. </table>
  344. <div class="buttons">
  345. <button class="raise1" onclick="addPSU()">Add PSU</button>
  346. <button class="raise2" onclick="subtractPSU()">Subtract PSU</button>
  347. </div>
  348. </th>
  349. </tr>
  350. </table>
  351. </body>
  352. </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!