صفحة تحويل روابط مثل سكويز بوب بدون مغادرة الصفحة مع عداد وتحويل تلقائى والوان جذابة ومعه كود تضمين لوضعه بمواقع اخرى واستخدام الاعلانات وتوليد روابط قصيرة
صفحة تحويل روابط مثل سكويز بوب
ممتاز! بما إنك تريد صفحة تحويل روابط مثل سكويز بوب (بدون مغادرة الصفحة) وبمواصفات متقدمة، إليك مشروع متكامل فيه:
واجهة جذابة داخل صفحة الموقع (Popup/Overlay)
عداد وتحويل تلقائي
أماكن للإعلانات
كود تضمين يمكن وضعه بأي موقع
نظام توليد روابط قصيرة
✅ أولاً: تصميم صفحة التحويل (كـ Pop-up Overlay)
.code-box {
position: relative;
background: #272822;
color: #f8f8f2;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
font-family: monospace;
direction: ltr;
overflow: auto;
}
.code-box textarea {
width: 100%;
height: 250px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.code-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.code-buttons button {
padding: 8px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.code-buttons button:hover {
background-color: #0056b3;
}
#squeezePopup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
#popupContent {
background: #ffffff;
padding: 30px;
border-radius: 20px;
width: 90%;
max-width: 500px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
animation: fadeIn 0.5s ease;
font-family: ‘Segoe UI’, sans-serif;
}
.ads {
background: #f0f0f0;
padding: 15px;
margin: 10px 0;
border-radius: 10px;
font-size: 14px;
}
#countdown {
font-size: 24px;
color: #e67e22;
margin: 15px 0;
}
@keyframes fadeIn {
from { opacity: 0 }
to { opacity: 1 }
}
function showSqueezePopup(targetUrl, waitSeconds = 10) {
const popup = document.getElementById(“squeezePopup”);
const countdownEl = document.getElementById(“countdown”);
const manualLink = document.getElementById(“manualLink”);
popup.style.display = “flex”;
manualLink.href = targetUrl;
let countdown = waitSeconds;
countdownEl.textContent = countdown;
const interval = setInterval(() => {
countdown–;
countdownEl.textContent = countdown;
if (countdown <= 0) {
clearInterval(interval);
window.location.href = targetUrl;
}
}, 1000);
}
// مثال: showSqueezePopup("https://example.com");
function copyCode() {
const code = document.getElementById(“myCode”);
code.select();
document.execCommand(“copy”);
alert(“تم نسخ الكود!”);
}
function downloadCode() {
const code = document.getElementById(“myCode”).value;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.html”;
link.click();
}
function clearCode() {
if (confirm(“هل أنت متأكد من مسح الكود؟”)) {
document.getElementById(“myCode”).value = “”;
}
}
✅ ثانياً: كود التضمين الخارجي (لأي موقع)
أنشئ ملف JavaScript في موقعك (مثلًا embed.js) وضع فيه:
.code-box {
position: relative;
background: #272822;
color: #f8f8f2;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
font-family: monospace;
direction: ltr;
overflow: auto;
}
.code-box textarea {
width: 100%;
height: 250px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.code-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.code-buttons button {
padding: 8px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.code-buttons button:hover {
background-color: #0056b3;
}
function loadRedirectPopup(shortCode) {
fetch(`https://yourdomain.com/api/get-url?code=${shortCode}`)
.then(res => res.json())
.then(data => {
if (data.url) {
const script = document.createElement(“script”);
script.src = “https://yourdomain.com/redirect-popup.js”;
script.onload = () => {
showSqueezePopup(data.url, 10); // عداد 10 ثواني
};
document.body.appendChild(script);
}
});
}
function copyCode() {
const code = document.getElementById(“myCode”);
code.select();
document.execCommand(“copy”);
alert(“تم نسخ الكود!”);
}
function downloadCode() {
const code = document.getElementById(“myCode”).value;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.html”;
link.click();
}
function clearCode() {
if (confirm(“هل أنت متأكد من مسح الكود؟”)) {
document.getElementById(“myCode”).value = “”;
}
}
ثم داخل المواقع الأخرى:
.code-box {
position: relative;
background: #272822;
color: #f8f8f2;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
font-family: monospace;
direction: ltr;
overflow: auto;
}
.code-box textarea {
width: 100%;
height: 250px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.code-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.code-buttons button {
padding: 8px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.code-buttons button:hover {
background-color: #0056b3;
}
loadRedirectPopup(“abc123”); // استخدم كود الرابط القصير هنا
function copyCode() {
const code = document.getElementById(“myCode”);
code.select();
document.execCommand(“copy”);
alert(“تم نسخ الكود!”);
}
function downloadCode() {
const code = document.getElementById(“myCode”).value;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.html”;
link.click();
}
function clearCode() {
if (confirm(“هل أنت متأكد من مسح الكود؟”)) {
document.getElementById(“myCode”).value = “”;
}
}
✅ ثالثاً: نظام توليد روابط قصيرة (خلفية PHP بسيطة)
قاعدة البيانات:
.code-box {
position: relative;
background: #272822;
color: #f8f8f2;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
font-family: monospace;
direction: ltr;
overflow: auto;
}
.code-box textarea {
width: 100%;
height: 250px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.code-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.code-buttons button {
padding: 8px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.code-buttons button:hover {
background-color: #0056b3;
}
CREATE TABLE short_links (
id INT AUTO_INCREMENT PRIMARY KEY,
code VARCHAR(10) UNIQUE,
url TEXT
);
function copyCode() {
const code = document.getElementById(“myCode”);
code.select();
document.execCommand(“copy”);
alert(“تم نسخ الكود!”);
}
function downloadCode() {
const code = document.getElementById(“myCode”).value;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.html”;
link.click();
}
function clearCode() {
if (confirm(“هل أنت متأكد من مسح الكود؟”)) {
document.getElementById(“myCode”).value = “”;
}
}
إنشاء رابط قصير (PHP):
.code-box {
position: relative;
background: #272822;
color: #f8f8f2;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
font-family: monospace;
direction: ltr;
overflow: auto;
}
.code-box textarea {
width: 100%;
height: 250px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.code-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.code-buttons button {
padding: 8px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.code-buttons button:hover {
background-color: #0056b3;
}
prepare(“INSERT INTO short_links (code, url) VALUES (?, ?)”);
$stmt->execute([$code, $url]);
echo json_encode([‘short’ => $code]);
function copyCode() {
const code = document.getElementById(“myCode”);
code.select();
document.execCommand(“copy”);
alert(“تم نسخ الكود!”);
}
function downloadCode() {
const code = document.getElementById(“myCode”).value;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.html”;
link.click();
}
function clearCode() {
if (confirm(“هل أنت متأكد من مسح الكود؟”)) {
document.getElementById(“myCode”).value = “”;
}
}
جلب الرابط الطويل:
.code-box {
position: relative;
background: #272822;
color: #f8f8f2;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
font-family: monospace;
direction: ltr;
overflow: auto;
}
.code-box textarea {
width: 100%;
height: 250px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.code-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.code-buttons button {
padding: 8px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.code-buttons button:hover {
background-color: #0056b3;
}
prepare(“SELECT url FROM short_links WHERE code = ?”);
$stmt->execute([$code]);
$data = $stmt->fetch();
echo json_encode([‘url’ => $data ? $data[‘url’] : null]);
function copyCode() {
const code = document.getElementById(“myCode”);
code.select();
document.execCommand(“copy”);
alert(“تم نسخ الكود!”);
}
function downloadCode() {
const code = document.getElementById(“myCode”).value;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.html”;
link.click();
}
function clearCode() {
if (confirm(“هل أنت متأكد من مسح الكود؟”)) {
document.getElementById(“myCode”).value = “”;
}
}
✅ إعلان جاهز (يمكنك ربط AdSense أو HTML يدوي):
.code-box {
position: relative;
background: #272822;
color: #f8f8f2;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
font-family: monospace;
direction: ltr;
overflow: auto;
}
.code-box textarea {
width: 100%;
height: 250px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.code-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.code-buttons button {
padding: 8px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.code-buttons button:hover {
background-color: #0056b3;
}
function copyCode() {
const code = document.getElementById(“myCode”);
code.select();
document.execCommand(“copy”);
alert(“تم نسخ الكود!”);
}
function downloadCode() {
const code = document.getElementById(“myCode”).value;
const blob = new Blob(, { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.html”;
link.click();
}
function clearCode() {
if (confirm(“هل أنت متأكد من مسح الكود؟”)) {
document.getElementById(“myCode”).value = “”;
}
}
هل تود نسخة:
✅ جاهزة على HTML/CSS/JS للتحميل؟
✅ تعمل عبر Node.js أو Laravel بدلاً من PHP؟
✅ بواجهة توليد سهلة للمستخدمين؟
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
قول لي الطريقة اللي تناسبك، وأنا أجهزها لك بالكامل 💻✨
sehaa 
أضف تعليق