API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 11th, 2019
247
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <html xmlns:th="https://www.thymeleaf.org">
  4. <head>
  5.     <title>Bootstrap Example</title>
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  10.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  11.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  12.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  13.  
  14.     <script>
  15.         function generateUserURlFun(){
  16.             var userInput = document.getElementById('user_id').value;
  17.             var urlLink = "http://localhost:8080/users/";
  18.             urlLink = urlLink + userInput;
  19.             userForm.action = urlLink;
  20.         }
  21.     </script>
  22.     <script>
  23.         function generateTracksURlFun(){
  24.             var userInput = document.getElementById('track_id').value;
  25.             var urlLink = "http://localhost:8080/tracks/";
  26.             urlLink = urlLink + userInput;
  27.             userForm.action = urlLink;
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32.  
  33. <div class="jumbotron text-center">
  34.     <i class="fa fa-spotify" style="color: #1DB954; font-size:60px"></i>
  35.     <h1>Spotify API Connector</h1>
  36.     <p>By Kamila Nowak</p>
  37.     <p><a href="https://github.com/KamilaNowak"><i class="fa fa-github" style="color:black; font-size:20px"></i></a>
  38.         <a href="https://www.linkedin.com/in/kamila-nowak-7b267816b/"> <i class="fa fa-linkedin"
  39.                                                                          style="font-size:20px"></i></a>
  40.     </p>
  41. </div>
  42. <div class="container">
  43.     <div class="row">
  44.         <div class="col-sm-5">
  45.             <h3>Type username</h3>
  46.             <p>Then data will be displayed below</p>
  47.             <form onsubmit="generateUserURlFun()" method="get" id="userForm">
  48.                 <div class="input-group">
  49.                     <input type="text" id="user_id"  class="form-control form-control-lg"
  50.                           style="border-top-left-radius:100px; border-bottom-left-radius:100px">
  51.  
  52.                     <button type="submit" class="btn btn-outline-success"
  53.                       style="font-size:120%;border-top-right-radius:100px; border-bottom-right-radius:100px" href="">Search
  54.                         <i class="fa fa-search"></i> </button>
  55.                 </div>
  56.             </form>
  57.             <hr>
  58.             Users
  59.             <select multiple class="form-control" n>
  60.              <option><span th:text="${userData}"></span></option>
  61.             </select>
  62.             <br>
  63.             <a class="btn btn-outline-warning" style="border-radius:100px"> Save query to database <i
  64.                    class="fa fa-database" style="font-size:20px"></i></a>
  65.         </div>
  66.         <hr>
  67.         <div class="col-sm-5">
  68.             <h3>Type track <a  data-toggle="modal" data-target="#track"><i class="fa fa-question-circle"
  69.                                                                                   style="font-size:30px;color:#1DB954"></i></a>
  70.             </h3>
  71.             <p>Then data will be displayed below</p>
  72.             <form onsubmit="generateTracksURlFun()" id="tracksForm" method="get">
  73.                 <div class="input-group" >
  74.                     <input type="text" id="track_id" class="form-control form-control-lg"
  75.                           style="border-top-left-radius:100px; border-bottom-left-radius:100px">
  76.                     <button class="btn btn-outline-success"
  77.                       style="font-size:120%;border-top-right-radius:100px; border-bottom-right-radius:100px" type="submit">Search
  78.                         <i class="fa fa-search"></i> </button>
  79.                 </div>
  80.             </form>
  81.             <hr>
  82.             Tracks
  83.             <select multiple class="form-control">
  84.                 <option><span th:text="${tracksData}"></span></option>
  85.             </select>
  86.             <br>
  87.             <a class="btn btn-outline-warning" style="border-radius:100px"> Save query to database <i
  88.                    class="fa fa-database" style="font-size:20px"></i></a>
  89.         </div>
  90.     </div>
  91.     <br>
  92.     <hr>
  93.     <br>
  94.     <div class="row">
  95.         <div class="col-sm-5">
  96.             <h3>Type artist</h3>
  97.             <p>Then data will be displayed below</p>
  98.             <div class="input-group">
  99.                 <input type="text" class="form-control form-control-lg"
  100.                       style="border-top-left-radius:100px; border-bottom-left-radius:100px">
  101.                 <a class="btn btn-outline-success"
  102.                   style="font-size:120%;border-top-right-radius:100px; border-bottom-right-radius:100px" href="#">Search
  103.                     <i class="fa fa-search"></i> </a>
  104.             </div>
  105.             <hr>
  106.             Artists
  107.             <select multiple class="form-control" name="sellist2">
  108.                 <option>dd</option>
  109.             </select>
  110.             <br>
  111.             <a class="btn btn-outline-warning" style="border-radius:100px"> Save query to database <i
  112.                    class="fa fa-database" style="font-size:20px"></i></a>
  113.         </div>
  114.         <hr>
  115.         <div class="col-sm-5">
  116.             <h3>Type album <a href="#" data-toggle="modal" data-target="#album"><i class="fa fa-question-circle"
  117.                                                                                   style="font-size:30px;color:#1DB954"></i></a>
  118.             </h3>
  119.             <p>Then data will be displayed below</p>
  120.             <div class="input-group">
  121.                 <input type="text" class="form-control form-control-lg"
  122.                       style="border-top-left-radius:100px; border-bottom-left-radius:100px">
  123.                 <a class="btn btn-outline-success"
  124.                   style="font-size:120%;border-top-right-radius:100px; border-bottom-right-radius:100px" href="#">Search
  125.                     <i class="fa fa-search"></i> </a>
  126.             </div>
  127.             <hr>
  128.             Album
  129.             <select multiple class="form-control" name="sellist2">
  130.             </select>
  131.             <br>
  132.             <a class="btn btn-outline-warning" style="border-radius:100px"> Save query to database <i
  133.                    class="fa fa-database" style="font-size:20px"></i></a>
  134.         </div>
  135.     </div>
  136. </div>
  137.  
  138. <!--modal for tracks-->
  139.  
  140. <div class="modal fade" id="track" role="dialog" aria-hidden="true">
  141.     <div class="modal-dialog modal-dialog-centered" role="document">
  142.         <div class="modal-content">
  143.             <div class="modal-header">
  144.                 <h5 class="modal-title">How to get track id?</h5>
  145.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  146.                     <span aria-hidden="true">&times;</span>
  147.                 </button>
  148.             </div>
  149.             <div class="modal-body">
  150.                 <img src="https://i.imgur.com/gfjTWme.png" class="rounded" style="width:100%;max-width:450px">
  151.             </div>
  152.             <div class="modal-footer">
  153.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
  154.             </div>
  155.         </div>
  156.     </div>
  157. </div>
  158.  
  159. <!--modal for albums-->
  160.  
  161. <div class="modal fade" id="album" role="dialog" aria-hidden="true">
  162.     <div class="modal-dialog modal-dialog-centered" role="document">
  163.         <div class="modal-content">
  164.             <div class="modal-header">
  165.                 <h5 class="modal-title">How to get album id?</h5>
  166.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  167.                     <span aria-hidden="true">&times;</span>
  168.                 </button>
  169.             </div>
  170.             <div class="modal-body">
  171.                 <img src="https://i.imgur.com/gfjTWme.png" class="rounded" style="width:100%;max-width:450px">
  172.             </div>
  173.             <div class="modal-footer">
  174.                 <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
  175.             </div>
  176.         </div>
  177.     </div>
  178.  
  179.  
  180.     <br><br><br>
  181.  
  182.     <footer class="page-footer font-small teal pt-4">
  183.         <div class="footer-copyright text-center py-3">© 2019 Copyright:
  184.             <a href="https://github.com/KamilaNowak"> github.com/KamilaNowak</a>
  185.         </div>
  186.     </footer>
  187. </div>
  188. </body>
  189. </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!