/* Basic page styling (minimal, for the button) */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.content {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: white;
}
/* Popup button */
#openPopup {
padding: 10px 20px;
background-color: #1DA1F2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#openPopup:hover {
background-color: #0d8ddb;
}
/* Popup (modal) styling */
.modal {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
width: 90%;
max-width: 500px; /* Fixed width */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
position: relative;
}
.close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
color: #657786;
cursor: pointer;
}
.close:hover {
color: #1DA1F2;
}
h2 {
color: #1DA1F2;
text-align: center;
margin-top: 0;
}
p {
text-align: center;
color: #657786;
margin-bottom: 20px;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccd6dd;
border-radius: 5px;
box-sizing: border-box;
}
button.generate-btn {
width: 100%;
padding: 10px;
background-color: #1DA1F2;
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
margin-bottom: 10px;
}
button.generate-btn:hover {
background-color: #0d8ddb;
}
#result {
margin-top: 15px;
padding: 10px;
background-color: #f5f8fa;
border-radius: 5px;
text-align: center;
color: #14171a;
}
#result a {
color: #1DA1F2;
text-decoration: none;
}
#result a:hover {
text-decoration: underline;
}
.button-group {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 10px;
}
.copy-btn, .post-btn {
padding: 8px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
}
.copy-btn {
background-color: #657786;
color: white;
}
.copy-btn:hover {
background-color: #536471;
}
.post-btn {
background-color: #1DA1F2;
color: white;
}
.post-btn:hover {
background-color: #0d8ddb;
}
// Popup control
const modal = document.getElementById(‘popupModal’);
const openBtn = document.getElementById(‘openPopup’);
let generatedUrl = ”; // Store the generated URL
openBtn.onclick = function() {
modal.style.display = ‘flex’;
};
function closeModal() {
modal.style.display = ‘none’;
document.getElementById(‘videoUrl’).value = ”; // Clear input
document.getElementById(‘result’).innerHTML = ”; // Clear result
document.getElementById(‘actionButtons’).style.display = ‘none’; // Hide buttons
}
// URL editing logic
function editUrl() {
const urlInput = document.getElementById(‘videoUrl’).value;
const resultDiv = document.getElementById(‘result’);
const actionButtons = document.getElementById(‘actionButtons’);
if (!urlInput || (!urlInput.includes(‘twitter.com’) && !urlInput.includes(‘x.com’))) {
resultDiv.innerHTML = “Please enter a valid Twitter/X video URL.”;
actionButtons.style.display = ‘none’;
return;
}
const statusMatch = urlInput.match(/status/d+/);
if (!statusMatch) {
resultDiv.innerHTML = “Invalid URL format. Ensure it contains a status ID.”;
actionButtons.style.display = ‘none’;
return;
}
const baseUrl = urlInput.substring(0, urlInput.indexOf(‘status/’) + statusMatch[0].length);
generatedUrl = baseUrl + “/video/1”;
resultDiv.innerHTML = `Shareable URL: ${generatedUrl}`;
actionButtons.style.display = ‘flex’; // Show copy and post buttons
}
// Copy URL to clipboard
function copyUrl() {
if (generatedUrl) {
navigator.clipboard.writeText(generatedUrl).then(() => {
alert(‘URL copied to clipboard!’);
}).catch(err => {
alert(‘Failed to copy URL: ‘ + err);
});
}
}
// Open X post window with URL
function postToX() {
if (generatedUrl) {
const tweetText = encodeURIComponent(generatedUrl);
window.open(`https://twitter.com/intent/tweet?text=${tweetText}`, ‘_blank’, ‘width=600,height=400’);
}
}
// Close modal when clicking outside
window.onclick = function(event) {
if (event.target === modal) {
closeModal();
}
};