diff --git a/README.md b/README.md
index 9478a03..433b046 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@
| Discord | [portals/discord/index.html][url-portal-discord] | 6.48 KB | [@JMcrafter26][url-jmcrafter26] - [link][url-jmcrafter26-discord] |
| Facebook | [portals/facebook/index.html][url-portal-facebook] | 2.65 KB | [@roshanravan][url-roshanravan] - [link][url-roshanravan-facebook] |
| Google | [portals/google/index.html][url-portal-google] | 5.28 KB | [@breaching][url-breaching] - [link][url-breaching-google] |
-| Instagram | To do... | | |
+| Instagram | [portals/instagram/index.html][url-portal-instagram] | 4.01 KB | [@JMcrafter26][url-jmcrafter26] - [link][url-jmcrafter26-instagram] |
| Microsoft | To do... | | |
| Microsoft 365 | To do... | | |
| Southwest Airline | [portals/southwest-airline/index.html][url-portal-southwest-airline] | 3.72 KB | [@bigbrodude6119][url-bigbrodude6119] - [link][url-bigbrodude6119-southwest-airline] |
@@ -254,6 +254,8 @@ Cody Tolene
https://raw.githack.com/CodyTolene/Red-Portals/main/portals/facebook/index.html
[url-portal-google]:
https://raw.githack.com/CodyTolene/Red-Portals/main/portals/google/index.html
+[url-portal-instagram]:
+ https://raw.githack.com/CodyTolene/Red-Portals/main/portals/instagram/index.html
[url-portal-southwest-airline]:
https://raw.githack.com/CodyTolene/Red-Portals/main/portals/southwest-airline/index.html
@@ -269,6 +271,8 @@ Cody Tolene
[url-breaching]: https://github.com/breaching
[url-jmcrafter26-discord]:
https://github.com/bigbrodude6119/flipper-zero-evil-portal/blob/663975b441bc5ace4d47457d8826a4a181701fd2/portals/Discord.html#L1
+[url-jmcrafter26-instagram]:
+ https://github.com/bigbrodude6119/flipper-zero-evil-portal/blob/663975b441bc5ace4d47457d8826a4a181701fd2/portals/instagram_realistic.html#L1
[url-jmcrafter26]: https://github.com/JMcrafter26
[url-jules0835-apple]:
https://github.com/bigbrodude6119/flipper-zero-evil-portal/commit/b5adc38657ac7c7429c576afc261c4642fd55e09#diff-60c8686fd67fcb8612617383e99aa380eee28a17d3c0c8bcf54621e3884b4615
diff --git a/package-lock.json b/package-lock.json
index 514fae7..d8c0038 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "red-portals",
- "version": "1.7.0",
+ "version": "1.8.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "red-portals",
- "version": "1.7.0",
+ "version": "1.8.0",
"license": "MIT",
"devDependencies": {
"@11ty/eleventy": "^3.0.0",
diff --git a/package.json b/package.json
index 27feaab..dcca2e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "red-portals",
- "version": "1.7.0",
+ "version": "1.8.0",
"license": "MIT",
"scripts": {
"build": "npx eleventy",
diff --git a/portals/instagram/index.html b/portals/instagram/index.html
new file mode 100644
index 0000000..45a7205
--- /dev/null
+++ b/portals/instagram/index.html
@@ -0,0 +1 @@
+Login • Instagram
\ No newline at end of file
diff --git a/src/facebook.scss b/src/facebook.scss
index 674e1ca..350d534 100644
--- a/src/facebook.scss
+++ b/src/facebook.scss
@@ -1,16 +1,19 @@
// Colors
+$color-background: #f2f4f7;
$color-black-light: #111111;
-$color-gray: #999;
+$color-blue-background: #1877f2;
+$color-blue-hover: #166fe5;
+$color-blue: #304cb2;
$color-gray-light: #cccccc;
-$color-gray-lighter: #dddddd;
+$color-gray: #999999;
+$color-notice-background: #fff9d7;
+$color-notice-border: #e2c822;
+$color-shadow: rgba(0, 0, 0, 0.1);
$color-white: #ffffff;
-$color-blue-darker: #143f85;
-$color-blue-dark: #1a4a8f;
-$color-blue: #304cb2;
body {
align-items: center;
- background-color: #f2f4f7;
+ background-color: $color-background;
color: $color-black-light;
display: flex;
flex-direction: column;
@@ -40,10 +43,9 @@ main {
border-radius: 0.5rem;
padding: 1rem;
width: 320px;
-
box-shadow:
- 0px 2px 4px rgba(0, 0, 0, 0.1),
- 0px 8px 16px rgba(0, 0, 0, 0.1);
+ 0px 2px 4px $color-shadow,
+ 0px 8px 16px $color-shadow;
width: 400px;
@media (max-width: 768px) {
@@ -61,8 +63,8 @@ main {
}
div.notice {
- background-color: #fff9d7;
- border: 1px solid #e2c822;
+ background-color: $color-notice-background;
+ border: 1px solid $color-notice-border;
font-size: 0.75rem;
padding: 0.75rem 1rem;
text-align: center;
@@ -82,7 +84,7 @@ main {
}
button {
- background: #1877f2;
+ background: $color-blue-background;
border-radius: 0.5rem;
border: none;
color: $color-white;
@@ -93,7 +95,7 @@ main {
width: 100%;
&:hover {
- background: #166fe5;
+ background: $color-blue-hover;
}
}
diff --git a/src/instagram.html b/src/instagram.html
new file mode 100644
index 0000000..14550a1
--- /dev/null
+++ b/src/instagram.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+ Login • Instagram
+
+
+
+
+
+
+
+
+
diff --git a/src/instagram.scss b/src/instagram.scss
new file mode 100644
index 0000000..d0b8a47
--- /dev/null
+++ b/src/instagram.scss
@@ -0,0 +1,116 @@
+// Colors
+$color-background: #f2f4f7;
+$color-black-light: #111111;
+$color-blue-background: #0095f6;
+$color-blue-hover: #166fe5;
+$color-blue: #304cb2;
+$color-gray-light: #cccccc;
+$color-gray: #999999;
+$color-shadow: rgba(0, 0, 0, 0.1);
+$color-white: #ffffff;
+
+body {
+ align-items: center;
+ background-color: $color-background;
+ color: $color-black-light;
+ display: flex;
+ flex-direction: column;
+ font-family: sans-serif;
+ font-size: 14px;
+ height: 100vh;
+ justify-content: center;
+ margin: 0;
+ padding: 0;
+}
+
+header {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ svg {
+ &:last-of-type {
+ align-self: flex-end;
+ }
+ }
+}
+
+main {
+ background-color: $color-white;
+ border-radius: 0.5rem;
+ padding: 1rem;
+ width: 320px;
+ box-shadow:
+ 0px 2px 4px $color-shadow,
+ 0px 8px 16px $color-shadow;
+ width: 400px;
+
+ @media (max-width: 768px) {
+ box-sizing: border-box;
+ box-shadow: none;
+ height: 100%;
+ width: 100%;
+ }
+
+ > section {
+ h2 {
+ text-align: center;
+ font-weight: 600;
+ margin: 1rem 0;
+ }
+
+ form {
+ margin-top: 1rem;
+
+ input {
+ border-radius: 4px;
+ border: 1px solid $color-gray-light;
+ box-sizing: border-box;
+ font-size: 1rem;
+ margin-bottom: 1rem;
+ padding: 0.65rem;
+ width: 100%;
+ }
+
+ button {
+ background: $color-blue-background;
+ border-radius: 0.5rem;
+ border: none;
+ color: $color-white;
+ cursor: pointer;
+ font-size: 1rem;
+ font-weight: 600;
+ padding: 0.75rem 1rem;
+ width: 100%;
+
+ &:hover {
+ background: $color-blue-hover;
+ }
+ }
+
+ a {
+ display: block;
+ color: $color-blue;
+ text-decoration: none;
+ margin: 1rem auto;
+ font-size: 0.75rem;
+ text-align: center;
+ }
+ }
+ }
+}
+
+footer {
+ bottom: 0;
+ color: $color-black-light;
+ font-size: 0.75rem;
+ padding: 0.5rem 0;
+ position: absolute;
+ text-align: center;
+ width: 100%;
+
+ p {
+ margin: 0;
+ }
+}