Merge pull request #7 from Seen-Arabic/redesign

add .editorconfig & .prettierrc
Seen-Arabic · Nov 19, 2023 · faa7c8c · faa7c8c
2 parents 8ab49cf + 69501c4
commit faa7c8c
Show file tree

Hide file tree

Showing 16 changed files with 877 additions and 964 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,21 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = tab
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+trailing_comma = all
+bracket_spacing = true
+arrow_parens = always
+prose_wrap = preserve
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+/dist
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,19 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "printWidth": 120,
+  "tabWidth": 4,
+  "useTabs": true,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "lf",
+  "embeddedLanguageFormatting": "auto",
+  "insertPragma": false,
+  "requirePragma": false,
+  "proseWrap": "preserve"
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5585
+}
diff --git a/404.html b/404.html
@@ -1,108 +1,103 @@
 <!DOCTYPE html>
 <html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="author" content="seen - س" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Page Not Found</title>
 
-<head>
-  <meta charset="utf-8">
-  <meta name="author" content="seen - س" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Page Not Found</title>
+		<style media="screen">
+			body {
+				background: #33485d;
+				color: rgba(0, 0, 0, 0.87);
+				font-family: Roboto, Helvetica, Arial, sans-serif;
+				margin: 0;
+				padding: 0;
+			}
 
-  <style media="screen">
-    body {
-      background: #33485d;
-      color: rgba(0, 0, 0, 0.87);
-      font-family: Roboto, Helvetica, Arial, sans-serif;
-      margin: 0;
-      padding: 0;
-    }
+			#message {
+				background: white;
+				max-width: 360px;
+				margin: 100px auto 16px;
+				padding: 32px 24px 16px;
+				border-radius: 3px;
+			}
 
-    #message {
-      background: white;
-      max-width: 360px;
-      margin: 100px auto 16px;
-      padding: 32px 24px 16px;
-      border-radius: 3px;
-    }
+			#message h3 {
+				color: #039be5;
+				font-weight: normal;
+				font-size: 16px;
+				margin: 16px 0 12px;
+				text-align: center;
+			}
 
-    #message h3 {
-      color: #039be5;
-      font-weight: normal;
-      font-size: 16px;
-      margin: 16px 0 12px;
-      text-align: center;
-    }
+			#message h2 {
+				text-align: center;
+				color: #ffa100;
+				font-weight: bold;
+				font-size: 2em;
+				margin: 0 0 8px;
+			}
 
-    #message h2 {
-      text-align: center;
-      color: #ffa100;
-      font-weight: bold;
-      font-size: 2em;
-      margin: 0 0 8px;
-    }
+			#message h1 {
+				text-align: center;
+				font-size: 22px;
+				font-weight: 300;
+				color: rgba(0, 0, 0, 0.6);
+				margin: 0 0 16px;
+			}
 
-    #message h1 {
-      text-align: center;
-      font-size: 22px;
-      font-weight: 300;
-      color: rgba(0, 0, 0, 0.6);
-      margin: 0 0 16px;
-    }
+			#message p {
+				line-height: 140%;
+				margin: 16px 0 24px;
+				font-size: 14px;
+			}
 
-    #message p {
-      line-height: 140%;
-      margin: 16px 0 24px;
-      font-size: 14px;
-    }
+			#message a {
+				color: inherit;
+				text-decoration: none;
+				cursor: pointer;
+			}
 
-    #message a {
-      color: inherit;
-      text-decoration: none;
-      cursor: pointer;
-    }
+			#load {
+				color: rgba(0, 0, 0, 0.4);
+				text-align: center;
+				font-size: 13px;
+			}
 
-    #load {
-      color: rgba(0, 0, 0, 0.4);
-      text-align: center;
-      font-size: 13px;
-    }
+			@media (max-width: 600px) {
+				body,
+				#message {
+					margin-top: 0;
+					background: #33485d;
+					box-shadow: none;
+					color: #fff;
+				}
 
-    @media (max-width: 600px) {
+				#message h1,
+				#message h3,
+				#message p {
+					color: #fff;
+				}
 
-      body,
-      #message {
-        margin-top: 0;
-        background: #33485d;
-        box-shadow: none;
-        color: #fff;
-      }
+				body {
+					border-top: 16px solid #039be5;
+				}
+			}
+		</style>
+	</head>
 
