Skip to content

E
el3ab-Player
Commit 41620415 authored by Mahmoud Aglan's avatar Mahmoud Aglan
Browse files
Options

feat(design): legal pages printed as one long card; manifest colours 

Co-Authored-By: 's avatarClaude Opus 5.5 <noreply@anthropic.com>
parent 034fc175
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 40 deletions
manifest.json
View file @ 41620415
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
"start_url": "/", "start_url": "/",
"display": "standalone", "display": "standalone",
"orientation": "portrait", "orientation": "portrait",
"theme_color": "#050810", "theme_color": "#090E2C",
"background_color": "#050810", "background_color": "#0E1540",
"lang": "ar", "lang": "ar",
"dir": "rtl", "dir": "rtl",
"categories": ["games", "entertainment"], "categories": ["games", "entertainment"],
......
privacy-policy.php
View file @ 41620415
...@@ -4,30 +4,46 @@ ...@@ -4,30 +4,46 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EL3AB - سياسة الخصوصية | Privacy Policy</title> <title>EL3AB - سياسة الخصوصية | Privacy Policy</title>
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;700;800;900&display=swap" rel="stylesheet">
<style> <style>
/* The Cafe Deck, read mode: the document is printed on one long card
laid on the indigo table. */
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
:root { --back: #0E1540; --card: #F7F4EC; --line: #D6CEBC; --ink: #17150F; --ink-2: #4A463C; --ink-3: #6F6858; --red: #C41E2E; --gold: #93650F; }
body { body {
font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif; font-family: 'Alexandria', system-ui, sans-serif;
background: #050810; background: var(--back) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%238C9CF0' stroke-opacity='.075'%3E%3Cpath d='M14 4.5 23.5 14 14 23.5 4.5 14z'/%3E%3Cpath d='M7.3 7.3h13.4v13.4H7.3z'/%3E%3C/g%3E%3C/svg%3E");
color: #e0e0e0; color: var(--ink);
line-height: 1.8; line-height: 1.85;
padding: 24px 16px 64px; padding: 24px 12px 64px;
} }
.container { max-width: 720px; margin: 0 auto; } ::selection { background: #E4AC38; color: var(--ink); }
.logo { text-align: center; margin-bottom: 32px; } .container {
.logo span { font-size: 32px; font-weight: 900; color: #E4AC38; font-family: 'Inter', sans-serif; } position: relative;
h1 { font-size: 24px; color: #fff; margin-bottom: 8px; text-align: center; } max-width: 760px;
.subtitle { text-align: center; color: #888; font-size: 14px; margin-bottom: 40px; } margin: 0 auto;
h2 { font-size: 18px; color: #E4AC38; margin: 32px 0 12px; } background: var(--card);
p, li { font-size: 15px; color: #ccc; margin-bottom: 12px; } border-radius: 16px;
ul { padding-right: 24px; padding-left: 24px; } padding: 40px clamp(20px, 6vw, 56px) 48px;
box-shadow: 0 2px 4px rgba(3,6,25,.35), 0 26px 50px -18px rgba(3,6,25,.95);
}
.container::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--line); border-radius: 10px; pointer-events: none; }
.logo { text-align: center; margin-bottom: 20px; }
.logo span { font-size: 28px; font-weight: 900; color: var(--gold); letter-spacing: .02em; }
h1 { font-size: clamp(24px, 6vw, 32px); font-weight: 900; color: var(--ink); margin-bottom: 4px; text-align: center; text-wrap: balance; }
.subtitle { text-align: center; color: var(--ink-3); font-size: 14px; margin-bottom: 28px; }
h2 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 36px 0 10px; }
h2::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--red); transform: rotate(45deg); margin-inline-end: 10px; vertical-align: middle; }
p, li { font-size: 15px; color: var(--ink-2); margin-bottom: 12px; max-width: 68ch; }
ul { padding-inline-start: 24px; }
li { margin-bottom: 8px; } li { margin-bottom: 8px; }
.section { background: #0d1117; border-radius: 12px; padding: 24px; margin-bottom: 20px; border: 1px solid #1a2030; } .section { padding: 4px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.lang-switch { text-align: center; margin-bottom: 32px; } .section:last-of-type { border-bottom: none; }
.lang-switch a { color: #E4AC38; text-decoration: none; font-weight: 600; padding: 8px 16px; border: 1px solid #E4AC38; border-radius: 8px; font-size: 14px; } .lang-switch { text-align: center; margin-bottom: 24px; }
.en { direction: ltr; text-align: left; } .lang-switch a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
a { color: #E4AC38; } .en { direction: ltr; text-align: start; }
.date { text-align: center; color: #666; font-size: 13px; margin-top: 40px; } a { color: var(--red); text-underline-offset: 3px; }
.date { text-align: center; color: var(--ink-3); font-size: 13px; margin-top: 40px; }
</style> </style>
</head> </head>
<body> <body>
......
terms.php
View file @ 41620415
...@@ -4,30 +4,46 @@ ...@@ -4,30 +4,46 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EL3AB - الشروط والأحكام | Terms of Service</title> <title>EL3AB - الشروط والأحكام | Terms of Service</title>
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;700;800;900&display=swap" rel="stylesheet">
<style> <style>
/* The Cafe Deck, read mode: the document is printed on one long card
laid on the indigo table. */
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
:root { --back: #0E1540; --card: #F7F4EC; --line: #D6CEBC; --ink: #17150F; --ink-2: #4A463C; --ink-3: #6F6858; --red: #C41E2E; --gold: #93650F; }
body { body {
font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif; font-family: 'Alexandria', system-ui, sans-serif;
background: #050810; background: var(--back) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%238C9CF0' stroke-opacity='.075'%3E%3Cpath d='M14 4.5 23.5 14 14 23.5 4.5 14z'/%3E%3Cpath d='M7.3 7.3h13.4v13.4H7.3z'/%3E%3C/g%3E%3C/svg%3E");
color: #e0e0e0; color: var(--ink);
line-height: 1.8; line-height: 1.85;
padding: 24px 16px 64px; padding: 24px 12px 64px;
} }
.container { max-width: 720px; margin: 0 auto; } ::selection { background: #E4AC38; color: var(--ink); }
.logo { text-align: center; margin-bottom: 32px; } .container {
.logo span { font-size: 32px; font-weight: 900; color: #E4AC38; font-family: 'Inter', sans-serif; } position: relative;
h1 { font-size: 24px; color: #fff; margin-bottom: 8px; text-align: center; } max-width: 760px;
.subtitle { text-align: center; color: #888; font-size: 14px; margin-bottom: 40px; } margin: 0 auto;
h2 { font-size: 18px; color: #E4AC38; margin: 32px 0 12px; } background: var(--card);
p, li { font-size: 15px; color: #ccc; margin-bottom: 12px; } border-radius: 16px;
ul { padding-right: 24px; padding-left: 24px; } padding: 40px clamp(20px, 6vw, 56px) 48px;
box-shadow: 0 2px 4px rgba(3,6,25,.35), 0 26px 50px -18px rgba(3,6,25,.95);
}
.container::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--line); border-radius: 10px; pointer-events: none; }
.logo { text-align: center; margin-bottom: 20px; }
.logo span { font-size: 28px; font-weight: 900; color: var(--gold); letter-spacing: .02em; }
h1 { font-size: clamp(24px, 6vw, 32px); font-weight: 900; color: var(--ink); margin-bottom: 4px; text-align: center; text-wrap: balance; }
.subtitle { text-align: center; color: var(--ink-3); font-size: 14px; margin-bottom: 28px; }
h2 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 36px 0 10px; }
h2::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--red); transform: rotate(45deg); margin-inline-end: 10px; vertical-align: middle; }
p, li { font-size: 15px; color: var(--ink-2); margin-bottom: 12px; max-width: 68ch; }
ul { padding-inline-start: 24px; }
li { margin-bottom: 8px; } li { margin-bottom: 8px; }
.section { background: #0d1117; border-radius: 12px; padding: 24px; margin-bottom: 20px; border: 1px solid #1a2030; } .section { padding: 4px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.lang-switch { text-align: center; margin-bottom: 32px; } .section:last-of-type { border-bottom: none; }
.lang-switch a { color: #E4AC38; text-decoration: none; font-weight: 600; padding: 8px 16px; border: 1px solid #E4AC38; border-radius: 8px; font-size: 14px; } .lang-switch { text-align: center; margin-bottom: 24px; }
.en { direction: ltr; text-align: left; } .lang-switch a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-weight: 700; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
a { color: #E4AC38; } .en { direction: ltr; text-align: start; }
.date { text-align: center; color: #666; font-size: 13px; margin-top: 40px; } a { color: var(--red); text-underline-offset: 3px; }
.date { text-align: center; color: var(--ink-3); font-size: 13px; margin-top: 40px; }
</style> </style>
</head> </head>
<body> <body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment