Skip to content

Commit

Permalink
Create beta12.html
Browse files Browse the repository at this point in the history
  • Loading branch information
kai9987kai authored Dec 27, 2024
1 parent 8f00f50 commit 985dd9f
Showing 1 changed file with 201 additions and 0 deletions.
201 changes: 201 additions & 0 deletions beta12.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Web Page</title>
<link rel="manifest" href="/manifest.json">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* General Styles */
.draggable { cursor: move; }
.resizable { resize: both; overflow: auto; position: relative; }
.webPluginToggleButton {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 30px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
font-size: 16px;
z-index: 10000;
}
.webPluginPopup {
display: none;
position: fixed;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
background-color: white;
border: 1px solid #ddd;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
z-index: 10001;
}
.custom-popup {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.custom-popup-content {
margin: 10% auto;
padding: 20px;
width: 70%;
position: relative;
}
.custom-close-btn, .custom-zoom-btn {
cursor: pointer;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
color: #fff;
}
.custom-zoom-btn { right: 65px; }
</style>
</head>
<body>
<!-- Web Plugin Toggle Button and Popup -->
<button class="webPluginToggleButton">▶ Web Plugins</button>
<div class="webPluginPopup">
<form class="webPluginForm">
<textarea class="webPluginHtmlScriptInput" placeholder="Paste your HTML script here"></textarea>
<button type="submit">Apply</button>
</form>
</div>

<!-- Custom Popup for Images -->
<div id="custom-popup" class="custom-popup">
<div class="custom-popup-content">
<span class="custom-close-btn" onclick="closeCustomPopup()">&times;</span>
<span class="custom-zoom-btn" onclick="zoomCustomImage()">&#128269;</span>
<img id="custom-popup-img" src="" alt="Popup Image" style="width:100%">
</div>
</div>

<script>
// Web Plugin Functionality
document.querySelector('.webPluginToggleButton').addEventListener('click', function() {
var popup = document.querySelector('.webPluginPopup');
var isHidden = popup.style.display === 'none';
popup.style.display = isHidden ? 'block' : 'none';
this.textContent = isHidden ? '▼ Web Plugins' : '▶ Web Plugins';
});

document.querySelector('.webPluginForm').addEventListener('submit', function(event) {
event.preventDefault();
var scriptContent = document.querySelector('.webPluginHtmlScriptInput').value;
localStorage.setItem('webPluginScripts', scriptContent);
executeScript(scriptContent);
});

function executeScript(scriptContent) {
var script = document.createElement('script');
script.innerHTML = scriptContent;
document.body.appendChild(script);
}

// Image Popup Functionality
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('img').forEach(function(img) {
img.onclick = function() {
openCustomPopup(this.src);
};
});
});

function openCustomPopup(src) {
document.getElementById('custom-popup').style.display = 'block';
document.getElementById('custom-popup-img').src = src;
}

function closeCustomPopup() {
document.getElementById('custom-popup').style.display = 'none';
}

function zoomCustomImage() {
var img = document.getElementById('custom-popup-img');
var isZoomed = img.style.width === '100%';
img.style.width = isZoomed ? '200%' : '100%';
}

// Draggable and Resizable Functionality
function makeDraggable(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;

function dragMouseDown(e) {
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}

function elementDrag(e) {
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}

function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}

function makeResizable(elmnt) {
let resizer = document.createElement('div');
resizer.style.width = '10px';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.right = '0';
resizer.style.bottom = '0';
resizer.style.cursor = 'se-resize';
elmnt.appendChild(resizer);
resizer.addEventListener('mousedown', initResize, false);

function initResize(e) {
window.addEventListener('mousemove', resize, false);
window.addEventListener('mouseup', stopResize, false);
}

function resize(e) {
elmnt.style.width = (e.clientX - elmnt.getBoundingClientRect().left) + 'px';
elmnt.style.height = (e.clientY - elmnt.getBoundingClientRect().top) + 'px';
}

function stopResize() {
window.removeEventListener('mousemove', resize, false);
window.removeEventListener('mouseup', stopResize, false);
}
}

// Apply Draggable and Resizable to All Elements
window.onload = function() {
var allElements = document.getElementsByTagName("*");
for (var i = 0; i < allElements.length; i++) {
makeDraggable(allElements[i]);
makeResizable(allElements[i]);
allElements[i].classList.add('draggable', 'resizable');
}
};
</script>
</body>
</html>

0 comments on commit 985dd9f

Please sign in to comment.