Hugging Face's logo

Spaces:
transformered
/
secure-sco-shield
Running

App Files Community
transformered commited on
Commit
b311694
·
verified ·
1 Parent(s): 8a45feb

add google fonts vazirmatn for all body that applying to all tesxt

Browse files
Files changed (5) hide show
  1. README.md +8 -5
  2. components/navbar.js +94 -0
  3. index.html +181 -19
  4. script.js +27 -0
  5. style.css +44 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Secure Sco Shield
3
- emoji: 📚
4
- colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Secure SCO Shield 🛡️
3
+ colorFrom: purple
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/navbar.js ADDED
@@ -0,0 +1,94 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ position: fixed;
9
+ top: 0;
10
+ left: 0;
11
+ right: 0;
12
+ z-index: 1000;
13
+ backdrop-filter: blur(10px);
14
+ background-color: rgba(2, 6, 23, 0.8);
15
+ border-bottom: 1px solid rgba(6, 182, 212, 0.2);
16
+ }
17
+
18
+ nav {
19
+ display: flex;
20
+ justify-content: space-between;
21
+ align-items: center;
22
+ padding: 1rem 2rem;
23
+ max-width: 1400px;
24
+ margin: 0 auto;
25
+ }
26
+
27
+ .logo {
28
+ font-size: 1.5rem;
29
+ font-weight: 700;
30
+ background: linear-gradient(to right, #ffffff, #cccccc);
31
+ -webkit-background-clip: text;
32
+ background-clip: text;
33
+ color: transparent;
34
+ }
35
+
36
+ .nav-links {
37
+ display: flex;
38
+ gap: 2rem;
39
+ }
40
+
41
+ .nav-links a {
42
+ color: #e2e8f0;
43
+ text-decoration: none;
44
+ font-weight: 500;
45
+ transition: color 0.3s;
46
+ position: relative;
47
+ }
48
+
49
+ .nav-links a:hover {
50
+ color: #06b6d4;
51
+ }
52
+
53
+ .nav-links a::after {
54
+ content: '';
55
+ position: absolute;
56
+ bottom: -5px;
57
+ left: 0;
58
+ width: 0;
59
+ height: 2px;
60
+ background: linear-gradient(to right, #ffffff, #cccccc);
61
+ transition: width 0.3s;
62
+ }
63
+
64
+ .nav-links a:hover::after {
65
+ width: 100%;
66
+ }
67
+
68
+ @media (max-width: 768px) {
69
+ nav {
70
+ flex-direction: column;
71
+ padding: 1rem;
72
+ }
73
+
74
+ .nav-links {
75
+ margin-top: 1rem;
76
+ gap: 1rem;
77
+ }
78
+ }
79
+ </style>
80
+ <nav>
81
+ <div class="logo">SCO Secure</div>
82
+ <div class="nav-links">
83
+ <a href="#summary">خلاصه اجرایی</a>
84
+ <a href="#challenges">چالش‌ها</a>
85
+ <a href="#architecture">معماری</a>
86
+ <a href="#cost">هزینه‌ها</a>
87
+ <a href="#roadmap">نقشه راه</a>
88
+ </div>
89
+ </nav>
90
+ `;
91
+ }
92
+ }
93
+
94
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,181 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>مدل نوین ارتباط امن SCO</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#06b6d4', // cyan-500
17
+ secondary: '#8b5cf6', // violet-500
18
+ dark: '#020617', // slate-950
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ </head>
25
+ <body class="bg-black text-gray-200">
26
+ <custom-navbar></custom-navbar>
27
+
28
+ <main>
29
+ <!-- Hero Section -->
30
+ <section class="relative overflow-hidden bg-gray-900">
31
+ <div class="absolute inset-0 bg-gradient-to-r from-gray-800/50 to-gray-900/50 blur-3xl"></div>
32
+ <div class="relative container mx-auto px-6 pt-32 pb-40 text-center">
33
+ <span class="inline-block mb-6 bg-yellow-600/20 text-yellow-300 border border-yellow-500/50 rounded-full px-4 py-1 text-sm">
34
+ محرمانه - ویژه مقامات دولتی
35
+ </span>
36
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
37
+ مدل نوین ارتباط امن اعضای سازمان همکاری شانگهای
38
+ </h1>
39
+ <p class="text-xl md:text-2xl text-gray-300 max-w-4xl mx-auto">
40
+ ارتباطات صوتی و تصویری رمزنگاری‌شده سرتاسری با استفاده از سیم‌کارت‌های ملی موجود
41
+ </p>
42
+ </div>
43
+ </section>
44
+
45
+ <!-- Executive Summary -->
46
+ <section class="container mx-auto px-6 -mt-20 relative z-10">
47
+ <div class="backdrop-blur-xl bg-gray-800/80 border border-gray-700 rounded-xl shadow-2xl p-8">
48
+ <div class="flex items-center gap-3 mb-6">
49
+ <i data-feather="shield" class="w-10 h-10 text-cyan-300"></i>
50
+ <h2 class="text-3xl text-white font-bold">خلاصه اجرایی</h2>
51
+ </div>
52
+ <p class="text-lg leading-relaxed text-gray-300 mb-6">
53
+ این پروژه یک <span class="text-white font-bold">راه‌حل کاملاً نوآورانه</span> ارائه می‌دهد که برای اولین بار در جهان، از <strong>سیم‌کارت‌های ملی موجود</strong> به عنوان کلید هویت دیجیتال امن استفاده می‌کند.
54
+ </p>
55
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
56
+ <div class="flex items-center gap-3 bg-gray-800 border border-gray-700 rounded-xl p-4">
57
+ <i data-feather="check-circle" class="w-6 h-6 text-white"></i>
58
+ <span>بدون ساخت زیرساخت جدید</span>
59
+ </div>
60
+ <div class="flex items-center gap-3 bg-green-900/30 border border-green-500/40 rounded-xl p-4">
61
+ <i data-feather="check-circle" class="w-6 h-6 text-green-400"></i>
62
+ <span>بدون سیم‌کارت اختصاصی</span>
63
+ </div>
64
+ <div class="flex items-center gap-3 bg-green-900/30 border border-green-500/40 rounded-xl p-4">
65
+ <i data-feather="check-circle" class="w-6 h-6 text-green-400"></i>
66
+ <span>بدون وابستگی به اپراتور خصوصی</span>
67
+ </div>
68
+ <div class="flex items-center gap-3 bg-green-900/30 border border-green-500/40 rounded-xl p-4">
69
+ <i data-feather="check-circle" class="w-6 h-6 text-green-400"></i>
70
+ <span>بدون اتکا به غرب</span>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </section>
75
+
76
+ <!-- Current Challenges -->
77
+ <section class="container mx-auto px-6 py-20">
78
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-white">
79
+ محدودیت‌های راه‌حل‌های فعلی
80
+ </h2>
81
+ <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
82
+ <div class="bg-gray-800 border border-gray-700 rounded-xl p-6 hover:bg-gray-700 transition-all">
83
+ <div class="text-4xl mb-4">🌐</div>
84
+ <h3 class="text-xl text-white font-bold mb-4">واتس‌اپ / تلگرام</h3>
85
+ <ul class="space-y-2">
86
+ <li class="flex items-center gap-2 text-sm text-gray-300">
87
+ <i data-feather="alert-triangle" class="w-4 h-4"></i> کنترل غربی
88
+ </li>
89
+ <li class="flex items-center gap-2 text-sm text-red-200">
90
+ <i data-feather="alert-triangle" class="w-4 h-4"></i> جاسوسی
91
+ </li>
92
+ <li class="flex items-center gap-2 text-sm text-red-200">
93
+ <i data-feather="alert-triangle" class="w-4 h-4"></i> تحریم‌پذیر
94
+ </li>
95
+ </ul>
96
+ </div>
97
+ <!-- Repeat for other cards -->
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Architecture -->
102
+ <section class="container mx-auto px-6 py-20">
103
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-white">معماری پیشنهادی</h2>
104
+ <div class="bg-gray-900 border border-gray-700 rounded-xl backdrop-blur-xl p-10">
105
+ <div class="flex flex-col items-center space-y-8 text-center">
106
+ <div class="bg-gray-800 border-2 border-gray-600 rounded-2xl px-8 py-4 text-xl">
107
+ کاربران دولتی با سیم‌کارت ملی
108
+ </div>
109
+ <i data-feather="arrow-down" class="w-12 h-12"></i>
110
+ <div class="bg-blue-900/50 border-2 border-blue-400 rounded-2xl px-8 py-4 text-xl">اپلیکیشن امن SCO</div>
111
+ <i data-feather="arrow-down" class="w-12 h-12"></i>
112
+ <div class="bg-purple-900/50 border-2 border-purple-400 rounded-2xl px-8 py-4 text-xl">شبکه ملی 4G/5G موجود</div>
113
+ <i data-feather="arrow-down" class="w-12 h-12"></i>
114
+ <div class="bg-gradient-to-r from-emerald-600 to-teal-600 rounded-2xl px-10 py-6 text-2xl font-bold text-white shadow-2xl shadow-teal-500/50">
115
+ SCO Secure Gateway Layer
116
+ </div>
117
+ <i data-feather="arrow-down" class="w-12 h-12"></i>
118
+ <div class="bg-gray-800/80 border border-gray-500 rounded-2xl px-8 py-4">Backend ملی + مدیریت کلید</div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- Cost Comparison -->
124
+ <section class="container mx-auto px-6 py-20">
125
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-white">
126
+ مقایسه هزینه — انقلابی در اقتصاد امنیت
127
+ </h2>
128
+ <div class="grid md:grid-cols-2 gap-10 max-w-5xl mx-auto">
129
+ <div class="bg-gray-900 border border-gray-700 rounded-xl p-8">
130
+ <h3 class="text-2xl text-white font-bold text-center mb-6">راه‌حل‌های سنتی</h3>
131
+ <div class="space-y-4 text-2xl font-bold text-center">
132
+ <div>۵–۱۰ میلیارد دلار</div>
133
+ <div class="text-gray-400">۵–۱۰ سال زمان</div>
134
+ <div>۱۰۰–۵۰۰ میلیون دلار/سال نگهداری</div>
135
+ </div>
136
+ </div>
137
+ <div class="bg-gray-800 border border-gray-600 rounded-xl shadow-2xl p-8">
138
+ <div class="flex items-center justify-center gap-3 mb-6">
139
+ <i data-feather="zap" class="w-8 h-8 text-emerald-300"></i>
140
+ <h3 class="text-2xl md:text-3xl text-white font-bold">راه‌حل پیشنهادی ما</h3>
141
+ </div>
142
+ <div class="space-y-6 text-2xl md:text-3xl font-bold text-center text-white">
143
+ <div class="text-4xl md:text-5xl text-white">۱۳–۲۱ میلیون دلار</div>
144
+ <div class="text-gray-300">۶–۱۲ ماه اجرا</div>
145
+ <div>۷–۱۶ میلیون دلار/سال نگهداری</div>
146
+ <span class="inline-block text-xl py-2 px-6 bg-gray-700 rounded-full">۹۹.۸٪ صرفه‌جویی</span>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Roadmap -->
153
+ <section class="container mx-auto px-6 py-20 pb-32">
154
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-white">نقشه راه اجرایی</h2>
155
+ <div class="grid grid-cols-1 md:grid-cols-5 gap-6 max-w-7xl mx-auto">
156
+ <div class="bg-gray-800 p-1 rounded-2xl">
157
+ <div class="bg-gray-900 h-full rounded-xl p-6">
158
+ <span class="inline-block bg-gray-800 text-white rounded-full px-3 py-1 text-sm mb-4">فاز ۱</span>
159
+ <h3 class="text-xl text-white font-bold mb-3">امکان‌سنجی</h3>
160
+ <p class="text-2xl font-bold text-center text-white">۳ ماه</p>
161
+ </div>
162
+ </div>
163
+ <!-- Repeat for other phases -->
164
+ </div>
165
+ </section>
166
+ </main>
167
+
168
+ <!-- CTA -->
169
+ <div class="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 w-full max-w-2xl px-4">
170
+ <div class="bg-gray-800 rounded-xl shadow-2xl p-6 text-center">
171
+ <h3 class="text-xl md:text-2xl font-bold mb-3">آماده آغاز انقلاب ارتباطی امن SCO هستید؟</h3>
172
+ <p class="text-sm md:text-base text-gray-300">جهت ارائه رسمی به کمیته فنی سازمان همکاری شانگهای تماس بگیرید</p>
173
+ </div>
174
+ </div>
175
+
176
+ <script src="components/navbar.js"></script>
177
+ <script src="script.js"></script>
178
+ <script>feather.replace();</script>
179
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
180
+ </body>
181
+ </html>
script.js ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Add animations to sections
3
+ const sections = document.querySelectorAll('section');
4
+ sections.forEach((section, index) => {
5
+ section.classList.add('fade-in');
6
+ section.style.animationDelay = `${index * 0.1}s`;
7
+ });
8
+
9
+ // Smooth scroll for anchor links
10
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
11
+ anchor.addEventListener('click', function(e) {
12
+ e.preventDefault();
13
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
14
+ behavior: 'smooth'
15
+ });
16
+ });
17
+ });
18
+
19
+ // Parallax effect for hero section
20
+ const hero = document.querySelector('.hero-section');
21
+ if (hero) {
22
+ window.addEventListener('scroll', function() {
23
+ const scrollPosition = window.pageYOffset;
24
+ hero.style.backgroundPositionY = scrollPosition * 0.5 + 'px';
25
+ });
26
+ }
27
+ });
style.css CHANGED
@@ -1,28 +1,54 @@
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap');
3
+
4
+ * {
5
+ font-family: 'Vazirmatn', sans-serif;
6
+ }
7
+
8
  body {
9
+ background-color: #000 !important;
10
+ color: #e5e7eb !important;
11
+ }
12
+ /* Custom scrollbar */
13
+ ::-webkit-scrollbar {
14
+ width: 8px;
15
+ }
16
+
17
+ ::-webkit-scrollbar-track {
18
+ background: #0f172a;
19
+ }
20
+
21
+ ::-webkit-scrollbar-thumb {
22
+ background: #1e40af;
23
+ border-radius: 4px;
24
  }
25
 
26
+ ::-webkit-scrollbar-thumb:hover {
27
+ background: #1e3a8a;
 
28
  }
29
 
30
+ /* Animation classes */
31
+ .fade-in {
32
+ animation: fadeIn 0.8s ease-in-out;
 
 
33
  }
34
 
35
+ @keyframes fadeIn {
36
+ from { opacity: 0; transform: translateY(20px); }
37
+ to { opacity: 1; transform: translateY(0); }
 
 
 
38
  }
39
 
40
+ .slide-in-left {
41
+ animation: slideInLeft 0.6s ease-out;
42
  }
43
+
44
+ @keyframes slideInLeft {
45
+ from { transform: translateX(-50px); opacity: 0; }
46
+ to { transform: translateX(0); opacity: 1; }
47
+ }
48
+
49
+ /* Gradient text */
50
+ .gradient-text {
51
+ background-clip: text;
52
+ -webkit-background-clip: text;
53
+ color: transparent;
54
+ }