Skip to content

Commit 3e648a6

Browse files
txtatechtxtatech
authored
Add files via upload
1 parent 4c362dd commit 3e648a6

2 files changed

Lines changed: 195 additions & 0 deletions

File tree

‎codefilm-unpacked-html_master.zip‎

1.77 KB
Binary file not shown.

‎index.html‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Overlay WebPage</title>
5+
<style>
6+
body {
7+
background: transparent;
8+
}
9+
</style>
10+
</head>
11+
<body>
12+
13+
<script>
14+
// Create overlay element
15+
const filmOverlay = document.createElement('div');
16+
filmOverlay.classList.add('film-overlay');
17+
filmOverlay.style.position = 'fixed';
18+
filmOverlay.style.top = '10px';
19+
filmOverlay.style.left = '10px';
20+
filmOverlay.style.display = 'none';
21+
filmOverlay.style.flexDirection = 'row';
22+
filmOverlay.style.alignItems = 'center';
23+
filmOverlay.style.justifyContent = 'space-between';
24+
filmOverlay.style.padding = '10px';
25+
filmOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
26+
27+
// Create resizer element
28+
const resizer = document.createElement('div');
29+
resizer.style.width = '10px';
30+
resizer.style.height = '10px';
31+
resizer.style.background = 'red';
32+
resizer.style.position = 'absolute';
33+
resizer.style.top = '0';
34+
resizer.style.left = '0';
35+
resizer.style.cursor = 'se-resize';
36+
37+
// Create green dot element
38+
const dot = document.createElement('div');
39+
dot.style.width = '10px';
40+
dot.style.height = '10px';
41+
dot.style.backgroundColor = 'green';
42+
dot.style.borderRadius = '50%';
43+
dot.style.marginRight = '5px';
44+
45+
// Create text element
46+
const text = document.createElement('pre');
47+
text.style.color = 'white';
48+
text.style.fontFamily = 'Arial, sans-serif';
49+
text.style.fontSize = '1vw'; // The font size is 1% of the viewport's width
50+
text.style.flexGrow = '1';
51+
text.style.whiteSpace = 'pre-wrap'; // Preserve whitespace and line breaks
52+
text.style.overflow = 'hidden'; // Hide overflowing content
53+
text.style.wordBreak = 'break-all'; // Break long words
54+
55+
// Create toggle button
56+
const toggleButton = document.createElement('button');
57+
toggleButton.textContent = 'Overlay';
58+
toggleButton.style.marginLeft = '10px';
59+
toggleButton.style.padding = '5px 10px';
60+
toggleButton.style.backgroundColor = 'gray';
61+
toggleButton.style.color = 'white';
62+
toggleButton.style.border = 'none';
63+
toggleButton.style.borderRadius = '4px';
64+
toggleButton.style.position = 'fixed';
65+
toggleButton.style.top = '10px';
66+
toggleButton.style.right = '10px';
67+
toggleButton.style.zIndex = '9999';
68+
69+
// Create fit button
70+
const fitButton = document.createElement('button');
71+
fitButton.textContent = 'Fit to Tab';
72+
fitButton.style.marginLeft = '10px';
73+
fitButton.style.padding = '5px 10px';
74+
fitButton.style.backgroundColor = 'gray';
75+
fitButton.style.color = 'white';
76+
fitButton.style.border = 'none';
77+
fitButton.style.borderRadius = '4px';
78+
fitButton.style.position = 'fixed';
79+
fitButton.style.top = '50px';
80+
fitButton.style.right = '10px';
81+
fitButton.style.zIndex = '9999';
82+
83+
// Variables for storing the current position and the mouse offset
84+
let drag = false;
85+
let currentX;
86+
let currentY;
87+
let offsetX;
88+
let offsetY;
89+
let isResizing = false;
90+
let scale = 1;
91+
92+
// mousedown event for dragging
93+
filmOverlay.addEventListener('mousedown', function (e) {
94+
if (e.shiftKey) {
95+
offsetX = e.clientX - parseInt(window.getComputedStyle(this).left);
96+
offsetY = e.clientY - parseInt(window.getComputedStyle(this).top);
97+
drag = true;
98+
}
99+
});
100+
101+
// mousedown event for resizing
102+
resizer.addEventListener('mousedown', function (e) {
103+
isResizing = true;
104+
});
105+
106+
// mousemove event for dragging and resizing
107+
window.addEventListener('mousemove', function (e) {
108+
e.preventDefault();
109+
if (drag) {
110+
currentX = e.clientX - offsetX;
111+
currentY = e.clientY - offsetY;
112+
filmOverlay.style.left = currentX + 'px';
113+
filmOverlay.style.top = currentY + 'px';
114+
} else if (isResizing) {
115+
let newWidth = e.pageX - filmOverlay.offsetLeft;
116+
let newHeight = e.pageY - filmOverlay.offsetTop;
117+
filmOverlay.style.width = newWidth + 'px';
118+
filmOverlay.style.height = newHeight + 'px';
119+
text.style.transform = `scale(${scale})`;
120+
adjustTextSize();
121+
}
122+
});
123+
124+
// mouseup event for dragging and resizing
125+
window.addEventListener('mouseup', function () {
126+
drag = false;
127+
isResizing = false;
128+
});
129+
130+
// mousewheel event for zooming
131+
filmOverlay.addEventListener('mousewheel', function (e) {
132+
e.preventDefault();
133+
const zoomSpeed = 0.1;
134+
scale += e.deltaY > 0 ? -zoomSpeed : zoomSpeed;
135+
scale = Math.max(scale, 0.1); // Minimum scale
136+
filmOverlay.style.transform = `scale(${scale})`;
137+
adjustTextSize();
138+
});
139+
140+
// fit button click event
141+
fitButton.addEventListener('click', function () {
142+
const tabWidth = window.innerWidth;
143+
const tabHeight = window.innerHeight;
144+
filmOverlay.style.width = tabWidth + 'px';
145+
filmOverlay.style.height = tabHeight + 'px';
146+
text.style.transform = `scale(${scale})`;
147+
adjustTextSize();
148+
});
149+
150+
// Append elements
151+
filmOverlay.appendChild(dot);
152+
filmOverlay.appendChild(text);
153+
filmOverlay.appendChild(resizer);
154+
toggleButton.addEventListener('click', async function toggleOverlay() {
155+
if (filmOverlay.style.display === 'none') {
156+
try {
157+
const copiedCode = await navigator.clipboard.readText();
158+
text.textContent = copiedCode;
159+
filmOverlay.style.display = 'flex';
160+
adjustTextSize();
161+
} catch (error) {
162+
console.log('Failed to read clipboard:', error);
163+
}
164+
} else {
165+
filmOverlay.style.display = 'none';
166+
}
167+
});
168+
169+
// Append to body
170+
const parentContainer = document.querySelector('body');
171+
parentContainer.appendChild(filmOverlay);
172+
parentContainer.appendChild(toggleButton);
173+
parentContainer.appendChild(fitButton);
174+
175+
// Adjust text size to fit container
176+
function adjustTextSize() {
177+
const containerWidth = filmOverlay.offsetWidth;
178+
const containerHeight = filmOverlay.offsetHeight;
179+
const textWidth = text.offsetWidth;
180+
const textHeight = text.offsetHeight;
181+
const scaleX = containerWidth / textWidth;
182+
const scaleY = containerHeight / textHeight;
183+
const finalScale = Math.min(scaleX, scaleY);
184+
text.style.transform = `scale(${finalScale})`;
185+
}
186+
187+
// Scale the font size initially and whenever the window is resized
188+
adjustTextSize();
189+
window.addEventListener('resize', adjustTextSize);
190+
191+
192+
</script>
193+
</body>
194+
</html>
195+

0 commit comments

Comments
 (0)