From 3504ad334d4318a2006171e9dc45c5d734b2e392 Mon Sep 17 00:00:00 2001 From: Pere Serra Bosch Date: Mon, 9 Aug 2021 17:34:53 +0200 Subject: [PATCH 01/49] added html structure --- .gitignore | 1 + assets/css/BASE/reset.css | 67 +++++++++ assets/css/LAYOUT/common.css | 22 +++ assets/css/MODULE/post-card.css | 226 ++++++++++++++++++++++++++++ assets/css/MODULE/toggle.css | 57 +++++++ assets/css/STATUS/dark-mode.css | 27 ++++ assets/css/THEME/vars.css | 11 ++ assets/css/styles.css | 19 +++ {data => assets/data}/comments.json | 0 {data => assets/data}/db.json | 0 {data => assets/data}/posts.json | 0 {data => assets/data}/users.json | 0 assets/js/main.js | 15 ++ assets/js/tinder.js | 79 ++++++++++ index.html | 168 +++++++++++++++++++++ 15 files changed, 692 insertions(+) create mode 100644 .gitignore create mode 100644 assets/css/BASE/reset.css create mode 100644 assets/css/LAYOUT/common.css create mode 100644 assets/css/MODULE/post-card.css create mode 100644 assets/css/MODULE/toggle.css create mode 100644 assets/css/STATUS/dark-mode.css create mode 100644 assets/css/THEME/vars.css create mode 100644 assets/css/styles.css rename {data => assets/data}/comments.json (100%) rename {data => assets/data}/db.json (100%) rename {data => assets/data}/posts.json (100%) rename {data => assets/data}/users.json (100%) create mode 100644 assets/js/main.js create mode 100644 assets/js/tinder.js create mode 100644 index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..600d2d33 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.vscode \ No newline at end of file diff --git a/assets/css/BASE/reset.css b/assets/css/BASE/reset.css new file mode 100644 index 00000000..d32e654c --- /dev/null +++ b/assets/css/BASE/reset.css @@ -0,0 +1,67 @@ +/** + * BASE - RESET + */ + +*, +*::before, +*::after { + padding: 0; + margin: 0; + border: 0; +} + +* { + box-sizing: border-box; + /* Make sure all elements are above the background */ + z-index: 1; + position: relative; +} + +/* default */ + +html { + font-family: Arial, Helvetica, sans-serif; + font-size: 62.5%; + scroll-behavior: smooth; + color: var(--foreground); + transition: color var(--transition); + background-blend-mode: multiply; +} + +html::before { + content: ""; + position: fixed; + height: 100%; + width: 100%; + background: var(--black); + transform: translateX(-100%); + transition: transform var(--transition); + z-index: 0; +} + +body { + font-family: 'Roboto', sans-serif; + box-sizing: border-box; +} + +ul { + list-style: none; + padding-left: 0; +} + +button{ + cursor: pointer; +} + +code{ + display: block; + padding-bottom: 0.6rem; +} + +/* headings */ + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 1rem; + letter-spacing: normal; +} diff --git a/assets/css/LAYOUT/common.css b/assets/css/LAYOUT/common.css new file mode 100644 index 00000000..c33bfc46 --- /dev/null +++ b/assets/css/LAYOUT/common.css @@ -0,0 +1,22 @@ +/** + * LAYOUT - COMMON + */ + +.section{ + height: calc(100vh - 4rem); + max-height: calc(100vh - 4rem); + margin: 2rem; + background-color: #F8F9FA; +} + +.grid{ + height: calc(100vh - 4rem); + max-height: calc(100vh - 4rem); + margin: 2rem; + /* background-color: #F8F9FA; */ +} + +.header{ + z-index: 2; + padding: 2rem 4rem; +} \ No newline at end of file diff --git a/assets/css/MODULE/post-card.css b/assets/css/MODULE/post-card.css new file mode 100644 index 00000000..a6997268 --- /dev/null +++ b/assets/css/MODULE/post-card.css @@ -0,0 +1,226 @@ +/** + * MODULE - POST CARD + */ + + +.post-card{ + background-color: #F8F9FA; +} + + +/* *, *:before, *:after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html, body { + font-size: 62.5%; +} +body { + background: #63BDF7; + overflow: hidden; +} + +$w: 30.6rem; +$h: 54rem; +$headerH: 6rem; +$cardW: 24rem; +$cardH: 32rem; +$cardTopH: 20.5rem; +$cardBtmH: $cardH - $cardTopH; +$imgSize: 10rem; + +$purple: #7132B9; +$blue: #248CB6; +$indigo: #303F9F; +$cyan: #26C6DA; +$lime: #AFB42B; +$brown: #795548; + +$orange: #FF945A; +$green: #B1DA96; + +.demo { + position: absolute; + left: 50%; + top: 50%; + width: $w; + height: $h; + margin-left: $w/-2; + margin-top: $h/-2; + background: #F6F6F5; + box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2); + + &__header { + height: $headerH; + background: #002942; + } + + &__content { + overflow: hidden; + position: relative; + height: $h - $headerH; + padding-top: 4.5rem; + user-select: none; + } + + &__card-cont { + position: relative; + width: $cardW; + height: $cardH; + margin: 0 auto 5rem; + } + + &__card { + z-index: 2; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + transform-origin: 50% 100%; + + &.reset { + transition: transform 0.3s; + transform: translateX(0) !important; + + .demo__card__choice { + transition: opacity 0.3s; + opacity: 0 !important;; + } + } + + &.inactive { + transition: transform 0.3s; + } + + &.to-left { + transform: translateX(-30rem) rotate(-30deg) !important; + } + + &.to-right { + transform: translate(30rem) rotate(30deg) !important; + } + + &.below { + z-index: 1; + } + + &__top { + height: $cardTopH; + padding-top: 4rem; + + &.purple { + background: $purple; + } + &.blue { + background: $blue; + } + &.indigo { + background: $indigo; + } + &.cyan { + background: $cyan; + } + &.lime { + background: $lime; + } + &.brown { + background: $brown; + } + } + + &__img { + overflow: hidden; + width: $imgSize; + height: $imgSize; + margin: 0 auto 1.5rem; + border-radius: 50%; + border: 0.5rem solid #ffffff; + background-image: url('//s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg'); + background-size: cover; + } + + &__name { + text-align: center; + font-size: 2rem; + font-weight: bold; + color: #fff; + } + + &__btm { + height: $cardBtmH; + background: #FFFFFF; + } + + &__we { + text-align: center; + font-size: 2.2rem; + line-height: $cardBtmH; + } + + &__choice { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + + &:before { + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 2rem; + height: 2rem; + margin-left: -1rem; + color: #fff; + border-radius: 50%; + box-shadow: -2rem -3rem #fff, 2rem -3rem #fff; + } + + &:after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 4rem; + height: 1.5rem; + margin-left: -2rem; + border: 0.6rem solid #fff; + border-bottom: none; + border-top-left-radius: 1.5rem; + border-top-right-radius: 1.5rem; + } + + &.m--reject { + background: $orange; + } + &.m--like { + background: $green; + + &:after { + transform: scaleY(-1); + } + } + } + + &__drag { + z-index: 5; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + cursor: grab; + } + } + + &__tip { + text-align: center; + font-size: 2.2rem; + } +} + */ diff --git a/assets/css/MODULE/toggle.css b/assets/css/MODULE/toggle.css new file mode 100644 index 00000000..e949048c --- /dev/null +++ b/assets/css/MODULE/toggle.css @@ -0,0 +1,57 @@ +/** + * MODULE - TOGGLE + */ + +.toggle__wrapper { + width: 5rem; + display: block; +} + +.toggle { + height: 2.6rem; + width: 5rem; + background: var(--foreground); + border-radius: 13px; + padding: 4px; + position: relative; + transition: background var(--transition); + cursor: pointer; +} + +.toggle::before { + content: ""; + display: block; + height: 1.8rem; + width: 1.8rem; + border-radius: 9px; + background: var(--background); + position: absolute; + z-index: 2; + transform: translate(0); + transition: transform var(--transition), background var(--transition); +} + +.toggle.enabled::before { + transform: translateX(24px); +} + +.toggle .toggle__input { + opacity: 0; + position: absolute; + top: 0; +} + +.toggle .toggle_icons { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; +} + +.toggle .toggle_icons svg { + fill: var(--background); + height: 3rem; + width: 3rem; + z-index: 0; + margin: 0 0.5rem; +} diff --git a/assets/css/STATUS/dark-mode.css b/assets/css/STATUS/dark-mode.css new file mode 100644 index 00000000..b3454a0f --- /dev/null +++ b/assets/css/STATUS/dark-mode.css @@ -0,0 +1,27 @@ +/** + * STATUS - DARK + */ + +.dark-mode { + color: #FAFAFA; +} + +.dark-mode::before { + transform: translateX(0); +} + +.dark-mode .toggle { + background: var(--white); +} + +.dark-mode .toggle::before { + background: var(--black); +} + +.dark-mode .toggle_icons svg { + fill: var(--black); +} + +.dark-mode .exercise__code{ + color: var(--black); +} \ No newline at end of file diff --git a/assets/css/THEME/vars.css b/assets/css/THEME/vars.css new file mode 100644 index 00000000..22c17c54 --- /dev/null +++ b/assets/css/THEME/vars.css @@ -0,0 +1,11 @@ +/** + * THEME - VARS + */ + +:root { + --black: #121212; + --white: #f5f5f5; + --background: var(--white); + --foreground: var(--black); + --transition: 0.2s ease; +} \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 00000000..41864a1f --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,19 @@ +/** + * STYLES + */ + +/* BASE FOLDER */ +@import "BASE/reset.css"; + + /* LAYOUT FOLDER */ +@import "LAYOUT/common.css"; + + /* MODULE FOLDER */ +@import "MODULE/post-card.css"; +@import "MODULE/toggle.css"; + + /* STATUS FOLDER */ +@import "STATUS/dark-mode.css"; + + /* THEME FOLDER */ +@import "THEME/vars.css"; diff --git a/data/comments.json b/assets/data/comments.json similarity index 100% rename from data/comments.json rename to assets/data/comments.json diff --git a/data/db.json b/assets/data/db.json similarity index 100% rename from data/db.json rename to assets/data/db.json diff --git a/data/posts.json b/assets/data/posts.json similarity index 100% rename from data/posts.json rename to assets/data/posts.json diff --git a/data/users.json b/assets/data/users.json similarity index 100% rename from data/users.json rename to assets/data/users.json diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 00000000..70e12851 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,15 @@ +'use strict'; + +var $toggleInput = document.getElementById("toggle__input"); +$toggleInput.addEventListener("click", switchStyles); + +/** + * Toggle styles when we press the switch button + */ +function switchStyles() { + const $html = document.querySelector("html"); + const $toggle = document.getElementById("toggle"); + + $toggle.classList.toggle("enabled"); + $html.classList.toggle("dark-mode"); +} \ No newline at end of file diff --git a/assets/js/tinder.js b/assets/js/tinder.js new file mode 100644 index 00000000..ef18c113 --- /dev/null +++ b/assets/js/tinder.js @@ -0,0 +1,79 @@ +$(document).ready(function () { + + var animating = false; + var cardsCounter = 0; + var numOfCards = 6; + var decisionVal = 80; + var pullDeltaX = 0; + var deg = 0; + var $card, $cardReject, $cardLike; + + function pullChange() { + animating = true; + deg = pullDeltaX / 10; + $card.css("transform", "translateX(" + pullDeltaX + "px) rotate(" + deg + "deg)"); + + var opacity = pullDeltaX / 100; + var rejectOpacity = (opacity >= 0) ? 0 : Math.abs(opacity); + var likeOpacity = (opacity <= 0) ? 0 : opacity; + $cardReject.css("opacity", rejectOpacity); + $cardLike.css("opacity", likeOpacity); + }; + + function release() { + + if (pullDeltaX >= decisionVal) { + $card.addClass("to-right"); + } else if (pullDeltaX <= -decisionVal) { + $card.addClass("to-left"); + } + + if (Math.abs(pullDeltaX) >= decisionVal) { + $card.addClass("inactive"); + + setTimeout(function () { + $card.addClass("below").removeClass("inactive to-left to-right"); + cardsCounter++; + if (cardsCounter === numOfCards) { + cardsCounter = 0; + $(".demo__card").removeClass("below"); + } + }, 300); + } + + if (Math.abs(pullDeltaX) < decisionVal) { + $card.addClass("reset"); + } + + setTimeout(function () { + $card.attr("style", "").removeClass("reset") + .find(".demo__card__choice").attr("style", ""); + + pullDeltaX = 0; + animating = false; + }, 300); + }; + + $(document).on("mousedown touchstart", ".demo__card:not(.inactive)", function (e) { + if (animating) return; + + $card = $(this); + $cardReject = $(".demo__card__choice.m--reject", $card); + $cardLike = $(".demo__card__choice.m--like", $card); + var startX = e.pageX || e.originalEvent.touches[0].pageX; + + $(document).on("mousemove touchmove", function (e) { + var x = e.pageX || e.originalEvent.touches[0].pageX; + pullDeltaX = (x - startX); + if (!pullDeltaX) return; + pullChange(); + }); + + $(document).on("mouseup touchend", function () { + $(document).off("mousemove touchmove mouseup touchend"); + if (!pullDeltaX) return; // prevents from rapid click events + release(); + }); + }); + +}); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..22659030 --- /dev/null +++ b/index.html @@ -0,0 +1,168 @@ + + + + + + + + + Blog with API + + + + + + + + + + + +
+ + +
+

Blog

+ + + +
+ + +
+
+ Hungry cat 6 +

Hungry cat 6

+ +
+
+ + +
+
+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
+
+
+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
+
+
+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
+
+
+
+
+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
+
+
+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
+
+
+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
+
+
+
+
+ + +
+
+
+
+

Hungry cat

+
+
+
+ +
+ + + \ No newline at end of file From b8a1419c219ee0a543c26aff9aa35df31d20066d Mon Sep 17 00:00:00 2001 From: ParisArcos <84467828+ParisArcos@users.noreply.github.com> Date: Mon, 9 Aug 2021 19:54:31 +0100 Subject: [PATCH 02/49] modal done --- assets/css/LAYOUT/common.css | 24 +- assets/js/main.js | 4 +- index.html | 487 +++++++++++++++++++++++++---------- 3 files changed, 365 insertions(+), 150 deletions(-) diff --git a/assets/css/LAYOUT/common.css b/assets/css/LAYOUT/common.css index c33bfc46..28e9141c 100644 --- a/assets/css/LAYOUT/common.css +++ b/assets/css/LAYOUT/common.css @@ -2,21 +2,35 @@ * LAYOUT - COMMON */ -.section{ +.section { height: calc(100vh - 4rem); max-height: calc(100vh - 4rem); margin: 2rem; - background-color: #F8F9FA; + background-color: #f8f9fa; } -.grid{ +.grid { height: calc(100vh - 4rem); max-height: calc(100vh - 4rem); margin: 2rem; /* background-color: #F8F9FA; */ } -.header{ +.header { z-index: 2; padding: 2rem 4rem; -} \ No newline at end of file +} + +.bi { + font-size: 4rem; + /* border: solid black 1px; + border-radius: 50%; + padding: 0.25em 0.5em; */ +} + +.big { + font-size: 8rem; + /* border: solid black 2px; + border-radius: 50%; + padding: 0.25em 0.5em; */ +} diff --git a/assets/js/main.js b/assets/js/main.js index 70e12851..5715370e 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,4 +1,4 @@ -'use strict'; +"use strict"; var $toggleInput = document.getElementById("toggle__input"); $toggleInput.addEventListener("click", switchStyles); @@ -12,4 +12,4 @@ function switchStyles() { $toggle.classList.toggle("enabled"); $html.classList.toggle("dark-mode"); -} \ No newline at end of file +} diff --git a/index.html b/index.html index 22659030..c190b3fa 100644 --- a/index.html +++ b/index.html @@ -1,168 +1,369 @@ + + + + + + Blog with API + + + + + + + + + - - - - - - Blog with API - - - - - - - - + +
+ +
+

Blog

- - -
- - -
-

Blog

- - - -
+ + +
+ - -
-
- Hungry cat 6 -

Hungry cat 6

- -
-
+ +
+
+ Hungry cat 6 +

Hungry cat 6

+ +
+
+ - -
-
-
-
-
-
-

Hungry cat 6

+ +
+
+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
-
-

Whatever

-
-
- -
-
-
-
-
-
-

Hungry cat 6

+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
-
-

Whatever

+
+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
-
- -
-
-
-
-
-

Hungry cat 6

+
+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
-
-

Whatever

-
-
- -
-
-
-
-
-
-
-
-

Hungry cat 6

+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
-
-

Whatever

+
+
+
+
+
+

Hungry cat 6

+
+
+

Whatever

+
+
+ +
-
- -
-
-
-
-
-

Hungry cat 6

-
-
-

Whatever

-
-
- -
+
+ + + +
+
+
+
+

Hungry cat

-
-
-
-
-

Hungry cat 6

+
+ +
+ + +