API tools faq
paste
HellaBlind

Queen code

HellaBlind
Dec 17th, 2019 (edited)
134
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.75 KB | None | 0 0
raw download clone embed print report
  1. // This is where the Java box starts
  2.  
  3. const STAR_DATA = generateStarData();
  4.  
  5.  
  6. function createStar({x, y}, index, debug) {
  7. const starInstance = document.createElementNS("http://www.w3.org/2000/svg", 'g');
  8. starInstance.classList.add('star-instance');
  9. starInstance.setAttribute('transform', `translate(${x} ${y})`);
  10.  
  11. const radius = debug ? 10 : 1;
  12. const starReference = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
  13.  
  14. starReference.setAttribute('r', radius);
  15. starReference.classList.add('star');
  16.  
  17. const delay = index * 100 + 500 * Math.random();
  18.  
  19. const duration = 3000 + Math.random() * 4000;
  20. const brightness = 0.7 + Math.random() * 0.3;
  21.  
  22.  
  23. starReference.style.setProperty('--star-animation-delay', `${delay}ms`);
  24. starReference.style.setProperty('--star-animation-duration', `${duration}ms`);
  25. starReference.style.setProperty('--star-animation-glow-duration', `10000ms`);
  26. starReference.style.setProperty('--star-brightness', `${brightness}`);
  27.  
  28. starInstance.appendChild(starReference);
  29. return starInstance;
  30. }
  31.  
  32.  
  33.  
  34. function createNightSky({container, debug, starReference}) {
  35. STAR_DATA.forEach((data, index) => {
  36. const star = createStar(data, index, debug);
  37. container.appendChild(star);
  38. })
  39. }
  40.  
  41. const starGroup = document.getElementById('starGroup');
  42.  
  43. createNightSky({container: starGroup, data: STAR_DATA});
  44.  
  45.  
  46. // this is here to make the actual code more accessible- will be avaialble at the top through hoisting
  47. function generateStarData() {
  48. return [ {
  49. "x": 1596.973448245577,
  50. "y": 578.4171532781027
  51. },
  52. {
  53. "x": 624.1864228031227,
  54. "y": 227.26089443712394
  55. },
  56. {
  57. "x": 195.53121286639285,
  58. "y": 830.2913557403084
  59. },
  60. {
  61. "x": 654.6718140243884,
  62. "y": 357.55987380696473
  63. },
  64. {
  65. "x": 1270.262628273585,
  66. "y": 556.1937909655104
  67. },
  68. {
  69. "x": 1874.1099861074613,
  70. "y": 537.8371896254555
  71. },
  72. {
  73. "x": 227.66702184447672,
  74. "y": 933.5058204022108
  75. },
  76. {
  77. "x": 849.1452025050253,
  78. "y": 753.8239408253662
  79. },
  80. {
  81. "x": 162.39455177885364,
  82. "y": 371.44565705415175
  83. },
  84. {
  85. "x": 536.8391119975487,
  86. "y": 471.438417884515
  87. },
  88. {
  89. "x": 1700.8735348500447,
  90. "y": 811.1546053915013
  91. },
  92. {
  93. "x": 1313.5764431918108,
  94. "y": 177.0490832716154
  95. },
  96. {
  97. "x": 1380.7843468122915,
  98. "y": 705.8869453492149
  99. },
  100. {
  101. "x": 1611.2247060049194,
  102. "y": 121.86836681480617
  103. },
  104. {
  105. "x": 416.4980895593402,
  106. "y": 100.97360726285487
  107. },
  108. {
  109. "x": 1605.3045718862004,
  110. "y": 568.3522232795161
  111. },
  112. {
  113. "x": 1872.2274578638203,
  114. "y": 353.43127251104664
  115. },
  116. {
  117. "x": 609.8554307846044,
  118. "y": 933.4880549032565
  119. },
  120. {
  121. "x": 738.2998430349312,
  122. "y": 586.219408066047
  123. },
  124. {
  125. "x": 218.99173543432494,
  126. "y": 990.9343797547301
  127. },
  128. {
  129. "x": 1731.2780427178832,
  130. "y": 288.2617875993787
  131. },
  132. {
  133. "x": 536.515464451623,
  134. "y": 704.4454412867656
  135. },
  136. {
  137. "x": 1231.5398910809145,
  138. "y": 932.9406357890622
  139. },
  140. {
  141. "x": 1767.7240418782917,
  142. "y": 377.4978308404437
  143. },
  144. {
  145. "x": 60.763730956239215,
  146. "y": 180.0428524529891
  147. },
  148. {
  149. "x": 504.66745458498474,
  150. "y": 822.3694625674929
  151. },
  152. {
  153. "x": 190.57438689705154,
  154. "y": 850.4664376865585
  155. },
  156. {
  157. "x": 1226.602311895454,
  158. "y": 166.00523960305534
  159. },
  160. {
  161. "x": 28.252940020621065,
  162. "y": 95.72025749659052
  163. },
  164. {
  165. "x": 776.7402174706963,
  166. "y": 182.0857667170639
  167. },
  168. {
  169. "x": 1661.4365255203802,
  170. "y": 9.199715819379062
  171. },
  172. {
  173. "x": 1791.3643331034255,
  174. "y": 137.16432244657108
  175. },
  176. {
  177. "x": 264.2306334627267,
  178. "y": 179.96747301355498
  179. },
  180. {
  181. "x": 144.12707359609112,
  182. "y": 419.5856575392614
  183. },
  184. {
  185. "x": 1562.3921330416733,
  186. "y": 727.132203970914
  187. },
  188. {
  189. "x": 1477.836836260912,
  190. "y": 772.3942484736992
  191. },
  192. {
  193. "x": 740.0053875532842,
  194. "y": 808.3813934419943
  195. },
  196. {
  197. "x": 1791.0710885194505,
  198. "y": 786.1241026349015
  199. },
  200. {
  201. "x": 645.5653888153922,
  202. "y": 736.4977734546056
  203. },
  204. {
  205. "x": 1384.4168196732044,
  206. "y": 829.9732607536924
  207. },
  208. {
  209. "x": 163.6915577740048,
  210. "y": 387.589934948666
  211. },
  212. {
  213. "x": 1030.752807909637,
  214. "y": 986.8638306532176
  215. },
  216. {
  217. "x": 1547.5697556980297,
  218. "y": 738.4827189459013
  219. },
  220. {
  221. "x": 911.6204926165387,
  222. "y": 288.19639143783735
  223. },
  224. {
  225. "x": 436.2726947153002,
  226. "y": 156.52925590335153
  227. },
  228. {
  229. "x": 470.90493070521467,
  230. "y": 508.3648167337842
  231. },
  232. {
  233. "x": 570.7832681150248,
  234. "y": 90.46864903266116
  235. },
  236. {
  237. "x": 286.4828739132141,
  238. "y": 331.890507980424
  239. },
  240. {
  241. "x": 839.1294725722154,
  242. "y": 459.50407507204005
  243. },
  244. {
  245. "x": 918.5794503208701,
  246. "y": 382.36947443013645
  247. },
  248. {
  249. "x": 978.32693336608,
  250. "y": 233.22793996980872
  251. },
  252. {
  253. "x": 1942.6378792746775,
  254. "y": 775.2262931872873
  255. },
  256. {
  257. "x": 183.57275380766546,
  258. "y": 490.23746673496936
  259. },
  260. {
  261. "x": 1870.1346895593947,
  262. "y": 5.340554080379922
  263. },
  264. {
  265. "x": 77.8455233825599,
  266. "y": 991.3432482687949
  267. },
  268. {
  269. "x": 1150.8916475486242,
  270. "y": 734.8173445629565
  271. },
  272. {
  273. "x": 1267.778063245026,
  274. "y": 76.46690911117871
  275. },
  276. {
  277. "x": 412.5649555878659,
  278. "y": 388.8894946239125
  279. },
  280. {
  281. "x": 1963.9488881788552,
  282. "y": 332.86133487469607
  283. },
  284. {
  285. "x": 558.0428440555471,
  286. "y": 555.534536568679
  287. },
  288. {
  289. "x": 1800.204256032283,
  290. "y": 606.9161588457371
  291. },
  292. {
  293. "x": 446.76135290536666,
  294. "y": 184.04218476261437
  295. },
  296. {
  297. "x": 722.4139720353855,
  298. "y": 166.0382370352249
  299. },
  300. {
  301. "x": 385.7923791367068,
  302. "y": 522.5903196230092
  303. },
  304. {
  305. "x": 280.86655197312814,
  306. "y": 306.91336158262294
  307. },
  308. {
  309. "x": 929.575833643574,
  310. "y": 276.84878095307374
  311. },
  312. {
  313. "x": 1576.1257876455063,
  314. "y": 642.0639364621978
  315. },
  316. {
  317. "x": 272.42012120065783,
  318. "y": 303.4312556623606
  319. },
  320. {
  321. "x": 1308.241904521537,
  322. "y": 777.277639109069
  323. },
  324. {
  325. "x": 1798.34651340239,
  326. "y": 728.9710737899151
  327. },
  328. {
  329. "x": 1034.1455081792458,
  330. "y": 866.6111552206579
  331. },
  332. {
  333. "x": 191.3789885191175,
  334. "y": 26.837480326682428
  335. },
  336. {
  337. "x": 267.4427480940049,
  338. "y": 435.20349308803463
  339. },
  340. {
  341. "x": 169.5951738454462,
  342. "y": 16.116964765581223
  343. },
  344. {
  345. "x": 1304.4617878663903,
  346. "y": 300.4144440678036
  347. },
  348. {
  349. "x": 1057.5827335967429,
  350. "y": 423.5485979150542
  351. },
  352. {
  353. "x": 914.283134053933,
  354. "y": 79.1276015573803
  355. },
  356. {
  357. "x": 1514.105232679034,
  358. "y": 4.439816438432498
  359. },
  360. {
  361. "x": 1440.5716820429939,
  362. "y": 757.3441195933785
  363. },
  364. {
  365. "x": 301.8884359195071,
  366. "y": 879.0979664055392
  367. }]
  368. };
  369.  
  370. // This is where the Java box ends
  371.  
  372.  
  373.  
  374. /* This is where the CSS box starts */
  375.  
  376.  
  377.  
  378. .stars {
  379. position: absolute;
  380. top: 0;
  381. left: 0;
  382. right: 0;
  383. bottom: 0;
  384. }
  385.  
  386. body {
  387. margin: 0;
  388. background-color: #202840;
  389. background-repeat: repeat;
  390. overflow: hidden;
  391. }
  392.  
  393. #btnDebug {
  394. position: fixed;
  395. z-index:1;
  396. top: 10px;
  397. left: 10px;
  398. }
  399.  
  400. .star {
  401. fill: white;
  402. animation: pulse var(--star-animation-duration, 1000ms) infinite backwards,
  403. glowing var(--star-animation-glow-duration, 1000ms) infinite alternate backwards;
  404. animation-delay: var(--star-animation-delay, 0);
  405. }
  406.  
  407. #starGroup {
  408. --dur: 100ms;
  409. }
  410.  
  411. @keyframes pulse {
  412. 0% {
  413. transform: scale3d(1, 1, 1);
  414. }
  415.  
  416. 30% {
  417. transform: scale3d(1.2, 1.2, 1.2);
  418. }
  419.  
  420. 70% {
  421. transform: scale3d(0.2, 0.2, 0.2);
  422. }
  423.  
  424. 100% {
  425. transform: scale3d(1, 1, 1);
  426. }
  427. }
  428.  
  429.  
  430. .statbox1 {
  431. position: relative;
  432. border: 4px solid #3E010A;
  433. width: 75px;
  434. top: -529px;
  435. left: 106px;
  436. height: 390px;
  437. outline: px dashed #fff;
  438. outline-offset: -10px;
  439. background-image: linear-gradient(to top, rgba(123, 133, 204), rgba(80, 111, 172));
  440. font-family: 'Aldrich';
  441. color: #000;
  442. font-size: 12px;
  443. overflow: auto;
  444. text-align: center;
  445. padding: 10px;
  446. }
  447.  
  448.  
  449.  
  450. .statbox2 {
  451. position: relative;
  452. border: 4px solid #3E010A;
  453. width: 75px;
  454. bottom: 959px;
  455. left: 206px;
  456. height: 390px;
  457. outline: px dashed #fff;
  458. outline-offset: -10px;
  459. background-image: linear-gradient(to top, rgba(123, 133, 204), rgba(80, 111, 172));
  460. font-family: 'Aldrich';
  461. color: #000;
  462. font-size: 10px;
  463. overflow: auto;
  464. text-align: center;
  465. padding: 10px;
  466. }
  467.  
  468. .statbox3 {
  469. position: relative;
  470. border: 4px solid #3E010A;
  471. width: 75px;
  472. top: -1365px;
  473. left: 306px;
  474. height: 390px;
  475. outline: px dashed #fff;
  476. outline-offset: -10px;
  477. background-image: linear-gradient(to top, rgba(123, 133, 204), rgba(80, 111, 172));
  478. font-family: 'Aldrich';
  479. color: #000;
  480. font-size: 11px;
  481. overflow: hidden;
  482. text-align: center;
  483. padding: 10px;
  484. }
  485.  
  486. .statbox4 {
  487. position: relative;
  488. border: 4px solid #3E010A;
  489. width: 75px;
  490. top: -1795px;
  491. left: 406px;
  492. height: 390px;
  493. outline: px dashed #fff;
  494. outline-offset: -10px;
  495. background-image: linear-gradient(to top, rgba(123, 133, 204), rgba(80, 111, 172));
  496. font-family: 'Aldrich';
  497. color: #000;
  498. font-size: 11px;
  499. overflow: hidden;
  500. text-align: center;
  501. padding: 10px;
  502. }
  503.  
  504. .element::-webkit-scrollbar { width: 0 !important }
  505.  
  506. ::-webkit-scrollbar {
  507. width: 0px;
  508. height: 0px;
  509. background:#3E010A;
  510. }
  511.  
  512. ::-webkit-scrollbar-thumb {
  513. background-color:#3E010A;
  514. -webkit-border-radius: 0px;
  515. border-radius: 0px;
  516. }
  517.  
  518.  
  519. #name {
  520. z-index: 40;
  521. position: absolute;
  522. left: -150px;
  523. top: -5px;
  524. margin: auto;
  525. background: #999;
  526. width: 700px;
  527. font-family: 'Aldrich';
  528. font-size: 80px;
  529. background: url(https://media.giphy.com/media/3ohzdVKKcOOUQfcQWk/giphy.gif) 110px 260px repeat;
  530. -webkit-text-fill-color: transparent;
  531. -webkit-background-clip: text;
  532. display: block;
  533. text-align: center;
  534. letter-spacing: 6px;
  535. -webkit-transition: opacity 2s linear;
  536. }
  537.  
  538. #quote {
  539. z-index: 40;
  540. position: absolute;
  541. left: 170px;
  542. top: 530px;
  543. margin: auto;
  544. background: #999;
  545. width: 700px;
  546. font-family: 'Aldrich';
  547. font-size: 50px;
  548. background: url(https://media.giphy.com/media/3ohzdVKKcOOUQfcQWk/giphy.gif) 145px 260px repeat;
  549. -webkit-text-fill-color: transparent;
  550. -webkit-background-clip: text;
  551. display: block;
  552. text-align: center;
  553. letter-spacing: 6px;
  554. -webkit-transition: opacity 2s linear;
  555. }
  556.  
  557. hr {
  558. border: 0;
  559. height: 1px;
  560. background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000, rgba(1, 0, 0, 0));
  561. }
  562.  
  563. .tooltip {
  564. position: relative;
  565. display: inline-block;
  566. border-bottom: px solid black;
  567. }
  568.  
  569. .tooltip .tooltiptext {
  570. visibility: hidden;
  571. width: 70px;
  572. font-family: Aldrich;
  573. font-size: 12px;
  574. background-color: #202840;
  575. color: #fff;
  576. text-align: center;
  577. border-radius: 6px;
  578. padding: 5px 0;
  579. position: absolute;
  580. z-index: 1;
  581. bottom: 100%;
  582. left: 50%;
  583. margin-left: -35px;
  584. }
  585.  
  586. .tooltip .tooltiptext::after {
  587. content: "";
  588. position: absolute;
  589. top: 100%;
  590. left: 50%;
  591. margin-left: -5px;
  592. border-width: 5px;
  593. border-style: solid;
  594. border-color: #202840 transparent transparent transparent;
  595. }
  596.  
  597. .tooltip:hover .tooltiptext {
  598. visibility: visible;
  599. }
  600.  
  601.  
  602. /* Start http://www.cursors-4u.com */ * {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur121.cur), auto !important;} /* End http://www.cursors-4u.com */
  603.  
  604. audio {
  605. width: 100px;
  606. height: 54px;
  607. opacity: 0;
  608. border: 4px solid #3E010A;
  609. top: 459px;
  610.  
  611. }
  612.  
  613.  
  614. .image {
  615. background-image: url(https://cdn.discordapp.com/attachments/580312013889339393/656644084026310665/finished.png);
  616. background-size: 35%;
  617. position:absolute;
  618. bottom: 90px;
  619. left: 50px;
  620. width: 750px;
  621. height: 460px;
  622. filter: brightness(100%) saturate(120%) contrast(60%);
  623. border: 4px solid #3E010A;
  624. outline: 0px solid #fff;
  625. outline-offset: -10px;
  626. background-repeat: no-repeat;
  627. background-position: bottom right;
  628.  
  629.  
  630. /* This is where the CSS box ends */
  631.  
  632.  
  633. <!-- This is where the HTML box starts -->
  634.  
  635. <link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet'>
  636. <link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet'>
  637. <div id="name">Queen</div>
  638. <div id="quote"><b>look to the stars...</b></div>
  639.  
  640. <svg id="svgCanvas" viewbox="0 0 2000 1000" preserveaspectratio="xMinYMin slice" width="100%" height="100%" >
  641. <g id="starGroup"></g>
  642.  
  643. </svg>
  644.  
  645.  
  646. <div class="image"></div>
  647.  
  648.  
  649.  
  650. <div class= "statbox1"><br>Name
  651. <hr>
  652. Age
  653. <hr>
  654. Species
  655. <hr>
  656. Gender
  657. <hr>
  658. Orientation
  659. <hr>
  660. Paramour
  661. <hr>
  662. Occupation
  663. <hr>
  664. Rank
  665. <hr>
  666. Height
  667. <hr>
  668. Weight
  669. <hr>
  670. Alignment
  671. <hr>
  672. Ability
  673. <hr>
  674. Held Item
  675. <hr>
  676. Trainer
  677. <hr>
  678. ▼ ▼<br><br>
  679. <u>Moveset</u><p>
  680. Move 1<br>
  681. Move 2<br>
  682. Move 3<br>
  683. Move 4 <br>
  684. Move 5 <br>
  685. Move 6<p>
  686.  
  687. <div id="button"style = " position: absolute; font-size: 15px; color: #7783C9;background-color: #202840;top: 5=459px; left: 34px; border: 2px solid #202840; border-radius: 50%; width: 20px;">♫</div>
  688. <audio src="https://www.dropbox.com/s/7ufxoqzk7xeckxe/09%20Swing%21%20Pendulum%20of%20Souls.mp3?dl=1" controls=""> <embed src="/music/good_enough.mp3" width="50" height="90" loop="false" ="false"=""> </audio>
  689.  
  690.  
  691. </div>
  692.  
  693.  
  694. <div class= "statbox2"><b>HISTORY</b></u><hr>Ever has man coveted knowledge, and none more so than that of his fate. Thus did he labor to master the skill of foresight—but initial efforts bore little fruit. That is, until he looked to the stars above, which foretell the coming seasons, and learned to read the heavens.Though this gift is known today as astrology, some have found ways to not only read the stars, but to write their movements as well.<p> By attuning their l energies to that of constellations, they learned to wield magicks with heretofore unseen properties. Thus was astromancy born—a new form of magick which grants its users power over fate. Employing a star globe and divining deck in their miraculous deeds, fortune always smiles upon these masters of arcana.<p>
  695.  
  696. Kalypso is but one of the few who have learned such magic, said to be blessed by Cosmog of Alola, their dedication to perfecting this craft knows very few limits. Still in it's infancy, the one known as Kalypso only seeks to further unlock the mysteries of this magic and to harness it's full potential. Seated within the Magician's Court, seated as Queen of Hearts in the Scala Reale, Kalypso seeks to share this new craft with others who seek to seize control of fate.</div>
  697. <div class= "statbox3"><b>ALLIES</b><hr><br><br>
  698. <a target="_blank" href="https://www.youtube.com/watch?v=hB8S6oKjiw8"><div class="tooltip"><img src="https://media.giphy.com/media/GDp7LycxkT3LG/giphy.gif" alt="" width="40" height="49" /><span class="tooltiptext">Hover blurb</span></a></div>
  699. <a target="_blank" href="https://www.youtube.com/watch?v=hB8S6oKjiw8"><div class="tooltip"><img src="https://media.giphy.com/media/GDp7LycxkT3LG/giphy.gif" alt="" width="40" height="49" /><span class="tooltiptext">Hover blurb</span></a></div>
  700. <a target="_blank" href="https://www.youtube.com/watch?v=hB8S6oKjiw8"><div class="tooltip"><img src="https://media.giphy.com/media/GDp7LycxkT3LG/giphy.gif" alt="" width="40" height="49" /><span class="tooltiptext">Hover blurb<br>
  701. </span></a></div>
  702. <a target="_blank" href="https://www.youtube.com/watch?v=hB8S6oKjiw8"><div class="tooltip"><img src="https://media.giphy.com/media/GDp7LycxkT3LG/giphy.gif" alt="" width="40" height="49" /><span class="tooltiptext">Hover blurb</span></a></div>
  703. <a target="_blank" href="https://www.youtube.com/watch?v=hB8S6oKjiw8"><div class="tooltip"><img src="https://media.giphy.com/media/GDp7LycxkT3LG/giphy.gif" alt="" width="40" height="49" /><span class="tooltiptext">Hover blurb</span></div>
  704. <div class="tooltip"><img src="https://media.giphy.com/media/GDp7LycxkT3LG/giphy.gif" alt="" width="40" height="49" /><span class="tooltiptext">Hover blurb</span></a></div><br><br>
  705. </div>
  706. <div class= "statbox4"><b>OOC</b><hr><br>
  707. 01. OOC rule one here<p>
  708. 02. OOC rule two here<p>
  709. 03. OOC rule three here<p>
  710. 04. OOC rule four here<p>
  711. 05. OOC rule five here<p>
  712. 06. OOC rule six here<p>
  713. 07. OOC rule seven here<p>
  714. 08. OOC rule eight here<p>
  715. 09. OOC rule nine here<p>
  716. 10. OOC rule ten here
  717.  
  718. <!-- Please don't remove credit! -->
  719. <a target="_blank" href="https://roleplay.chat/profile.php?user=none"><div class="tooltip">Credit<span class="tooltiptext">Coded by none.<br>
  720. Say less. Care more.</span></a>
  721.  
  722.  
  723.  
  724. </div>
  725.  
  726.  
  727.  
  728. <!-- This is where the HTML box ends -->
Add Comment
Please, Sign In to add comment
Public Pastes
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!