API tools faq
paste
Guest User

Absolutely Courses

a guest
Jan 21st, 2024
62
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!-- Please note that the NoJS gif asset can be found here: https://tenor.com/en-CA/view/rick-roll-nitro-gif-21997352 -->
  3. <html lang = "en">
  4. <head>
  5. <meta charset = "UTF-8">
  6. <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
  7. <title>Absolutely</title>
  8. </head>
  9. <style>
  10. body {
  11. font-family: 'Helvetica', sans-serif;
  12. background-color: #f4f4f4;
  13. margin: 0;
  14. padding: 0;
  15. }
  16. #menu {
  17. background-color: #ffffff;
  18. border: 1px solid #d1d1d1;
  19. border-radius: 10px;
  20. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  21. overflow: hidden;
  22. transition: width 0.3s ease;
  23. }
  24. .menu-item {
  25. padding: 15px;
  26. border-bottom: 1px solid #d1d1d1;
  27. transition: background-color 0.3s ease;
  28. cursor: pointer;
  29. border-radius: 8px;
  30. }
  31. .menu-item:hover {
  32. background-color: #f4f4f4;
  33. }
  34. </style>
  35. <body>
  36. <noscript>
  37. <p>JavaScript is disabled in your browser. We are sorry, so please accept the gift of Discord Nitro as our apology.</p>
  38. <img src="Assets/NoJS.gif" alt="Incoming Nitro" style="width: device-width; height: device-height">
  39. </noscript>
  40. <canvas id="canvas"></canvas>
  41. <script>
  42. const drop_down = [[], ["Team", "Mission"], ["Overview", "Coming Soon"], ["Sponsor", "Donation"]];
  43. const canvas = document.getElementById('canvas');
  44. const ctx = canvas.getContext('2d');
  45. let current_page = 'Home'
  46. canvas.width = window.innerWidth - 10;
  47. canvas.height = window.innerHeight - 10;
  48. function drawRoundedRectangle(ctx, x, y, width, height, cornerRadius, fill, hoverFill, name) {
  49. const previousShadowBlur = ctx.shadowBlur;
  50. const previousShadowColor = ctx.shadowColor;
  51. const previousShadowOffsetX = ctx.shadowOffsetX;
  52. const previousShadowOffsetY = ctx.shadowOffsetY;
  53.  
  54. ctx.fillStyle = fill;
  55. ctx.beginPath();
  56. ctx.moveTo(x + cornerRadius, y);
  57. ctx.lineTo(x + width - cornerRadius, y);
  58. ctx.arcTo(x + width, y, x + width, y + cornerRadius, cornerRadius);
  59. ctx.lineTo(x + width, y + height - cornerRadius);
  60. ctx.arcTo(x + width, y + height, x + width - cornerRadius, y + height, cornerRadius);
  61. ctx.lineTo(x + cornerRadius, y + height);
  62. ctx.arcTo(x, y + height, x, y + height - cornerRadius, cornerRadius);
  63. ctx.lineTo(x, y + cornerRadius);
  64. ctx.arcTo(x, y, x + cornerRadius, y, cornerRadius);
  65. ctx.closePath();
  66.  
  67. ctx.shadowBlur = 10;
  68. ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
  69. ctx.shadowOffsetX = 0;
  70. ctx.shadowOffsetY = 4;
  71.  
  72. if (ctx.isPointInPath(mouseX, mouseY)) {
  73. //ctx.fillStyle = hoverFill;
  74. let ind = -1;
  75. let left = -1;
  76. if(name == 'None'){
  77. return;
  78. } else if(name == 'Home'){
  79. ind = 0;
  80. left = 30;
  81. } else if(name == 'About'){
  82. ind = 1;
  83. left = 230;
  84. } else if(name == 'Courses'){
  85. ind = 2;
  86. left = 340;
  87. } else if(name == 'Donate'){
  88. ind = 3;
  89. left = 475;
  90. }
  91. let arr = drop_down[ind];
  92. let menu_width = 300;
  93. let menu_height = 60 * arr.length + 10 * (arr.length + 1);
  94. ctx.shadowBlur = 10;
  95. ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
  96. ctx.shadowOffsetX = 0;
  97. ctx.shadowOffsetY = 4;
  98. if(ind == 0){
  99. return;
  100. }
  101. drawRoundedRectangle(ctx, left, 100, menu_width, menu_height, 30, '#EFEDEF', '#EFEDEF', 'None');
  102. for(let i = 0; i < arr.length; i++){
  103. drawRoundedRectangle(ctx, left + 10, 110 + 70 * i, menu_width - 20, 60, 30, '#EAE8EA', '#D9D7D9', 'None');
  104. }
  105. } else {
  106. ctx.fillStyle = fill;
  107. }
  108.  
  109. ctx.fill();
  110.  
  111. ctx.shadowBlur = previousShadowBlur;
  112. ctx.shadowColor = previousShadowColor;
  113. ctx.shadowOffsetX = previousShadowOffsetX;
  114. ctx.shadowOffsetY = previousShadowOffsetY;
  115. }
  116.  
  117. function draw() {
  118. canvas.width = window.innerWidth - 10;
  119. canvas.height = window.innerHeight - 10;
  120. ctx.clearRect(0, 0, canvas.width, canvas.height);
  121. ctx.fillStyle = '#F4F2F4';
  122. ctx.fillRect(0, 0, canvas.width, canvas.height);
  123. drawRoundedRectangle(ctx, 20, 20, canvas.width - 40, 80, 40, '#EFEDEF', '#EFEDEF', "None"); // Modified this line
  124. drawRoundedRectangle(ctx, 30, 30, 250, 60, 30, '#74B1B9', '#5C8E96', "Home");
  125. drawRoundedRectangle(ctx, 290, 30, 100, 60, 30, '#EAE8EA', '#D9D7D9', "About");
  126. drawRoundedRectangle(ctx, 340, 30, 125, 60, 30, '#EAE8EA', '#D9D7D9', "Courses");
  127. drawRoundedRectangle(ctx, 475, 30, 110, 60, 30, '#EAE8EA', '#D9D7D9', "Donate");
  128. ctx.fillStyle = '#111111';
  129. ctx.font = '25px Courier New';
  130. ctx.fillText('absolutely not', 50, 67.5);
  131. ctx.fillStyle = '#111111';
  132. ctx.font = '20px Courier New';
  133. ctx.fillText('About', 300, 65);
  134. ctx.fillStyle = '#111111';
  135. ctx.font = '20px Courier New';
  136. ctx.fillText('Courses', 360, 65);
  137. ctx.fillStyle = '#111111';
  138. ctx.font = '20px Courier New';
  139. ctx.fillText('Donate', 495, 65);
  140. requestAnimationFrame(draw);
  141. }
  142.  
  143. let mouseX, mouseY;
  144.  
  145. canvas.addEventListener('mousemove', function(event) {
  146. const rect = canvas.getBoundingClientRect();
  147. mouseX = event.clientX - rect.left;
  148. mouseY = event.clientY - rect.top;
  149. });
  150.  
  151. draw();
  152. </script>
  153. </body>
  154. </html>
  155.  
  156.  
  157. <!--
  158. Future steps for us:
  159. 1. Make the menu items clickable
  160. 2. Make the menu items have a dropdown
  161. 3. Create user accounts
  162. 4. Get users and companies
  163. 5. Rehire Ryan
  164. 6. Write the backend in C++ or Python
  165. 7. Host this on a server
  166. 8. Make the website look good
  167. -->
Advertisement
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!