API tools faq
paste
Advertisement
Guest User

html

a guest
Oct 14th, 2019
231
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 12.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  8.     <title>Table</title>
  9.  
  10.     <style>
  11.         /* #table-data tr:nth-child(even) { background: transparent; } */
  12.         #table-data tbody tr:hover { background-color: #5a09fb; background-image: linear-gradient(303deg, #5a09fb 0%, #ab31e4 100%); }
  13.         /* #table-data tbody tr:hover { background: rgba(0, 0, 0, 0.130); transition: .4s; } */
  14.         #table-data td { border-right: #8554fe 1px solid; }
  15.         #table-data td { border-bottom: #8554fe 1px solid; }
  16.         #table-data td:last-child { border-right: none; }
  17.  
  18.         /* SCROLLBAR */
  19.         .custom-scrollbar::-webkit-scrollbar-corner{
  20.             background-color: transparent;
  21.         }
  22.         .custom-scrollbar::-webkit-scrollbar {
  23.             width: 12px;
  24.             height: 8px;
  25.         }
  26.         .custom-scrollbar::-webkit-scrollbar-track {
  27.             background: #2d3748;
  28.             /* border-radius: 10px; */
  29.         }
  30.         .custom-scrollbar::-webkit-scrollbar-thumb {
  31.             background: linear-gradient(303deg, #5a09fb 0%, #ab31e4 100%);
  32.             border-radius: 10px;
  33.         }
  34.         .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  35.             background: linear-gradient(303deg, #5a09fb 0%, #ab31e4 100%);
  36.         }
  37.     </style>
  38. </head>
  39. <body class="bg-gray-800 custom-scrollbar">
  40.     <div class="w-11/12 mt-10 mx-auto">
  41.         <div class="custom-scrollbar rounded shadow-2xl overflow-x-auto h-56">
  42.             <table id="table-data" class="text-sm w-full border-collapse">
  43.                 <thead class="" style="background-color: #ab31e4; background-image: linear-gradient(303deg, #ab31e4 0%, #5a09fb 100%);">
  44.                     <tr class="border-b border-indigo-800">
  45.                         <th class="text-white font-semibold uppercase text-center p-3">Foto</th>
  46.                         <th class="text-white font-semibold uppercase text-center p-3">Nome</th>
  47.                         <th class="text-white font-semibold uppercase text-center p-3">Idade</th>
  48.                         <th class="text-white font-semibold uppercase text-center p-3">Sexo</th>
  49.                         <th class="text-white font-semibold uppercase text-center p-3">Linguagem</th>
  50.                         <th class="text-white font-semibold uppercase text-center p-3">Desenvolvedor</th>
  51.                         <th class="text-white font-semibold uppercase text-center p-3">Ação</th>
  52.                     </tr>
  53.                 </thead>
  54.                 <tbody style="background-color: #ab31e4; background-image: linear-gradient(303deg, #ab31e4 0%, #5a09fb 100%);">
  55.                     <tr>
  56.                         <td class="text-white uppercase text-center p-3"><img src="wallpaper.jpg" alt="Perfil" class="mx-auto h-12 w-12 rounded-full"></td>
  57.                         <td class="text-white uppercase text-center p-3">Sup3r-Us3r</td>
  58.                         <td class="text-white uppercase text-center p-3">20</td>
  59.                         <td class="text-white uppercase text-center p-3">M</td>
  60.                         <td class="text-white uppercase text-center p-3">Javascript - Nodejs - PostgreSQL</td>
  61.                         <td class="text-white uppercase text-center p-3">Sim</td>
  62.                         <td class="text-white uppercase text-center p-3">
  63.                             <button id="edit" type="send" class="w-full mb-0 md:mb-2 lg:mb-2 px-3 py-1 bg-indigo-700 text-white font-semibold rounded hover:bg-indigo-600 focus:outline-none">Editar</button>
  64.                             <button type="send" class="w-full mt-2 md:mt-0 lg:mt-0 px-3 py-1 bg-pink-600 text-white font-semibold rounded hover:bg-pink-500 focus:outline-none">Excluir</button>
  65.                         </td>
  66.                     </tr>
  67.                     <tr>
  68.                         <td class="text-white uppercase text-center p-3"><img src="wallpaper.jpg" alt="Perfil" class="mx-auto h-12 w-12 rounded-full"></td>
  69.                         <td class="text-white uppercase text-center p-3">Us3r-Ro0t</td>
  70.                         <td class="text-white uppercase text-center p-3">20</td>
  71.                         <td class="text-white uppercase text-center p-3">M</td>
  72.                         <td class="text-white uppercase text-center p-3">Javascript - Nodejs - GraphQL</td>
  73.                         <td class="text-white uppercase text-center p-3">Não</td>
  74.                         <td class="text-white uppercase text-center p-3">
  75.                             <button id="edit" type="send" class="w-full mb-0 md:mb-2 lg:mb-2 px-3 py-1 bg-indigo-700 text-white font-semibold rounded hover:bg-indigo-600 focus:outline-none">Editar</button>
  76.                             <button type="send" class="w-full mt-2 md:mt-0 lg:mt-0 px-3 py-1 bg-pink-600 text-white font-semibold rounded hover:bg-pink-500 focus:outline-none">Excluir</button>
  77.                         </td>
  78.                     </tr>
  79.                 </tbody>
  80.             </table>
  81.         </div>
  82.     </div>
  83.  
  84.     <br>
  85.     <br>
  86.     <br>
  87.     <br>
  88.     <br>
  89.  
  90.     <form id="form-data" class="max-w-4xl bg-gray-900 mx-auto rounded shadow-2xl p-10">
  91.         <div class="relative mb-20">
  92.             <svg id="close" class="absolute -mr-6 -mt-6 h-6 w-6 top-0 right-0 fill-current text-white cursor-pointer hover:text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 11.293L22.293 1l.707.707L12.707 12 23 22.293l-.707.707L12 12.707 1.707 23 1 22.293 11.293 12 1 1.707 1.707 1 12 11.293z"/></svg>
  93.         </div>
  94.         <div class="flex flex-wrap justify-center items-center">
  95.             <section class="w-full md:w-1/2 lg:w-1/2 mt-10 md:mt-0 lg:mt-0">
  96.                 <div class="flex flex-wrap justify-center md:justify-start lg:justify-start items-center -mt-20 mb-10">
  97.                     <span class="text-3xl text-white font-light">Adicionar Usuário</span>
  98.                 </div>
  99.                 <div class="block text-center md:text-left lg:text-left mb-12 md:mb-0 lg:mb-0">
  100.                     <img id="preview-photo" class="mx-auto md:mx-0 lg:mx-0 h-40 w-40 object-cover rounded-full mb-5" src="https://cdn.iconscout.com/icon/free/png-256/hacker-7-71228.png" alt="Profile">
  101.                     <!-- <button name="photoo" class="text-indigo-600 bg-transparent border border-indigo-600 uppercase text-base px-12 py-2 rounded font-semibold hover:text-white hover:bg-indigo-600 focus:outline-none" style="transition: .4s;">Trocar</button> -->
  102.                     <div class="relative">
  103.                         <input name="photo" id="file" type="file" class="absolute hidden text-white"/>
  104.                         <label for="file" class="cursor-pointer text-indigo-600 border border-indigo-600 bg-transparent uppercase text-base px-12 py-2 rounded font-semibold hover:text-white hover:bg-indigo-600 focus:outline-none">Trocar
  105.                             <span id="filename" class="mt-10 left-0 mx-auto absolute text-white text-xs"></span>
  106.                         </label>
  107.                     </div>
  108.                 </div>
  109.             </section>
  110.             <section class="w-full md:w-1/2 lg:w-1/2">
  111.                 <div class="w-full flex flex-wrap md:flex-no-wrap lg:flex-no-wrap justify-start md:justify-center lg:justify-center items-center mb-5">
  112.                     <span class="w-full md:w-2/6 lg-w-2/6 text-gray-200 text-base uppercase font-semibold text-left md:text-right lg:text-right mr-0 md:mr-5 lg:mr-5 mb-3 md:mb-0 lg:mb-0">Nome</span>
  113.                     <input name="user" class="w-full py-2 px-5 text-indigo-600 rounded bg-transparent border border-indigo-600 focus:outline-none focus:border-indigo-500" type="text" placeholder="Digite seu nome">
  114.                 </div>
  115.                 <div class="w-full flex flex-wrap md:flex-no-wrap lg:flex-no-wrap justify-start md:justify-center lg:justify-center items-center mb-5">
  116.                     <span class="w-full md:w-2/6 lg-w-2/6 text-gray-200 text-base uppercase font-semibold text-left md:text-right lg:text-right mr-0 md:mr-5 lg:mr-5 mb-3 md:mb-0 lg:mb-0">Idade</span>
  117.                     <input name="age" class="w-full py-2 px-5 text-indigo-600 rounded bg-transparent border border-indigo-600 focus:outline-none focus:border-indigo-500" type="text" placeholder="Digite sua idade">
  118.                 </div>
  119.                 <div class="w-full flex flex-wrap md:flex-no-wrap lg:flex-no-wrap justify-start md:justify-center lg:justify-center items-center mb-5">
  120.                     <span class="w-full md:w-2/6 lg-w-2/6 text-gray-200 text-base uppercase font-semibold text-left md:text-right lg:text-right mr-0 md:mr-5 lg:mr-5 mb-3 md:mb-0 lg:mb-0">Sexo</span>
  121.                     <select name="gender" selected="selected" class="w-full py-2 px-5 text-indigo-600 rounded bg-transparent border border-indigo-600 focus:outline-none focus:border-indigo-500">
  122.                         <option class="hidden" value="">Selecione uma opção</option>
  123.                         <option value="male">Masculino</option>
  124.                         <option value="female">Feminino</option>
  125.                     </select>
  126.                 </div>
  127.                 <div class="w-full flex flex-wrap md:flex-no-wrap lg:flex-no-wrap justify-start md:justify-center lg:justify-center items-center mb-5">
  128.                     <span class="w-full md:w-2/6 lg-w-2/6 text-gray-200 text-base uppercase font-semibold text-left md:text-right lg:text-right mr-0 md:mr-5 lg:mr-5 mb-3 md:mb-0 lg:mb-0">Linguagem</span>
  129.                     <input name="language" class="w-full py-2 px-5 text-indigo-600 rounded bg-transparent border border-indigo-600 focus:outline-none focus:border-indigo-500" type="text" placeholder="Linguagens favoritas">
  130.                 </div>
  131.                 <div class="w-full flex flex-wrap md:flex-no-wrap lg:flex-no-wrap justify-start md:justify-center lg:justify-center items-center mb-5">
  132.                     <span class="w-full md:w-2/6 lg:w-2/6 text-gray-200 text-base uppercase font-semibold text-left md:text-right lg:text-right mr-0 md:mr-5 lg:mr-5 mb-3 md:mb-0 lg:mb-0">Dev</span>
  133.                     <div action="" class="w-full py-2 text-indigo-600 rounded bg-transparent">
  134.                         <input class="mr-2" type="radio" name="developer" value="yes">Sim
  135.                         <input class="ml-5 mr-2" type="radio" name="developer" value="no">Não
  136.                     </div>
  137.                 </div>
  138.                 <div class="w-full flex flex-wrap justify-center items-center mt-16">
  139.                     <button id="save" type="send" class="mx-1 mt-2 md:mt-0 lg:mt-0 w-full md:w-2/5 lg:w-2/5 text-indigo-600 bg-transparent border border-indigo-600 uppercase text-base py-2 rounded font-semibold hover:text-white hover:bg-indigo-600 focus:outline-none" style="transition: .4s;">Salvar</button>
  140.                     <button id="cancel" type="reset" class="mx-1 mt-2 md:mt-0 lg:mt-0 w-full md:w-2/5 lg:w-2/5 text-indigo-600 bg-transparent border border-indigo-600 uppercase text-base py-2 rounded font-semibold hover:text-white hover:bg-indigo-600 focus:outline-none" style="transition: .4s;">Cancelar</button>
  141.                 </div>
  142.             </section>
  143.         </div>
  144.     </form>
  145.    
  146.     <br>
  147.     <br>
  148.     <br>
  149.     <br>
  150.     <br>
  151.  
  152.     <div class="flex justify-center items-center bottom-0 mb-10">
  153.         <div id="modal" class="flex justify-center items-center h-16 w-16 bg-indigo-600 rounded-full cursor-pointer shadow-lg hover:bg-indigo-500 p-8 border-2 border-indigo-500">
  154.             <span class="font-bold text-sm uppercase text-white">Modal</span>
  155.         </div>
  156.     </div>
  157.  
  158.     <script src="controller/AddUserToTable.js"></script>
  159.     <script src="js/index.js"></script>
  160.     <script>
  161.         document.querySelector('#file').addEventListener('change', (event) => {
  162.             let filename = event.target.files[0].name
  163.             console.log('FILENAME -> ', filename);
  164.             document.querySelector('#filename').innerHTML = filename;
  165.         });
  166.     </script>
  167. </body>
  168. </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!