azouzC commited on
Commit
2b07e4a
·
verified ·
1 Parent(s): 7bdacf7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +5 -3
  2. index.html +298 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nokn
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: nokn
3
+ emoji: 🐳
4
  colorFrom: green
5
  colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,298 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Equb Viewer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Cairo', sans-serif;
14
+ margin: 0;
15
+ padding: 0;
16
+ overflow: hidden;
17
+ background: #121212;
18
+ }
19
+
20
+ .splash-container {
21
+ background: radial-gradient(circle at center, #1a237e, #000000);
22
+ animation: pulse 4s infinite alternate;
23
+ }
24
+
25
+ .card-3d {
26
+ transform-style: preserve-3d;
27
+ animation: rotate 8s infinite linear;
28
+ }
29
+
30
+ .glassmorphism {
31
+ background: rgba(255, 255, 255, 0.1);
32
+ backdrop-filter: blur(10px);
33
+ -webkit-backdrop-filter: blur(10px);
34
+ border: 1px solid rgba(255, 255, 255, 0.2);
35
+ }
36
+
37
+ .text-glow {
38
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
39
+ }
40
+
41
+ .metallic-text {
42
+ background: linear-gradient(135deg, #e6e6e6, #999999);
43
+ -webkit-background-clip: text;
44
+ background-clip: text;
45
+ color: transparent;
46
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
47
+ }
48
+
49
+ .fab {
50
+ box-shadow: 0 4px 20px rgba(0, 102, 204, 0.3);
51
+ transition: all 0.3s ease;
52
+ }
53
+
54
+ .fab:hover {
55
+ transform: scale(1.1);
56
+ box-shadow: 0 6px 25px rgba(0, 102, 204, 0.4);
57
+ }
58
+
59
+ .page-turn {
60
+ transform-style: preserve-3d;
61
+ transition: transform 0.8s;
62
+ }
63
+
64
+ .page-turn:hover {
65
+ transform: rotateY(30deg);
66
+ }
67
+
68
+ @keyframes rotate {
69
+ 0% { transform: rotateY(0deg) rotateX(10deg); }
70
+ 100% { transform: rotateY(360deg) rotateX(10deg); }
71
+ }
72
+
73
+ @keyframes pulse {
74
+ 0% { background-size: 100% 100%; }
75
+ 100% { background-size: 120% 120%; }
76
+ }
77
+
78
+ .ripple {
79
+ position: relative;
80
+ overflow: hidden;
81
+ }
82
+
83
+ .ripple:after {
84
+ content: "";
85
+ display: block;
86
+ position: absolute;
87
+ width: 100%;
88
+ height: 100%;
89
+ top: 0;
90
+ left: 0;
91
+ pointer-events: none;
92
+ background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
93
+ background-repeat: no-repeat;
94
+ background-position: 50%;
95
+ transform: scale(10, 10);
96
+ opacity: 0;
97
+ transition: transform .5s, opacity 1s;
98
+ }
99
+
100
+ .ripple:active:after {
101
+ transform: scale(0, 0);
102
+ opacity: 0.3;
103
+ transition: 0s;
104
+ }
105
+
106
+ .pdf-container {
107
+ perspective: 1000px;
108
+ }
109
+
110
+ .pdf-page {
111
+ transform-origin: left center;
112
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
113
+ }
114
+
115
+ .slide-in {
116
+ animation: slideIn 0.5s ease-out forwards;
117
+ }
118
+
119
+ @keyframes slideIn {
120
+ from { transform: translateY(50px); opacity: 0; }
121
+ to { transform: translateY(0); opacity: 1; }
122
+ }
123
+
124
+ .fade-in {
125
+ animation: fadeIn 1s ease-in forwards;
126
+ }
127
+
128
+ @keyframes fadeIn {
129
+ from { opacity: 0; }
130
+ to { opacity: 1; }
131
+ }
132
+ </style>
133
+ </head>
134
+ <body>
135
+ <!-- Splash Screen -->
136
+ <div id="splash-screen" class="fixed inset-0 flex items-center justify-center splash-container z-50">
137
+ <div class="text-center">
138
+ <!-- 3D Rotating Card -->
139
+ <div class="card-3d w-64 h-96 mx-auto mb-8 relative">
140
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl shadow-2xl flex items-center justify-center">
141
+ <lottie-player
142
+ src="https://assets1.lottiefiles.com/packages/lf20_sk5h1kfn.json"
143
+ background="transparent"
144
+ speed="1"
145
+ style="width: 100%; height: 100%;"
146
+ loop
147
+ autoplay>
148
+ </lottie-player>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Welcome Text -->
153
+ <h1 class="text-4xl font-bold text-white text-glow">مرحباً بكم، عزوز 💗</h1>
154
+
155
+ <!-- Loading Indicator -->
156
+ <div class="w-64 h-1 bg-gray-300 rounded-full mt-8 mx-auto overflow-hidden">
157
+ <div id="loading-bar" class="h-full bg-gradient-to-r from-blue-400 to-purple-500 rounded-full" style="width: 0%"></div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Main Viewer Screen (Initially Hidden) -->
163
+ <div id="main-screen" class="hidden h-screen flex flex-col bg-gradient-to-b from-gray-900 to-gray-800">
164
+ <!-- App Bar -->
165
+ <div class="glassmorphism p-4 flex items-center justify-between">
166
+ <button id="back-button" class="ripple text-white p-2 rounded-full hover:bg-white hover:bg-opacity-10 transition">
167
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
168
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
169
+ </svg>
170
+ </button>
171
+
172
+ <h2 class="text-xl font-bold text-white">عارض الإيكوب</h2>
173
+
174
+ <div class="w-6"></div> <!-- Spacer -->
175
+ </div>
176
+
177
+ <!-- PDF Viewer -->
178
+ <div class="flex-1 overflow-auto pdf-container p-4">
179
+ <div class="max-w-3xl mx-auto">
180
+ <!-- PDF Placeholder (would be replaced with actual PDF renderer in Android) -->
181
+ <div class="pdf-page bg-white rounded-lg overflow-hidden mb-4">
182
+ <div class="h-96 flex items-center justify-center bg-gray-100">
183
+ <div class="text-center">
184
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-red-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
185
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
186
+ </svg>
187
+ <p class="mt-2 text-gray-700">PDF Content Would Display Here</p>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Page Indicator -->
193
+ <div class="text-center mt-4">
194
+ <span class="inline-block px-4 py-2 bg-gray-800 rounded-full text-white metallic-text">
195
+ الصفحة <span id="current-page">1</span> من <span id="total-pages">10</span>
196
+ </span>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- FAB -->
202
+ <button id="fab" class="fab fixed bottom-6 right-6 bg-blue-600 text-white p-4 rounded-full ripple hover:bg-blue-700 transition">
203
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
204
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
205
+ </svg>
206
+ </button>
207
+
208
+ <!-- Thumbnails Drawer (Hidden by default) -->
209
+ <div id="thumbnails-drawer" class="fixed inset-0 bg-black bg-opacity-80 z-50 hidden">
210
+ <div class="container mx-auto p-4 h-full overflow-auto">
211
+ <div class="flex justify-between items-center mb-6">
212
+ <h3 class="text-2xl font-bold text-white">الصفحات المصغرة</h3>
213
+ <button id="close-thumbnails" class="text-white p-2">
214
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
215
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
216
+ </svg>
217
+ </button>
218
+ </div>
219
+
220
+ <div class="grid grid-cols-3 gap-4">
221
+ <!-- Thumbnail items -->
222
+ <div class="bg-gray-800 rounded-lg overflow-hidden h-40 flex items-center justify-center ripple">
223
+ <span class="text-white">1</span>
224
+ </div>
225
+ <div class="bg-gray-800 rounded-lg overflow-hidden h-40 flex items-center justify-center ripple">
226
+ <span class="text-white">2</span>
227
+ </div>
228
+ <div class="bg-gray-800 rounded-lg overflow-hidden h-40 flex items-center justify-center ripple">
229
+ <span class="text-white">3</span>
230
+ </div>
231
+ <div class="bg-gray-800 rounded-lg overflow-hidden h-40 flex items-center justify-center ripple">
232
+ <span class="text-white">4</span>
233
+ </div>
234
+ <div class="bg-gray-800 rounded-lg overflow-hidden h-40 flex items-center justify-center ripple">
235
+ <span class="text-white">5</span>
236
+ </div>
237
+ <div class="bg-gray-800 rounded-lg overflow-hidden h-40 flex items-center justify-center ripple">
238
+ <span class="text-white">6</span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <script>
246
+ // Simulate splash screen loading
247
+ document.addEventListener('DOMContentLoaded', function() {
248
+ // Animate loading bar
249
+ let progress = 0;
250
+ const loadingBar = document.getElementById('loading-bar');
251
+ const interval = setInterval(() => {
252
+ progress += 2;
253
+ loadingBar.style.width = `${progress}%`;
254
+
255
+ if (progress >= 100) {
256
+ clearInterval(interval);
257
+
258
+ // Hide splash and show main screen
259
+ document.getElementById('splash-screen').classList.add('hidden');
260
+ document.getElementById('main-screen').classList.remove('hidden');
261
+ document.getElementById('main-screen').classList.add('fade-in');
262
+ }
263
+ }, 50);
264
+
265
+ // Set up event listeners
266
+ document.getElementById('back-button').addEventListener('click', function() {
267
+ alert('في التطبيق الفعلي، هذا الزر سيغلق التطبيق');
268
+ });
269
+
270
+ document.getElementById('fab').addEventListener('click', function() {
271
+ document.getElementById('thumbnails-drawer').classList.remove('hidden');
272
+ document.getElementById('thumbnails-drawer').classList.add('slide-in');
273
+ });
274
+
275
+ document.getElementById('close-thumbnails').addEventListener('click', function() {
276
+ document.getElementById('thumbnails-drawer').classList.add('hidden');
277
+ });
278
+
279
+ // Simulate page turning
280
+ const pdfPage = document.querySelector('.pdf-page');
281
+ pdfPage.addEventListener('click', function() {
282
+ const currentPage = parseInt(document.getElementById('current-page').textContent);
283
+ const totalPages = parseInt(document.getElementById('total-pages').textContent);
284
+
285
+ if (currentPage < totalPages) {
286
+ document.getElementById('current-page').textContent = currentPage + 1;
287
+
288
+ // Add page turn animation
289
+ pdfPage.style.transform = 'rotateY(180deg)';
290
+ setTimeout(() => {
291
+ pdfPage.style.transform = 'rotateY(0deg)';
292
+ }, 800);
293
+ }
294
+ });
295
+ });
296
+ </script>
297
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=azouzC/nokn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
298
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ You are an expert Android app developer. Create an Android application that: 1. **Purpose** - Displays a single PDF file named `equb.pdf` located in `res/raw/equb.pdf`. - Does **not** allow downloading or saving to the device; only viewing within the app. 2. **File Structure** - Ensure the project includes an empty folder `app/src/main/res/raw/`. - The user will manually place `equb.pdf` into this folder via MT Manager after installation. 3. **Architecture & Dependencies** - Use Jetpack Compose for the UI. - Use `com.github.barteksc:android-pdf-viewer` for rendering. - Min SDK 21, Target SDK 34. - Package name: `com.azooz.equbviewer`. 4. **Splash / Entry Screen** - On launch, show a 4D-style animated splash for 2–3 seconds: - 3D-rotating card with metallic shine. - Lottie for light-reflection effects. - Center text: “مرحباً بكم، عزوز 💗” - Arabic font “Cairo”, 32sp, bold, white glow. - Background: dark-to-light radial gradient, pulsing. 5. **Main Viewer Screen** - Seamless fade+scale transition to PDF viewer. - Transparent app bar with glassmorphism blur. - Title “عارض الإيكوب” center-aligned. - Back button exits app. - Full-screen PDF with 3D flip page turns. - Bottom “Page X / Y” indicator with metallic accent. - FAB: chrome style, bottom-right, opens thumbnails drawer (layout-grid-view icon). 6. **Visual Effects** - Material You theme: primary #0066CC, secondary #FF4081. - Soft elevation shadows. - Ripple + scale-up on taps. - Animated vector icons (PDF icon pulses). - Gentle slow-moving background animation. 7. **Performance & Testing** - 60 fps animations. - Handle rotation without reloading. - Unit tests: splash duration, PDF load, navigation. 8. **Manual EQUB Placement** - Include in README: ``` After installing APK: 1. Open MT Manager. 2. Navigate to /data/data/com.azooz.equbviewer/app_/app/src/main/res/raw/ 3. Copy your equb.pdf here. 4. Relaunch the app. ``` Provide full Android Studio project structure, Gradle files, Compose/Kotlin code, Lottie JSON ref, and resources. Make code clean and well-commented.