testes/html/Tela_config/estilos.html

129 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<div id="entrada"></div>
<link rel="stylesheet" href="../../Css/Ambiente_Usuario/Configuracoes.css">
</head>
<body class="default-theme">
<form action="" class="estilos">
<div class="tema_usuario">
<label for="Usuario">Seu nome</label>
<input name="Usuario" type="text">
</div>
<div class="mudanca_Img">
<div class="container">
<figure class="image-container">
<img id="chosen-image1">
</figure>
<input type="file" id="upload-button1" accept="image/*">
<label for="upload-button1">
<i class="fas fa-upload-button"></i>
choose a Photo
</label>
<script>
let uploadButton1 = document.getElementById("upload-button1");
let chosenImage1 = document.getElementById("chosen-image1");
let fileName1 = document.getElementById("file-name1");
uploadButton1.onchange = () => {
let reader = new FileReader();
reader.readAsDataURL(uploadButton1.files[0]);
console.log(uploadButton1.files[0]);
reader.onload = () => {
chosenImage1.setAttribute("src", reader.result);
}
}
</script>
</div>
<div class="container2">
<figure class="image-container2">
<img id="chosen-image2">
</figure>
<input type="file" id="upload-button2" accept="image/*">
<label for="upload-button2">
<i class="fas fa-upload-button"></i>
choose a Photo
</label>
<script>
let uploadButton2 = document.getElementById("upload-button2");
let chosenImage2 = document.getElementById("chosen-image2");
let fileName2 = document.getElementById("file-name2");
uploadButton2.onchange = () => {
let reader = new FileReader();
reader.readAsDataURL(uploadButton2.files[0]);
console.log(uploadButton2.files[0]);
reader.onload = () => {
chosenImage2.setAttribute("src", reader.result);
}
}
</script>
</div>
<div class="Cap_1">
<Label>Seu Perfil</Label>
<input type="file">
</div>
<div class="Cap_2">
<Label>Fundo personalizavel</Label>
<input type="file">
</div>
</div>
<div class="tema_Pesonalizavel">
<div class="fundo_1">
<input type="radio" name="theme" value="light" id="lightTheme">
<label for="lightTheme">Light Theme</label>
<input type="radio" name="theme" value="dark" id="darkTheme">
<label for="darkTheme">Dark Theme</label>
<input type="radio" name="theme" value="dark" id="darkTheme">
<label for="darkTheme">Dark Theme</label>
<div id="content" data-theme="default">
<!-- Seu conteúdo aqui -->
</div>
<input type="radio" id="claro" name="fav_language" value="claro">
<label for="claro">Claro</label><br>
<img src="../../Acessts/Imagens/Painel Backup 2.png" alt="">
</div>
<div class="fundo_2">
<input type="radio" id="escuro" name="fav_language" value="ESCURO">
<label for="escuro">Escuro</label><br>
<img src="../../Acessts/Imagens/Painel Backup 2.png" alt="">
</div>
<div class="fundo_3">
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">Padrão</label><br>
<img src="../../Acessts/Imagens/Painel Backup 2.png" alt="">
</div>
</div>
<script src="./tes.js"></script>
<button>Aplicar</button>
</form>
</body>
</html>