API tools faq
paste
Advertisement
sourav8256

Untitled

sourav8256
Aug 4th, 2023 (edited)
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.99 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  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>Bootstrap UI with Orange Canvas</title>
  8. <!-- Link Bootstrap CSS -->
  9. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  10. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  11. <style>
  12. body, html {
  13. margin: 0;
  14. padding: 0;
  15. }
  16.  
  17. canvas {
  18. display: block;
  19. }
  20. i {
  21. margin : 10px;
  22. }
  23. .draggable {
  24. position: absolute;
  25. width: 100px;
  26. height: 50px;
  27. background-color: blue;
  28. color: white;
  29. text-align: center;
  30. line-height: 50px;
  31. cursor: grab;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <!-- Navigation Bar -->
  37. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  38. <div class="container">
  39. <a class="navbar-brand" href="#">Your Brand</a>
  40. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  41. <span class="navbar-toggler-icon"></span>
  42. </button>
  43. <div class="collapse navbar-collapse" id="navbarNav">
  44. <ul class="navbar-nav">
  45. <li class="nav-item active">
  46. <a class="nav-link" href="#">Home</a>
  47. </li>
  48. <li class="nav-item">
  49. <a class="nav-link" href="#">About</a>
  50. </li>
  51. <li class="nav-item">
  52. <a class="nav-link" href="#">Contact</a>
  53. </li>
  54. </ul>
  55. </div>
  56. </div>
  57. </nav>
  58.  
  59. <!-- Main Content with Two Horizontal Parts -->
  60. <div class="container-fluid">
  61. <div class="row">
  62. <!-- Left Side -->
  63. <div class="row">
  64. <!-- Left Side -->
  65. <div class="col-md-2 bg-light">
  66. <!-- Content for the left side (20% width) -->
  67. <div class="py-3 px-2">
  68. <div class="d-flex align-items-center mb-3" draggable='true'>
  69. <i class="fas fa-home mr-2"></i>
  70. <span>Home</span>
  71. </div>
  72. <div class="d-flex align-items-center mb-3" draggable='true'>
  73. <i class="fas fa-user mr-2"></i>
  74. <span>About</span>
  75. </div>
  76. <div class="d-flex align-items-center mb-3" draggable='true'>
  77. <i class="fas fa-envelope mr-2"></i>
  78. <span>Contact</span>
  79. </div>
  80. </div>
  81. </div>
  82.  
  83. <!-- Right Side -->
  84. <div class="col-md-10 bg-primary" >
  85. <!-- Canvas goes here -->
  86. <canvas id="orangeCanvas" ondrop="onDrop(event)" ondragover="onDragOver(event)"></canvas>
  87. <!-- Content for the right side (80% width) -->
  88. <p>This is the right side content.</p>
  89. </div>
  90. </div>
  91. </div>
  92.  
  93. <!-- Link Bootstrap JS and jQuery -->
  94. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  95. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
  96. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
  97.  
  98. <script>
  99. // Get the right side element (col-md-10) and the canvas
  100. const rightSide = document.querySelector('.col-md-10');
  101. const canvas = document.getElementById('orangeCanvas');
  102. const context = canvas.getContext('2d');
  103.  
  104. // Set canvas size to fill the right side
  105. canvas.width = rightSide.clientWidth;
  106. canvas.height = window.innerHeight;
  107.  
  108. // Fill canvas with orange color
  109. context.fillStyle = 'orange';
  110. context.fillRect(0, 0, canvas.width - 35, canvas.height);
  111.  
  112. // Update canvas width when the window is resized
  113. window.addEventListener('resize', function() {
  114. canvas.width = rightSide.clientWidth;
  115. context.fillStyle = 'orange';
  116. context.fillRect(0, 0, canvas.width, canvas.height);
  117. });
  118.  
  119.  
  120.  
  121. // Function to draw rounded rectangle with text on canvas
  122. function drawRoundedRectangleWithText(x, y, text) {
  123. const width = 200;
  124. const height = 100;
  125. const cornerRadius = 20;
  126. const borderWidth = 2;
  127. const fontSize = 30;
  128.  
  129. context.strokeStyle = 'black';
  130. context.fillStyle = 'black';
  131. context.lineWidth = borderWidth;
  132. context.font = `${(fontSize * 0.7)}px Arial`; // Reduce the text size by 30 percent
  133. context.textAlign = 'center';
  134. context.textBaseline = 'middle';
  135.  
  136. context.beginPath();
  137. context.moveTo(x + cornerRadius, y);
  138. context.arcTo(x + width, y, x + width, y + height, cornerRadius);
  139. context.arcTo(x + width, y + height, x, y + height, cornerRadius);
  140. context.arcTo(x, y + height, x, y, cornerRadius);
  141. context.arcTo(x, y, x + width, y, cornerRadius);
  142. context.closePath();
  143. context.stroke();
  144.  
  145. context.fillText(text, x + width / 2, y + height / 2);
  146. }
  147.  
  148. // Function to allow drop in the target container
  149. function onDragOver(event) {
  150. event.preventDefault();
  151. }
  152.  
  153. // Mouseup event listener
  154. function onDrop(event) {
  155. event.preventDefault();
  156. console.log("on drop event")
  157. const rect = canvas.getBoundingClientRect();
  158. const x = event.clientX - rect.left;
  159. const y = event.clientY - rect.top;
  160. drawRoundedRectangleWithText(x, y, 'Custom Text');
  161. };
  162.  
  163.  
  164. </script>
  165. </body>
  166. </html>
  167.  
  168.  
  169. ==========================================================================================================================
  170.  
  171. <!DOCTYPE html>
  172. <html lang="en">
  173. <head>
  174. <meta charset="UTF-8">
  175. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  176. <title>Bootstrap UI with Orange Canvas</title>
  177. <!-- Link Bootstrap CSS -->
  178. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  179. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  180. <style>
  181. body, html {
  182. margin: 0;
  183. padding: 0;
  184. }
  185.  
  186. canvas {
  187. display: block;
  188. }
  189. i {
  190. margin : 10px;
  191. }
  192. .draggable {
  193. position: absolute;
  194. width: 100px;
  195. height: 50px;
  196. background-color: blue;
  197. color: white;
  198. text-align: center;
  199. line-height: 50px;
  200. cursor: grab;
  201. }
  202. </style>
  203. </head>
  204. <body>
  205. <!-- Navigation Bar -->
  206. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  207. <div class="container">
  208. <a class="navbar-brand" href="#">Your Brand</a>
  209. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  210. <span class="navbar-toggler-icon"></span>
  211. </button>
  212. <div class="collapse navbar-collapse" id="navbarNav">
  213. <ul class="navbar-nav">
  214. <li class="nav-item active">
  215. <a class="nav-link" href="#">Home</a>
  216. </li>
  217. <li class="nav-item">
  218. <a class="nav-link" href="#">About</a>
  219. </li>
  220. <li class="nav-item">
  221. <a class="nav-link" href="#">Contact</a>
  222. </li>
  223. </ul>
  224. </div>
  225. </div>
  226. </nav>
  227.  
  228. <!-- Main Content with Two Horizontal Parts -->
  229. <div class="container-fluid">
  230. <div class="row">
  231. <!-- Left Side -->
  232. <div class="row">
  233. <!-- Left Side -->
  234. <div class="col-md-2 bg-light">
  235. <!-- Content for the left side (20% width) -->
  236. <div class="py-3 px-2">
  237. <div class="d-flex align-items-center mb-3" draggable='true'>
  238. <i class="fas fa-home mr-2"></i>
  239. <span>Home</span>
  240. </div>
  241. <div class="d-flex align-items-center mb-3" draggable='true'>
  242. <i class="fas fa-user mr-2"></i>
  243. <span>About</span>
  244. </div>
  245. <div class="d-flex align-items-center mb-3" draggable='true'>
  246. <i class="fas fa-envelope mr-2"></i>
  247. <span>Contact</span>
  248. </div>
  249. </div>
  250. </div>
  251.  
  252. <!-- Right Side -->
  253. <div class="col-md-10 bg-primary" >
  254. <!-- Canvas goes here -->
  255. <canvas id="orangeCanvas" ondrop="onDrop(event)" ondragover="onDragOver(event)"></canvas>
  256. <!-- Content for the right side (80% width) -->
  257. <p>This is the right side content.</p>
  258. </div>
  259. </div>
  260. </div>
  261.  
  262. <!-- Link Bootstrap JS and jQuery -->
  263. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  264. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
  265. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
  266.  
  267. <script>
  268. // Get the right side element (col-md-10) and the canvas
  269. const rightSide = document.querySelector('.col-md-10');
  270. const canvas = document.getElementById('orangeCanvas');
  271. const context = canvas.getContext('2d');
  272.  
  273. // Set canvas size to fill the right side
  274. canvas.width = rightSide.clientWidth;
  275. canvas.height = window.innerHeight;
  276.  
  277. // Fill canvas with orange color
  278. context.fillStyle = 'orange';
  279. context.fillRect(0, 0, canvas.width - 35, canvas.height);
  280.  
  281. // Update canvas width when the window is resized
  282. window.addEventListener('resize', function() {
  283. canvas.width = rightSide.clientWidth;
  284. context.fillStyle = 'orange';
  285. context.fillRect(0, 0, canvas.width, canvas.height);
  286. });
  287.  
  288.  
  289.  
  290. // Function to draw rounded rectangle with text on canvas
  291. function drawRoundedRectangleWithText(x, y, text) {
  292. const width = 200;
  293. const height = 100;
  294. const cornerRadius = 20;
  295. const borderWidth = 2;
  296. const fontSize = 30;
  297.  
  298. context.strokeStyle = 'black';
  299. context.fillStyle = 'black';
  300. context.lineWidth = borderWidth;
  301. context.font = `${(fontSize * 0.7)}px Arial`; // Reduce the text size by 30 percent
  302. context.textAlign = 'center';
  303. context.textBaseline = 'middle';
  304.  
  305. context.beginPath();
  306. context.moveTo(x + cornerRadius, y);
  307. context.arcTo(x + width, y, x + width, y + height, cornerRadius);
  308. context.arcTo(x + width, y + height, x, y + height, cornerRadius);
  309. context.arcTo(x, y + height, x, y, cornerRadius);
  310. context.arcTo(x, y, x + width, y, cornerRadius);
  311. context.closePath();
  312. context.stroke();
  313.  
  314. context.fillText(text, x + width / 2, y + height / 2);
  315. }
  316.  
  317. // Function to allow drop in the target container
  318. function onDragOver(event) {
  319. event.preventDefault();
  320. }
  321.  
  322. // Mouseup event listener
  323. function onDrop(event) {
  324. event.preventDefault();
  325. console.log("on drop event")
  326. const rect = canvas.getBoundingClientRect();
  327. const x = event.clientX - rect.left;
  328. const y = event.clientY - rect.top;
  329. drawRoundedRectangleWithText(x, y, 'Custom Text');
  330. };
  331.  
  332.  
  333. </script>
  334. </body>
  335. </html>
  336.  
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!