Skip to content

Commit

Permalink
updt da do main com base na versao beta
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gabrieel-Marques-Do-Nascimento
Gabrieel-Marques-Do-Nascimento committed Oct 24, 2024
2 parents 6b97c26 + 4b07092 commit 4cf0ddc
Show file tree
Hide file tree
Showing 7 changed files with 343 additions and 243 deletions.
15 changes: 11 additions & 4 deletions confg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,17 @@ let setings = document.getElementById("setings");
let texto = document.getElementById("paragraph");
let setingbtn = document.getElementById("setting");
let close = document.getElementById("close");

let marcador = document.getElementById("marcador");
var paragrafo_style = window.getComputedStyle(texto);
let font_size = document.getElementById("font-size");
let background_type = document.getElementById("background-type");

// Obtenha o estilo computado do elemento
var estilo = window.getComputedStyle(texto);
// Pegue o valor do line-height
var lineHeight = estilo.lineHeight;

console.log('linha',lineHeight)

close.addEventListener("click", () => {
Expand Down Expand Up @@ -78,10 +83,7 @@ setingbtn.addEventListener("click", () => {
// ----------------------------------
// comfiguracoes gerais do Site

let marcador = document.getElementById("marcador");

let font_size = document.getElementById("font-size");
let background_type = document.getElementById("background-type");

function activatedate() {
let data = loadText("comfger");
Expand Down Expand Up @@ -115,7 +117,12 @@ function loadText(name) {
console.log(loadText("comfger"));

window.onload = function () {
loadText("savedText");
activatedate();
highlight_status();

let line = true;

// Pegue o valor do line-height
var linha = line ? Number(estilo.lineHeight.replace('px','')) : - Number(paragrafo_style.lineHeight.replace('px',''));
console.log('linha',linha)
};
71 changes: 71 additions & 0 deletions focus/limite.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restrict Element within Parent</title>
<style>
#parent {
width: 400px;
height: 400px;
background-color: lightblue;
position: relative;
overflow: hidden;
}

#child {
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
cursor: grab;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>

<script>
const child = document.getElementById('child');
const parent = document.getElementById('parent');

let isDragging = false;
let offsetX = 0;
let offsetY = 0;

child.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.offsetX;
offsetY = e.offsetY;
child.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', (e) => {
if (isDragging) {
// Calcular novas coordenadas do filho
let newX = e.clientX - parent.offsetLeft - offsetX;
let newY = e.clientY - parent.offsetTop - offsetY;

// Restringir o filho dentro dos limites do pai
const maxX = parent.clientWidth - child.clientWidth;
const maxY = parent.clientHeight - child.clientHeight;

if (newX < 0) newX = 0;
if (newY < 0) newY = 0;
if (newX > maxX) newX = maxX;
if (newY > maxY) newY = maxY;

child.style.left = `${newX}px`;
child.style.top = `${newY}px`;
}
});

document.addEventListener('mouseup', () => {
isDragging = false;
child.style.cursor = 'grab';
});
</script>
</body>
</html>
151 changes: 11 additions & 140 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,59 +44,23 @@ <h1>setings</h1>
</svg>
</button>


<div id="conteiner">
<label for="marcador">Choose an input device:</label>
<select id="marcador" name="marcador">
<option value="button">Button</option>
<option value="mouse">Mouse</option>
<option value="button">Button</option>
<option value="mouse">Mouse</option>
</select>

<label for="font-size">font-size:</label>
<input type="number" name="font-size" id="font-size">
<input type="number" name="font-size" id="font-size" />

<label for="day">white:</label>
<input type="checkbox" value="black" id="background-type">
</div>
<input type="checkbox" value="black" id="background-type" />
</div>
</div>

<style>
/* versão moal */
#setings {
display: none;
z-index: 1;
position: fixed;

left: 10%;
align-items: start;
color: white;
background-color: rgba(0, 0, 0, 0.819);
width: 80%;
height: 80%;
padding: 10px;
}

#setings h1 {
background-color: black;
color: white;
width: 100%;
text-align: center;
margin: auto;

}
#setings #close {
position: relative;
background: none;
left: 90%;
top: -7%;
}
#setings #conteiner {
display: flex;
flex-direction: column;
}
#setings #conteiner input,#setings #conteiner select {
width: 60px;
}

</style>

<button class="arrogante" id="reset" lang="pt-BR">reset</button>
Expand Down Expand Up @@ -168,106 +132,13 @@ <h1>setings</h1>

<p id="paragraph">hello world</p>

<script>



const input = document.getElementById("ler");
const startBTN = document.getElementById("start");
const resetBTN = document.getElementById("reset");
const paragrafo = document.getElementById("paragraph");
const page = document.getElementById("page");

const scrollspeed = 1;
const width = window.innerWidth; // largura da janela
const height = window.innerHeight; // altura da janela

function scrollarParagrafo(pixels) {
paragrafo.scrollTo({
top: pixels - 55,
behavior: "smooth",
});
}

function style_sec(rstdis, pdis, stdis, inpdis, texto) {
resetBTN.style.display = rstdis;
paragrafo.style.display = pdis; // Faz o parágrafo aparecer
startBTN.style.display = stdis;
input.style.display = inpdis;
paragrafo.innerHTML = texto;
}



let buttons = document.querySelectorAll(".scrollbt");
// funcso que define se os bottons devem aparecer ou ficar escondido
function buttonstatic(estado)
{
buttons.forEach(button =>
{
button.style.display= estado
})
}


input.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
// Aqui você pode colocar a ação que deseja realizar ao pressionar Enter
saveText(input.value,"savedText");
buttonstatic("block")
style_sec("block", "block", "none", "none", input.value);
}
});

startBTN.addEventListener("click", () => {
saveText(input.value,"savedText");
style_sec("block", "block", "none", "none", input.value);
buttonstatic("block")

});
resetBTN.addEventListener("click", () => {
buttonstatic("none")
style_sec("none", "none", "block", "block", "");

});
let pixels = 0;

page.addEventListener("click", () => {
const scrolltop = paragrafo.scrollTop;
pixels = height + scrolltop;
console.log("pixels", pixels, "height", height);
scrollarParagrafo(pixels);
});



function saveText(data, name) {
// Pega o texto da área de texto
const text = data;
// Salva no LocalStorage
localStorage.setItem(name, text);
}

function loadText(name) {
// Carrega o texto salvo do LocalStorage, se existir
const savedText = localStorage.getItem(name);
if (savedText) {
style_sec("block", "block", "none", "none", savedText);
input.value = savedText;
return savedText
}
}

// Chama a função para carregar o texto ao abrir a página
window.onload = loadText("savedText");



<script src="script.js">
</script>


<script src="confg.js"></script>
<!--
<script src="setas.js"></script>
<script src="scroll.js"></script>
-->
</body>
</html>
Loading

0 comments on commit 4cf0ddc

Please sign in to comment.