qumra-engine 2.0.166 → 2.0.168
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -15,23 +15,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) ||
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
35
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
26
|
exports.default = registerAllExtensions;
|
|
37
27
|
const extensions = __importStar(require(".")); // بيجمع كل الإضافات
|
|
@@ -15,23 +15,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) ||
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
35
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
26
|
exports.default = registerAllGlobals;
|
|
37
27
|
const filters = __importStar(require("."));
|
package/dist/graphql/index.js
CHANGED
|
@@ -15,23 +15,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
|
|
|
15
15
|
}) : function(o, v) {
|
|
16
16
|
o["default"] = v;
|
|
17
17
|
});
|
|
18
|
-
var __importStar = (this && this.__importStar) ||
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
35
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
26
|
exports.query = exports.mutation = void 0;
|
|
37
27
|
const mutation = __importStar(require("./mutation"));
|
package/dist/middleware.js
CHANGED
|
@@ -90,7 +90,6 @@ const startEngine = async ({ renderApi, mode, getRender, setRender, port = 3000,
|
|
|
90
90
|
const path = res.locals.parsedUrl?.pathname || req.path;
|
|
91
91
|
const result = (0, isPathAllowedToRender_1.validatePathForRender)(path);
|
|
92
92
|
if (!result.allowed) {
|
|
93
|
-
console.log("🚀 ~ startEngine ~ notFoundPagePath:", _404_1.notFoundPage);
|
|
94
93
|
// return res.status(result.status).json({
|
|
95
94
|
// success: false,
|
|
96
95
|
// message: result.reason,
|
package/dist/pages/404.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const notFoundPage = "\n<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n <meta charset=\"UTF-8\">\n <title>\u0627\u0644\u0635\u0641\u062D\u0629 \u063A\u064A\u0631 \u0645\u0648\u062C\u0648\u062F\u0629</title>\n <style>\n body {\n margin: 0;\n padding: 0;\n background-color: #001d20;\n font-family: \"Arial\", sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n color: #ffffff;\n text-align: center;\n }\n\n .container {\n max-width: 450px;\n padding: 20px;\n }\n\n h1 {\n font-size: 80px;\n margin: 0;\n font-weight: bold;\n color: #4ed5c5;\n }\n\n h2 {\n font-size: 28px;\n margin-top: 10px;\n font-weight: 600;\n color: #ffffff;\n }\n\n p {\n color: #ccf1ee;\n font-size: 16px;\n margin: 15px 0 30px;\n line-height: 1.7;\n }\n\n a {\n display: inline-block;\n padding: 12px 30px;\n background-color: #4ed5c5;\n color: #001d20;\n font-weight: bold;\n text-decoration: none;\n border-radius: 8px;\n transition: 0.2s ease;\n }\n\n a:hover {\n background-color: #3bbcad;\n }\n </style>\n</head>\n<body>\n <div class=\"container\">\n <h1>404</h1>\n <h2>\u0627\u0644\u0635\u0641\u062D\u0629 \u063A\u064A\u0631 \u0645\u0648\u062C\u0648\u062F\u0629</h2>\n <p>\u064A\u0628\u062F\u0648 \u0623\u0646\u0643 \u062A\u062D\u0627\u0648\u0644 \u0627\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 \u0635\u0641\u062D\u0629 \u063A\u064A\u0631 \u0635\u062D\u064A\u062D\u0629 \u0623\u0648 \u063A\u064A\u0631 \u0645\u062A\u0627\u062D\u0629 \u062D\u0627\u0644\u064A\u064B\u0627.</p>\n <a href=\"/\">\u0627\u0644\u0639\u0648\u062F\u0629 \u0625\u0644\u0649 \u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u0631\u0626\u064A\u0633\u064A\u0629</a>\n </div>\n</body>\n</html>\n";
|
|
1
|
+
export declare const notFoundPage = "\n<!DOCTYPE html>\n<html lang=\"ar\" dir=\"rtl\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>\u0627\u0644\u0635\u0641\u062D\u0629 \u063A\u064A\u0631 \u0645\u0648\u062C\u0648\u062F\u0629</title>\n\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap\" rel=\"stylesheet\">\n\n <style>\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n background: linear-gradient(135deg, #001d20 0%, #002a2e 50%, #001d20 100%);\n font-family: 'Inter', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n color: #ffffff;\n overflow: hidden;\n position: relative;\n }\n\n /* \u062E\u0644\u0641\u064A\u0629 \u0645\u062A\u062D\u0631\u0643\u0629 \u0641\u0627\u062E\u0631\u0629 */\n body::before {\n content: '';\n position: absolute;\n width: 150%;\n height: 150%;\n background: radial-gradient(circle at 20% 50%, rgba(78, 213, 197, 0.15) 0%, transparent 50%),\n radial-gradient(circle at 80% 80%, rgba(78, 213, 197, 0.1) 0%, transparent 50%);\n animation: float 20s ease-in-out infinite;\n z-index: 0;\n }\n\n @keyframes float {\n 0%, 100% { transform: translate(0, 0) rotate(0deg); }\n 33% { transform: translate(30px, -30px) rotate(120deg); }\n 66% { transform: translate(-20px, 20px) rotate(240deg); }\n }\n\n .wrapper {\n padding: 20px;\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: 1200px;\n }\n\n .container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n @keyframes slideUp {\n from { \n opacity: 0; \n transform: translateY(30px); \n }\n to { \n opacity: 1; \n transform: translateY(0); \n }\n }\n\n /* \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u064A\u0633\u0631 - \u0627\u0644\u0631\u0642\u0645 404 */\n .left-section {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .glitch-wrapper {\n position: relative;\n }\n\n .glitch-number {\n font-size: clamp(120px, 20vw, 280px);\n font-weight: 900;\n line-height: 1;\n background: linear-gradient(135deg, #4ed5c5 0%, #3bbcad 50%, #4ed5c5 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n position: relative;\n filter: drop-shadow(0 0 40px rgba(78, 213, 197, 0.4));\n animation: pulse 3s ease-in-out infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { \n filter: drop-shadow(0 0 40px rgba(78, 213, 197, 0.4));\n transform: scale(1);\n }\n 50% { \n filter: drop-shadow(0 0 60px rgba(78, 213, 197, 0.6));\n transform: scale(1.02);\n }\n }\n\n /* \u062F\u0648\u0627\u0626\u0631 \u062F\u064A\u0643\u0648\u0631 \u0645\u062A\u062D\u0631\u0643\u0629 */\n .circle {\n position: absolute;\n border-radius: 50%;\n border: 2px solid rgba(78, 213, 197, 0.2);\n animation: rotate 20s linear infinite;\n }\n\n .circle-1 {\n width: 300px;\n height: 300px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .circle-2 {\n width: 400px;\n height: 400px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation-direction: reverse;\n animation-duration: 25s;\n }\n\n @keyframes rotate {\n from { transform: translate(-50%, -50%) rotate(0deg); }\n to { transform: translate(-50%, -50%) rotate(360deg); }\n }\n\n /* \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u064A\u0645\u0646 - \u0627\u0644\u0645\u062D\u062A\u0648\u0649 */\n .right-section {\n text-align: right;\n }\n\n .content-card {\n background: rgba(255, 255, 255, 0.04);\n backdrop-filter: blur(20px);\n border-radius: 24px;\n padding: clamp(32px, 5vw, 50px);\n border: 1px solid rgba(78, 213, 197, 0.15);\n position: relative;\n overflow: hidden;\n }\n\n .content-card::before {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 3px;\n background: linear-gradient(90deg, #4ed5c5, transparent);\n animation: shimmer 3s ease-in-out infinite;\n }\n\n @keyframes shimmer {\n 0%, 100% { transform: translateX(100%); opacity: 0; }\n 50% { transform: translateX(-100%); opacity: 1; }\n }\n\n .badge {\n display: inline-block;\n padding: 8px 16px;\n background: rgba(78, 213, 197, 0.15);\n border: 1px solid rgba(78, 213, 197, 0.3);\n border-radius: 20px;\n font-size: 13px;\n font-weight: 600;\n color: #4ed5c5;\n margin-bottom: 20px;\n letter-spacing: 0.5px;\n }\n\n h2 {\n font-size: clamp(28px, 4vw, 42px);\n margin-bottom: 16px;\n font-weight: 800;\n color: #e9fffb;\n letter-spacing: -1px;\n line-height: 1.2;\n }\n\n p {\n color: #c3e9e4;\n font-size: clamp(15px, 2vw, 17px);\n margin-bottom: 32px;\n line-height: 1.8;\n opacity: 0.9;\n }\n\n .btn-group {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n justify-content: flex-end;\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 28px;\n font-weight: 700;\n text-decoration: none;\n border-radius: 12px;\n font-size: 15px;\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n letter-spacing: -0.2px;\n position: relative;\n overflow: hidden;\n }\n\n .btn-primary {\n background: linear-gradient(135deg, #4ed5c5 0%, #3bbcad 100%);\n color: #001d20;\n box-shadow: 0 10px 30px rgba(78, 213, 197, 0.3);\n }\n\n .btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n transition: left 0.5s;\n }\n\n .btn-primary:hover::before {\n left: 100%;\n }\n\n .btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 40px rgba(78, 213, 197, 0.4);\n }\n\n .btn-secondary {\n background: rgba(255, 255, 255, 0.05);\n color: #4ed5c5;\n border: 1px solid rgba(78, 213, 197, 0.3);\n }\n\n .btn-secondary:hover {\n background: rgba(78, 213, 197, 0.1);\n border-color: rgba(78, 213, 197, 0.5);\n transform: translateY(-2px);\n }\n\n /* \u0623\u064A\u0642\u0648\u0646\u0627\u062A */\n .icon {\n width: 20px;\n height: 20px;\n display: inline-block;\n }\n\n /* \u0631\u064A\u0633\u0628\u0648\u0646\u0633\u064A\u0641 \u0644\u0644\u0645\u0648\u0628\u0627\u064A\u0644 */\n @media (max-width: 968px) {\n .container {\n grid-template-columns: 1fr;\n gap: 40px;\n text-align: center;\n }\n\n .right-section {\n text-align: center;\n }\n\n .btn-group {\n justify-content: center;\n }\n\n .circle-1,\n .circle-2 {\n display: none;\n }\n\n .glitch-number {\n font-size: clamp(100px, 25vw, 180px);\n }\n }\n\n @media (max-width: 480px) {\n .wrapper {\n padding: 16px;\n }\n\n .content-card {\n padding: 28px 20px;\n }\n\n .btn {\n width: 100%;\n justify-content: center;\n }\n\n .btn-group {\n flex-direction: column;\n }\n }\n\n /* \u062A\u0623\u062B\u064A\u0631 \u0627\u0644\u062C\u0632\u064A\u0626\u0627\u062A \u0627\u0644\u0639\u0627\u0626\u0645\u0629 */\n .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: #4ed5c5;\n border-radius: 50%;\n opacity: 0;\n animation: particleFloat 4s ease-in-out infinite;\n }\n\n @keyframes particleFloat {\n 0% {\n transform: translateY(0) translateX(0);\n opacity: 0;\n }\n 50% {\n opacity: 0.8;\n }\n 100% {\n transform: translateY(-100px) translateX(50px);\n opacity: 0;\n }\n }\n\n .particle:nth-child(1) { left: 20%; animation-delay: 0s; }\n .particle:nth-child(2) { left: 40%; animation-delay: 1s; }\n .particle:nth-child(3) { left: 60%; animation-delay: 2s; }\n .particle:nth-child(4) { left: 80%; animation-delay: 3s; }\n </style>\n</head>\n\n<body>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n\n <div class=\"wrapper\">\n <div class=\"container\">\n \n <!-- \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u064A\u0633\u0631 -->\n <div class=\"left-section\">\n <div class=\"glitch-wrapper\">\n <div class=\"circle circle-1\"></div>\n <div class=\"circle circle-2\"></div>\n <div class=\"glitch-number\">404</div>\n </div>\n </div>\n\n <!-- \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u064A\u0645\u0646 -->\n <div class=\"right-section\">\n <div class=\"content-card\">\n <span class=\"badge\">\u062E\u0637\u0623 \u0641\u064A \u0627\u0644\u0635\u0641\u062D\u0629</span>\n <h2>\u0644\u0644\u0623\u0633\u0641\u060C \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062D\u0629 \u063A\u064A\u0631 \u0645\u0648\u062C\u0648\u062F\u0629</h2>\n <p>\n \u064A\u0628\u062F\u0648 \u0623\u0646 \u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u062A\u064A \u062A\u0628\u062D\u062B \u0639\u0646\u0647\u0627 \u063A\u064A\u0631 \u0645\u062A\u0627\u062D\u0629 \u0623\u0648 \u062A\u0645 \u0646\u0642\u0644\u0647\u0627 \u0625\u0644\u0649 \u0645\u0643\u0627\u0646 \u0622\u062E\u0631.\n \u0644\u0627 \u062A\u0642\u0644\u0642\u060C \u064A\u0645\u0643\u0646\u0643 \u0627\u0644\u0639\u0648\u062F\u0629 \u0625\u0644\u0649 \u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u0631\u0626\u064A\u0633\u064A\u0629 \u0623\u0648 \u062A\u0635\u0641\u062D \u0627\u0644\u0623\u0642\u0633\u0627\u0645 \u0627\u0644\u0623\u062E\u0631\u0649.\n </p>\n <div class=\"btn-group\">\n <a href=\"/\" class=\"btn btn-primary\">\n <svg class=\"icon\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z\"/>\n </svg>\n \u0627\u0644\u0635\u0641\u062D\u0629 \u0627\u0644\u0631\u0626\u064A\u0633\u064A\u0629\n </a>\n <a href=\"javascript:history.back()\" class=\"btn btn-secondary\">\n <svg class=\"icon\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z\" clip-rule=\"evenodd\"/>\n </svg>\n \u0627\u0644\u0639\u0648\u062F\u0629 \u0644\u0644\u062E\u0644\u0641\n </a>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</body>\n</html>\n";
|
package/dist/pages/404.js
CHANGED
|
@@ -5,70 +5,393 @@ exports.notFoundPage = `
|
|
|
5
5
|
<!DOCTYPE html>
|
|
6
6
|
<html lang="ar" dir="rtl">
|
|
7
7
|
<head>
|
|
8
|
-
<meta charset="UTF-8"
|
|
8
|
+
<meta charset="UTF-8" />
|
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
10
|
<title>الصفحة غير موجودة</title>
|
|
11
|
+
|
|
12
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap" rel="stylesheet">
|
|
13
|
+
|
|
10
14
|
<style>
|
|
11
|
-
|
|
15
|
+
* {
|
|
16
|
+
box-sizing: border-box;
|
|
12
17
|
margin: 0;
|
|
13
18
|
padding: 0;
|
|
14
|
-
|
|
15
|
-
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
body {
|
|
22
|
+
background: linear-gradient(135deg, #001d20 0%, #002a2e 50%, #001d20 100%);
|
|
23
|
+
font-family: 'Inter', sans-serif;
|
|
16
24
|
display: flex;
|
|
17
25
|
justify-content: center;
|
|
18
26
|
align-items: center;
|
|
19
|
-
height: 100vh;
|
|
27
|
+
min-height: 100vh;
|
|
20
28
|
color: #ffffff;
|
|
21
|
-
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
position: relative;
|
|
22
31
|
}
|
|
23
32
|
|
|
24
|
-
|
|
25
|
-
|
|
33
|
+
/* خلفية متحركة فاخرة */
|
|
34
|
+
body::before {
|
|
35
|
+
content: '';
|
|
36
|
+
position: absolute;
|
|
37
|
+
width: 150%;
|
|
38
|
+
height: 150%;
|
|
39
|
+
background: radial-gradient(circle at 20% 50%, rgba(78, 213, 197, 0.15) 0%, transparent 50%),
|
|
40
|
+
radial-gradient(circle at 80% 80%, rgba(78, 213, 197, 0.1) 0%, transparent 50%);
|
|
41
|
+
animation: float 20s ease-in-out infinite;
|
|
42
|
+
z-index: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@keyframes float {
|
|
46
|
+
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
47
|
+
33% { transform: translate(30px, -30px) rotate(120deg); }
|
|
48
|
+
66% { transform: translate(-20px, 20px) rotate(240deg); }
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.wrapper {
|
|
26
52
|
padding: 20px;
|
|
53
|
+
position: relative;
|
|
54
|
+
z-index: 1;
|
|
55
|
+
width: 100%;
|
|
56
|
+
max-width: 1200px;
|
|
27
57
|
}
|
|
28
58
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
59
|
+
.container {
|
|
60
|
+
display: grid;
|
|
61
|
+
grid-template-columns: 1fr 1fr;
|
|
62
|
+
gap: 60px;
|
|
63
|
+
align-items: center;
|
|
64
|
+
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@keyframes slideUp {
|
|
68
|
+
from {
|
|
69
|
+
opacity: 0;
|
|
70
|
+
transform: translateY(30px);
|
|
71
|
+
}
|
|
72
|
+
to {
|
|
73
|
+
opacity: 1;
|
|
74
|
+
transform: translateY(0);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* القسم الأيسر - الرقم 404 */
|
|
79
|
+
.left-section {
|
|
80
|
+
position: relative;
|
|
81
|
+
display: flex;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
align-items: center;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.glitch-wrapper {
|
|
87
|
+
position: relative;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.glitch-number {
|
|
91
|
+
font-size: clamp(120px, 20vw, 280px);
|
|
92
|
+
font-weight: 900;
|
|
93
|
+
line-height: 1;
|
|
94
|
+
background: linear-gradient(135deg, #4ed5c5 0%, #3bbcad 50%, #4ed5c5 100%);
|
|
95
|
+
-webkit-background-clip: text;
|
|
96
|
+
-webkit-text-fill-color: transparent;
|
|
97
|
+
background-clip: text;
|
|
98
|
+
position: relative;
|
|
99
|
+
filter: drop-shadow(0 0 40px rgba(78, 213, 197, 0.4));
|
|
100
|
+
animation: pulse 3s ease-in-out infinite;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@keyframes pulse {
|
|
104
|
+
0%, 100% {
|
|
105
|
+
filter: drop-shadow(0 0 40px rgba(78, 213, 197, 0.4));
|
|
106
|
+
transform: scale(1);
|
|
107
|
+
}
|
|
108
|
+
50% {
|
|
109
|
+
filter: drop-shadow(0 0 60px rgba(78, 213, 197, 0.6));
|
|
110
|
+
transform: scale(1.02);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* دوائر ديكور متحركة */
|
|
115
|
+
.circle {
|
|
116
|
+
position: absolute;
|
|
117
|
+
border-radius: 50%;
|
|
118
|
+
border: 2px solid rgba(78, 213, 197, 0.2);
|
|
119
|
+
animation: rotate 20s linear infinite;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.circle-1 {
|
|
123
|
+
width: 300px;
|
|
124
|
+
height: 300px;
|
|
125
|
+
top: 50%;
|
|
126
|
+
left: 50%;
|
|
127
|
+
transform: translate(-50%, -50%);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.circle-2 {
|
|
131
|
+
width: 400px;
|
|
132
|
+
height: 400px;
|
|
133
|
+
top: 50%;
|
|
134
|
+
left: 50%;
|
|
135
|
+
transform: translate(-50%, -50%);
|
|
136
|
+
animation-direction: reverse;
|
|
137
|
+
animation-duration: 25s;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@keyframes rotate {
|
|
141
|
+
from { transform: translate(-50%, -50%) rotate(0deg); }
|
|
142
|
+
to { transform: translate(-50%, -50%) rotate(360deg); }
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* القسم الأيمن - المحتوى */
|
|
146
|
+
.right-section {
|
|
147
|
+
text-align: right;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.content-card {
|
|
151
|
+
background: rgba(255, 255, 255, 0.04);
|
|
152
|
+
backdrop-filter: blur(20px);
|
|
153
|
+
border-radius: 24px;
|
|
154
|
+
padding: clamp(32px, 5vw, 50px);
|
|
155
|
+
border: 1px solid rgba(78, 213, 197, 0.15);
|
|
156
|
+
position: relative;
|
|
157
|
+
overflow: hidden;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.content-card::before {
|
|
161
|
+
content: '';
|
|
162
|
+
position: absolute;
|
|
163
|
+
top: 0;
|
|
164
|
+
right: 0;
|
|
165
|
+
width: 100%;
|
|
166
|
+
height: 3px;
|
|
167
|
+
background: linear-gradient(90deg, #4ed5c5, transparent);
|
|
168
|
+
animation: shimmer 3s ease-in-out infinite;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
@keyframes shimmer {
|
|
172
|
+
0%, 100% { transform: translateX(100%); opacity: 0; }
|
|
173
|
+
50% { transform: translateX(-100%); opacity: 1; }
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.badge {
|
|
177
|
+
display: inline-block;
|
|
178
|
+
padding: 8px 16px;
|
|
179
|
+
background: rgba(78, 213, 197, 0.15);
|
|
180
|
+
border: 1px solid rgba(78, 213, 197, 0.3);
|
|
181
|
+
border-radius: 20px;
|
|
182
|
+
font-size: 13px;
|
|
183
|
+
font-weight: 600;
|
|
33
184
|
color: #4ed5c5;
|
|
185
|
+
margin-bottom: 20px;
|
|
186
|
+
letter-spacing: 0.5px;
|
|
34
187
|
}
|
|
35
188
|
|
|
36
189
|
h2 {
|
|
37
|
-
font-size: 28px;
|
|
38
|
-
margin-
|
|
39
|
-
font-weight:
|
|
40
|
-
color: #
|
|
190
|
+
font-size: clamp(28px, 4vw, 42px);
|
|
191
|
+
margin-bottom: 16px;
|
|
192
|
+
font-weight: 800;
|
|
193
|
+
color: #e9fffb;
|
|
194
|
+
letter-spacing: -1px;
|
|
195
|
+
line-height: 1.2;
|
|
41
196
|
}
|
|
42
197
|
|
|
43
198
|
p {
|
|
44
|
-
color: #
|
|
45
|
-
font-size:
|
|
46
|
-
margin:
|
|
47
|
-
line-height: 1.
|
|
199
|
+
color: #c3e9e4;
|
|
200
|
+
font-size: clamp(15px, 2vw, 17px);
|
|
201
|
+
margin-bottom: 32px;
|
|
202
|
+
line-height: 1.8;
|
|
203
|
+
opacity: 0.9;
|
|
48
204
|
}
|
|
49
205
|
|
|
50
|
-
|
|
51
|
-
display:
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
206
|
+
.btn-group {
|
|
207
|
+
display: flex;
|
|
208
|
+
gap: 16px;
|
|
209
|
+
flex-wrap: wrap;
|
|
210
|
+
justify-content: flex-end;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.btn {
|
|
214
|
+
display: inline-flex;
|
|
215
|
+
align-items: center;
|
|
216
|
+
gap: 8px;
|
|
217
|
+
padding: 14px 28px;
|
|
218
|
+
font-weight: 700;
|
|
56
219
|
text-decoration: none;
|
|
57
|
-
border-radius:
|
|
58
|
-
|
|
220
|
+
border-radius: 12px;
|
|
221
|
+
font-size: 15px;
|
|
222
|
+
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
223
|
+
letter-spacing: -0.2px;
|
|
224
|
+
position: relative;
|
|
225
|
+
overflow: hidden;
|
|
59
226
|
}
|
|
60
227
|
|
|
61
|
-
|
|
62
|
-
background
|
|
228
|
+
.btn-primary {
|
|
229
|
+
background: linear-gradient(135deg, #4ed5c5 0%, #3bbcad 100%);
|
|
230
|
+
color: #001d20;
|
|
231
|
+
box-shadow: 0 10px 30px rgba(78, 213, 197, 0.3);
|
|
63
232
|
}
|
|
233
|
+
|
|
234
|
+
.btn-primary::before {
|
|
235
|
+
content: '';
|
|
236
|
+
position: absolute;
|
|
237
|
+
top: 0;
|
|
238
|
+
left: -100%;
|
|
239
|
+
width: 100%;
|
|
240
|
+
height: 100%;
|
|
241
|
+
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
242
|
+
transition: left 0.5s;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.btn-primary:hover::before {
|
|
246
|
+
left: 100%;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.btn-primary:hover {
|
|
250
|
+
transform: translateY(-3px);
|
|
251
|
+
box-shadow: 0 15px 40px rgba(78, 213, 197, 0.4);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.btn-secondary {
|
|
255
|
+
background: rgba(255, 255, 255, 0.05);
|
|
256
|
+
color: #4ed5c5;
|
|
257
|
+
border: 1px solid rgba(78, 213, 197, 0.3);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.btn-secondary:hover {
|
|
261
|
+
background: rgba(78, 213, 197, 0.1);
|
|
262
|
+
border-color: rgba(78, 213, 197, 0.5);
|
|
263
|
+
transform: translateY(-2px);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/* أيقونات */
|
|
267
|
+
.icon {
|
|
268
|
+
width: 20px;
|
|
269
|
+
height: 20px;
|
|
270
|
+
display: inline-block;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/* ريسبونسيف للموبايل */
|
|
274
|
+
@media (max-width: 968px) {
|
|
275
|
+
.container {
|
|
276
|
+
grid-template-columns: 1fr;
|
|
277
|
+
gap: 40px;
|
|
278
|
+
text-align: center;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.right-section {
|
|
282
|
+
text-align: center;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.btn-group {
|
|
286
|
+
justify-content: center;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.circle-1,
|
|
290
|
+
.circle-2 {
|
|
291
|
+
display: none;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.glitch-number {
|
|
295
|
+
font-size: clamp(100px, 25vw, 180px);
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
@media (max-width: 480px) {
|
|
300
|
+
.wrapper {
|
|
301
|
+
padding: 16px;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.content-card {
|
|
305
|
+
padding: 28px 20px;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.btn {
|
|
309
|
+
width: 100%;
|
|
310
|
+
justify-content: center;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.btn-group {
|
|
314
|
+
flex-direction: column;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
/* تأثير الجزيئات العائمة */
|
|
319
|
+
.particle {
|
|
320
|
+
position: absolute;
|
|
321
|
+
width: 4px;
|
|
322
|
+
height: 4px;
|
|
323
|
+
background: #4ed5c5;
|
|
324
|
+
border-radius: 50%;
|
|
325
|
+
opacity: 0;
|
|
326
|
+
animation: particleFloat 4s ease-in-out infinite;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
@keyframes particleFloat {
|
|
330
|
+
0% {
|
|
331
|
+
transform: translateY(0) translateX(0);
|
|
332
|
+
opacity: 0;
|
|
333
|
+
}
|
|
334
|
+
50% {
|
|
335
|
+
opacity: 0.8;
|
|
336
|
+
}
|
|
337
|
+
100% {
|
|
338
|
+
transform: translateY(-100px) translateX(50px);
|
|
339
|
+
opacity: 0;
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.particle:nth-child(1) { left: 20%; animation-delay: 0s; }
|
|
344
|
+
.particle:nth-child(2) { left: 40%; animation-delay: 1s; }
|
|
345
|
+
.particle:nth-child(3) { left: 60%; animation-delay: 2s; }
|
|
346
|
+
.particle:nth-child(4) { left: 80%; animation-delay: 3s; }
|
|
64
347
|
</style>
|
|
65
348
|
</head>
|
|
349
|
+
|
|
66
350
|
<body>
|
|
67
|
-
<div class="
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
351
|
+
<div class="particle"></div>
|
|
352
|
+
<div class="particle"></div>
|
|
353
|
+
<div class="particle"></div>
|
|
354
|
+
<div class="particle"></div>
|
|
355
|
+
|
|
356
|
+
<div class="wrapper">
|
|
357
|
+
<div class="container">
|
|
358
|
+
|
|
359
|
+
<!-- القسم الأيسر -->
|
|
360
|
+
<div class="left-section">
|
|
361
|
+
<div class="glitch-wrapper">
|
|
362
|
+
<div class="circle circle-1"></div>
|
|
363
|
+
<div class="circle circle-2"></div>
|
|
364
|
+
<div class="glitch-number">404</div>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
|
|
368
|
+
<!-- القسم الأيمن -->
|
|
369
|
+
<div class="right-section">
|
|
370
|
+
<div class="content-card">
|
|
371
|
+
<span class="badge">خطأ في الصفحة</span>
|
|
372
|
+
<h2>للأسف، هذه الصفحة غير موجودة</h2>
|
|
373
|
+
<p>
|
|
374
|
+
يبدو أن الصفحة التي تبحث عنها غير متاحة أو تم نقلها إلى مكان آخر.
|
|
375
|
+
لا تقلق، يمكنك العودة إلى الصفحة الرئيسية أو تصفح الأقسام الأخرى.
|
|
376
|
+
</p>
|
|
377
|
+
<div class="btn-group">
|
|
378
|
+
<a href="/" class="btn btn-primary">
|
|
379
|
+
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
|
380
|
+
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
|
|
381
|
+
</svg>
|
|
382
|
+
الصفحة الرئيسية
|
|
383
|
+
</a>
|
|
384
|
+
<a href="javascript:history.back()" class="btn btn-secondary">
|
|
385
|
+
<svg class="icon" fill="currentColor" viewBox="0 0 20 20">
|
|
386
|
+
<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"/>
|
|
387
|
+
</svg>
|
|
388
|
+
العودة للخلف
|
|
389
|
+
</a>
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
</div>
|
|
72
395
|
</div>
|
|
73
396
|
</body>
|
|
74
397
|
</html>
|