API tools faq
paste
Advertisement
RecklessDarph

Userpage.html

RecklessDarph
Jun 3rd, 2021
28
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Gakushū Cards · User page</title>
  6. <!--<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">-->
  7. <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
  8. integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" rel="stylesheet">
  9. </head>
  10. <body>
  11. <nav>
  12. <div class="b-example-divider"></div>
  13.  
  14. <header class="p-3 bg-dark text-white">
  15. <div class="container">
  16. <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
  17. <a class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none" href="/">
  18. <svg aria-label="Bootstrap" class="bi me-2" height="32" role="img" width="40">
  19. <use xlink:href="#bootstrap"/>
  20. </svg>
  21. </a>
  22.  
  23. <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
  24. <li><a class="nav-link px-2 text-white" href="../Homepage/Homepage.html">Home</a></li>
  25. <li><a class="nav-link px-2 text-white" href="#">About us</a></li>
  26. <li><a class="nav-link px-2 text-white" href="../userpage/userpage.html">Profile</a></li>
  27. <li><a class="nav-link px-2 text-white" href="#">FAQs</a></li>
  28. </ul>
  29.  
  30. <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
  31. <input aria-label="Search" class="form-control form-control-dark" id="search-bar"
  32. placeholder="Search..."
  33. type="search">
  34. </form>
  35.  
  36. <div class="text-end">
  37. <a class=" btn btn-secondary" href="../userpage/userpage.html">Profile</a>
  38. <a class="btn btn-light text-dark me-2" href="#" id="sign-out">Sign out</a>
  39. <a href='../register/register.html'>
  40. <button class=" btn btn-secondary" id="signedout" type="button"> Sign-up/login</button>
  41. </a>
  42. </div>
  43. </div>
  44. </div>
  45. </header>
  46. <div class="b-example-divider"></div>
  47. </nav>
  48. <div class="grid-container">
  49. <!--https://freefrontend.com/bootstrap-profiles/-->
  50. <div id="userInfo">
  51. <div class="card">
  52. <div class="card-body">
  53. <div class="d-flex flex-column align-items-center text-center">
  54. <img src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Admin" class="rounded-circle" width="150">
  55. <div class="mt-3">
  56. <h4>John Doe</h4>
  57. <p class="text-secondary mb-1">Full Stack Developer</p>
  58. <p class="text-muted font-size-sm">Bay Area, San Francisco, CA</p>
  59. <button class="btn btn-primary">Follow</button>
  60. <button class="btn btn-outline-primary">Message</button>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66.  
  67. <div id="chartDiv">
  68. <canvas id="myChart"></canvas>
  69. </div>
  70. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  71. <script>
  72. var ctx = document.getElementById('myChart').getContext('2d');
  73. var myChart = new Chart(ctx, {
  74. type: 'bar',
  75. data: {
  76. labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
  77. datasets: [{
  78. label: '# of cards reviewd per day',
  79. data: [12, 19, 3, 5, 2, 3, 20],
  80. backgroundColor: [
  81. 'rgba(255, 99, 132, 0.2)',
  82. 'rgba(54, 162, 235, 0.2)',
  83. 'rgba(255, 206, 86, 0.2)',
  84. 'rgba(75, 192, 192, 0.2)',
  85. 'rgba(153, 102, 255, 0.2)',
  86. 'rgba(255, 159, 64, 0.2)',
  87. 'rgba(255, 0, 255, 0.2)'
  88. ],
  89. borderColor: [
  90. 'rgba(255, 99, 132, 1)',
  91. 'rgba(54, 162, 235, 1)',
  92. 'rgba(255, 206, 86, 1)',
  93. 'rgba(75, 192, 192, 1)',
  94. 'rgba(153, 102, 255, 1)',
  95. 'rgba(255, 159, 64, 1)',
  96. 'rgba(255, 0, 255, 1)'
  97. ],
  98. borderWidth: 1
  99. }]
  100. },
  101. options: {
  102. scales: {
  103. y: {
  104. beginAtZero: true
  105. }
  106. }
  107. }
  108. });
  109. </script>
  110. </div>
  111. <link href="userpage.css" rel="stylesheet">
  112. </body>
  113. </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!