Skip to content

Instantly share code, notes, and snippets.

@hsnsbhshsh

hsnsbhshsh/index.html

Created November 11, 2025 21:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hsnsbhshsh/d5900e71099520ff92d274b95ccf60b2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hsnsbhshsh/d5900e71099520ff92d274b95ccf60b2 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نظام التشفير المتقدم - تشفير وفك التشفير</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);
color: #e0e0e0;
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
max-width: 900px;
width: 100%;
background: #1a1a1a;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 200, 100, 0.3);
padding: 30px;
margin-top: 20px;
border: 1px solid #2a2a2a;
position: relative;
overflow: hidden;
}
.container::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: linear-gradient(45deg, #00cc66, #00aa55, #008844, #006633);
z-index: -1;
filter: blur(20px);
opacity: 0.3;
}
header {
text-align: center;
margin-bottom: 30px;
position: relative;
padding-bottom: 20px;
}
header::after {
content: '';
position: absolute;
bottom: 0;
left: 20%;
right: 20%;
height: 3px;
background: linear-gradient(90deg, transparent, #00cc66, transparent);
}
h1 {
color: #00cc66;
margin-bottom: 10px;
font-size: 2.5rem;
text-shadow: 0 0 10px rgba(0, 200, 100, 0.5);
letter-spacing: 1px;
}
.description {
color: #a0a0a0;
font-size: 1.1rem;
margin-bottom: 20px;
}
.tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 2px solid #333;
}
.tab {
padding: 12px 25px;
cursor: pointer;
font-weight: 600;
color: #666;
transition: all 0.3s;
border-bottom: 3px solid transparent;
}
.tab.active {
color: #00cc66;
border-bottom: 3px solid #00cc66;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.input-group {
margin-bottom: 25px;
position: relative;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #00cc66;
}
input[type="text"], textarea {
width: 100%;
padding: 15px;
background: #252525;
border: 2px solid #333;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s;
color: #e0e0e0;
}
input[type="text"]:focus, textarea:focus {
border-color: #00cc66;
outline: none;
box-shadow: 0 0 10px rgba(0, 200, 100, 0.3);
}
textarea {
min-height: 120px;
resize: vertical;
}
button {
background: linear-gradient(135deg, #00cc66 0%, #008844 100%);
color: white;
border: none;
padding: 15px 25px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
box-shadow: 0 4px 15px rgba(0, 200, 100, 0.2);
}
button:hover {
background: linear-gradient(135deg, #00dd66 0%, #009944 100%);
box-shadow: 0 4px 15px rgba(0, 200, 100, 0.4);
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
}
.result {
margin-top: 20px;
padding: 20px;
background: #252525;
border-radius: 8px;
border-left: 4px solid #00cc66;
position: relative;
overflow: hidden;
}
.result h3 {
color: #00cc66;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
}
.result-content {
min-height: 50px;
word-break: break-all;
padding: 15px;
background: #1e1e1e;
border-radius: 5px;
position: relative;
line-height: 1.6;
}
.copy-btn {
background: rgba(0, 200, 100, 0.2);
color: #00cc66;
border: none;
border-radius: 5px;
padding: 8px 15px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 5px;
}
.copy-btn:hover {
background: rgba(0, 200, 100, 0.3);
}
.animation-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.crypto-animation {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #00cc66;
position: relative;
animation: rotate 3s linear infinite;
}
.crypto-animation::before, .crypto-animation::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #00cc66;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 15px #00cc66;
}
.crypto-animation::after {
width: 10px;
height: 10px;
background: #ffffff;
box-shadow: 0 0 10px #ffffff;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
footer {
text-align: center;
margin-top: 30px;
color: #666;
font-size: 0.9rem;
}
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #00aa55;
color: white;
padding: 15px 25px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.3s;
z-index: 1000;
display: flex;
align-items: center;
gap: 10px;
}
.toast.show {
opacity: 1;
}
.placeholder {
color: #666;
font-style: italic;
}
@media (max-width: 768px) {
.container {
padding: 20px;
}
h1 {
font-size: 2rem;
}
.tabs {
flex-direction: column;
}
.tab {
text-align: center;
border-bottom: 1px solid #333;
}
button {
padding: 12px 20px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-lock"></i> نظام التشفير المتقدم</h1>
<p class="description">تشفير وفك تشفير الرسائل باستخدام خوارزمية AES-256</p>
</header>
<div class="animation-container">
<div class="crypto-animation"></div>
</div>
<div class="tabs">
<div class="tab active" data-tab="encrypt">تشفير الرسائل</div>
<div class="tab" data-tab="decrypt">فك تشفير الرسائل</div>
</div>
<div class="tab-content active" id="encrypt-tab">
<div class="input-group">
<label for="encryption-key"><i class="fas fa-key"></i> أدخل مفتاح التشفير:</label>
<input type="text" id="encryption-key" placeholder="أدخل المفتاح السري هنا...">
</div>
<div class="input-group">
<label for="message-to-encrypt"><i class="fas fa-envelope"></i> أدخل الرسالة التي تريد تشفيرها:</label>
<textarea id="message-to-encrypt" placeholder="اكتب رسالتك هنا..."></textarea>
</div>
<button id="encrypt-btn">
<i class="fas fa-shield-alt"></i> تشفير الرسالة
</button>
<div class="result" id="encryption-result">
<h3>
<span><i class="fas fa-lock"></i> الرسالة المشفرة:</span>
<button class="copy-btn" id="copy-encrypted">
<i class="fas fa-copy"></i> نسخ النص
</button>
</h3>
<div class="result-content">
<p id="encrypted-text" class="placeholder">سيظهر النص المشفر هنا...</p>
</div>
</div>
</div>
<div class="tab-content" id="decrypt-tab">
<div class="input-group">
<label for="decryption-key"><i class="fas fa-key"></i> أدخل مفتاح فك التشفير:</label>
<input type="text" id="decryption-key" placeholder="أدخل المفتاح السري هنا...">
</div>
<div class="input-group">
<label for="message-to-decrypt"><i class="fas fa-envelope-open"></i> أدخل الرسالة المشفرة:</label>
<textarea id="message-to-decrypt" placeholder="الصق الرسالة المشفرة هنا..."></textarea>
</div>
<button id="decrypt-btn">
<i class="fas fa-unlock-alt"></i> فك تشفير الرسالة
</button>
<div class="result" id="decryption-result">
<h3>
<span><i class="fas fa-unlock"></i> الرسالة بعد فك التشفير:</span>
<button class="copy-btn" id="copy-decrypted">
<i class="fas fa-copy"></i> نسخ النص
</button>
</h3>
<div class="result-content">
<p id="decrypted-text" class="placeholder">سيظهر النص هنا بعد فك التشفير...</p>
</div>
</div>
</div>
</div>
<div id="toast" class="toast">
<i class="fas fa-check-circle"></i>
<span id="toast-message">تم النسخ إلى الحافظة</span>
</div>
<footer>
<p>تم التطوير باستخدام مكتبة CryptoJS - خوارزمية AES-256</p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// عناصر واجهة المستخدم
const encryptBtn = document.getElementById('encrypt-btn');
const decryptBtn = document.getElementById('decrypt-btn');
const copyEncryptedBtn = document.getElementById('copy-encrypted');
const copyDecryptedBtn = document.getElementById('copy-decrypted');
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toast-message');
const encryptedText = document.getElementById('encrypted-text');
const decryptedText = document.getElementById('decrypted-text');
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
// إعداد التبويبات
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const tabId = tab.getAttribute('data-tab');
// إزالة النشاط من جميع التبويبات والمحتويات
tabs.forEach(t => t.classList.remove('active'));
tabContents.forEach(c => c.classList.remove('active'));
// إضافة النشاط للتبويب والمحتوى المحدد
tab.classList.add('active');
document.getElementById(`${tabId}-tab`).classList.add('active');
});
});
// إعداد حدث النقر على زر التشفير
encryptBtn.addEventListener('click', function() {
const key = document.getElementById('encryption-key').value;
const message = document.getElementById('message-to-encrypt').value;
if (!key || !message) {
showToast('يرجى إدخال كل من المفتاح والرسالة');
return;
}
// تأثير أثناء التشفير
encryptBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري التشفير...';
encryptBtn.disabled = true;
setTimeout(() => {
// تشفير الرسالة
const ciphertext = CryptoJS.AES.encrypt(message, key).toString();
// عرض النتيجة
encryptedText.textContent = ciphertext;
encryptedText.classList.remove('placeholder');
// إعادة زر التشفير إلى حالته الأصلية
encryptBtn.innerHTML = '<i class="fas fa-shield-alt"></i> تشفير الرسالة';
encryptBtn.disabled = false;
showToast('تم تشفير الرسالة بنجاح');
}, 800);
});
// إعداد حدث النقر على زر فك التشفير
decryptBtn.addEventListener('click', function() {
const key = document.getElementById('decryption-key').value;
const ciphertext = document.getElementById('message-to-decrypt').value;
if (!key || !ciphertext) {
showToast('يرجى إدخال كل من المفتاح والرسالة المشفرة');
return;
}
// تأثير أثناء فك التشفير
decryptBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري فك التشفير...';
decryptBtn.disabled = true;
setTimeout(() => {
try {
// فك تشفير الرسالة
const bytes = CryptoJS.AES.decrypt(ciphertext, key);
const originalText = bytes.toString(CryptoJS.enc.Utf8);
if (!originalText) {
throw new Error('فك التشفير فشل - قد يكون المفتاح غير صحيح');
}
// عرض النتيجة
decryptedText.textContent = originalText;
decryptedText.classList.remove('placeholder');
showToast('تم فك تشفير الرسالة بنجاح');
} catch (error) {
decryptedText.textContent = 'حدث خطأ: ' + error.message;
decryptedText.classList.add('placeholder');
showToast('حدث خطأ أثناء فك التشفير: ' + error.message);
}
// إعادة زر فك التشفير إلى حالته الأصلية
decryptBtn.innerHTML = '<i class="fas fa-unlock-alt"></i> فك تشفير الرسالة';
decryptBtn.disabled = false;
}, 800);
});
// نسخ النص المشفر
copyEncryptedBtn.addEventListener('click', function() {
const textToCopy = encryptedText.textContent;
if (textToCopy && textToCopy !== 'سيظهر النص المشفر هنا...' && !textToCopy.startsWith('حدث خطأ')) {
copyToClipboard(textToCopy);
showToast('تم نسخ النص المشفر');
} else {
showToast('لا يوجد نص مشفر للنسخ');
}
});
// نسخ النص بعد فك التشفير
copyDecryptedBtn.addEventListener('click', function() {
const textToCopy = decryptedText.textContent;
if (textToCopy && textToCopy !== 'سيظهر النص هنا بعد فك التشفير...' && !textToCopy.startsWith('حدث خطأ')) {
copyToClipboard(textToCopy);
showToast('تم نسخ النص بعد فك التشفير');
} else {
showToast('لا يوجد نص لفك التشفير للنسخ');
}
});
// وظيفة نسخ إلى الحافظة
function copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
// وظيفة عرض Toast
function showToast(message) {
toastMessage.textContent = message;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment