diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..bdfa6b8 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +.env +node_modules +dist \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..72cfb47 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,91 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "plugin:import/recommended", + "plugin:import/typescript", + "prettier" + ], + "overrides": [], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": [ + "prettier", + "@typescript-eslint", + "import" + ], + "rules": { + "prettier/prettier": ["error"], + "prefer-const": "error", + "eqeqeq": [ + "error", + "always" + ], + "curly": [ + "error" + ], + "require-atomic-updates": [ + "error" + ], + "no-var": [ + "error" + ], + "init-declarations": [ + "error", + "always" + ], + "require-await": [ + "error" + ], + "no-param-reassign": [ + "error" + ], + "import/first": "warn", + "import/exports-last": "warn", + "import/newline-after-import": "warn", + "import/order": [ + "warn", + { + "groups": [ + "builtin", + "external", + "internal", + "parent", + "sibling", + "index", + "object", + "type", + "unknown" + ], + "alphabetize": { + "order": "asc", + "caseInsensitive": true + } + } + ], + "indent": [ + "error", + "tab" + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "warn", + "single" + ], + "semi": [ + "error", + "always" + ] + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index fd3dbb5..488b3a5 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,8 @@ /.pnp .pnp.js .yarn/install-state.gz +pnpm-lock.yaml +package-lock.json # testing /coverage diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 0000000..58b1861 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +pnpm exec lint-staged diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..3d72e13 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,14 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example +supabase + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..d57413b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "endOfLine": "lf", + "trailingComma": "none", + "plugins": [""], + "pluginSearchDirs": ["."], + "overrides": [] + } \ No newline at end of file diff --git a/404.html b/404.html index b3a5b3e..40c9925 100644 --- a/404.html +++ b/404.html @@ -1,64 +1,147 @@ - - 404 - Not Found - - - - - - - - - - - - -
- - -
-

OOPS! PAGE NOT FOUND

-
-

404

-
-
-

- WE ARE SORRY, BUT THE PAGE YOU REQUESTED WAS NOT FOUND -

-
+ + + 404 - Not Found + + + + + + + + + + + + + +
+ + +
+

OOPS! PAGE NOT FOUND

+
+

404

+
+
+

+ WE ARE SORRY, BUT THE PAGE YOU REQUESTED WAS NOT FOUND +

- - +
+ + + \ No newline at end of file diff --git a/components/feature-card2.css b/components/feature-card2.css index 6bd4ddc..4df0997 100644 --- a/components/feature-card2.css +++ b/components/feature-card2.css @@ -25,10 +25,7 @@ margin-bottom: var(--dl-space-space-unit); } - - - -@media(max-width: 767px) { +@media (max-width: 767px) { .feature-card2-feature-card { flex-direction: row; } @@ -36,7 +33,7 @@ flex-direction: column; } } -@media(max-width: 479px) { +@media (max-width: 479px) { .feature-card2-container { flex-direction: column; } diff --git a/components/feature-card2.html b/components/feature-card2.html index 5f9686e..629d2f3 100644 --- a/components/feature-card2.html +++ b/components/feature-card2.html @@ -1,68 +1,151 @@ - - The Purple Bubble - - - - - - - - - - - - -
- -
- - - -
-

Lorem ipsum

+ + + The Purple Bubble + + + + + + + + + + + + + +
+ +
+ + + + +
+

Lorem ipsum

+ - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem - lorem, malesuada in metus vitae, scelerisque accumsan ipsum. - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem + lorem, malesuada in metus vitae, scelerisque accumsan ipsum. -
+
- - +
+ + + \ No newline at end of file diff --git a/components/feature-card21.css b/components/feature-card21.css index 3cedffe..13b1e5e 100644 --- a/components/feature-card21.css +++ b/components/feature-card21.css @@ -25,10 +25,7 @@ margin-bottom: var(--dl-space-space-unit); } - - - -@media(max-width: 767px) { +@media (max-width: 767px) { .feature-card21-feature-card { flex-direction: row; } @@ -36,7 +33,7 @@ flex-direction: column; } } -@media(max-width: 479px) { +@media (max-width: 479px) { .feature-card21-container { flex-direction: column; } diff --git a/components/feature-card21.html b/components/feature-card21.html index 3e37a6a..6ea61d8 100644 --- a/components/feature-card21.html +++ b/components/feature-card21.html @@ -1,68 +1,151 @@ - - The Purple Bubble - - - - - - - - - - - - -
- -
- - - -
-

Lorem ipsum

+ + + The Purple Bubble + + + + + + + + + + + + + +
+ +
+ + + + +
+

Lorem ipsum

+ - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem - lorem, malesuada in metus vitae, scelerisque accumsan ipsum. - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem + lorem, malesuada in metus vitae, scelerisque accumsan ipsum. -
+
- - +
+ + + \ No newline at end of file diff --git a/components/feature-card22.css b/components/feature-card22.css index 0b0eeaa..c08e894 100644 --- a/components/feature-card22.css +++ b/components/feature-card22.css @@ -25,10 +25,7 @@ margin-bottom: var(--dl-space-space-unit); } - - - -@media(max-width: 767px) { +@media (max-width: 767px) { .feature-card22-feature-card { flex-direction: row; } @@ -36,7 +33,7 @@ flex-direction: column; } } -@media(max-width: 479px) { +@media (max-width: 479px) { .feature-card22-container { flex-direction: column; } diff --git a/components/feature-card22.html b/components/feature-card22.html index d73e369..1c5420c 100644 --- a/components/feature-card22.html +++ b/components/feature-card22.html @@ -1,68 +1,151 @@ - - The Purple Bubble - - - - - - - - - - - - -
- -
- - - -
-

Lorem ipsum

+ + + The Purple Bubble + + + + + + + + + + + + + +
+ +
+ + + + +
+

Lorem ipsum

+ - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem - lorem, malesuada in metus vitae, scelerisque accumsan ipsum. - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem + lorem, malesuada in metus vitae, scelerisque accumsan ipsum. -
+
- - +
+ + + \ No newline at end of file diff --git a/components/feature-card23.css b/components/feature-card23.css index 77f2a78..1a80877 100644 --- a/components/feature-card23.css +++ b/components/feature-card23.css @@ -25,10 +25,7 @@ margin-bottom: var(--dl-space-space-unit); } - - - -@media(max-width: 767px) { +@media (max-width: 767px) { .feature-card23-feature-card { flex-direction: row; } @@ -36,7 +33,7 @@ flex-direction: column; } } -@media(max-width: 479px) { +@media (max-width: 479px) { .feature-card23-container { flex-direction: column; } diff --git a/components/feature-card23.html b/components/feature-card23.html index e20d95a..ac14604 100644 --- a/components/feature-card23.html +++ b/components/feature-card23.html @@ -1,68 +1,151 @@ - - The Purple Bubble - - - - - - - - - - - - -
- -
- - - -
-

Lorem ipsum

+ + + The Purple Bubble + + + + + + + + + + + + + +
+ +
+ + + + +
+

Lorem ipsum

+ - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem - lorem, malesuada in metus vitae, scelerisque accumsan ipsum. - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem + lorem, malesuada in metus vitae, scelerisque accumsan ipsum. -
+
- - +
+ + + \ No newline at end of file diff --git a/components/feature-card24.css b/components/feature-card24.css index 57bc1d0..2563e44 100644 --- a/components/feature-card24.css +++ b/components/feature-card24.css @@ -25,10 +25,7 @@ margin-bottom: var(--dl-space-space-unit); } - - - -@media(max-width: 767px) { +@media (max-width: 767px) { .feature-card24-feature-card { flex-direction: row; } @@ -36,7 +33,7 @@ flex-direction: column; } } -@media(max-width: 479px) { +@media (max-width: 479px) { .feature-card24-container { flex-direction: column; } diff --git a/components/feature-card24.html b/components/feature-card24.html index a740b1e..62a9360 100644 --- a/components/feature-card24.html +++ b/components/feature-card24.html @@ -1,68 +1,151 @@ - - The Purple Bubble - - - - - - - - - - - - -
- -
- - - -
-

Lorem ipsum

+ + + The Purple Bubble + + + + + + + + + + + + + +
+ +
+ + + + +
+

Lorem ipsum

+ - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem - lorem, malesuada in metus vitae, scelerisque accumsan ipsum. - + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem + lorem, malesuada in metus vitae, scelerisque accumsan ipsum. -
+
- - +
+ + + \ No newline at end of file diff --git a/index.css b/index.css index 35e02b6..f7aa53a 100644 --- a/index.css +++ b/index.css @@ -25,10 +25,7 @@ margin-bottom: var(--dl-space-space-unit); } - - - -@media(max-width: 767px) { +@media (max-width: 767px) { .feature-card21-feature-card { flex-direction: row; } @@ -36,7 +33,7 @@ flex-direction: column; } } -@media(max-width: 479px) { +@media (max-width: 479px) { .feature-card21-container { flex-direction: column; } @@ -69,10 +66,7 @@ margin-bottom: var(--dl-space-space-unit); } - - - -@media(max-width: 767px) { +@media (max-width: 767px) { .feature-card22-feature-card { flex-direction: row; } @@ -80,7 +74,7 @@ flex-direction: column; } } -@media(max-width: 479px) { +@media (max-width: 479px) { .feature-card22-container { flex-direction: column; } @@ -113,10 +107,7 @@ margin-bottom: var(--dl-space-space-unit); } - - - -@media(max-width: 767px) { +@media (max-width: 767px) { .feature-card23-feature-card { flex-direction: row; } @@ -124,7 +115,7 @@ flex-direction: column; } } -@media(max-width: 479px) { +@media (max-width: 479px) { .feature-card23-container { flex-direction: column; } @@ -157,10 +148,7 @@ margin-bottom: var(--dl-space-space-unit); } - - - -@media(max-width: 767px) { +@media (max-width: 767px) { .feature-card24-feature-card { flex-direction: row; } @@ -168,7 +156,7 @@ flex-direction: column; } } -@media(max-width: 479px) { +@media (max-width: 479px) { .feature-card24-container { flex-direction: column; } @@ -195,7 +183,7 @@ flex-direction: column; background-size: cover; justify-content: center; - background-image: url("public/untitled%20design%20(3)-1500h.png"); + background-image: url("public/bg.png"); } .home-text { color: var(--dl-color-gray-white); @@ -273,10 +261,10 @@ width: 483px; height: 504px; } -@media(max-width: 1600px) { +@media (max-width: 1600px) { .home-hero { background-size: cover; - background-image: url("public/untitled%20design%20(3)-1500h.png"); + background-image: url("public/bg.png"); } .home-features { width: 100%; @@ -289,7 +277,7 @@ width: 585px; } } -@media(max-width: 1200px) { +@media (max-width: 1200px) { .home-hero { background-size: cover; background-image: 4350d34e-bac0-48e1-b3d6-59ff1f2d7c82; @@ -303,7 +291,7 @@ padding-right: 13px; } } -@media(max-width: 991px) { +@media (max-width: 991px) { .home-hero { flex-direction: column; } @@ -314,7 +302,7 @@ text-align: center; } } -@media(max-width: 767px) { +@media (max-width: 767px) { .home-hero { padding-left: var(--dl-space-space-twounits); padding-right: var(--dl-space-space-twounits); @@ -324,7 +312,7 @@ padding-right: var(--dl-space-space-twounits); } } -@media(max-width: 479px) { +@media (max-width: 479px) { .home-hero { width: 100%; padding: var(--dl-space-space-twounits); diff --git a/index.html b/index.html index ebb1a9d..c0748ec 100644 --- a/index.html +++ b/index.html @@ -1,186 +1,243 @@ - - The Purple Bubble - - - - - - - - - - - - - - - -
- - - -
-
-

Welcome To The Purple Bubble!

- - - A Free and OpenSource Project Created and Maintained By The - Community - - - + + + The Purple Bubble + + + + + + + + + + + + + + + + +
+ + + +
+
+

Welcome To The Purple Bubble!

+ + + A Free and OpenSource Project Created and Maintained By The + Community -
- - Help Contribute - - -
+ + + +
+ + Help Contribute + +
-
-
-
- - - -
-

- End-to-End Encryption -

+
+
+
+
+ + + + +
+

+ End-to-End Encryption +

+ - - Ensure your conversations are secure and private with - end-to-end encryption. - + Ensure your conversations are secure and private with + end-to-end encryption. -
+
-
- - - -
-

Group Chats

+
+
+ + + + +
+

Group Chats

+ - - Easily create and manage group chats to collaborate with - friends, family, or colleagues. - + Easily create and manage group chats to collaborate with + friends, family, or colleagues. -
+
-
- - - -
-

- Cross-Platform Compatibility -

+
+
+ + + + +
+

+ Cross-Platform Compatibility +

+ - - Access your messages from any device, whether it's a - smartphone, tablet, or computer. - + Access your messages from any device, whether it's a + smartphone, tablet, or computer. -
+
-
- - - -
-

- Customizable Themes -

+
+
+ + + + +
+

+ Customizable Themes +

+ - - Personalize your messaging experience with a wide range of - customizable themes and color options. - + Personalize your messaging experience with a wide range of + customizable themes and color options. -
+
-
- -
+
+
+
- - +
+ + + \ No newline at end of file diff --git a/package.json b/package.json index d69bce6..44087df 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,23 @@ { - "name": "the-purple-bubble", + "name": "thepurplebubble-site", "version": "1.0.0", "private": true, "dependencies": { - "parcel-bundler": "^1.6.1", - "@lottiefiles/lottie-player": "1.5.7" + "@lottiefiles/lottie-player": "1.5.7", + "parcel": "^2.10.3" }, - "scripts": {}, - "devDependencies": {} -} \ No newline at end of file + "scripts": { + "prepare": "husky install" + }, + "devDependencies": { + "eslint": "^8.55.0", + "eslint-config-prettier": "^9.1.0", + "husky": "^8.0.3", + "lint-staged": "^15.2.0", + "prettier": "3.1.1", + "prettier-eslint": "^16.1.2" + }, + "lint-staged": { + "**/*": "prettier --write --ignore-unknown" + } +} diff --git a/public/untitled design (3)-1500h.png b/public/bg.png similarity index 100% rename from public/untitled design (3)-1500h.png rename to public/bg.png diff --git a/public/layer1favicon.png b/public/favicon.png similarity index 100% rename from public/layer1favicon.png rename to public/favicon.png diff --git a/style.css b/style.css index efb47d6..e2bb40c 100644 --- a/style.css +++ b/style.css @@ -1,25 +1,25 @@ :root { --dl-color-gray-500: #777474ff; --dl-color-gray-700: #999999; - --dl-color-gray-900: #D9D9D9; + --dl-color-gray-900: #d9d9d9; --dl-size-size-large: 144px; --dl-size-size-small: 48px; - --dl-color-danger-300: #A22020; - --dl-color-danger-500: #BF2626; - --dl-color-danger-700: #E14747; + --dl-color-danger-300: #a22020; + --dl-color-danger-500: #bf2626; + --dl-color-danger-700: #e14747; --dl-color-gray-black: #ffffffff; - --dl-color-gray-white: #FFFFFF; + --dl-color-gray-white: #ffffff; --dl-size-size-medium: 96px; --dl-size-size-xlarge: 192px; --dl-size-size-xsmall: 16px; --dl-space-space-unit: 16px; - --dl-color-primary-100: #003EB3; - --dl-color-primary-300: #0074F0; - --dl-color-primary-500: #14A9FF; - --dl-color-primary-700: #85DCFF; + --dl-color-primary-100: #003eb3; + --dl-color-primary-300: #0074f0; + --dl-color-primary-500: #14a9ff; + --dl-color-primary-700: #85dcff; --dl-color-success-300: #199033; - --dl-color-success-500: #32A94C; - --dl-color-success-700: #4CC366; + --dl-color-success-500: #32a94c; + --dl-color-success-700: #4cc366; --dl-size-size-xxlarge: 288px; --dl-size-size-maxwidth: 1400px; --dl-radius-radius-round: 50%;