Discuss Scratch
- Discussion Forums
- » Things I'm Making and Creating
- » Some projects...
- Vico87
-
Scratcher
5 posts
Some projects...
Hey guys! Here I'll share some things I'm doing outside Scratch! Hope you enjoy!
- Vico87
-
Scratcher
5 posts
Some projects...
Well, this is the first thing I do outside Scratch. It's a Windows 7-like Google browser.
Select the code, paste it into a notepad and save it as an .html file (make sure to select “All file types” or somehting like that)
Or just save it as a text file, then enable file extensions in explorer and change the extension from .txt to .html
Select the code, paste it into a notepad and save it as an .html file (make sure to select “All file types” or somehting like that)
Or just save it as a text file, then enable file extensions in explorer and change the extension from .txt to .html
<html>
<head>
<title>Windows 7</title>
<style>
body {
margin: 0;
padding: 0;
background: radial-gradient(circle at 40% 40%, #1c3d5a 0%, #2b5876 40%, #4e92b8 75%, #0f2537 100%);
height: 100vh;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
perspective: 1200px;
user-select: none;
}
.window-wrapper {
position: absolute;
width: 760px;
height: 540px;
filter: drop-shadow(0 35px 55px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 35px rgba(130, 200, 255, 0.3));
box-sizing: border-box;
}
.window-wrapper.dragging, .window-wrapper.resizing {
transition: none !important;
}
.window-wrapper.maximized {
top: 26px !important;
left: 0px !important;
width: 100vw !important;
height: calc(100vh - 62px) !important;
}
.window-wrapper.maximized .window {
border-radius: 0 !important;
}
.window-wrapper.maximized .resizer { display: none; }
.window {
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(240, 248, 255, 0.15) 0%, rgba(200, 225, 250, 0.08) 50%, rgba(160, 200, 240, 0.12) 100%);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-left: 4px solid rgba(255, 255, 255, 0.35);
border-right: 4px solid rgba(255, 255, 255, 0.35);
border-bottom: 4px solid rgba(255, 255, 255, 0.4);
border-top: none;
border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(220, 240, 255, 0.3) 50%, rgba(255, 255, 255, 0.15) 100%) 1;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -1px 2px rgba(0, 0, 0, 0.3), inset 1px 0 1px rgba(255, 255, 255, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.5);
display: flex;
flex-direction: column;
position: relative;
box-sizing: border-box;
}
.title-bar {
position: absolute;
top: -26px;
left: -4px;
width: calc(100% + 8px);
height: 26px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(210, 235, 255, 0.4) 40%, rgba(150, 200, 240, 0.25) 60%, rgba(180, 220, 250, 0.35) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.75);
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
border-top-left-radius: 7px;
border-top-right-radius: 7px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
box-sizing: border-box;
color: #ffffff;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 12px;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
z-index: 20;
overflow: hidden;
cursor: default;
}
.title-bar::after {
content: "";
position: absolute;
top: -60%;
left: -30%;
width: 160%;
height: 220%;
background: linear-gradient(45deg, transparent 38%, rgba(255, 255, 255, 0.95) 43%, rgba(255, 255, 255, 0.1) 45%, transparent 46%, transparent 53%, rgba(255, 255, 255, 0.8) 57%, rgba(255, 255, 255, 0.15) 59%, transparent 61%);
pointer-events: none;
}
.title-text { display: flex; align-items: center; gap: 6px; z-index: 25; }
.window-controls { position: absolute; top: 0; right: 4px; display: flex; height: 17px; z-index: 25; }
.win-btn {
width: 25px;
height: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(200, 220, 240, 0.2) 50%, rgba(255, 255, 255, 0.08) 100%);
border-top: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
border-left: 1px solid rgba(255, 255, 255, 0.25);
border-right: 1px solid rgba(255, 255, 255, 0.25);
font-size: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #ffffff;
box-sizing: border-box;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.win-btn:first-child { border-bottom-left-radius: 4px; }
.win-btn:hover {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(220, 240, 255, 0.4) 50%, rgba(255, 255, 255, 0.15) 100%);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 0 5px rgba(255, 255, 255, 0.5);
}
.win-btn.close {
width: 40px;
background: linear-gradient(to bottom, rgba(255, 80, 95, 0.8) 0%, rgba(220, 15, 30, 0.8) 50%, rgba(180, 10, 20, 0.85) 50%, rgba(232, 17, 35, 0.8) 100%);
border-color: rgba(255, 120, 120, 0.4);
border-top-right-radius: 0px;
border-bottom-right-radius: 4px;
font-weight: bold;
font-size: 9px;
box-shadow: inset 0 1px 1px rgba(255, 180, 180, 0.7), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.win-btn.close:hover {
background: linear-gradient(to bottom, #ff4d63 0%, #e81123 50%, #cc0a1c 50%, #ffaa00 100%);
box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.85), inset 0 -2px 5px rgba(255, 170, 0, 0.95), 0 0 10px rgba(232, 17, 35, 0.9);
}
.window-body {
background-color: #f0f0f0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
font-size: small;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-top: 1px solid rgba(150, 185, 220, 0.3);
z-index: 5;
overflow: hidden;
}
.browser-toolbar {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(210, 235, 255, 0.4) 40%, rgba(150, 200, 240, 0.25) 60%, rgba(180, 220, 250, 0.35) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.45);
padding: 7px 10px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
flex-shrink: 0;
}
.nav-group { display: flex; align-items: center; gap: 4px; }
.nav-btn {
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.6);
background: radial-gradient(circle at 50% 30%, #4da6ff 0%, #0066cc 60%, #004080 100%);
color: white; font-weight: bold;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), 0 1px 3px rgba(0,0,0,0.25);
transition: filter 0.15s ease;
}
.nav-btn.back { width: 34px; height: 34px; }
.nav-btn:hover:not(:disabled) { filter: brightness(1.15); }
.nav-btn:disabled {
background: linear-gradient(to bottom, rgba(220, 220, 220, 0.6) 0%, rgba(190, 190, 190, 0.6) 100%);
border-color: rgba(255, 255, 255, 0.3);
color: rgba(255, 255, 255, 0.5);
cursor: default;
box-shadow: none;
}
.address-container {
flex: 1; display: flex; align-items: center;
background: #ffffff;
border: 1px solid #7f9db9;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.6);
overflow: hidden;
}
.address-bar { flex: 1; display: flex; align-items: center; padding: 3px 6px; }
.address-bar input {
width: 100%; border: none; outline: none;
font-family: Arial, sans-serif; font-size: 13px; color: #222;
background: transparent;
}
.refresh-btn {
width: 26px; height: 24px; border: none; background: transparent;
cursor: pointer; display: flex; align-items: center; justify-content: center;
color: #555; font-size: 12px; border-left: 1px solid #d0d0d0;
transition: background 0.1s ease, color 0.1s ease;
}
.refresh-btn:hover { background: #e5f1fb; color: #000; }
.browser-content {
flex: 1; background: #ffffff; position: relative;
overflow: hidden; display: flex; flex-direction: column;
}
.page { display: none; flex: 1; flex-direction: column; height: 100%; position: relative; }
.page.active { display: flex; }
.home-container {
display: flex; flex-direction: column; align-items: center;
justify-content: center; flex: 1; text-align: center; padding-bottom: 50px;
}
.top-links { position: absolute; top: 12px; right: 15px; font-size: 11px; }
.top-links a { color: #00c; margin-left: 15px; text-decoration: underline; cursor: pointer; }
.logo img { border: 0; }
.search-box { margin-top: 15px; margin-bottom: 20px; }
.search-input {
width: 450px; height: 24px; font-size: 16px;
border: 1px solid #7f9db9; border-radius: 1px; padding: 2px 4px; outline: none;
}
.buttons { margin-top: 15px; }
.google-btn {
background: linear-gradient(to bottom, #fcfcfc 0%, #f0f0f0 100%);
border: 1px solid #b8b8b8; border-radius: 2px;
font-family: Arial, sans-serif; font-size: 12px;
padding: 4px 12px; margin: 0 4px; cursor: pointer; color: #333;
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.google-btn:hover {
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
border-color: #717171; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.footer { position: absolute; bottom: 10px; width: 100%; font-size: 10px; color: #666; line-height: 1.5; text-align: center; }
.footer a { color: #00c; text-decoration: underline; margin: 0 10px; cursor: pointer; }
iframe { width: 100%; height: 100%; border: none; }
.resizer { position: absolute; z-index: 30; }
.resizer.right { right: 0; top: 0; width: 5px; height: 100%; cursor: ew-resize; }
.resizer.bottom { left: 0; bottom: 0; width: 100%; height: 5px; cursor: ns-resize; }
.resizer.corner { right: 0; bottom: 0; width: 15px; height: 15px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(120, 120, 120, 0.4) 50%, transparent 60%, rgba(120, 120, 120, 0.4) 70%, transparent 70%); }
.resizer.top { left: 0; top: -26px; width: 100%; height: 5px; cursor: ns-resize; }
.resizer.left { left: -4px; top: 0; width: 5px; height: 100%; cursor: ew-resize; }
.taskbar {
position: fixed; bottom: 0; left: 0; width: 100vw; height: 36px;
background: rgba(15, 25, 35, 0.85); backdrop-filter: blur(8px);
display: flex; align-items: center; padding: 0 10px; box-sizing: border-box;
z-index: 1000; border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.taskbar-item {
background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 3px; color: white; font-size: 11px; padding: 4px 10px;
display: flex; align-items: center; gap: 6px; cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.taskbar-item:hover { background: rgba(255, 255, 255, 0.25); }
</style>
</head>
<body>
<div class="window-wrapper" id="windowWrapper">
<div class="window" id="mainWindow">
<div class="title-bar" id="titleBar">
<div class="title-text"><span></span> Google - Explorador Web</div>
<div class="window-controls">
<div class="win-btn" id="minBtn" title="Minimizar">─</div>
<div class="win-btn" id="maxBtn" title="Maximizar">▢</div>
<div class="win-btn close" id="closeBtn" title="Cerrar">✕</div>
</div>
</div>
<div class="window-body">
<div class="browser-toolbar">
<div class="nav-group">
<button class="nav-btn back" id="backBtn" title="Página anterior" disabled>◀</button>
<button class="nav-btn forward" id="forwardBtn" title="Página siguiente" disabled>▶</button>
</div>
<div class="address-container">
<div class="address-bar">
<input type="text" id="addressInput" value="http://www.google.com/classic">
</div>
<button class="refresh-btn" id="refreshBtn" title="Actualizar página">↻</button>
</div>
</div>
<div class="browser-content">
<div class="page active" id="page-home">
<div class="top-links">
<a id="linkAbout">About Google</a>
</div>
<div class="home-container">
<div class="logo"><img src="https://www.google.com/images/logos/ps_logo2.png" alt="Google" width="276" height="110"></div>
<div class="search-box">
<form id="searchForm">
<input type="text" class="search-input" id="searchInput" size="55" value=""><br>
<div class="buttons">
<input type="submit" class="google-btn" value="Google Search">
<input type="button" class="google-btn" id="luckyBtn" value="I\m Feeling Lucky">
</div>
</form>
</div>
</div>
<div class="footer">
<div><a href="#">Advertising Programs</a><a href="#">Business Solutions</a><a id="linkAboutFooter">About Google</a></div>
<div style="margin-top: 3px;">©2006 - Google</div>
</div>
</div>
<div class="page" id="page-web">
<iframe id="webIframe" src="about:blank"></iframe>
</div>
</div>
</div>
<div class="resizer right" data-dir="right"></div>
<div class="resizer bottom" data-dir="bottom"></div>
<div class="resizer corner" data-dir="corner"></div>
<div class="resizer top" data-dir="top"></div>
<div class="resizer left" data-dir="left"></div>
</div>
</div>
<div class="taskbar" id="taskbar">
<div class="taskbar-item" id="taskbarItem"><span></span> Google - Explorador Web</div>
</div>
<script>
const wrapper = document.getElementById("windowWrapper");
const titleBar = document.getElementById("titleBar");
const minBtn = document.getElementById("minBtn");
const maxBtn = document.getElementById("maxBtn");
const closeBtn = document.getElementById("closeBtn");
const taskbarItem = document.getElementById("taskbarItem");
const backBtn = document.getElementById("backBtn");
const forwardBtn = document.getElementById("forwardBtn");
const refreshBtn = document.getElementById("refreshBtn");
const addressInput = document.getElementById("addressInput");
const searchForm = document.getElementById("searchForm");
const searchInput = document.getElementById("searchInput");
const linkAbout = document.getElementById("linkAbout");
const linkAboutFooter = document.getElementById("linkAboutFooter");
const luckyBtn = document.getElementById("luckyBtn");
const webIframe = document.getElementById("webIframe");
let savedRect = { left: 0, top: 0, width: 760, height: 540 };
let windowState = "open";
function centerWindow() {
const w = wrapper.offsetWidth;
const h = wrapper.offsetHeight;
const left = (window.innerWidth - w) / 2;
const top = Math.max(30, (window.innerHeight - h - 36) / 2);
wrapper.style.left = left + "px";
wrapper.style.top = top + "px";
savedRect = { left, top, width: w, height: h };
}
centerWindow();
wrapper.style.transformOrigin = "top center";
wrapper.style.transform = "rotateX(-25deg) scale(0.9)";
wrapper.style.opacity = "0";
void wrapper.offsetWidth;
wrapper.style.transition = "transform 0.4s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 0.4s ease";
wrapper.style.transform = "rotateX(0deg) scale(1)";
wrapper.style.opacity = "1";
let historyStack = ["http://www.google.com/classic"];
let historyIndex = 0;
function navigateTo(url, push = true) {
if (push) {
historyStack = historyStack.slice(0, historyIndex + 1);
historyStack.push(url);
historyIndex++;
}
addressInput.value = url;
document.querySelectorAll(".page").forEach(p => p.classList.remove("active"));
if (url.includes("google.com/classic") || url === "http://www.google.com/") {
document.getElementById("page-home").classList.add("active");
} else {
document.getElementById("page-web").classList.add("active");
let targetUrl = url;
if (url.includes("google.com/about")) targetUrl = "https://en.wikipedia.org/wiki/Google";
else if (url.includes("google.com/search")) {
const query = url.split("q=")[1];
targetUrl = "https://www.bing.com/search?q=" + query;
}
else if (!targetUrl.startsWith("http://") && !targetUrl.startsWith("https://")) {
targetUrl = "https://" + targetUrl;
}
webIframe.src = targetUrl;
}
backBtn.disabled = historyIndex <= 0;
forwardBtn.disabled = historyIndex >= historyStack.length - 1;
}
backBtn.addEventListener("click", () => {
if (historyIndex > 0) {
historyIndex--;
navigateTo(historyStack[historyIndex], false);
}
});
forwardBtn.addEventListener("click", () => {
if (historyIndex < historyStack.length - 1) {
historyIndex++;
navigateTo(historyStack[historyIndex], false);
}
});
refreshBtn.addEventListener("click", () => {
const currentUrl = historyStack[historyIndex];
if (!currentUrl.includes("google.com/classic")) {
webIframe.src = webIframe.src;
}
});
addressInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") navigateTo(addressInput.value);
});
searchForm.addEventListener("submit", (e) => {
e.preventDefault();
if (searchInput.value.trim() !== "") {
navigateTo("http://www.google.com/search?q=" + encodeURIComponent(searchInput.value));
}
});
luckyBtn.addEventListener("click", () => navigateTo("http://www.google.com/about"));
linkAbout.addEventListener("click", () => navigateTo("http://www.google.com/about"));
linkAboutFooter.addEventListener("click", () => navigateTo("http://www.google.com/about"));
let isDragging = false, startX, startY;
titleBar.addEventListener("mousedown", (e) => {
if (e.target.classList.contains("win-btn") || wrapper.classList.contains("maximized")) return;
isDragging = true;
wrapper.classList.add("dragging");
startX = e.clientX - wrapper.offsetLeft;
startY = e.clientY - wrapper.offsetTop;
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
});
function onMouseMove(e) {
if (!isDragging) return;
const left = e.clientX - startX;
let top = e.clientY - startY;
if (top < 0) top = 0;
wrapper.style.left = left + "px";
wrapper.style.top = top + "px";
savedRect.left = left;
savedRect.top = top;
}
function onMouseUp() {
isDragging = false;
wrapper.classList.remove("dragging");
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
}
let activeResizer = null, resizeStartX, resizeStartY, startW, startH, startL, startT;
document.querySelectorAll(".resizer").forEach(res => {
res.addEventListener("mousedown", (e) => {
if (wrapper.classList.contains("maximized")) return;
activeResizer = res.getAttribute("data-dir");
wrapper.classList.add("resizing");
resizeStartX = e.clientX;
resizeStartY = e.clientY;
startW = wrapper.offsetWidth;
startH = wrapper.offsetHeight;
startL = wrapper.offsetLeft;
startT = wrapper.offsetTop;
document.addEventListener("mousemove", onResizeMove);
document.addEventListener("mouseup", onResizeUp);
e.stopPropagation();
});
});
function onResizeMove(e) {
if (!activeResizer) return;
const dx = e.clientX - resizeStartX;
const dy = e.clientY - resizeStartY;
let newW = startW, newH = startH, newL = startL, newT = startT;
if (activeResizer === "right" || activeResizer === "corner") newW = Math.max(380, startW + dx);
if (activeResizer === "bottom" || activeResizer === "corner") newH = Math.max(280, startH + dy);
if (activeResizer === "left") {
let potentialW = startW - dx;
if (potentialW > 380) { newW = potentialW; newL = startL + dx; }
}
if (activeResizer === "top") {
let potentialH = startH - dy;
let potentialT = startT + dy;
if (potentialH > 280 && potentialT >= 0) { newH = potentialH; newT = potentialT; }
}
wrapper.style.width = newW + "px";
wrapper.style.height = newH + "px";
wrapper.style.left = newL + "px";
wrapper.style.top = newT + "px";
savedRect = { left: newL, top: newT, width: newW, height: newH };
}
function onResizeUp() {
activeResizer = null;
wrapper.classList.remove("resizing");
document.removeEventListener("mousemove", onResizeMove);
document.removeEventListener("mouseup", onResizeUp);
}
minBtn.addEventListener("click", () => {
const windowRect = wrapper.getBoundingClientRect();
const taskRect = taskbarItem.getBoundingClientRect();
const deltaX = (taskRect.left + taskRect.width / 2) - (windowRect.left + windowRect.width / 2);
const deltaY = (taskRect.top + taskRect.height / 2) - (windowRect.top + windowRect.height / 2);
const scaleX = taskRect.width / windowRect.width;
const scaleY = taskRect.height / windowRect.height;
wrapper.style.transformOrigin = "center center";
wrapper.style.transition = "transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease";
wrapper.style.transform = "translate(" + deltaX + "px, " + deltaY + "px) scale(" + scaleX + ", " + scaleY + ")";
wrapper.style.opacity = "0";
setTimeout(() => {
wrapper.style.display = "none";
windowState = "minimized";
}, 350);
});
taskbarItem.addEventListener("click", () => {
if (windowState === "minimized") {
const windowRect = wrapper.getBoundingClientRect();
const taskRect = taskbarItem.getBoundingClientRect();
const deltaX = (taskRect.left + taskRect.width / 2) - (windowRect.left + windowRect.width / 2);
const deltaY = (taskRect.top + taskRect.height / 2) - (windowRect.top + windowRect.height / 2);
const scaleX = taskRect.width / windowRect.width;
const scaleY = taskRect.height / windowRect.height;
wrapper.style.transformOrigin = "center center";
wrapper.style.transition = "none";
wrapper.style.transform = "translate(" + deltaX + "px, " + deltaY + "px) scale(" + scaleX + ", " + scaleY + ")";
wrapper.style.opacity = "0";
wrapper.style.display = "block";
void wrapper.offsetWidth;
wrapper.style.transition = "transform 0.35s cubic-bezier(0, 0, 0.2, 1), opacity 0.35s ease";
wrapper.style.transform = "translate(0px, 0px) scale(1, 1)";
wrapper.style.opacity = "1";
setTimeout(() => {
wrapper.style.transition = "";
wrapper.style.transform = "";
windowState = "open";
}, 350);
} else if (windowState === "closed") {
wrapper.style.display = "block";
wrapper.style.transformOrigin = "top center";
wrapper.style.transition = "none";
wrapper.style.transform = "rotateX(-25deg) scale(0.9)";
wrapper.style.opacity = "0";
void wrapper.offsetWidth;
wrapper.style.transition = "transform 0.4s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 0.4s ease";
wrapper.style.transform = "rotateX(0deg) scale(1)";
wrapper.style.opacity = "1";
setTimeout(() => {
wrapper.style.transition = "";
wrapper.style.transform = "";
windowState = "open";
}, 400);
}
});
maxBtn.addEventListener("click", () => {
if (!wrapper.classList.contains("maximized")) {
savedRect.left = wrapper.offsetLeft;
savedRect.top = wrapper.offsetTop;
savedRect.width = wrapper.offsetWidth;
savedRect.height = wrapper.offsetHeight;
wrapper.classList.add("maximized");
maxBtn.textContent = "❐";
maxBtn.title = "Restaurar";
} else {
wrapper.classList.remove("maximized");
maxBtn.textContent = "▢";
maxBtn.title = "Maximizar";
wrapper.style.left = savedRect.left + "px";
wrapper.style.top = savedRect.top + "px";
wrapper.style.width = savedRect.width + "px";
wrapper.style.height = savedRect.height + "px";
}
});
closeBtn.addEventListener("click", () => {
wrapper.style.transformOrigin = "bottom center";
wrapper.style.transition = "transform 0.3s cubic-bezier(0.2, 0, 0.8, 0.2), opacity 0.3s ease";
wrapper.style.transform = "rotateX(25deg) scale(0.9)";
wrapper.style.opacity = "0";
setTimeout(() => {
wrapper.style.display = "none";
wrapper.style.transition = "";
windowState = "closed";
}, 300);
});
</script>
</body>
</html>
Last edited by Vico87 (Sept. 14, 2026 23:20:18)
- Discussion Forums
- » Things I'm Making and Creating
-
» Some projects...


