-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
156 additions
and
148 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,155 +1,163 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Gartic Fotos</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <style> | ||
| body { | ||
| background-color: #666; | ||
| background-image: url("https://gartic.com.br/imgs/sala/pattern_preto.png"); | ||
| background-repeat: repeat; | ||
| color: white; | ||
| font-family: "Arial Black", Arial, sans-serif; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| height: 100vh; | ||
| margin: 0; | ||
| } | ||
|
|
||
| label { | ||
| display: block; | ||
| margin-bottom: 10px; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| input[type="text"] { | ||
| width: 200px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .button { | ||
| padding: 10px; | ||
| background-color: #ffbb0f; | ||
| color: #6d3e04; | ||
| border: 1px solid #e28208; | ||
| cursor: pointer; | ||
| margin-top: 10px; | ||
| font-family: "Arial Black", Arial, sans-serif; | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| #photosContainer { | ||
| margin-top: 20px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| #photosContainer img { | ||
| width: 300px; | ||
| transition: transform 0.3s ease; | ||
| border: 2px solid #ffbb0f; | ||
| } | ||
|
|
||
| #imageCaption { | ||
| color: white; | ||
| font-family: "Arial Black", Arial, sans-serif; | ||
| margin-top: 10px; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .closeButton { | ||
| display: none; | ||
| margin-top: 10px; | ||
| font-size: 18px; | ||
| cursor: pointer; | ||
| background-color: #ffbb0f; | ||
| color: #6d3e04; | ||
| border: 1px solid #e28208; | ||
| padding: 5px 10px; | ||
| font-family: "Arial Black", Arial, sans-serif; | ||
| } | ||
|
|
||
| .error { | ||
| color: red; | ||
| margin-top: 5px; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| /* Adiciona regras de estilo para dispositivos móveis */ | ||
| @media only screen and (max-width: 600px) { | ||
| body { | ||
| padding: 20px; | ||
| } | ||
|
|
||
| input[type="text"] { | ||
| width: 100%; | ||
| max-width: 300px; | ||
| } | ||
|
|
||
| .button { | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| #photosContainer img { | ||
| width: 100%; | ||
| } | ||
| } | ||
| </style> | ||
| <title>Gartic Fotos</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <style> | ||
| body { | ||
| background-color: #666; | ||
| background-image: url("https://gartic.com.br/imgs/sala/pattern_preto.png"); | ||
| background-repeat: repeat; | ||
| color: white; | ||
| font-family: "Arial Black", Arial, sans-serif; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| height: 100vh; | ||
| margin: 0; | ||
| } | ||
|
|
||
| label { | ||
| display: block; | ||
| margin-bottom: 10px; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| input[type="text"] { | ||
| width: 200px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .button { | ||
| padding: 10px; | ||
| background-color: #ffbb0f; | ||
| color: #6d3e04; | ||
| border: 1px solid #e28208; | ||
| cursor: pointer; | ||
| margin-top: 10px; | ||
| font-family: "Arial Black", Arial, sans-serif; | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| .closeButton { | ||
| display: none; | ||
| margin-top: 10px; | ||
| font-size: 18px; | ||
| cursor: pointer; | ||
| background-color: #ffbb0f; | ||
| color: #6d3e04; | ||
| border: 1px solid #e28208; | ||
| padding: 5px 10px; | ||
| font-family: "Arial Black", Arial, sans-serif; | ||
| } | ||
|
|
||
| .error { | ||
| color: red; | ||
| margin-top: 5px; | ||
| font-size: 16px; | ||
| } | ||
|
|
||
| #photosContainer { | ||
| margin-top: 20px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| #photosContainer img { | ||
| width: 300px; | ||
| height: 300px; | ||
| transition: transform 0.3s ease; | ||
| border: 2px solid #ffbb0f; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| #photosContainer img:hover { | ||
| transform: scale(1.1); | ||
| } | ||
|
|
||
| #imageCaption { | ||
| color: white; | ||
| font-family: "Arial Black", Arial, sans-serif; | ||
| margin-top: 10px; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| #avatar { | ||
| display: none; | ||
| width: 300px; | ||
| height: 300px; | ||
| margin-top: 20px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <img src="https://gartic.com.br/imgs/v3/logoHome2x.png" alt="Logo do Gartic"> | ||
| <label for="nickInput">Digite o Nick do Gartic:</label> | ||
| <br> | ||
| <input type="text" id="nickInput" placeholder="Insira o nick" onkeydown="handleKeyDown(event)"> | ||
| <br> | ||
| <button class="button" onclick="showPhotos()">Veja</button> | ||
| <div class="error" id="errorMessage"></div> | ||
| <div id="photosContainer"></div> | ||
| <div id="imageCaption"></div> | ||
| <div class="closeButton" onclick="closeImage()">Fechar imagem</div> | ||
|
|
||
| <script> | ||
| function showPhotos() { | ||
| var input = document.getElementById("nickInput"); | ||
| var newNick = input.value; | ||
| var container = document.getElementById("photosContainer"); | ||
| var caption = document.getElementById("imageCaption"); | ||
| var errorMessage = document.getElementById("errorMessage"); | ||
| var closeButton = document.querySelector(".closeButton"); | ||
|
|
||
| if (newNick.trim() !== "") { | ||
| var url = "https://gartic.com.br/avatar.php?nick=" + encodeURIComponent(newNick); | ||
| container.innerHTML = "<a href='" + url + "' target='_blank'><img src='" + url + "' alt='Foto do nick'></a>"; | ||
| caption.textContent = "Aqui está a imagem de perfil!"; | ||
| closeButton.style.display = "block"; | ||
| errorMessage.textContent = ""; | ||
| } else { | ||
| container.innerHTML = ""; | ||
| caption.textContent = ""; | ||
| closeButton.style.display = "none"; | ||
| errorMessage.textContent = "Digite o nick da conta corretamente. Qualquer erro não irá mostrá-lo."; | ||
| errorMessage.style.color = "red"; | ||
| } | ||
| } | ||
|
|
||
| function handleKeyDown(event) { | ||
| if (event.key === "Enter") { | ||
| showPhotos(); | ||
| } | ||
| } | ||
|
|
||
| function closeImage() { | ||
| var container = document.getElementById("photosContainer"); | ||
| var caption = document.getElementById("imageCaption"); | ||
| var closeButton = document.querySelector(".closeButton"); | ||
| var errorMessage = document.getElementById("errorMessage"); | ||
|
|
||
| container.innerHTML = ""; | ||
| caption.textContent = ""; | ||
| closeButton.style.display = "none"; | ||
| errorMessage.textContent = ""; | ||
| } | ||
| </script> | ||
| <img src="https://gartic.com.br/imgs/v3/logoHome2x.png" alt="Logo do Gartic"> | ||
| <label for="nickInput">Digite o Nick do Gartic:</label> | ||
| <br> | ||
| <input type="text" id="nickInput" placeholder="Insira o nick" onkeydown="handleKeyDown(event)"> | ||
| <br> | ||
| <button class="button" onclick="showPhotos('Atual')">Veja Atual</button> | ||
| <button class="button" onclick="showPhotos('Antiga')">Veja Antiga</button> | ||
| <div class="error" id="errorMessage"></div> | ||
| <div id="photosContainer"></div> | ||
| <div id="imageCaption"></div> | ||
| <div class="closeButton" onclick="closeImage()">Fechar imagem</div> | ||
| <img id="avatar" src="" alt="Avatar"> | ||
|
|
||
| <script> | ||
| function showPhotos(type) { | ||
| var input = document.getElementById("nickInput"); | ||
| var newNick = input.value; | ||
| var container = document.getElementById("photosContainer"); | ||
| var caption = document.getElementById("imageCaption"); | ||
| var errorMessage = document.getElementById("errorMessage"); | ||
| var closeButton = document.querySelector(".closeButton"); | ||
|
|
||
| if (newNick.trim() !== "") { | ||
| var url = ""; | ||
| var imgHtml = ""; | ||
|
|
||
| if (type === 'Atual') { | ||
| url = "https://gartic.com.br/avatar.php?nick=" + encodeURIComponent(newNick); | ||
| imgHtml = "<a href='" + url + "' target='_blank' download><img src='" + url + "' alt='Foto do nick'></a>"; | ||
| } else if (type === 'Antiga') { | ||
| var nickInicial = newNick.substring(0, 2); | ||
| url = `https://gartic.com.br/imgs/mural/${nickInicial}/${newNick}/avatar_mini.png?v=0`; | ||
| imgHtml = "<a href='" + url + "' target='_blank' download><img src='" + url + "' alt='Avatar Antigo'></a>"; | ||
| } | ||
|
|
||
| container.innerHTML = imgHtml; | ||
| caption.textContent = "Clique na imagem para baixar!"; | ||
| closeButton.style.display = "block"; | ||
| errorMessage.textContent = ""; | ||
| } else { | ||
| container.innerHTML = ""; | ||
| caption.textContent = ""; | ||
| closeButton.style.display = "none"; | ||
| errorMessage.textContent = "Digite o nick da conta corretamente. Qualquer erro não irá mostrá-lo."; | ||
| errorMessage.style.color = "red"; | ||
| } | ||
| } | ||
|
|
||
| function handleKeyDown(event) { | ||
| if (event.key === "Enter") { | ||
| showPhotos(); | ||
| } | ||
| } | ||
|
|
||
| function closeImage() { | ||
| var container = document.getElementById("photosContainer"); | ||
| var caption = document.getElementById("imageCaption"); | ||
| var closeButton = document.querySelector(".closeButton"); | ||
| var errorMessage = document.getElementById("errorMessage"); | ||
| var avatarImage = document.getElementById("avatar"); | ||
|
|
||
| container.innerHTML = ""; | ||
| caption.textContent = ""; | ||
| closeButton.style.display = "none"; | ||
| errorMessage.textContent = ""; | ||
| avatarImage.style.display = "none"; | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |