أداة اختصار الروابط - حل مبتكر

بواسطة morbah | مارس 29, 2025

🔗 أداة اختصار الروابط - حل مبتكر

لم تفهم نقطة معينة؟

اسأل المساعد الذكي وسيجيبك بناءً على محتوى هذا المقال.

<html lang="ar"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>أداة اختصار الروابط - حل مبتكر</title> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f4f4f4; margin: 0px; } .container { max-width: 800px; background: white; padding: 10px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin: auto; } input, button { width: calc(100% - 22px); padding: 12px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; display: block; } button { background-color: #007bff; color: white; font-size: 18px; cursor: pointer; } button:hover { background-color: #0056b3; } #shortenedLinkBox { margin-top: 20px; font-size: 16px; word-wrap: break-word; } </style> </head> <body> <div class="container"> <h2>🔗 أداة اختصار الروابط - حل مبتكر</h2> <input type="text" id="longUrl" placeholder="أدخل الرابط الطويل"> <button onclick="createShortLink()">اختصار الرابط</button> <div id="shortenedLinkBox"></div> </div>  <script src="https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js"></script> <script> // دالة لإنشاء الرابط المختصر مع تضمين البيانات المشفرة (الرابط وعدد النقرات) function createShortLink() { const longUrl = document.getElementById("longUrl").value.trim(); if (!longUrl) { alert("يرجى إدخال الرابط الطويل"); return; } // تكوين كائن البيانات const dataObj = { url: longUrl, clicks: 0 }; const jsonStr = JSON.stringify(dataObj); // ضغط وترميز البيانات const encoded = LZString.compressToEncodedURIComponent(jsonStr); // إنشاء الرابط المختصر باستخدام معلمة data const shortLink = window.location.origin + window.location.pathname + "?data=" + encoded; document.getElementById("shortenedLinkBox").innerHTML = `<p>✅ رابطك المختصر:</p> <p><a href="${shortLink}" target="_blank">${shortLink}</a></p>`; } // دالة لفحص معلمة data وإعادة التوجيه بعد تحديث عداد النقرات function checkRedirect() { const params = new URLSearchParams(window.location.search); const encodedData = params.get("data"); if (encodedData) { // فك الترميز وفك الضغط عن بيانات الرابط const jsonStr = LZString.decompressFromEncodedURIComponent(encodedData); try { const dataObj = JSON.parse(jsonStr); // تحديث عدد النقرات dataObj.clicks = (dataObj.clicks || 0) + 1; // إعادة ترميز البيانات مع العدد المحدث const newEncoded = LZString.compressToEncodedURIComponent(JSON.stringify(dataObj)); // تحديث عنوان URL باستخدام history.replaceState ليظهر العدد المحدث const newUrl = window.location.origin + window.location.pathname + "?data=" + newEncoded; history.replaceState(null, "", newUrl); // عرض رسالة انتظار وإعادة التوجيه document.body.innerHTML = ` <h2>🔄 جارٍ التوجيه...</h2> <p>الرابط: ${dataObj.url}</p> <p>عدد النقرات: ${dataObj.clicks}</p> <p>سيتم تحويلك خلال 5 ثوانٍ</p>`; setTimeout(() => { window.location.href = dataObj.url; }, 5000); } catch (e) { alert("خطأ في معالجة البيانات."); } } } // عند تحميل الصفحة، نفحص إذا كانت هناك معلمة data لإعادة التوجيه checkRedirect(); </script> </body> </html>

الكاتب : morbah

انا مهتم بمجال التقنية والربح من الانترنت واتطلع لنشر المزيد من المقالات التي تفيدكم

🎨 شكل الهيدر

seowriting

أداة اختصار الروابط - حل مبتكر