Skip to content

Instantly share code, notes, and snippets.

@hsnsbhshsh

hsnsbhshsh/index.html

Created February 28, 2026 03:43
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save hsnsbhshsh/b88d89579d6b3cefa6e1fcdb03e2adc8 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>FreeFire Market Pro | سوق حسابات فري فاير</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Supabase JS -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<style>
:root {
--primary-bg: #0a0a0f;
--secondary-bg: #121218;
--tertiary-bg: #1a1a24;
--primary-accent: #7c3aed;
--secondary-accent: #10b981;
--danger-accent: #ef4444;
--gradient-primary: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
--gradient-secondary: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
--glass-bg: rgba(18, 18, 24, 0.7);
--glass-border: rgba(124, 58, 237, 0.2);
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--shadow-hover: 0 20px 50px rgba(124, 58, 237, 0.25);
--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--radius: 16px;
--radius-lg: 24px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Cairo', sans-serif;
background-color: var(--primary-bg);
color: var(--text-primary);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 10% 10%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
radial-gradient(circle at 90% 90%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
z-index: -2;
}
.container {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 20px;
}
/* Login Page */
#login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-bg);
position: relative;
}
#login-page::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.2) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(16, 185, 129, 0.15) 0%, transparent 40%);
z-index: -1;
}
.login-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border-radius: var(--radius-lg);
padding: 3rem 2.5rem;
width: 100%;
max-width: 450px;
box-shadow: var(--shadow);
border: 1px solid var(--glass-border);
position: relative;
overflow: hidden;
animation: glowPulse 3s infinite;
}
@keyframes glowPulse {
0%, 100% { box-shadow: 0 10px 30px rgba(124, 58, 237, 0.2); }
50% { box-shadow: 0 20px 50px rgba(124, 58, 237, 0.4); }
}
.login-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
animation: borderFlow 3s linear infinite;
background-size: 200% 200%;
}
@keyframes borderFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.login-logo {
width: 90px;
height: 90px;
background: var(--gradient-primary);
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 0 40px rgba(124, 58, 237, 0.5);
position: relative;
overflow: hidden;
}
.login-logo::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
transform: rotate(45deg);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%) rotate(45deg); }
100% { transform: translateX(100%) rotate(45deg); }
}
.login-logo i {
font-size: 3rem;
color: white;
position: relative;
z-index: 2;
}
.login-header h1 {
font-size: 2.2rem;
font-weight: 800;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.5rem;
letter-spacing: -0.5px;
}
.login-header p {
color: var(--text-secondary);
font-size: 1rem;
}
.input-group {
margin-bottom: 1.8rem;
}
.input-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-primary);
font-size: 0.95rem;
}
.input-group input {
width: 100%;
padding: 1rem 1.2rem;
border: 1.5px solid rgba(124, 58, 237, 0.2);
border-radius: var(--radius);
font-size: 1rem;
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
transition: var(--transition);
font-family: 'Cairo', sans-serif;
}
.input-group input:focus {
outline: none;
border-color: var(--primary-accent);
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
background: rgba(255, 255, 255, 0.1);
}
.input-group input::placeholder {
color: var(--text-muted);
}
.login-btn {
width: 100%;
padding: 1rem;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: var(--radius);
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
margin: 1rem 0;
position: relative;
overflow: hidden;
}
.login-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.login-btn:hover::before {
transform: translateX(100%);
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
}
.existing-link {
text-align: center;
font-size: 0.95rem;
color: var(--text-secondary);
}
.existing-link a {
color: var(--primary-accent);
text-decoration: none;
font-weight: 700;
border-bottom: 2px solid rgba(124, 58, 237, 0.3);
padding-bottom: 2px;
transition: var(--transition);
}
.existing-link a:hover {
border-color: var(--primary-accent);
}
/* Main Page */
#main-page {
display: none;
}
/* Header */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 0;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 20px;
position: relative;
}
.logo-container {
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
transition: var(--transition);
padding: 12px 25px;
border-radius: var(--radius);
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
position: relative;
overflow: hidden;
}
.logo-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.2), transparent);
transform: translateX(-100%);
transition: transform 0.8s ease;
}
.logo-container:hover::before {
transform: translateX(100%);
}
.logo {
width: 55px;
height: 55px;
background: var(--gradient-primary);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 30px rgba(124, 58, 237, 0.3);
position: relative;
overflow: hidden;
}
.logo i {
font-size: 1.8rem;
color: white;
position: relative;
z-index: 2;
}
.logo-text h1 {
font-size: 1.6rem;
font-weight: 800;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
/* Intro text - replaced badge */
.intro-text {
background: var(--glass-bg);
backdrop-filter: blur(10px);
padding: 0.8rem 1.5rem;
border-radius: 50px;
border: 1px solid var(--glass-border);
color: var(--text-secondary);
font-size: 1rem;
font-weight: 500;
line-height: 1.6;
max-width: 500px;
text-align: center;
box-shadow: var(--shadow);
}
/* Dropdown Menu */
.dropdown-container {
position: relative;
}
.dropdown-btn {
background: var(--gradient-primary);
color: white;
border: none;
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 12px;
font-size: 1.1rem;
box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
position: relative;
overflow: hidden;
}
.dropdown-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.dropdown-btn:hover::before {
transform: translateX(100%);
}
.dropdown-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(124, 58, 237, 0.5);
}
.dropdown-menu {
position: absolute;
top: 120%;
left: 0;
min-width: 220px;
background: var(--glass-bg);
backdrop-filter: blur(20px);
border-radius: var(--radius);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-hover);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
z-index: 100;
overflow: hidden;
}
.dropdown-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
padding: 1rem 1.5rem;
display: flex;
align-items: center;
gap: 12px;
color: var(--text-primary);
text-decoration: none;
transition: var(--transition);
cursor: pointer;
border-bottom: 1px solid rgba(124, 58, 237, 0.1);
font-weight: 600;
}
.dropdown-item:last-child {
border-bottom: none;
}
.dropdown-item:hover {
background: rgba(124, 58, 237, 0.2);
padding-right: 2rem;
}
.dropdown-item i {
width: 20px;
color: var(--primary-accent);
}
.dropdown-item.logout-item:hover i {
color: var(--danger-accent);
}
.dropdown-item.add-item i {
color: var(--secondary-accent);
}
/* Section Header */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(124, 58, 237, 0.2);
flex-wrap: wrap;
gap: 15px;
}
.section-title {
font-size: 2rem;
display: flex;
align-items: center;
gap: 15px;
color: var(--text-primary);
font-weight: 700;
text-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
}
.section-title i {
background: var(--gradient-primary);
width: 55px;
height: 55px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
box-shadow: 0 0 25px rgba(124, 58, 237, 0.4);
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.accounts-count {
background: var(--gradient-primary);
color: white;
padding: 10px 25px;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
animation: glow 2s infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3); }
50% { box-shadow: 0 12px 35px rgba(124, 58, 237, 0.5); }
}
/* Accounts Grid */
.accounts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
/* Account Card */
.account-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow);
height: 100%;
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
}
.account-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
transition: var(--transition);
z-index: 2;
animation: borderFlow 3s linear infinite;
background-size: 200% 200%;
}
.account-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
border-color: rgba(124, 58, 237, 0.5);
}
.account-card:hover::before {
height: 5px;
}
.card-image {
height: 220px;
width: 100%;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, #1a1a24 0%, #0a0a0f 100%);
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.account-card:hover .card-image img {
transform: scale(1.1);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 40%, rgba(10, 10, 15, 0.9) 100%);
z-index: 1;
}
.card-content {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
position: relative;
z-index: 2;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.seller-name {
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
font-size: 1.1rem;
}
.seller-name i {
color: var(--primary-accent);
}
.price-tag {
background: var(--gradient-primary);
color: white;
padding: 0.5rem 1.3rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.1rem;
box-shadow: 0 5px 20px rgba(124, 58, 237, 0.3);
}
.description {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 20px;
flex-grow: 1;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid rgba(124, 58, 237, 0.2);
}
.insta-link {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
color: white;
padding: 0.6rem 1.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 0.95rem;
transition: var(--transition);
box-shadow: 0 5px 15px rgba(225, 48, 108, 0.3);
}
.insta-link:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 25px rgba(225, 48, 108, 0.4);
}
.time-badge {
color: var(--text-muted);
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 5px;
}
.time-badge i {
color: var(--primary-accent);
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 10, 15, 0.9);
backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.modal.active {
display: flex;
}
.modal-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
max-width: 550px;
width: 100%;
max-height: 85vh; /* للسماح بالتمرير عند الحاجة */
overflow-y: auto; /* تفعيل التمرير الرأسي */
border-radius: var(--radius-lg);
padding: 2.5rem;
box-shadow: var(--shadow-hover);
border: 1px solid var(--glass-border);
position: relative;
animation: modalGlow 3s infinite, modalSlideIn 0.5s ease;
}
@keyframes modalGlow {
0%, 100% { box-shadow: 0 20px 50px rgba(124, 58, 237, 0.3); }
50% { box-shadow: 0 30px 70px rgba(124, 58, 237, 0.5); }
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
animation: borderFlow 3s linear infinite;
background-size: 200% 200%;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.modal-header h2 {
font-size: 2rem;
font-weight: 800;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.close-btn {
font-size: 2.5rem;
line-height: 1;
cursor: pointer;
color: var(--text-muted);
transition: var(--transition);
}
.close-btn:hover {
color: var(--danger-accent);
transform: rotate(90deg) scale(1.2);
}
.form-group {
margin-bottom: 2rem;
}
.form-group label {
display: block;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 1rem 1.2rem;
border: 1.5px solid rgba(124, 58, 237, 0.2);
border-radius: var(--radius);
font-size: 1rem;
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
transition: var(--transition);
font-family: 'Cairo', sans-serif;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-accent);
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
background: rgba(255, 255, 255, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* File Upload Area with drag & drop and animations */
.file-upload-area {
border: 2px dashed rgba(124, 58, 237, 0.3);
border-radius: var(--radius);
padding: 2rem;
text-align: center;
background: rgba(124, 58, 237, 0.05);
cursor: pointer;
transition: var(--transition);
margin-bottom: 1rem;
position: relative;
overflow: hidden;
min-height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.file-upload-area:hover {
border-color: var(--primary-accent);
background: rgba(124, 58, 237, 0.1);
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3);
}
.file-upload-area i {
font-size: 3rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
transition: var(--transition);
}
.file-upload-area:hover i {
transform: translateY(-5px);
}
.file-upload-area p {
color: var(--text-secondary);
font-weight: 600;
font-size: 1.1rem;
}
#image-preview {
max-width: 100%;
max-height: 250px; /* تحديد أقصى ارتفاع للصورة المعاينة */
width: auto;
height: auto;
object-fit: contain; /* الحفاظ على نسبة الأبعاد */
border-radius: var(--radius);
margin-top: 1rem;
display: none;
border: 3px solid var(--primary-accent);
box-shadow: 0 0 30px rgba(124, 58, 237, 0.4);
animation: glowPulse 2s infinite;
}
.submit-btn {
width: 100%;
padding: 1.2rem;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: var(--radius);
font-size: 1.2rem;
font-weight: 800;
cursor: pointer;
transition: var(--transition);
margin-top: 2rem;
position: relative;
overflow: hidden;
}
.submit-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.submit-btn:hover::before {
transform: translateX(100%);
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(124, 58, 237, 0.4);
}
/* More Modal Specific */
.more-content {
padding: 1rem 0;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.feature-item {
background: rgba(124, 58, 237, 0.1);
padding: 1.5rem;
border-radius: var(--radius);
border: 1px solid rgba(124, 58, 237, 0.2);
transition: var(--transition);
text-align: center;
}
.feature-item:hover {
transform: translateY(-5px);
background: rgba(124, 58, 237, 0.15);
border-color: var(--primary-accent);
}
.feature-item i {
font-size: 2.2rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.8rem;
}
.feature-item h4 {
font-weight: 800;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.feature-item p {
color: var(--text-secondary);
font-size: 0.9rem;
}
.p2p-highlight {
background: var(--gradient-primary);
color: white;
padding: 1.2rem;
border-radius: var(--radius);
text-align: center;
font-weight: 700;
margin-top: 1.5rem;
font-size: 1.1rem;
box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
animation: pulse 2s infinite;
}
/* Loading States */
.loading-state {
grid-column: 1 / -1;
text-align: center;
padding: 80px;
background: var(--glass-bg);
border-radius: var(--radius-lg);
border: 2px dashed rgba(124, 58, 237, 0.3);
}
.loading-state i {
font-size: 4rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
display: block;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.no-accounts {
grid-column: 1 / -1;
text-align: center;
padding: 80px;
background: var(--glass-bg);
border-radius: var(--radius-lg);
border: 2px dashed rgba(124, 58, 237, 0.3);
}
.no-accounts i {
font-size: 4rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
display: block;
}
/* Footer - simplified */
footer {
text-align: center;
padding: 30px 0;
margin-top: 50px;
border-top: 1px solid rgba(124, 58, 237, 0.2);
color: var(--text-secondary);
position: relative;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 3px;
background: var(--gradient-primary);
border-radius: 2px;
animation: borderFlow 3s linear infinite;
background-size: 200% 200%;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: var(--secondary-bg);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: var(--gradient-primary);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #8b5cf6 0%, #4f46e5 100%);
}
/* Responsive */
@media (max-width: 992px) {
.feature-grid {
grid-template-columns: 1fr;
}
.accounts-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
@media (max-width: 768px) {
header {
flex-direction: column;
align-items: stretch;
}
.dropdown-container {
width: 100%;
}
.dropdown-btn {
width: 100%;
justify-content: center;
}
.dropdown-menu {
width: 100%;
}
.section-header {
flex-direction: column;
text-align: center;
}
.accounts-grid {
grid-template-columns: 1fr;
}
.modal-card {
padding: 1.5rem;
}
.intro-text {
width: 100%;
}
}
</style>
</head>
<body>
<!-- صفحة تسجيل الدخول -->
<div id="login-page">
<div class="login-card">
<div class="login-header">
<div class="login-logo">
<i class="fas fa-fire"></i>
</div>
<h1>FreeFire Market</h1>
<p>منصة بيع وشراء حسابات فري فاير</p>
</div>
<div class="input-group">
<label>اسم المستخدم</label>
<input type="text" id="username" placeholder="أدخل اسمك المستعار" required>
</div>
<div class="input-group">
<label>كلمة السر</label>
<input type="password" id="password" placeholder="********" required>
</div>
<button class="login-btn" id="loginBtn">
<i class="fas fa-sign-in-alt" style="margin-left: 10px;"></i>
دخول / تسجيل
</button>
<div class="existing-link">
<span>أدخل أي اسم وكلمة سر للدخول (سيتم إنشاء حساب جديد تلقائياً)</span>
</div>
</div>
</div>
<!-- الصفحة الرئيسية -->
<div id="main-page">
<div class="container">
<!-- الهيدر مع النص التعريفي -->
<header>
<div class="logo-container" onclick="window.location.reload()">
<div class="logo">
<i class="fas fa-fire"></i>
</div>
<div class="logo-text">
<h1>FreeFire Market</h1>
</div>
</div>
<!-- النص التعريفي باللغة الإنجليزية (بدون مؤثرات) -->
<div class="intro-text">
<p>Peer-to-peer marketplace for FreeFire accounts.</p>
<p>Buy and sell securely with direct chat.</p>
<p>No fees, no middlemen.</p>
</div>
<!-- زر العرض مع القائمة المتدرجة -->
<div class="dropdown-container">
<button class="dropdown-btn" id="dropdownBtn">
<i class="fas fa-bars"></i>
عرض
<i class="fas fa-chevron-down" style="font-size: 0.9rem;"></i>
</button>
<div class="dropdown-menu" id="dropdownMenu">
<div class="dropdown-item" id="moreDropdownItem">
<i class="fas fa-info-circle"></i>
المزيد
</div>
<div class="dropdown-item logout-item" id="logoutDropdownItem">
<i class="fas fa-sign-out-alt"></i>
خروج
</div>
<div class="dropdown-item add-item" id="addDropdownItem">
<i class="fas fa-plus-circle"></i>
طرح حساب
</div>
</div>
</div>
</header>
<!-- قسم الحسابات -->
<section>
<div class="section-header">
<h2 class="section-title">
<i class="fas fa-gamepad"></i>
الحسابات المتاحة
</h2>
<div class="accounts-count" id="accountsCount">جاري التحميل...</div>
</div>
<div class="accounts-grid" id="accountsContainer">
<!-- الحسابات تظهر هنا من Supabase -->
</div>
</section>
<!-- الفوتر (بدون أيقونات) -->
<footer>
<p>© 2024 FreeFire Market Pro - منصة نظير إلى نظير لبيع وشراء حسابات فري فاير</p>
</footer>
</div>
</div>
<!-- مودال المزيد (وصف الموقع) -->
<div id="moreModal" class="modal">
<div class="modal-card">
<div class="modal-header">
<h2>عن المنصة</h2>
<span class="close-btn" id="closeMoreModal">&times;</span>
</div>
<div class="more-content">
<div class="feature-grid">
<div class="feature-item">
<i class="fas fa-handshake"></i>
<h4>نظير إلى نظير</h4>
<p>تواصل مباشر بين البائع والمشتري بدون وسيط</p>
</div>
<div class="feature-item">
<i class="fas fa-shield-alt"></i>
<h4>آمن وموثوق</h4>
<p>جميع الحسابات حقيقية مع صور من اللعبة</p>
</div>
<div class="feature-item">
<i class="fas fa-rocket"></i>
<h4>الأحدث في الأعلى</h4>
<p>الحسابات الجديدة تظهر أولاً</p>
</div>
<div class="feature-item">
<i class="fas fa-camera"></i>
<h4>رفع صور مباشر</h4>
<p>إمكانية رفع صور من جهازك</p>
</div>
</div>
<div class="p2p-highlight">
<i class="fas fa-check-circle" style="margin-left: 8px;"></i>
منصة نظير إلى نظير - لا يوجد وسيط، البيع والشراء يتم بين الأعضاء مباشرة
</div>
</div>
</div>
</div>
<!-- مودال إضافة حساب -->
<div id="addModal" class="modal">
<div class="modal-card">
<div class="modal-header">
<h2>طرح حساب للبيع</h2>
<span class="close-btn" id="closeAddModal">&times;</span>
</div>
<form id="addForm">
<div class="form-group">
<label>صورة الحساب</label>
<div class="file-upload-area" id="fileUploadArea">
<i class="fas fa-cloud-upload-alt"></i>
<p>اضغط لرفع صورة أو اسحبها هنا</p>
<input type="file" id="imageFile" accept="image/*" style="display: none;">
<img id="imagePreview" src="#" alt="معاينة الصورة">
</div>
</div>
<div class="form-group">
<label>السعر</label>
<input type="text" id="price" placeholder="مثال: 25$ أو 100 ريال" required>
</div>
<div class="form-group">
<label>وصف الحساب</label>
<textarea id="desc" placeholder="مستوى الحساب - الأسلحة النادرة - الشخصيات - الماسات - الملابس..." required></textarea>
</div>
<div class="form-group">
<label>رابط إنستغرام للتواصل</label>
<input type="url" id="insta" placeholder="https://instagram.com/username" required>
</div>
<button type="submit" class="submit-btn">
<i class="fas fa-check-circle" style="margin-left: 10px;"></i>
نشر العرض
</button>
</form>
</div>
</div>
<script>
// ===============================================
// تعليمات إنشاء الجداول في Supabase (نفذها في SQL Editor)
// ===============================================
/*
-- 1. إنشاء جدول users
CREATE TABLE users (
id BIGSERIAL PRIMARY KEY,
username TEXT UNIQUE NOT NULL,
password TEXT NOT NULL,
created_at TIMESTAMPTZ DEFAULT NOW()
);
-- 2. إنشاء جدول accounts
CREATE TABLE accounts (
id BIGSERIAL PRIMARY KEY,
seller_id BIGINT REFERENCES users(id) ON DELETE CASCADE,
seller_name TEXT NOT NULL,
image_url TEXT NOT NULL,
price TEXT NOT NULL,
description TEXT NOT NULL,
instagram TEXT NOT NULL,
created_at TIMESTAMPTZ DEFAULT NOW()
);
*/
// ===============================================
// تهيئة Supabase
// ===============================================
const SUPABASE_URL = 'https://yyvrxxwixnmdhcacwidj.supabase.co';
const SUPABASE_ANON_KEY = 'sb_publishable_1BZVyK8MOEHPKyLNmwvrrA_dggsQZNR';
const { createClient } = supabase;
const supabaseClient = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
// متغيرات عامة
let currentUser = null;
let uploadedFile = null;
// عناصر DOM
const loginPage = document.getElementById('login-page');
const mainPage = document.getElementById('main-page');
const loginBtn = document.getElementById('loginBtn');
const logoutBtn = document.getElementById('logoutDropdownItem');
const dropdownBtn = document.getElementById('dropdownBtn');
const dropdownMenu = document.getElementById('dropdownMenu');
const moreDropdownItem = document.getElementById('moreDropdownItem');
const addDropdownItem = document.getElementById('addDropdownItem');
const moreModal = document.getElementById('moreModal');
const closeMore = document.getElementById('closeMoreModal');
const addModal = document.getElementById('addModal');
const closeAdd = document.getElementById('closeAddModal');
const addForm = document.getElementById('addForm');
const accountsContainer = document.getElementById('accountsContainer');
const accountsCount = document.getElementById('accountsCount');
// عناصر رفع الصورة
const fileUploadArea = document.getElementById('fileUploadArea');
const fileInput = document.getElementById('imageFile');
const imagePreview = document.getElementById('imagePreview');
// ===============================================
// دالة لعرض الإشعارات (toast)
// ===============================================
function showToast(message, type = 'info') {
const toast = document.createElement('div');
toast.style.cssText = `
position: fixed;
bottom: 30px;
right: 30px;
background: ${type === 'success' ? 'linear-gradient(135deg, #10b981, #059669)' : type === 'error' ? 'linear-gradient(135deg, #ef4444, #dc2626)' : 'var(--gradient-primary)'};
color: white;
padding: 15px 30px;
border-radius: 50px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
z-index: 10000;
font-weight: 600;
font-size: 1rem;
animation: slideInRight 0.3s ease;
direction: rtl;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.style.animation = 'slideOutRight 0.3s ease';
setTimeout(() => toast.remove(), 300);
}, 3000);
}
// إضافة الأنميشن للـ toast
const style = document.createElement('style');
style.textContent = `
@keyframes slideInRight {
from { transform: translateX(100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100px); opacity: 0; }
}
`;
document.head.appendChild(style);
// ===============================================
// دالة حساب الوقت المنقضي
// ===============================================
function getTimeAgo(timestamp) {
const now = Date.now();
const diff = now - new Date(timestamp).getTime();
const minutes = Math.floor(diff / 60000);
const hours = Math.floor(diff / 3600000);
const days = Math.floor(diff / 86400000);
if (minutes < 1) return 'الآن';
if (minutes < 60) return `منذ ${minutes} دقيقة`;
if (hours < 24) return `منذ ${hours} ساعة`;
return `منذ ${days} يوم`;
}
// ===============================================
// جلب الحسابات من Supabase
// ===============================================
async function fetchAccounts() {
try {
const { data, error } = await supabaseClient
.from('accounts')
.select('*')
.order('created_at', { ascending: false });
if (error) throw error;
if (data && data.length > 0) {
renderAccounts(data);
} else {
accountsContainer.innerHTML = `
<div class="no-accounts">
<i class="fas fa-box-open"></i>
<p style="color: var(--text-secondary); font-size: 1.2rem;">لا توجد حسابات معروضة بعد</p>
<p style="color: var(--text-muted);">كن أول من يطرح حسابه للبيع!</p>
</div>
`;
accountsCount.textContent = '0 حسابات';
}
} catch (err) {
console.error(err);
showToast('فشل في تحميل الحسابات', 'error');
}
}
// ===============================================
// عرض الحسابات في الصفحة
// ===============================================
function renderAccounts(accounts) {
accountsCount.textContent = `${accounts.length} ${accounts.length === 1 ? 'حساب' : 'حسابات'}`;
accountsContainer.innerHTML = accounts.map(account => `
<div class="account-card" data-id="${account.id}">
<div class="card-image">
<img src="${account.image_url}" alt="صورة حساب فري فاير" loading="lazy">
<div class="image-overlay"></div>
</div>
<div class="card-content">
<div class="card-header">
<span class="seller-name">
<i class="fas fa-user-circle"></i>
${account.seller_name}
</span>
<span class="price-tag">${account.price}</span>
</div>
<p class="description">${account.description}</p>
<div class="card-footer">
<a href="${account.instagram}" target="_blank" class="insta-link" onclick="event.stopPropagation()">
<i class="fab fa-instagram"></i>
تواصل
</a>
<span class="time-badge">
<i class="far fa-clock"></i>
${getTimeAgo(account.created_at)}
</span>
</div>
</div>
</div>
`).join('');
}
// ===============================================
// تسجيل الدخول / إنشاء مستخدم جديد
// ===============================================
async function loginOrRegister(username, password) {
// أولاً: البحث عن المستخدم
const { data: existingUser, error: fetchError } = await supabaseClient
.from('users')
.select('*')
.eq('username', username)
.maybeSingle();
if (fetchError) {
showToast('خطأ في الاتصال', 'error');
return null;
}
if (existingUser) {
// تحقق من كلمة المرور (تشفير بسيط - نستخدم same hash)
const hashedInput = btoa(password); // base64 فقط للتبسيط (غير آمن للإنتاج)
if (existingUser.password === hashedInput) {
return existingUser;
} else {
showToast('كلمة المرور غير صحيحة', 'error');
return null;
}
} else {
// إنشاء مستخدم جديد
const hashedPassword = btoa(password);
const { data: newUser, error: insertError } = await supabaseClient
.from('users')
.insert([{ username, password: hashedPassword }])
.select()
.single();
if (insertError) {
showToast('فشل إنشاء الحساب', 'error');
return null;
}
showToast('تم إنشاء حساب جديد', 'success');
return newUser;
}
}
// ===============================================
// رفع الصورة إلى Supabase Storage
// ===============================================
async function uploadImage(file) {
const fileExt = file.name.split('.').pop();
const fileName = `${Date.now()}-${Math.random().toString(36).substring(2)}.${fileExt}`;
const filePath = `public/${fileName}`; // مجلد public داخل bucket
const { error } = await supabaseClient.storage
.from('account-images')
.upload(filePath, file);
if (error) {
console.error(error);
throw new Error('فشل رفع الصورة');
}
// الحصول على الرابط العام
const { data: urlData } = supabaseClient.storage
.from('account-images')
.getPublicUrl(filePath);
return urlData.publicUrl;
}
// ===============================================
// أحداث الواجهة
// ===============================================
// toggle dropdown menu
dropdownBtn.addEventListener('click', (e) => {
e.stopPropagation();
dropdownMenu.classList.toggle('active');
});
// Close dropdown when clicking outside
document.addEventListener('click', (e) => {
if (!dropdownBtn.contains(e.target) && !dropdownMenu.contains(e.target)) {
dropdownMenu.classList.remove('active');
}
});
// زر تسجيل الدخول
loginBtn.addEventListener('click', async () => {
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
if (!username || !password) {
showToast('الرجاء إدخال اسم المستخدم وكلمة السر', 'error');
return;
}
const user = await loginOrRegister(username, password);
if (user) {
currentUser = user;
loginPage.style.display = 'none';
mainPage.style.display = 'block';
await fetchAccounts(); // تحميل الحسابات
showToast(`مرحباً ${currentUser.username} 👋`, 'success');
}
});
// تسجيل الخروج
logoutBtn.addEventListener('click', () => {
currentUser = null;
mainPage.style.display = 'none';
loginPage.style.display = 'flex';
document.getElementById('username').value = '';
document.getElementById('password').value = '';
dropdownMenu.classList.remove('active');
showToast('تم تسجيل الخروج', 'info');
});
// فتح مودال المزيد
function openMoreModal() {
moreModal.classList.add('active');
dropdownMenu.classList.remove('active');
}
moreDropdownItem.addEventListener('click', openMoreModal);
closeMore.addEventListener('click', () => {
moreModal.classList.remove('active');
});
// فتح مودال الإضافة
function openAddModal() {
if (!currentUser) {
showToast('الرجاء تسجيل الدخول أولاً', 'error');
return;
}
addModal.classList.add('active');
dropdownMenu.classList.remove('active');
}
addDropdownItem.addEventListener('click', openAddModal);
closeAdd.addEventListener('click', () => {
addModal.classList.remove('active');
resetUpload();
addForm.reset();
});
// إغلاق المودالات عند النقر خارجها
window.addEventListener('click', (e) => {
if (e.target === moreModal) {
moreModal.classList.remove('active');
}
if (e.target === addModal) {
addModal.classList.remove('active');
resetUpload();
addForm.reset();
}
});
// رفع الصورة: دعم النقر والسحب والإفلات
fileUploadArea.addEventListener('click', () => {
fileInput.click();
});
// سحب وإفلات
fileUploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
fileUploadArea.style.borderColor = 'var(--primary-accent)';
fileUploadArea.style.background = 'rgba(124, 58, 237, 0.15)';
});
fileUploadArea.addEventListener('dragleave', () => {
fileUploadArea.style.borderColor = 'rgba(124, 58, 237, 0.3)';
fileUploadArea.style.background = 'rgba(124, 58, 237, 0.05)';
});
fileUploadArea.addEventListener('drop', (e) => {
e.preventDefault();
fileUploadArea.style.borderColor = 'rgba(124, 58, 237, 0.3)';
fileUploadArea.style.background = 'rgba(124, 58, 237, 0.05)';
const files = e.dataTransfer.files;
if (files.length > 0) {
fileInput.files = files;
handleFileSelect(files[0]);
}
});
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
handleFileSelect(file);
}
});
function handleFileSelect(file) {
// معاينة الصورة
const reader = new FileReader();
reader.onload = (event) => {
imagePreview.src = event.target.result;
imagePreview.style.display = 'block';
fileUploadArea.querySelector('p').style.display = 'none';
fileUploadArea.querySelector('i').style.display = 'none';
};
reader.readAsDataURL(file);
uploadedFile = file; // حفظ الملف للرفع لاحقاً
}
function resetUpload() {
fileInput.value = '';
uploadedFile = null;
imagePreview.src = '#';
imagePreview.style.display = 'none';
fileUploadArea.querySelector('p').style.display = 'block';
fileUploadArea.querySelector('i').style.display = 'block';
}
// إضافة حساب جديد
addForm.addEventListener('submit', async (e) => {
e.preventDefault();
const price = document.getElementById('price').value.trim();
const desc = document.getElementById('desc').value.trim();
const insta = document.getElementById('insta').value.trim();
if (!price || !desc || !insta) {
showToast('الرجاء ملء جميع الحقول', 'error');
return;
}
if (!uploadedFile) {
showToast('الرجاء رفع صورة للحساب', 'error');
return;
}
try {
// 1. رفع الصورة
const imageUrl = await uploadImage(uploadedFile);
// 2. إدراج السجل في جدول accounts
const { error } = await supabaseClient
.from('accounts')
.insert([{
seller_id: currentUser.id,
seller_name: currentUser.username,
image_url: imageUrl,
price: price,
description: desc,
instagram: insta,
created_at: new Date().toISOString()
}]);
if (error) throw error;
showToast('تم نشر حسابك للبيع بنجاح! 🎉', 'success');
addModal.classList.remove('active');
resetUpload();
addForm.reset();
// إعادة تحميل الحسابات
await fetchAccounts();
// تمرير لأعلى الصفحة
window.scrollTo({ top: 0, behavior: 'smooth' });
} catch (err) {
console.error(err);
showToast('حدث خطأ أثناء النشر', 'error');
}
});
// تحميل أولي للحسابات (عند فتح الصفحة الرئيسية بعد تسجيل الدخول)
// لكن fetchAccounts يُستدعى بعد تسجيل الدخول. هنا نضعه أيضاً في حالة وجود مستخدم حالي (لا يوجد)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment