Widget:Test3

Revisão de 02h03min de 5 de setembro de 2024 por Renee (discussão | contribs)

<!DOCTYPE html> <html lang="pt-BR"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Seleção de Mapas</title>
   <style>
       .mw-body-content {
           display: flex;
       }
       .mw-parser-output {
           display: inline-block;
           padding: .5rem 2rem;
           margin: 0 auto;
           border: 30px solid transparent;
           border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
           min-width: 410px;
           min-height: 320px;
         }
       .hidden {
           display: none;
       }
       .input-group {
           margin: 20px 0;
       }
       .maps__select,
       .input-group input[type="text"]
       {
           width: 100%;
           padding: 10px;
           margin-top: 5px;
           font-size: 16px;
           border-radius: 5px;
           border: 1px solid #070101;
       }
       .input-group button {
           background: none;
           border: none;
           padding: 0;
           cursor: pointer;
           margin-top: 5px;
       }
       .input-group img {
           border-radius: 14px;
           width: auto;
           text-align: center;
           height: auto;
           justify-content: center;
       }
       
       .image-container {
           display: flex;
           flex-wrap: wrap;
           gap: 10px;
           margin-top: 20px;
       }
       .image-item {
           flex: 1 0 30%;
           text-align: center;
       }
       .image-item img {
           max-width: 100%;
           height: auto;
       }
       .image-info {
           margin-top: 5px;
       }
       .tag-button {
           display: inline-block;
           background-color: #f1f1f1;
           color: #333;
           padding: 10px 20px;
           margin: 5px;
           border: 1px solid #ccc;
           border-radius: 20px;
           cursor: pointer;
           font-size: 16px;
       }
       .tag-button.selected {
           background-color: #15864e;
           color: #fff;
       }
       .filter-container {
           display: flex;
           align-items: center;
           margin-bottom: 20px;
       }
       .filter-container input[type="checkbox"] {
           margin-right: 10px;
       }
       .filter-container label {
           font-size: 16px;
       }
       .selected-tags {
           margin: 20px;
           padding: 10px;
           background-color: #f9f9f9;
           border: 1px solid #ccc;
           border-radius: 5px;
       }
       .tag-item {
           display: inline-block;
           background-color: #007BFF;
           color: white;
           padding: 5px 10px;
           margin-right: 5px;
           border-radius: 3px;
           font-size: 14px;
       }

.tag-button.disabled {

   background-color: #e0e0e0;
   color: #b0b0b0;
   cursor: not-allowed;
   border: 1px solid #ccc;

}

   </style>

</head> <body>

       <label for="mapType">Tipo de Mapa</label>
       <select id="mapType" class="maps__select">
           <option value="">Selecione um mapa</option>
           <option value="1">Mapa Vermelho</option>
           <option value="2">Mapa Verde</option>
           <option value="3">Mapa Roxo</option>
       </select>
       <label for="specificOption">Local do X</label>
       <select id="specificOption" class="maps__select">
           <option value="">Selecione uma opção</option>
           <option value="Areia">Areia</option>
           <option value="Gelo">Gelo</option>
           <option value="Grama">Grama</option>
           <option value="Pedra">Pedra</option>
           <option value="Subaquático">Subaquático</option>
           <option value="Terra">Terra</option>
           <option value="Pisos">Pisos</option>
       </select>
       <input type="checkbox" id="enableFilter">
       <label for="enableFilter">Ativar filtro</label>