-      #message h1,
-      #message h3,
-      #message p {
-        color: #fff;
-      }
-
-      body {
-        border-top: 16px solid #039be5;
-      }
-    }
-  </style>
-</head>
-
-<body>
-  <div id="message" dir="auto">
-    <h2>404</h2>
-    <h1 dir="auto">Page Not Found - الصفحة غير موجودة</h1>
-    <p dir="auto">لم يتم العثور على الملف المحدد في هذا الموقع. يرجى التحقق من وجود أخطاء في URL وحاول مرة أخرى.</p>
-    <hr>
-    <a href="https://seen-arabic.github.io/Arabic-Services/">
-      <h3 dir="auto">
-        Return to Home
-        -
-        الرجوع إلى الصفحة الرئيسية
-      </h3>
-    </a>
-  </div>
-</body>
-
-</html>
+	<body>
+		<div id="message" dir="auto">
+			<h2>404</h2>
+			<h1 dir="auto">Page Not Found - الصفحة غير موجودة</h1>
+			<p dir="auto">
+				لم يتم العثور على الملف المحدد في هذا الموقع. يرجى التحقق من وجود أخطاء في URL وحاول مرة أخرى.
+			</p>
+			<hr />
+			<a href="https://seen-arabic.github.io/Arabic-Services/">
+				<h3 dir="auto">Return to Home - الرجوع إلى الصفحة الرئيسية</h3>
+			</a>
+		</div>
+	</body>
+</html>
diff --git a/README.md b/README.md
@@ -5,22 +5,19 @@
 
 <div align="center">
 
-| الخدمة | الرابط 
-| ---- | --------
-| تحويل الرسم العربي إلى الرسم القديم (إزالة النقط والحروف) | https://seen-arabic.github.io/Arabic-Services/old-arabic/
-| تحويل الحرف إلى كلمة | https://seen-arabic.github.io/Arabic-Services/letter-to-word/ 
-
+| الخدمة                                                    | الرابط                                                        |
+| --------------------------------------------------------- | ------------------------------------------------------------- |
+| تحويل الرسم العربي إلى الرسم القديم (إزالة النقط والحروف) | https://seen-arabic.github.io/Arabic-Services/old-arabic/     |
+| تحويل الحرف إلى كلمة                                      | https://seen-arabic.github.io/Arabic-Services/letter-to-word/ |
 
 </div>
 
 <br>
 
-
 <p align="center">
 <a align="center" href="(https://hits.seeyoufarm.com"><img alt="HITS"  align="center" src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FSeen-Arabic%2FArabic-Services&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=PAGE+VIEWS&edge_flat=false"></a>
 </p>
 
-
------------
+---
 
 <h6 align="center">سبحَانَكَ اللَّهُمَّ وَبِحَمْدِكَ، أَشْهَدُ أَنْ لا إِلهَ إِلأَ انْتَ أَسْتَغْفِرُكَ وَأَتْوبُ إِلَيْكَ</h6>
diff --git a/assets/css/home.css b/assets/css/home.css
@@ -1,75 +1,75 @@
 * {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 html {
-  scroll-behavior: smooth;
-  position: relative;
-  min-height: 100%;
+	scroll-behavior: smooth;
+	position: relative;
+	min-height: 100%;
 }
 
-h2{
-  margin: 0;
-  padding: 0;
+h2 {
+	margin: 0;
+	padding: 0;
 }
 
 body {
-  margin: 0;
-  padding: 0;
-  background-color: #33485d;
+	margin: 0;
+	padding: 0;
+	background-color: #33485d;
 }
 
 .white-box {
-  color: #33485d;
-  width: 70%;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  background-color: #fff;
-  padding: 20px;
-  border-radius: 20px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+	color: #33485d;
+	width: 70%;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	background-color: #fff;
+	padding: 20px;
+	border-radius: 20px;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 .white-box:hover {
-  background-color: #ededed;
+	background-color: #ededed;
 }
 
 .white-box i {
-  margin-bottom: 25px;
-  font-size: 30px;
+	margin-bottom: 25px;
+	font-size: 30px;
 }
 
 main {
-  padding-top: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100vh;
+	padding-top: 20px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	height: 100vh;
 }
 
 .logo {
-  max-width: 100px;
-  max-height: auto;
+	max-width: 100px;
+	max-height: auto;
 }
 a {
-  text-decoration: none;
-  cursor: pointer;
-  text-align: center;
+	text-decoration: none;
+	cursor: pointer;
+	text-align: center;
 }
 
 .content {
-  flex-grow: 1;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+	flex-grow: 1;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 }
 
-.visitors{
-  margin-bottom: 20px;
+.visitors {
+	margin-bottom: 20px;
 }