Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@m777m44
m777m44 authored Dec 9, 2024
1 parent 6df4cbe commit 8ed2b73
Showing 1 changed file with 120 additions and 160 deletions.
280 changes: 120 additions & 160 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,30 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تطبيق التواصل الاجتماعي المطوّر</title>
<title>تطبيق التواصل الاجتماعي المتحرك</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<style>
/* إعدادات عامة */
body {
font-family: 'Cairo', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #1f4037, #99f2c8);
background: linear-gradient(135deg, #1e3c72, #2a5298);
color: #fff;
text-align: center;
overflow-x: hidden;
}

h1 {
font-size: 32px;
font-size: 36px;
margin: 20px 0;
color: #fdfdfd;
font-weight: bold;
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

.container {
padding: 30px;
max-width: 800px;
padding: 20px;
max-width: 900px;
margin: auto;
}

Expand All @@ -33,9 +35,16 @@
padding: 25px;
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(15px);
transition: transform 0.3s, box-shadow 0.3s;
transition: transform 0.5s ease, box-shadow 0.5s ease;
opacity: 0;
transform: translateY(50px);
}

.section.show {
opacity: 1;
transform: translateY(0);
}

.section:hover {
Expand All @@ -44,216 +53,167 @@
}

.section h2 {
margin: 0 0 15px;
font-size: 22px;
color: #fdfdfd;
color: #fff;
}

.section input {
width: 85%;
width: 80%;
padding: 14px;
margin: 12px 0;
margin: 10px 0;
border: none;
border-radius: 25px;
outline: none;
font-size: 16px;
background: #fff;
color: #333;
font-size: 16px;
}

.section button {
padding: 14px 30px;
margin-top: 12px;
padding: 10px 25px;
border: none;
border-radius: 25px;
background: linear-gradient(120deg, #ff7e5f, #feb47b);
color: #fff;
cursor: pointer;
font-size: 16px;
transition: background 0.3s, transform 0.2s;
font-weight: bold;
cursor: pointer;
transition: transform 0.3s ease, background 0.3s ease;
}

.section button:hover {
background: linear-gradient(120deg, #feb47b, #ff7e5f);
transform: scale(1.1);
}

.icon {
font-size: 28px;
margin-bottom: 12px;
display: inline-block;
/* الوضع الليلي */
.dark-mode {
background: linear-gradient(135deg, #141e30, #243b55);
color: #ddd;
}

.dark-mode-toggle {
position: fixed;
top: 20px;
left: 20px;
padding: 12px 18px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50px;
.dark-mode .section {
background: rgba(0, 0, 0, 0.7);
color: #ddd;
}

.dark-mode input {
background: #333;
color: #fff;
cursor: pointer;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
transition: background 0.3s;
}

.dark-mode-toggle:hover {
background: rgba(255, 255, 255, 0.4);
.controls {
margin-top: 20px;
}

body.dark-mode {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #ddd;
.controls button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
color: #fff;
}

body.dark-mode .section {
background: rgba(0, 0, 0, 0.6);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
.controls .dark-mode-toggle {
background: #2c5364;
}

body.dark-mode input {
background: #2a2a3b;
color: #fff;
.controls .reset-btn {
background: #ff4e50;
}
</style>
</head>
<body>
<button class="dark-mode-toggle" onclick="toggleDarkMode()">الوضع الليلي</button>
<div class="controls">
<button class="dark-mode-toggle" onclick="toggleDarkMode()">الوضع الليلي</button>
<button class="reset-btn" onclick="resetInputs()">إعادة تعيين</button>
</div>

<div class="container">
<h1>تطبيق التواصل الاجتماعي المطوّر</h1>

<!-- WhatsApp Section -->
<div class="section">
<div class="icon">📞</div>
<h2>WhatsApp</h2>
<input id="whatsappInput" type="text" placeholder="اكتب رقم الهاتف هنا">
<button onclick="openWhatsApp()">دخول</button>
</div>

<!-- Instagram Section -->
<div class="section">
<div class="icon">📸</div>
<h2>Instagram</h2>
<input id="instagramInput" type="text" placeholder="اكتب معرف الإنستا هنا">
<button onclick="openInstagram()">دخول</button>
</div>

<!-- Telegram Section -->
<div class="section">
<div class="icon">✈️</div>
<h2>Telegram</h2>
<input id="telegramInput" type="text" placeholder="اكتب معرف التلي هنا">
<button onclick="openTelegram()">دخول</button>
</div>

<!-- Twitter Section -->
<div class="section">
<div class="icon">🐦</div>
<h2>Twitter</h2>
<input id="twitterInput" type="text" placeholder="اكتب معرف تويتر هنا">
<button onclick="openTwitter()">دخول</button>
</div>

<!-- Facebook Section -->
<div class="section">
<div class="icon">📘</div>
<h2>Facebook</h2>
<input id="facebookInput" type="text" placeholder="اكتب معرف الفيسبوك هنا">
<button onclick="openFacebook()">دخول</button>
</div>

<!-- TikTok Section -->
<div class="section">
<div class="icon">🎶</div>
<h2>TikTok</h2>
<input id="tiktokInput" type="text" placeholder="اكتب معرف تيك توك هنا">
<button onclick="openTikTok()">دخول</button>
</div>

<!-- Viber Section -->
<div class="section">
<div class="icon">💜</div>
<h2>Viber</h2>
<input id="viberInput" type="text" placeholder="اكتب رقم الهاتف هنا">
<button onclick="openViber()">دخول</button>
</div>
<h1>تطبيق التواصل الاجتماعي المتحرك</h1>
<div id="sections"></div>
</div>

<script>
function formatPhoneNumber(phone) {
phone = phone.trim();
if (phone.startsWith("0")) {
return "+964" + phone.slice(1);
} else if (!phone.startsWith("+")) {
return "+964" + phone;
}
return phone;
}

function validateInput(input, type) {
// المنصات الاجتماعية
const platforms = [
{ name: "WhatsApp", icon: "📞", placeholder: "رقم الهاتف", url: "https://wa.me/" },
{ name: "Viber", icon: "💜", placeholder: "رقم فايبر", url: "viber://add?number=" },
{ name: "Telegram", icon: "✈️", placeholder: "معرف تلغرام", url: "https://t.me/" },
{ name: "Instagram", icon: "📸", placeholder: "معرف إنستغرام", url: "https://instagram.com/" },
{ name: "TikTok", icon: "🎶", placeholder: "معرف تيك توك", url: "https://www.tiktok.com/@" },
{ name: "Facebook", icon: "📘", placeholder: "معرف فيسبوك", url: "https://www.facebook.com/" },
{ name: "twitter", icon: "🔞", placeholder: "تويتر", url: "https://twitter.com/" },
{ name: "Discord", icon: "🎮", placeholder: "اسم المستخدم # الرقم", url: "https://discord.com/users/" },
{ name: "Snapchat", icon: "👻", placeholder: "معرف سناب شات", url: "https://www.snapchat.com/add/" },
];

// إنشاء الأقسام ديناميكيًا
function createSections() {
const container = document.getElementById("sections");
platforms.forEach(platform => {
const section = document.createElement("div");
section.className = "section";
section.innerHTML = `
<h2>${platform.icon} ${platform.name}</h2>
<input type="text" id="${platform.name}Input" placeholder="${platform.placeholder}" />
<button onclick="navigateTo('${platform.name}', '${platform.url}')">اذهب</button>
`;
container.appendChild(section);
});

// استدعاء الحركات
observeSections();
}

// التنقل إلى الرابط المناسب
function navigateTo(name, url) {
const input = document.getElementById(`${name}Input`).value.trim();
if (!input) {
alert("يرجى إدخال البيانات!");
return false;
}
return true;
}

function openWhatsApp() {
let number = document.getElementById("whatsappInput").value;
number = formatPhoneNumber(number);
if (validateInput(number, "phone")) {
window.location.href = `https://wa.me/${number}`;
alert("يرجى إدخال المعلومات المطلوبة!");
return;
}
window.location.href = `${url}${input}`;
}

function openInstagram() {
const username = document.getElementById("instagramInput").value;
if (validateInput(username, "username")) {
window.location.href = `https://www.instagram.com/${username}`;
}
}

function openTelegram() {
const username = document.getElementById("telegramInput").value;
if (validateInput(username, "username")) {
window.location.href = `https://t.me/${username}`;
}
// الوضع الليلي
function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
}

function openTwitter() {
const username = document.getElementById("twitterInput").value;
if (validateInput(username, "username")) {
window.location.href = `https://twitter.com/${username}`;
}
// إعادة تعيين الحقول
function resetInputs() {
platforms.forEach(platform => {
document.getElementById(`${platform.name}Input`).value = "";
});
}

function openFacebook() {
const username = document.getElementById("facebookInput").value;
if (validateInput(username, "username")) {
window.location.href = `https://www.facebook.com/${username}`;
}
}
// مراقبة الأقسام وإضافة الحركات
function observeSections() {
const sections = document.querySelectorAll(".section");
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("show");
}
});
}, { threshold: 0.2 });

function openTikTok() {
const username = document.getElementById("tiktokInput").value;
if (validateInput(username, "username")) {
window.location.href = `https://www.tiktok.com/@${username}`;
}
sections.forEach(section => observer.observe(section));
}

function openViber() {
let number = document.getElementById("viberInput").value;
number = formatPhoneNumber(number);
if (validateInput(number, "phone")) {
window.location.href = `viber://add?number=${number}`;
// التهيئة
function init() {
createSections();
if (localStorage.getItem("darkMode") === "true") {
document.body.classList.add("dark-mode");
}
}

function toggleDarkMode() {
document.body.classList.toggle("dark-mode");
}
// تنفيذ التهيئة عند التحميل
window.onload = init;
</script>
</body>
</html>

0 comments on commit 8ed2b73

Please sign in to comment.