API tools faq
paste
Advertisement
lyonlyke

PAIR-A-DICE

lyonlyke
Oct 6th, 2018
163
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.62 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en-us">
  4. <head>
  5. <title>Welcome to Pair-A-Dice</title>
  6. <!-- for-mobile-apps -->
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9.  
  10. <!-- //for-mobile-apps -->
  11.  
  12. <!-- Proudly Authored by: Lionel Mertens on October 6, 2018 for all to enjoy -->
  13.  
  14. <style>
  15. body {
  16.  
  17. margin:0 calc(50% - 150px);
  18. background-color:#000;
  19. }
  20.  
  21.  
  22. #canvass {
  23. position:absolute;
  24. width:300px;
  25. height:100%;
  26.  
  27. background:#B22222;
  28. background:-moz-linear-gradient(top, #B22222 0%, #800000 100%);
  29. background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #B22222), color-stop(100%, #800000));
  30. background:-webkit-linear-gradient(top, #B22222 0%, #800000 100%);
  31. background:-o-linear-gradient(top, #B22222 0%, #800000 100%);
  32. background:-ms-linear-gradient(top, #B22222 0%, #800000 100%);
  33. background:linear-gradient(to bottom, #B22222 0%, #800000 100%);
  34. /*filter:progid:DXImageTransform.Mic.social_icrosoft.gradient(startColorstr='#B22222', endColorstr='#800000', GradientType=0);*/
  35.  
  36. margin:0;
  37. box-shadow:inset 0 0 10px #000;
  38. }
  39.  
  40.  
  41.  
  42.  
  43.  
  44. #cushion {
  45.  
  46. display:block;
  47. position:relative;
  48. margin:6px auto 0 auto;
  49. width:220px;
  50. height:482px;
  51. border:10px solid #A0522D;
  52. border-radius:70px;
  53.  
  54.  
  55. }
  56.  
  57.  
  58. #crapsTable {
  59. display:block;
  60. position:relative;
  61. margin:0 auto;
  62. width:200px;
  63. height:462px;
  64. padding:0;
  65. top:0;
  66. background-color:green;
  67. border:10px solid #4C2715;
  68. border-radius:60px;
  69. z-index:1;
  70. }
  71.  
  72. #crapsTable svg#jewl {
  73. position:absolute;
  74. stroke: red;
  75. stroke-width:8;
  76. fill:blue;
  77. z-index:1;
  78. }
  79.  
  80. #felt {
  81. position:relative;
  82. margin:0;
  83. z-index:2;
  84. }
  85.  
  86. #tableEnd {
  87. width:220px;
  88. margin:0;
  89. }
  90.  
  91. #tableEnd p {
  92. font-family:serif;
  93. font-size:14px;
  94. font-weight:lighter;
  95. text:align:left;
  96. color:#EDC39E;
  97. letter-spacing:1px;
  98. }
  99.  
  100. #tableEnd p strong {color:#EB8;}
  101.  
  102.  
  103. #rake {
  104. display:none;
  105. position:absolute;
  106. margin:0 auto;
  107. width:100px;
  108. height:170px;
  109. margin:0;
  110. padding:0;
  111. left:50px;
  112. top:423px;
  113. }
  114.  
  115. #rake svg#raake {
  116. width:100px;
  117. height:170px;
  118. fill:none;
  119. stroke:#282828;
  120. stroke-width:5;
  121. }
  122.  
  123.  
  124. .pair {
  125.  
  126. position:relative;
  127. display:block;
  128. box-sizing:border-box;
  129. padding:0;
  130. width:30px;
  131. height:30px;
  132. border-radius:5px;
  133. z-index:2;
  134. background-color:#FFF;
  135. }
  136.  
  137. .pair svg {
  138.  
  139. position:relative;
  140. display:block;
  141. margin:0 auto;
  142. height:30px;
  143. width:30px;
  144. background-color:#FFF;
  145. border-radius:5px;
  146. fill:#ec7677;
  147.  
  148. }
  149.  
  150.  
  151. svg#A1,svg#A2,svg#A3,svg#A4,svg#A5,svg#A6,
  152. svg#B1,svg#B2,svg#B3,svg#B4,svg#B5,svg#B6 {display:none;fill:#ec7677;}
  153.  
  154.  
  155. #die1 {float:left;margin-left:50px;top:432px;}
  156. #die1 svg {fill:#ec7677;}
  157. #die2 {float:right;margin-right:50px;top:432px;}
  158. #die2 svg {fill:#ec7677;}
  159.  
  160.  
  161.  
  162.  
  163.  
  164. #btn {
  165. position:relative;
  166. display:block;
  167. margin:20px auto;
  168. width:60px;
  169. text-align:center;
  170. background-color:#008080;
  171. border:1px solid #008080;
  172. border-radius:3px;
  173. padding:4px 0;
  174. color:#FFF;
  175. font-family: 'Arial', Helvetica, Sans-Serif;
  176. font-size:14px;
  177. font-weight:300;
  178. text-decoration:none;
  179. top:0px;
  180. letter-spacing:2px;
  181. box-shadow:0px 0px 2px 2px cyan;
  182. top:10px;
  183. }
  184.  
  185. #btn:hover {color:cyan;}
  186. #btn:active {
  187. box-shadow:0px 0px 3px 3px cyan, 0px 0px 2px 2px lime;
  188. color:#FFF;}
  189.  
  190. </style>
  191.  
  192.  
  193. <script>
  194.  
  195. var letters = new Array('A','B');
  196. stopSpin = 'stopped';
  197.  
  198.  
  199. function loadDiceHaHa(){
  200.  
  201. var cubeData = new Array();
  202.  
  203. for(i = 0; i < 2; i++){
  204.  
  205. var letter = letters[i];
  206. var randNum = Math.floor((Math.random()*6)+1);
  207.  
  208. cubeData[i] = letter+randNum;
  209.  
  210. var cube = cubeData[i];
  211.  
  212. document.getElementById(cube).style.setProperty('display','block');
  213. }
  214. cube1 = cubeData[0];
  215. cube2 = cubeData[1];
  216.  
  217. }
  218.  
  219.  
  220.  
  221.  
  222. function tossDice(){
  223.  
  224. if(stopSpin == 'stopped'){
  225. toss = 0;
  226. xTravel = 0;
  227. oldDegree = 0;
  228. stopSpin = setInterval(rollDice,0010);
  229. }
  230. else {return;}
  231. }
  232.  
  233.  
  234.  
  235.  
  236. function resetDice(){
  237.  
  238. document.getElementById('rake').style.setProperty('display','block');
  239.  
  240. rakePath = 0;
  241. stopRake = setInterval(rakeDice,0040);
  242.  
  243. }
  244.  
  245. function rakeDice(){
  246.  
  247. if(rakePath > -430){
  248. var r = 'matrix(1,0,0,1,0,'+rakePath+')';
  249. document.getElementById('raake').style.transform=r;
  250. rakePath = rakePath - 6;
  251. }
  252. else{
  253. clearInterval(stopRake);
  254. stopReset = setInterval(rollBack,0040);
  255.  
  256. }
  257. }
  258.  
  259.  
  260.  
  261.  
  262.  
  263. function rollBack() {
  264.  
  265. if(toss <= 0){
  266.  
  267. for(i = 1; i < 3;i++){
  268.  
  269. if(i < 2){var sideWays = xTravel;}
  270. else{
  271.  
  272. var sideWays = -xTravel;
  273. var r = 'matrix(1,0,0,1,0,'+rakePath+')';
  274. document.getElementById('raake').style.transform=r;
  275. rakePath = rakePath + 6;
  276. }
  277.  
  278. var m = 'matrix(1,0,0,1,'+sideWays+','+toss+')';
  279.  
  280.  
  281.  
  282. var die = 'die'+ i;
  283.  
  284. document.getElementById(die).style.transform=m;
  285.  
  286. }
  287. toss = toss + 6;
  288. }
  289. else {
  290. clearInterval(stopReset);
  291. stopSpin='stopped';
  292. document.getElementById('rake').style.setProperty('display','none');
  293.  
  294. }
  295. }
  296.  
  297.  
  298. function rollDice(){
  299.  
  300. var oldCubes = new Array();
  301. oldCubes[0] = cube1;
  302. oldCubes[1] = cube2;
  303.  
  304. var cubeData = new Array();
  305. var degree = parseInt(+oldDegree + 5);
  306. toss = toss - 6;
  307. xTravel = xTravel + 1;
  308.  
  309. if(degree > 360){clearInterval(stopSpin);setTimeout(resetDice,0800);}
  310.  
  311. else{
  312.  
  313.  
  314. for(i = 0; i < 2; i++){
  315.  
  316.  
  317. if(i > 0){var sideWays = -xTravel;}
  318. else{var sideWays = xTravel;}
  319.  
  320. var rot = 'matrix(1,0,0,1,'+sideWays+','+toss+') rotate('+degree+'deg)';
  321.  
  322. var randNum = Math.floor((Math.random()*6)+1);
  323.  
  324. cubeData[i] = letters[i]+randNum;
  325.  
  326. var cube = cubeData[i];
  327. var oldCube = oldCubes[i];
  328. var die = 'die' + (i+1);
  329.  
  330. document.getElementById(oldCube).style.setProperty('display','none');
  331. document.getElementById(cube).style.setProperty('display','block');
  332. document.getElementById(die).style.transform=rot;
  333. }
  334.  
  335. cube1 = cubeData[0];
  336. cube2 = cubeData[1];
  337. oldDegree = degree;
  338.  
  339. }
  340. }
  341.  
  342. </script>
  343.  
  344.  
  345.  
  346. </head>
  347. <body onload="loadDiceHaHa()">
  348.  
  349. <div id="canvass">
  350.  
  351. <div id="cushion">
  352.  
  353. <div id="crapsTable">
  354.  
  355. <svg id="jewl" width="200px" height="462px" viewBox="0 0 200 462">
  356.  
  357. <defs>
  358. <pattern id="diamond" width="200px" height="462px" patternUnits="userSpaceOnUse">
  359.  
  360. <polyline points="100,20 180,231 100,442 20,231 100,20 180,231">
  361. </polyline>
  362. </pattern>
  363.  
  364. <pattern id="facet1" width="200px" height="462px" patternUnits="userSpaceOnUse">
  365.  
  366. <polyline style="fill:lime;stroke-width:0;" points="100,95 150,231 100,367 50,231 100,95 150,231">
  367. </polyline>
  368. </pattern>
  369.  
  370. <pattern id="outline" width="200px" height="462px" patternUnits="userSpaceOnUse">
  371. <polyline style="fill:transparent;stroke-width:3;stroke:#EB8;" points="100,145 130,231 100,317 70,231 100,145 130,231">
  372. </polyline>
  373. </pattern>
  374.  
  375.  
  376. </defs>
  377.  
  378.  
  379. <rect id="outlay" x="0" y="0" rx="5" ry="5" width="200" height="462" stroke-width="0" fill="url(#diamond)" />
  380.  
  381. <rect id="inlay" x="0" y="0" rx="5" ry="5" width="200" height="462" stroke-width="0" fill="url(#facet1)" />
  382.  
  383. <rect id="outline" x="0" y="0" rx="5" ry="5" width="200" height="462" stroke-width="0" fill="url(#outline)" />
  384.  
  385.  
  386. </svg>
  387.  
  388. <div id="felt">
  389.  
  390.  
  391.  
  392. <div id="rake">
  393.  
  394. <svg id="raake" width="100" height="170" viewBox="0 0 100 170">
  395. <polyline points="0,0 100,0 50,0 50,170 52,170 52,150 48,150 48,170 52,170">
  396.  
  397. </polyline>
  398. </svg>
  399.  
  400. </div>
  401.  
  402.  
  403.  
  404.  
  405.  
  406. <div class="pair" id="die1">
  407.  
  408. <svg id="A1">
  409. <defs>
  410. <pattern id="onedot" width="1" height="1" patternContentUnits="objectBoundingBox">
  411. <circle cx=".50" cy=".50" r=".1" fill="#ec7677" />
  412. </pattern>
  413. </defs>
  414. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#onedot)" />
  415. </svg>
  416.  
  417.  
  418.  
  419. <svg id="A2">
  420. <defs>
  421. <pattern id="twodots" width="1" height="1" patternContentUnits="objectBoundingBox">
  422. <circle cx=".25" cy=".25" r=".1" fill="#ec7677" />
  423. <circle cx=".75" cy=".75" r=".1" fill="#ec7677" />
  424. </pattern>
  425. </defs>
  426. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#twodots)" />
  427. </svg>
  428.  
  429. <svg id="A3">
  430. <defs>
  431. <pattern id="threedots" width="1" height=".33" patternContentUnits="objectBoundingBox">
  432. <circle cx=".50" cy=".165" r=".1" fill="#ec7677" />
  433. </pattern>
  434. </defs>
  435. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#33333" stroke-width="1" fill="url(#threedots)" />
  436. </svg>
  437.  
  438.  
  439.  
  440. <svg id="A4">
  441. <defs>
  442. <pattern id="fourdots" width=".50" height=".50" patternContentUnits="objectBoundingBox">
  443. <circle cx=".250" cy=".250" r=".1" fill="#ec7677" />
  444. </pattern>
  445. </defs>
  446. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#fourdots)" />
  447. </svg>
  448.  
  449. <svg id="A5">
  450. <defs>
  451. <pattern id="fivedots" width="1" height="1" patternContentUnits="objectBoundingBox">
  452. <circle cx=".25" cy=".25" r=".1" fill="#ec7677" />
  453. <circle cx=".75" cy=".25" r=".1" fill="#ec7677" />
  454. <circle cx=".5" cy=".5" r=".1" fill="#ec7677" />
  455. <circle cx=".25" cy=".75" r=".1" fill="#ec7677" />
  456. <circle cx=".75" cy=".75" r=".1" fill="#ec7677" />
  457. </pattern>
  458. </defs>
  459.  
  460. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#fivedots)" />
  461.  
  462. </svg>
  463.  
  464.  
  465.  
  466.  
  467. <svg id="A6">
  468. <defs>
  469. <pattern id="sixdots" width=".50" height=".33" patternContentUnits="objectBoundingBox">
  470. <circle cx=".250" cy=".165" r=".1" fill="#ec7677" />
  471. </pattern>
  472. </defs>
  473. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#sixdots)" />
  474. </svg>
  475.  
  476.  
  477. </div>
  478.  
  479.  
  480.  
  481.  
  482.  
  483.  
  484. <div class="pair" id="die2">
  485.  
  486. <svg id="B1">
  487. <defs>
  488. <pattern id="onedot" width="1" height="1" patternContentUnits="objectBoundingBox">
  489. <circle cx=".50" cy=".50" r=".1" fill="#ec7677" />
  490. </pattern>
  491. </defs>
  492. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#onedot)" />
  493. </svg>
  494.  
  495.  
  496.  
  497. <svg id="B2">
  498. <defs>
  499. <pattern id="twodots" width="1" height="1" patternContentUnits="objectBoundingBox">
  500. <circle cx=".25" cy=".25" r=".1" fill="#ec7677" />
  501. <circle cx=".75" cy=".75" r=".1" fill="#ec7677" />
  502. </pattern>
  503. </defs>
  504. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#twodots)" />
  505. </svg>
  506.  
  507. <svg id="B3">
  508. <defs>
  509. <pattern id="threedots" width="1" height=".33" patternContentUnits="objectBoundingBox">
  510. <circle cx=".50" cy=".165" r=".1" fill="#ec7677" />
  511. </pattern>
  512. </defs>
  513. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#33333" stroke-width="1" fill="url(#threedots)" />
  514. </svg>
  515.  
  516.  
  517.  
  518. <svg id="B4">
  519. <defs>
  520. <pattern id="fourdots" width=".50" height=".50" patternContentUnits="objectBoundingBox">
  521. <circle cx=".250" cy=".250" r=".1" fill="#ec7677" />
  522. </pattern>
  523. </defs>
  524. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#fourdots)" />
  525. </svg>
  526.  
  527. <svg id="B5">
  528. <defs>
  529. <pattern id="fivedots" width="1" height="1" patternContentUnits="objectBoundingBox">
  530. <circle cx=".25" cy=".25" r=".1" fill="#ec7677" />
  531. <circle cx=".75" cy=".25" r=".1" fill="#ec7677" />
  532. <circle cx=".5" cy=".5" r=".1" fill="#ec7677" />
  533. <circle cx=".25" cy=".75" r=".1" fill="#ec7677" />
  534. <circle cx=".75" cy=".75" r=".1" fill="#ec7677" />
  535. </pattern>
  536. </defs>
  537.  
  538. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#fivedots)" />
  539.  
  540. </svg>
  541.  
  542.  
  543.  
  544.  
  545. <svg id="B6">
  546. <defs>
  547. <pattern id="sixdots" width=".50" height=".33" patternContentUnits="objectBoundingBox">
  548. <circle cx=".250" cy=".165" r=".1" fill="#ec7677" />
  549. </pattern>
  550. </defs>
  551. <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" stroke="#333333" stroke-width="1" fill="url(#sixdots)" />
  552. </svg>
  553.  
  554.  
  555. </div>
  556. </div>
  557.  
  558. </div>
  559. <div id="tableEnd">
  560. <button id="btn" onclick="tossDice()">TOSS</button>
  561. <p>To day shalt thou be with me in paradise. <strong>Lu 23:43</strong></p>
  562. </div>
  563. </div>
  564. </div>
  565.  
  566. </body>
  567. </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!