API tools faq
paste
Advertisement
RageQxeen

Marratu

RageQxeen
Jun 11th, 2018
220
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.91 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <html>
  3. <head>
  4. <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  5. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  6. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
  10. <script src="https://roleplay.chat/jquery.tooltipster.js?v=8"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
  13. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  14. <link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
  15. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  16. <script defer>
  17. window.onload = function() {
  18. const canvas = document.getElementById('stars');
  19. const context = canvas.getContext('2d');
  20. const bcanvas = document.createElement('canvas');
  21. const bcontext = bcanvas.getContext('2d');
  22. bcanvas.height = canvas.height = canvas.parentNode.offsetHeight;
  23. bcanvas.width = canvas.width = canvas.parentNode.offsetWidth;
  24.  
  25. // shitty debounce
  26. window.addEventListener('resize', (event => {
  27. const bounce = 100;
  28. let start = Date.now()
  29. return event => {
  30. if( Date.now() - start > bounce ) {
  31. bcanvas.height = canvas.height = canvas.parentNode.offsetHeight;
  32. bcanvas.width = canvas.width = canvas.parentNode.offsetWidth;
  33. start = Date.now()
  34. }
  35. }
  36. })())
  37.  
  38. let maxSize = 5;
  39. let minSize = 3;
  40. const starmap = Array.from(Array(128), initializr);
  41. maxSize /= 2;
  42. minSize /= 2;
  43.  
  44. drawBackground();
  45. canvas.style.backgroundImage = `url(${bcanvas.toDataURL()})`;
  46. animate();
  47.  
  48. function initializr() {
  49. const seed = Math.random() > 0.1 ?
  50. Math.floor(Math.random()*15000+3000) :
  51. Math.floor(Math.random()*3000 + 500) ; // too many red dwarfs look weird.
  52.  
  53. const {red, green, blue} = colorTemperature2rgb(seed);
  54. const properties = {
  55. x: Math.random()*canvas.width,
  56. y: Math.random()*canvas.height,
  57. size: Math.random()*(maxSize-minSize)+minSize
  58. };
  59. properties.color = `rgba(${red},${green},${blue},${properties.size/maxSize})`;
  60. properties.twinkle = Math.random()* + 1;
  61. return properties;
  62. }
  63.  
  64. function drawBackground() {
  65. const backgroundmap = Array.from(Array(2000), initializr);
  66. for( const star of backgroundmap ) {
  67. bcontext.beginPath();
  68. bcontext.fillStyle = star.color;
  69. bcontext.shadowColor = star.color;
  70. bcontext.shadowBlur = star.twinkle * 10;
  71.  
  72. bcontext.arc(star.x, star.y, star.size/2, 0, Math.PI*2);
  73. bcontext.fill();
  74. bcontext.closePath();
  75. }
  76. }
  77.  
  78. function animate() {
  79. context.clearRect(0, 0, canvas.width, canvas.height);
  80. for( const star of starmap ) {
  81. star.twinkle += (Math.random()*2-1) / 2;
  82. star.twinkle = Math.max(1, Math.min(8, star.twinkle));
  83.  
  84. // so the whole idea was to see if it was faster to draw two squares than
  85. // one circle. it isn't. kinda looks neat though.
  86.  
  87. // this gets me 60fps
  88. context.beginPath();
  89. context.fillStyle = star.color;
  90. context.shadowColor = star.color;
  91. context.shadowBlur = star.twinkle * 10;
  92.  
  93. context.arc(star.x, star.y, star.size/2, 0, Math.PI*2);
  94. context.fill();
  95. context.closePath();
  96.  
  97. // this gets me like 40fps.
  98. // context.save();
  99. // context.beginPath();
  100. // context.translate(star.x - star.size/2, star.y - star.size/2);
  101. // context.fillStyle = star.color;
  102. // context.shadowColor = star.color;
  103. // context.shadowBlur = star.twinkle * 10;
  104. // context.fillRect(0, 0, star.size, star.size);
  105. // context.translate(star.size/2, -star.size/4);
  106. // context.rotate(45 * Math.PI / 180);
  107. // context.fillRect(0, 0, star.size, star.size);
  108. // context.closePath();
  109. // context.restore();
  110. }
  111. requestAnimationFrame(animate);
  112. }
  113.  
  114. // I was too lazy to figure out this on my own.
  115. // shamelessly stolen from here:
  116. // https://github.com/neilbartlett/color-temperature/blob/master/index.js
  117. function colorTemperature2rgb (kelvin) {
  118.  
  119. var temperature = kelvin / 100.0;
  120. var red, green, blue;
  121.  
  122. if (temperature < 66.0) {
  123. red = 255;
  124. } else {
  125. // a + b x + c Log[x] /.
  126. // {a -> 351.97690566805693`,
  127. // b -> 0.114206453784165`,
  128. // c -> -40.25366309332127
  129. //x -> (kelvin/100) - 55}
  130. red = temperature - 55.0;
  131. red = 351.97690566805693+ 0.114206453784165 * red - 40.25366309332127 * Math.log(red);
  132. if (red < 0) red = 0;
  133. if (red > 255) red = 255;
  134. }
  135.  
  136. /* Calculate green */
  137.  
  138. if (temperature < 66.0) {
  139.  
  140. // a + b x + c Log[x] /.
  141. // {a -> -155.25485562709179`,
  142. // b -> -0.44596950469579133`,
  143. // c -> 104.49216199393888`,
  144. // x -> (kelvin/100) - 2}
  145. green = temperature - 2;
  146. green = -155.25485562709179 - 0.44596950469579133 * green + 104.49216199393888 * Math.log(green);
  147. if (green < 0) green = 0;
  148. if (green > 255) green = 255;
  149.  
  150. } else {
  151.  
  152. // a + b x + c Log[x] /.
  153. // {a -> 325.4494125711974`,
  154. // b -> 0.07943456536662342`,
  155. // c -> -28.0852963507957`,
  156. // x -> (kelvin/100) - 50}
  157. green = temperature - 50.0;
  158. green = 325.4494125711974 + 0.07943456536662342 * green - 28.0852963507957 * Math.log(green);
  159. if (green < 0) green = 0;
  160. if (green > 255) green = 255;
  161.  
  162. }
  163.  
  164. /* Calculate blue */
  165.  
  166. if (temperature >= 66.0) {
  167. blue = 255;
  168. } else {
  169.  
  170. if (temperature <= 20.0) {
  171. blue = 0;
  172. } else {
  173.  
  174. // a + b x + c Log[x] /.
  175. // {a -> -254.76935184120902`,
  176. // b -> 0.8274096064007395`,
  177. // c -> 115.67994401066147`,
  178. // x -> kelvin/100 - 10}
  179. blue = temperature - 10;
  180. blue = -254.76935184120902 + 0.8274096064007395 * blue + 115.67994401066147 * Math.log(blue);
  181. if (blue < 0) blue = 0;
  182. if (blue > 255) blue = 255;
  183. }
  184. }
  185.  
  186. return {red: Math.round(red), blue: Math.round(blue), green: Math.round(green)};
  187. }
  188. };
  189. </script>
  190. <style>
  191. html,body {
  192. height: 100%;
  193. width: 100%;
  194. margin: 0;
  195. padding: 0;
  196. background: radial-gradient(rgba(0, 0, 0, 0), #000),
  197. linear-gradient(130deg, #000 0%, #0e1449 37%, #330a2d 51%, #0e1449 67%, #000 100%);
  198. }
  199. canvas {
  200. position: absolute;
  201. }
  202. </style>
  203. </head>
  204. <body>
  205. <html>
  206. <body><style type="text/css">
  207. @import url(https://fonts.googleapis.com/css?family=Great+Vibes|Cookie);
  208.  
  209. html, body {
  210. background: #000;
  211. background-image:url("");
  212. background-size:400px;
  213. background-repeat:no-repeat;
  214. background-position:center bottom;
  215. }
  216.  
  217. ::-webkit-scrollbar-button:vertical:{
  218. background-color: #transparent;}
  219.  
  220. ::-webkit-scrollbar-thumb:vertical {
  221. background-color:#transparent;
  222. height:150px;}
  223.  
  224.  
  225. ::-webkit-scrollbar-thumb:horizontal {
  226. background-color:#transparent;
  227. height:60px;}
  228.  
  229.  
  230. ::-webkit-scrollbar {
  231. height:60px;
  232. width:5px;
  233. background-color:#transparent;}
  234.  
  235. #image {
  236. width: 600px;
  237. margin: 0px;
  238. border: none;
  239. height: 100%;
  240. background-color:transparent;
  241. position: absolute;
  242. right: 0%;
  243. bottom: 0%;
  244. background-image:url("http://i.picpar.com/eJEc.png");
  245. background-repeat:no-repeat;
  246. background-position: bottom right;
  247. background-size: 100%;
  248. }
  249.  
  250. .header{
  251. position:absolute;
  252. width:500px;
  253. background:#transparent;
  254. height:150px;
  255. overflow:hidden;
  256. font-family: 'Great Vibes', cursive;
  257. font-size: 50px;
  258. font-weight:lighter;
  259. font-style:none;
  260. color:#9f45b0;
  261. letter-spacing: 0px;
  262. text-transform:none;
  263. text-align:center;
  264. }
  265.  
  266. #content {
  267. background-color:#ffe4f2;
  268. width: 550px;
  269. height: 350px;
  270. margin:auto;
  271. position: absolute;
  272. font-family: 'Cookie', cursive;
  273. font-size: 22px;
  274. left: 15%;
  275. bottom: 11%;
  276. z-index:1;
  277. border: #000000 solid 1px;
  278. }
  279.  
  280. #image2 {
  281. width: 400px;
  282. margin: 0px;
  283. border: none;
  284. height: 600px;;
  285. background-color:transparent;
  286. position: absolute;
  287. left: 4%;
  288. bottom: 15%;
  289. background-image:url("http://i.picpar.com/BbEc.png");
  290. background-repeat:no-repeat;
  291. background-position: bottom right;
  292. background-size: 100%;
  293. }
  294.  
  295. h1 {
  296. font-family: 'Great Vibes', cursive;
  297. font-size: 30px;
  298. line-height: 22px;
  299. color:#7F61FF;
  300. text-align: center;
  301. letter-spacing:1px;
  302. word-spacing: 2px;
  303. text-decoration:none!important;
  304. }
  305.  
  306. #navi1 {position: absolute;
  307. left: 20%;
  308. top: 0%;}
  309.  
  310. #navi1 a {background-color: #600;
  311. background:url('http://i.picpar.com/gcEc.png')
  312. center center no-repeat;;
  313. background-size: 100%;
  314. display: inline-block;
  315. height: 150px;
  316. width: 150px;
  317. border: 0px solid #000;}
  318.  
  319. #navi2 {position: absolute;
  320. left: 3%;
  321. bottom: 25%;}
  322.  
  323. #navi2 a {background-color: #600;
  324. background:url('https://t4.rbxcdn.com/8cee66e82cf318bf49d5a8aed10f91f8')
  325. center center no-repeat;;
  326. background-size: 100%;
  327. display: inline-block;
  328. height: 150px;
  329. width: 150px;
  330. border: 0px solid #000;}
  331.  
  332. #navi3 {position: absolute;
  333. right: 30%;
  334. top: 3%;}
  335.  
  336. #navi3 a {background-color: #600;
  337. background:url('http://i.picpar.com/dcEc.png')
  338. center center no-repeat;;
  339. background-size: 100%;
  340. display: inline-block;
  341. height: 150px;
  342. width: 150px;
  343. border: 0px solid #000;}
  344.  
  345. #navi4 {position: absolute;
  346. right: 35%;
  347. bottom: 40%;}
  348.  
  349. #navi4 a {background-color: #600;
  350. background:url('http://i.picpar.com/ecEc.png')
  351. center center no-repeat;;
  352. background-size: 100%;
  353. display: inline-block;
  354. height: 150px;
  355. width: 150px;
  356. border: 0px solid #000;}
  357.  
  358. .text{
  359. height: 200px;
  360. width: 400px;
  361. margin: 20px;
  362. text-align: justify;
  363. font-family: dosis;
  364. font-size: 12px;
  365. color: #8a8790;
  366. overflow: auto;
  367. }
  368.  
  369. .credit{
  370. position: fixed;
  371. bottom: 0px;
  372. right: 2px;
  373. height: 25px;
  374. width: 25px;
  375. line-height: 15px;
  376. font-size: 10px;
  377. color: #000;
  378. text-align: center;
  379. font-family: roboto;
  380. }
  381.  
  382. i{color: #00076f;}
  383. b{color: #44008b;}
  384. a{color: #9f45b0;}
  385.  
  386. </style>
  387.  
  388. <div class="credit" title="By RageQxeen">♛</div>
  389.  
  390. <div id="image"></div>
  391. <div id="image2"></div>
  392.  
  393. <div class="header" style="top: 27%; left: 22%;">The Pet of the Heavens</div>
  394.  
  395.  
  396. <div id="content">
  397. <div style="width: 550px; height: 350px; overflow-y: hidden;">
  398.  
  399. <a name="one"></a>
  400. <div style="width: 550px; height: 350px; overflow: auto;" align="center">
  401. <span style="float:left;"><b>Name</b></span><span style="float:right;">Space Kitty</span><br>
  402. <span style="float:left;"><b>True Name</b></span><span style="float:right;">Marratu</span><br>
  403. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="None">Hover</a>.</span><br><br>
  404. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Female</span><br>
  405. <span style="float:left;"><b>Birth Date</b></span><span style="float:right;">[N/A]</span><br>
  406. <span style="float:left;"><b>Height</b></span><span style="float:right;">162 cm</span><br>
  407. <span style="float:left;"><b>Weight</b></span><span style="float:right;">49 kg</span><br><br>
  408. <span style="float:left;"><b>Orientation</b></span><span style="float:right;">[N/A]</span><br>
  409. <span style="float:left;"><b>Relationship</b></span><span style="float:right;">None</span><br><br>
  410. <span style="float:left;"><b>Species</b></span><span style="float:right;">Celestial Beast</span><br>
  411. <span style="float:left;"><b>Eyes</b></span><span style="float:right;">Blue Stars</span><br>
  412. <span style="float:left;"><b>Hair</b></span><span style="float:right;">Turquoise</span><br>
  413. </div>
  414.  
  415. <a name="two"></a>
  416. <div style="width: 550px; height: 350px; overflow: auto;" align="center">
  417. <br><br>
  418. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  419. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  420. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  421. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  422. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  423. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  424. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a><br><br>
  425.  
  426. <h1>The Naughty Files</h1>
  427.  
  428. <b>Measurements</b>: 37B-24W-37H<br>
  429. <b>Kinks</b>: N/A<br><br>
  430.  
  431. <a target="_blank" href=""><img style="border-radius: 20%" src="" align="center" height="100" width="100"></a>
  432.  
  433. <a target="_blank" href=""><img style="border-radius: 20%" src="" align="center" height="100" width="100"></a>
  434.  
  435. </div>
  436.  
  437. <a name="three"></a>
  438. <div style="width: 550px; height: 350px; overflow: auto;" align="center">
  439. <br><br>
  440. Created by an unknown God, she rested among the stars and watched the multiverse grow, mature and come to fruiation before she lost her way. It is not known how she came to be within a universe, only that she is there, and she is unaware of where she came from. Time will reveal more, as she is now bound by it's continuation within the laws set by the God that created her.
  441. </div>
  442.  
  443. <a name="four"></a>
  444. <div style="width: 550px; height: 350px; overflow: auto;" align="center">
  445. <h1>OOC</h1>
  446. <li> IC =/= OOC.<br>
  447. <li> Smut is 99.99999% more likely with story, but I am not against it otherwise.<br>
  448. <li> PM Friendly.<br>
  449. <li>Female Typist whom is taken IRL.<br>
  450. <li>9 years RP experience, 6 on RPC.<br>
  451. <li> Discord/Skype is earned.<br>
  452. <li> Any questions, comments or concerns? Please don't hesitate to PM me.<br>
  453. </div>
  454. </div>
  455. </div>
  456. <canvas id="stars"></canvas>
  457.  
  458. <div id="navi1"><a href="#one"></a></div>
  459. <div id="navi2"><a href="#two"></a></div>
  460. <div id="navi3"><a href="#three"></a></div>
  461. <div id="navi4"><a href="#four"></a></div>
  462.  
  463. </body>
  464. </html>
  465. </body>
  466. </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!