├── .github └── FUNDING.yml ├── mail ├── .gitignore ├── style │ ├── blocks │ │ ├── _paragraph.scss │ │ ├── _date.scss │ │ ├── _helper.scss │ │ ├── _select.scss │ │ ├── _button.scss │ │ ├── _pill.scss │ │ ├── _profile-head.scss │ │ ├── _dot.scss │ │ ├── _accounts.scss │ │ ├── _base.scss │ │ ├── _preview.scss │ │ ├── _menu.scss │ │ ├── _message.scss │ │ ├── _app.scss │ │ ├── _new.scss │ │ └── _top.scss │ └── style.scss ├── README.md ├── package.json ├── .stylelintrc ├── index.js └── index.html └── README.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [BeardedBear] 2 | -------------------------------------------------------------------------------- /mail/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .cache 4 | -------------------------------------------------------------------------------- /mail/style/blocks/_paragraph.scss: -------------------------------------------------------------------------------- 1 | .paragraph { 2 | margin: 20px 0; 3 | } 4 | -------------------------------------------------------------------------------- /mail/style/blocks/_date.scss: -------------------------------------------------------------------------------- 1 | .date { 2 | color: rgba($grey-color, .8); 3 | font-size: .8rem; 4 | font-style: italic; 5 | font-weight: normal; 6 | } 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pens 2 | 3 | This repository is a collection of my UX/UI/Integration playground. Live versions is all available in my CodePen : https://codepen.io/BeardedBear. 4 | 5 | No backend limitations, just functionality wishes. 6 | -------------------------------------------------------------------------------- /mail/style/blocks/_helper.scss: -------------------------------------------------------------------------------- 1 | .scrollable { 2 | position: relative; 3 | 4 | &__target { 5 | bottom: 0; 6 | left: 0; 7 | overflow: auto; 8 | position: absolute; 9 | right: 0; 10 | top: 0; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /mail/README.md: -------------------------------------------------------------------------------- 1 | # Mail 2 | 3 | ## Installation 4 | 5 | `npm install` 6 | 7 | ## Dev 8 | 9 | `npm start` 10 | 11 | ## Build 12 | 13 | `npm run build` 14 | 15 | Live demo : https://codepen.io/BeardedBear/pen/GRKZYvZ 16 | 17 | ## Screenshots 18 | 19 | White theme 20 | 21 | ![](https://i.imgur.com/jrIOD7a.png) 22 | 23 | Dark theme 24 | 25 | ![](https://i.imgur.com/XH9lJrw.png) 26 | -------------------------------------------------------------------------------- /mail/style/blocks/_select.scss: -------------------------------------------------------------------------------- 1 | .select { 2 | border: 1px solid $border-color; 3 | border-radius: 5px; 4 | display: inline-block; 5 | line-height: 1; 6 | padding-right: 5px; 7 | position: relative; 8 | 9 | &__item { 10 | all: unset; 11 | padding: 5px 10px; 12 | } 13 | 14 | &__arrow { 15 | position: relative; 16 | right: 5px; 17 | top: -2px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /mail/style/blocks/_button.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | background: rgb(235, 235, 235); 3 | border: 0; 4 | border-radius: 100px; 5 | cursor: pointer; 6 | font-size: .8rem; 7 | font-weight: bold; 8 | line-height: 1; 9 | outline: 0; 10 | padding: 10px 25px; 11 | text-transform: uppercase; 12 | 13 | &--primary { 14 | background: $primary-color; 15 | color: var(--background-color); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /mail/style/blocks/_pill.scss: -------------------------------------------------------------------------------- 1 | .pill { 2 | align-items: center; 3 | background: rgba($grey-color, .1); 4 | border-radius: 30px; 5 | color: var(--font-color); 6 | display: flex; 7 | font-size: .7rem; 8 | font-weight: bold; 9 | height: 20px; 10 | line-height: 1; 11 | padding: 1px 10px 0; 12 | 13 | &--solid { 14 | background: #fff; 15 | box-shadow: 0px 5px 10px rgba(0, 0, 0, .4); 16 | color: black; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /mail/style/blocks/_profile-head.scss: -------------------------------------------------------------------------------- 1 | .profile-head { 2 | align-items: start; 3 | display: flex; 4 | justify-content: space-between; 5 | 6 | &__id { 7 | align-items: center; 8 | display: flex; 9 | } 10 | 11 | &__name { 12 | font-weight: bold; 13 | } 14 | 15 | &__mail { 16 | color: rgba($grey-color, .8); 17 | font-size: .8rem; 18 | } 19 | 20 | &__avatar { 21 | $size: 30px; 22 | border-radius: $size; 23 | display: inline-block; 24 | margin-right: 10px; 25 | width: $size; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /mail/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mail", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "./node_modules/.bin/parcel index.html", 8 | "build": "rimraf dist/ && ./node_modules/.bin/parcel build index.html" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "parcel-bundler": "^1.12.3", 14 | "rimraf": "^3.0.0", 15 | "sass": "^1.22.9", 16 | "stylelint": "^10.1.0", 17 | "stylelint-config-standard": "^18.3.0", 18 | "stylelint-order": "^3.0.1", 19 | "stylelint-scss": "^3.9.4" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /mail/style/blocks/_dot.scss: -------------------------------------------------------------------------------- 1 | .dot { 2 | $size: 8px; 3 | border-radius: $size; 4 | display: inline-block; 5 | height: $size; 6 | margin-right: 3px; 7 | position: relative; 8 | top: -1px; 9 | width: $size * 2; 10 | 11 | &--red { 12 | background: rgb(255, 103, 103); 13 | } 14 | &--blue { 15 | background: rgb(103, 220, 255); 16 | } 17 | &--green { 18 | background: rgb(84, 221, 137); 19 | } 20 | &--yellow { 21 | background: rgb(255, 207, 103); 22 | } 23 | &--purple { 24 | background: rgb(149, 103, 255); 25 | } 26 | &--pink { 27 | background: rgb(252, 132, 236); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /mail/style/style.scss: -------------------------------------------------------------------------------- 1 | $app-radius: 7px; 2 | $primary-color: #ff6a88; 3 | $grey-color: #808080; 4 | $border-color: rgba($grey-color, .2); 5 | :root { 6 | --background-color: #fff; 7 | --font-color: rgb(68, 68, 68); 8 | } 9 | 10 | @import "./blocks/accounts"; 11 | @import "./blocks/app"; 12 | @import "./blocks/base"; 13 | @import "./blocks/button"; 14 | @import "./blocks/date"; 15 | @import "./blocks/dot"; 16 | @import "./blocks/helper"; 17 | @import "./blocks/message"; 18 | @import "./blocks/menu"; 19 | @import "./blocks/new"; 20 | @import "./blocks/paragraph"; 21 | @import "./blocks/pill"; 22 | @import "./blocks/preview"; 23 | @import "./blocks/profile-head"; 24 | @import "./blocks/select"; 25 | @import "./blocks/top"; 26 | -------------------------------------------------------------------------------- /mail/style/blocks/_accounts.scss: -------------------------------------------------------------------------------- 1 | .accounts { 2 | background: #463350; 3 | border-bottom-left-radius: $app-radius; 4 | padding: 10px; 5 | 6 | &__item { 7 | border-radius: 5px; 8 | cursor: pointer; 9 | margin-bottom: 10px; 10 | padding: 10px; 11 | position: relative; 12 | 13 | &:hover { 14 | background: rgba($primary-color, .4); 15 | } 16 | 17 | &--active { 18 | background: $primary-color; 19 | 20 | &:hover { 21 | background: $primary-color; 22 | } 23 | } 24 | } 25 | 26 | &__pill { 27 | position: absolute; 28 | right: 2px; 29 | top: 5px; 30 | } 31 | 32 | &__avatar { 33 | $size: 40px; 34 | border-radius: $size; 35 | width: $size; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /mail/style/blocks/_base.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background-image: linear-gradient(90deg, #ff9a8b 0%, $primary-color 55%, #ff99ac 100%); 3 | height: 100vh; 4 | overflow: hidden; 5 | padding: 2.5vw; 6 | } 7 | 8 | *, 9 | ::before, 10 | ::after { 11 | box-sizing: border-box; 12 | scrollbar-color: rgba(0, 0, 0, .2) rgba(0, 0, 0, 0); 13 | scrollbar-width: thin; 14 | } 15 | 16 | ::-webkit-scrollbar { 17 | width: 10px; 18 | } 19 | 20 | ::-webkit-scrollbar-corner { 21 | background: transparent; 22 | } 23 | 24 | ::-webkit-scrollbar-thumb { 25 | background-clip: content-box; 26 | background-color: rgba(120, 120, 120, 0); 27 | border: 2px solid transparent; 28 | border-radius: 20px; 29 | } 30 | 31 | input, 32 | textarea, 33 | button { 34 | color: rgb(68, 68, 68); 35 | font-family: "Nunito", sans-serif; 36 | font-size: 1rem; 37 | line-height: 1.4; 38 | } 39 | -------------------------------------------------------------------------------- /mail/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-recommended", 3 | "plugins": [ 4 | "stylelint-scss", 5 | "stylelint-order" 6 | ], 7 | "ignoreFiles": ["./public/"], 8 | "rules": { 9 | "at-rule-no-unknown": null, 10 | "color-hex-case": "lower", 11 | "declaration-block-no-redundant-longhand-properties": null, 12 | "declaration-block-no-shorthand-property-overrides": null, 13 | "function-name-case": "lower", 14 | "indentation": 2, 15 | "max-empty-lines": 1, 16 | "max-line-length": 120, 17 | "number-leading-zero": "never", 18 | "order/order": [ 19 | "custom-properties", 20 | "declarations" 21 | ], 22 | "order/properties-alphabetical-order": true, 23 | "property-case": "lower", 24 | "scss/at-rule-no-unknown": true, 25 | "scss/selector-no-redundant-nesting-selector": true, 26 | "string-quotes": "double" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /mail/index.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", () => { 2 | const cancelBonuses = document.querySelector(".app-cancel-bonuses"); 3 | const app = document.querySelector(".app"); 4 | 5 | const toggleBtn = document.querySelectorAll(".new-mail__toggle"); 6 | toggleBtn.forEach(element => { 7 | element.addEventListener("click", () => { 8 | document.querySelector(".new-mail").classList.toggle("active"); 9 | document.querySelector(".new__button").classList.toggle("active"); 10 | }); 11 | }); 12 | 13 | cancelBonuses.addEventListener("click", () => { 14 | const classes = ["weird-rotate", "bonus-zoom", "bonus-exit"]; 15 | app.classList.remove(...classes); 16 | byeCancelButton(); 17 | }); 18 | 19 | function byeCancelButton() { 20 | cancelBonuses.classList.toggle("app-cancel-bonuses--active"); 21 | } 22 | 23 | function toggleClassToApp(trigger, className, cancellable) { 24 | let bonus = document.querySelector(trigger); 25 | bonus.addEventListener("click", () => { 26 | app.classList.toggle(className); 27 | if (cancellable) byeCancelButton(); 28 | }); 29 | } 30 | 31 | toggleClassToApp(".bonus-weird-rotate", "weird-rotate", true); 32 | toggleClassToApp(".bonus-dark-mode", "dark-mode", false); 33 | toggleClassToApp(".bonus-zoom", "bonus-zoom", true); 34 | toggleClassToApp(".bonus-exit", "bonus-exit", true); 35 | toggleClassToApp(".bonus-why-so-serious", "why-so-serious", false); 36 | toggleClassToApp(".bonus-russia", "bonus-russia", false); 37 | }); 38 | -------------------------------------------------------------------------------- /mail/style/blocks/_preview.scss: -------------------------------------------------------------------------------- 1 | .preview { 2 | display: grid; 3 | grid-template-rows: auto 1fr auto; 4 | 5 | &:hover { 6 | ::-webkit-scrollbar-thumb { 7 | background-color: rgba(120, 120, 120, .3); 8 | } 9 | } 10 | 11 | @media (max-width: 1020px) { 12 | border-top: 1px solid $border-color; 13 | } 14 | 15 | &__title { 16 | font-size: 1.6rem; 17 | font-weight: bold; 18 | } 19 | 20 | &-top { 21 | align-items: center; 22 | border-bottom: 1px solid $border-color; 23 | display: flex; 24 | justify-content: space-between; 25 | padding: 10px 20px; 26 | 27 | &__icon { 28 | color: rgba($grey-color, .5); 29 | cursor: pointer; 30 | padding: 5px; 31 | 32 | &:hover { 33 | color: $grey-color; 34 | } 35 | } 36 | } 37 | 38 | &-content { 39 | padding: 20px; 40 | } 41 | 42 | &-respond { 43 | background: var(--background-color); 44 | border: 1px solid $border-color; 45 | border-radius: 5px; 46 | box-shadow: 0px 11px 20px 0px rgba(0, 0, 0, .1); 47 | margin: 0 auto; 48 | margin-bottom: 20px; 49 | max-width: 600px; 50 | 51 | &__who { 52 | font-weight: bold; 53 | } 54 | 55 | &__who-mail { 56 | color: rgb(131, 131, 131); 57 | font-size: .8rem; 58 | } 59 | &__head { 60 | border-bottom: 1px solid $border-color; 61 | padding: 10px 20px; 62 | } 63 | 64 | &__content { 65 | padding: 20px 40px; 66 | } 67 | } 68 | 69 | &-foot { 70 | border-top: 1px solid $border-color; 71 | display: flex; 72 | justify-content: flex-end; 73 | padding: 20px; 74 | 75 | &__button { 76 | margin-left: 10px; 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /mail/style/blocks/_menu.scss: -------------------------------------------------------------------------------- 1 | .menu { 2 | border-right: 1px solid $border-color; 3 | display: grid; 4 | grid-template-rows: auto 1fr auto; 5 | padding: 10px 20px 20px; 6 | position: relative; 7 | z-index: 2; 8 | 9 | @media (max-width: 1300px) { 10 | padding: 10px; 11 | } 12 | 13 | &-user { 14 | border-bottom: 1px solid $border-color; 15 | margin-bottom: 20px; 16 | padding: 10px 10px 15px; 17 | 18 | @media (max-width: 1300px) { 19 | margin-bottom: 10px; 20 | padding: 10px 0 15px; 21 | 22 | .profile-head__name, 23 | .profile-head__mail { 24 | display: none; 25 | } 26 | } 27 | } 28 | 29 | &-tags { 30 | font-size: .9rem; 31 | font-weight: bold; 32 | padding: 20px 0 0; 33 | 34 | @media (max-height: 740px) { 35 | display: none; 36 | } 37 | 38 | &__label { 39 | @media (max-width: 1300px) { 40 | display: none; 41 | } 42 | } 43 | 44 | &__item { 45 | border-radius: 50px; 46 | color: rgba($grey-color, .8); 47 | cursor: pointer; 48 | margin-bottom: 2px; 49 | padding: 2px 10px; 50 | 51 | &:hover { 52 | background: rgba($grey-color, .1); 53 | } 54 | 55 | @media (max-width: 1300px) { 56 | text-align: center; 57 | } 58 | } 59 | } 60 | 61 | &-main { 62 | border-bottom: 1px solid $border-color; 63 | 64 | &__pill { 65 | @media (max-width: 1300px) { 66 | display: none !important; 67 | } 68 | } 69 | } 70 | 71 | &__icon { 72 | color: rgba($grey-color, .4); 73 | margin-right: 10px; 74 | 75 | @media (max-width: 1300px) { 76 | margin-right: 0; 77 | } 78 | } 79 | 80 | &__item { 81 | align-items: center; 82 | border-radius: 50px; 83 | cursor: pointer; 84 | display: flex; 85 | justify-content: space-between; 86 | margin-bottom: 10px; 87 | padding: 15px 30px; 88 | transition: background ease .15s; 89 | 90 | @media (max-width: 1300px) { 91 | display: block; 92 | font-size: 1.5rem; 93 | margin-bottom: 5px; 94 | padding: 5px 10px 7px; 95 | text-align: center; 96 | } 97 | 98 | &:hover { 99 | background: rgba($grey-color, .1); 100 | } 101 | 102 | &.active { 103 | background: $primary-color; 104 | color: #fff; 105 | 106 | .menu__icon { 107 | color: rgba(#fff, .8); 108 | } 109 | } 110 | } 111 | 112 | &__label { 113 | font-weight: bold; 114 | 115 | @media (max-width: 1300px) { 116 | display: none; 117 | } 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /mail/style/blocks/_message.scss: -------------------------------------------------------------------------------- 1 | .message-list { 2 | border-right: 1px solid $border-color; 3 | 4 | > .scrollable__target { 5 | padding: 15px; 6 | padding-right: 5px; 7 | } 8 | 9 | &:hover { 10 | ::-webkit-scrollbar-thumb { 11 | background-color: rgba(120, 120, 120, .2); 12 | } 13 | } 14 | } 15 | 16 | .message { 17 | background: rgba($grey-color, .08); 18 | border: 1px solid rgba($grey-color, .2); 19 | border-bottom: 0; 20 | color: rgba($grey-color, .9); 21 | cursor: pointer; 22 | display: grid; 23 | grid-template-columns: auto 1fr; 24 | position: relative; 25 | 26 | &:first-of-type { 27 | border-radius: 5px 5px 0 0; 28 | } 29 | &:last-of-type { 30 | border-bottom: 1px solid rgba($grey-color, .2); 31 | border-radius: 0 0 5px 5px; 32 | } 33 | 34 | &--new { 35 | background: var(--background-color); 36 | color: var(--font-color); 37 | } 38 | 39 | &--active { 40 | &::before { 41 | $offset: 3px; 42 | background: $primary-color; 43 | border-radius: 5px; 44 | bottom: $offset; 45 | content: ""; 46 | left: $offset; 47 | position: absolute; 48 | top: $offset; 49 | width: 4px; 50 | z-index: 1; 51 | } 52 | } 53 | 54 | &__content { 55 | padding: 15px 15px 15px 0; 56 | 57 | @media (max-width: 1020px) { 58 | padding: 10px 15px 10px 0; 59 | } 60 | } 61 | 62 | &__exp { 63 | color: rgba($grey-color, .8); 64 | display: flex; 65 | font-size: .8rem; 66 | font-style: italic; 67 | font-weight: bold; 68 | justify-content: space-between; 69 | } 70 | 71 | &__expr { 72 | font-size: .9rem; 73 | font-style: italic; 74 | max-width: 300px; 75 | overflow: hidden; 76 | text-overflow: ellipsis; 77 | white-space: nowrap; 78 | 79 | @media (max-width: 1020px) { 80 | max-width: 1000px; 81 | } 82 | } 83 | 84 | &__title { 85 | font-weight: bold; 86 | } 87 | 88 | &__actions { 89 | align-content: space-between; 90 | display: grid; 91 | grid-auto-flow: row; 92 | grid-gap: 5px; 93 | padding: 15px; 94 | text-align: center; 95 | transform: translateX(-10px); 96 | transition: transform ease .2s; 97 | visibility: hidden; 98 | } 99 | 100 | &__icon { 101 | color: rgba($grey-color, .5); 102 | font-size: .9rem; 103 | 104 | &:hover { 105 | color: var(--font-color); 106 | } 107 | } 108 | 109 | &:hover { 110 | .message__actions { 111 | transform: translateX(0); 112 | visibility: visible; 113 | } 114 | } 115 | 116 | &-tags { 117 | bottom: 2px; 118 | line-height: 1; 119 | position: absolute; 120 | right: 2px; 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /mail/style/blocks/_app.scss: -------------------------------------------------------------------------------- 1 | .app { 2 | background: var(--background-color); 3 | border-radius: $app-radius; 4 | box-shadow: 0px 11px 20px 0px rgba(0, 0, 0, .2); 5 | color: var(--font-color); 6 | display: grid; 7 | font-family: "Nunito", sans-serif; 8 | grid-template-rows: auto 1fr; 9 | height: 100%; 10 | line-height: 1.5; 11 | min-width: 780px; 12 | overflow: hidden; 13 | position: relative; 14 | 15 | &.bonus-russia { 16 | background: linear-gradient( 17 | 150deg, 18 | rgba(233, 233, 233, 1) 0%, 19 | rgba(233, 233, 233, 1) 33%, 20 | rgba(17, 39, 148, 1) 33%, 21 | rgba(17, 39, 148, 1) 66%, 22 | rgba(197, 27, 14, 1) 66%, 23 | rgba(197, 27, 14, 1) 100% 24 | ); 25 | 26 | * { 27 | cursor: url("https://www.larousse.fr/encyclopedie/data/vignettes/1200048-Vladimir_Poutine.jpg") 0 0, auto !important; 28 | } 29 | } 30 | 31 | &.weird-rotate { 32 | animation: weird-rotate 2s linear infinite alternate; 33 | @keyframes weird-rotate { 34 | from { 35 | transform: scale(.3) skew(0deg, 1080deg); 36 | } 37 | to { 38 | transform: scale(1) skew(360deg, 0deg); 39 | } 40 | } 41 | } 42 | 43 | &.dark-mode { 44 | --background-color: #28212b; 45 | --font-color: rgb(230, 230, 230); 46 | } 47 | 48 | &.why-so-serious { 49 | --background-color: #751e9b; 50 | --font-color: rgb(64, 255, 38); 51 | font-family: cursive; 52 | font-size: 1.6em; 53 | } 54 | 55 | &.bonus-exit { 56 | margin-top: 50%; 57 | transform: scale(0) translateY(-200%) rotate(500deg); 58 | transition: all, ease 1s; 59 | } 60 | 61 | &.bonus-zoom { 62 | transform: scale(3); 63 | transition: transform, ease 1s; 64 | } 65 | 66 | &__content { 67 | display: grid; 68 | grid-template-columns: auto minmax(300px, auto) 1fr; 69 | 70 | @media (max-width: 1300px) { 71 | grid-template-columns: auto 80px 1fr; 72 | } 73 | } 74 | 75 | &-info { 76 | background: rgba(197, 65, 91, 1); 77 | border-radius: 0 50px 50px 0; 78 | color: var(--background-color); 79 | font-family: "Nunito", sans-serif; 80 | font-size: .9rem; 81 | font-weight: bold; 82 | left: 0; 83 | padding: 5px 10px; 84 | position: absolute; 85 | top: 0; 86 | z-index: 1; 87 | 88 | a { 89 | color: var(--background-color); 90 | } 91 | 92 | &--right { 93 | border-radius: 50px 0 0 50px; 94 | cursor: pointer; 95 | left: unset; 96 | right: 0; 97 | } 98 | } 99 | 100 | &-cancel-bonuses { 101 | background: $primary-color; 102 | border: 0; 103 | border-radius: 200px; 104 | color: #fff; 105 | cursor: pointer; 106 | font-size: 2rem; 107 | left: 50%; 108 | outline: 0; 109 | padding: 10px 50px; 110 | position: fixed; 111 | top: 50%; 112 | transform: translate(-50%, -50%); 113 | visibility: hidden; 114 | z-index: 999999; 115 | 116 | &--active { 117 | visibility: visible; 118 | } 119 | } 120 | } 121 | 122 | .mails { 123 | display: grid; 124 | grid-template-columns: minmax(400px, auto) 1fr; 125 | 126 | @media (max-width: 1020px) { 127 | grid-template-columns: 1fr; 128 | grid-template-rows: 1fr 2fr; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /mail/style/blocks/_new.scss: -------------------------------------------------------------------------------- 1 | .new { 2 | @media (max-width: 1300px) { 3 | text-align: center; 4 | } 5 | &__button { 6 | $size: 50px; 7 | background: $primary-color; 8 | border: 0; 9 | border-radius: $size; 10 | color: var(--background-color); 11 | cursor: pointer; 12 | font-size: 1.6rem; 13 | height: $size; 14 | outline: 0; 15 | transition: transform ease .2s; 16 | width: $size; 17 | 18 | &:hover { 19 | transform: scale(1.1); 20 | } 21 | 22 | &.active { 23 | transform: scale(0); 24 | } 25 | } 26 | 27 | &-mail { 28 | $offset: 20px; 29 | background: var(--background-color); 30 | border: 1px solid $border-color; 31 | border-radius: $app-radius; 32 | bottom: $offset; 33 | box-shadow: 0px 11px 20px 0px rgba(0, 0, 0, 0); 34 | left: $offset; 35 | opacity: 0; 36 | position: absolute; 37 | transform: scale(0); 38 | transform-origin: bottom left; 39 | transition-duration: .3s; 40 | transition-property: transform, visibility, opacity; 41 | transition-timing-function: ease-in-out; 42 | visibility: hidden; 43 | width: 600px; 44 | z-index: 99; 45 | 46 | &__close { 47 | cursor: pointer; 48 | padding: 5px; 49 | } 50 | 51 | &.active { 52 | box-shadow: 0px 11px 20px 0px rgba(0, 0, 0, .2); 53 | opacity: 1; 54 | transform: scale(1); 55 | visibility: visible; 56 | } 57 | 58 | &__top { 59 | align-items: center; 60 | border-bottom: 1px solid $border-color; 61 | display: flex; 62 | font-weight: bold; 63 | justify-content: space-between; 64 | padding: 10px 10px 10px 40px; 65 | } 66 | 67 | &-exp { 68 | background: rgba($grey-color, .1); 69 | border-bottom: 1px solid $border-color; 70 | color: rgb(99, 99, 99); 71 | font-weight: bold; 72 | padding: 10px 40px; 73 | 74 | &__item { 75 | align-items: center; 76 | display: grid; 77 | grid-template-columns: 70px 1fr; 78 | margin-bottom: 10px; 79 | } 80 | 81 | &__input { 82 | background: rgba(0, 0, 0, 0); 83 | border: 0; 84 | border-bottom: 1px solid $border-color; 85 | font-weight: bold; 86 | outline: 0; 87 | padding: 5px; 88 | width: 100%; 89 | 90 | &::placeholder { 91 | color: rgb(156, 156, 156); 92 | font-style: italic; 93 | font-weight: normal; 94 | } 95 | } 96 | 97 | &__label { 98 | font-size: .8rem; 99 | } 100 | } 101 | 102 | &-foot { 103 | align-items: center; 104 | display: flex; 105 | justify-content: space-between; 106 | padding: 20px 40px; 107 | 108 | &__icon { 109 | border-radius: 5px; 110 | color: rgb(177, 177, 177); 111 | cursor: pointer; 112 | padding: 10px; 113 | 114 | &:hover { 115 | background: rgba(#000, .07); 116 | color: rgb(109, 109, 109); 117 | } 118 | } 119 | } 120 | 121 | &__message { 122 | background: var(--background-color); 123 | border: 1px solid transparent; 124 | border-radius: 5px; 125 | color: var(--font-color); 126 | max-height: 50vh; 127 | min-height: 30vh; 128 | outline: 0; 129 | padding: 20px 40px; 130 | resize: vertical; 131 | width: 100%; 132 | } 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /mail/style/blocks/_top.scss: -------------------------------------------------------------------------------- 1 | .top { 2 | align-items: center; 3 | border-bottom: 1px solid rgba($grey-color, .2); 4 | border-radius: $app-radius $app-radius 0 0; 5 | color: rgb(153, 153, 153); 6 | display: flex; 7 | font-size: .8rem; 8 | font-weight: bold; 9 | justify-content: space-between; 10 | position: relative; 11 | z-index: 999; 12 | 13 | &-search { 14 | background: rgba($grey-color, .1); 15 | border-radius: 50px; 16 | padding: 2px 10px; 17 | } 18 | 19 | &-menu { 20 | display: grid; 21 | grid-auto-flow: column; 22 | line-height: 1; 23 | padding-left: 15px; 24 | 25 | &-sub { 26 | background: var(--background-color); 27 | border: 1px solid $border-color; 28 | border-radius: 0 5px 5px 5px; 29 | box-shadow: 0px 11px 20px 0px rgba(0, 0, 0, .2); 30 | left: 0; 31 | padding: 10px 0; 32 | position: absolute; 33 | top: calc(100% - 7px); 34 | transition: top ease .2s; 35 | visibility: hidden; 36 | 37 | &__item { 38 | cursor: pointer; 39 | padding: 7px 15px; 40 | white-space: nowrap; 41 | 42 | &:first-of-type { 43 | border-radius: 0 5px 0 0; 44 | } 45 | 46 | &:last-of-type { 47 | border-radius: 0 0 5px 5px; 48 | } 49 | 50 | &:hover { 51 | color: var(--font-color); 52 | } 53 | } 54 | 55 | &__link { 56 | color: rgba($grey-color, .8); 57 | text-decoration: none; 58 | 59 | &:hover { 60 | color: var(--font-color); 61 | } 62 | } 63 | 64 | &__separator { 65 | border-bottom: 1px solid $border-color; 66 | margin: 5px 0; 67 | } 68 | } 69 | 70 | &__label { 71 | border: 1px solid rgba(0, 0, 0, 0); 72 | border-radius: 5px; 73 | cursor: pointer; 74 | padding: 5px 15px; 75 | position: relative; 76 | z-index: 1; 77 | 78 | &:hover { 79 | background: var(--background-color); 80 | border: 1px solid $border-color; 81 | border-bottom: 1px solid var(--background-color); 82 | border-radius: 5px 5px 0 0; 83 | } 84 | } 85 | 86 | &__item { 87 | position: relative; 88 | 89 | &:hover { 90 | > .top-menu-sub { 91 | top: calc(100% - 1px); 92 | visibility: visible; 93 | } 94 | > .top-menu__label { 95 | border: 1px solid $border-color; 96 | border-bottom: 1px solid var(--background-color); 97 | border-radius: 5px 5px 0 0; 98 | } 99 | } 100 | } 101 | } 102 | 103 | &-action { 104 | display: flex; 105 | 106 | &__item { 107 | cursor: pointer; 108 | font-size: 1rem; 109 | padding: 15px; 110 | 111 | &:hover { 112 | background: rgba($grey-color, .1); 113 | color: var(--font-color); 114 | } 115 | 116 | &:last-of-type { 117 | border-radius: 0 $app-radius 0 0; 118 | 119 | &:hover { 120 | background: $primary-color; 121 | color: var(--background-color); 122 | } 123 | } 124 | } 125 | } 126 | } 127 | 128 | .input { 129 | background: transparent; 130 | border: 0; 131 | font-weight: bold; 132 | min-width: 350px; 133 | outline: 0; 134 | padding: 2px 5px; 135 | 136 | &::placeholder { 137 | color: rgb(163, 163, 163); 138 | font-style: italic; 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /mail/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BeardedBear | Mail 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
Source code available here 19 |
20 |
Switch Light/Dark
21 |
22 |
23 |
24 |
25 |
File
26 |
    27 |
  • New mail
    • 28 |
  • Refresh mails
    • 29 |
  • 30 |
  • Export mails to MP3
    • 31 |
  • Export mails to BMP
    • 32 |
  • 33 |
  • Exit
    • 34 |
35 |
36 |
37 |
Edit
38 |
    39 |
  • Undo
    • 40 |
  • Redo
    • 41 |
  • 42 |
  • Settings
    • 43 |
44 |
45 |
46 |
Bonus
47 |
    48 |
  • Infinite weird rotate of the app
    • 49 |
  • Please zoom
    • 50 |
  • Why so serious ?
    • 51 |
  • Please more russia
    • 52 |
53 |
54 |
55 |
About
56 | 62 |
63 |
64 |
65 | 66 | 67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | 3 78 | 80 |
81 |
82 | 85 |
86 |
87 | 8 88 | 91 |
92 |
93 |
94 |
95 |
96 |
97 | 99 |
100 |
Jean-Claude
101 |
jeanclaude@gmail.com
102 |
103 |
104 |
105 | 106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 | 114 | Inbox 115 |
116 | 3 117 |
118 |
119 |
120 | 121 | Sent mail 122 |
123 | 78 124 |
125 |
126 |
127 | 128 | Drafts 129 |
130 | 2 131 |
132 |
133 |
134 | 135 | Spam 136 |
137 | 290 138 |
139 |
140 |
    141 |
  • 142 | 143 | Shopping 144 |
    • 145 |
  • 146 | 147 | Important 148 |
    • 149 |
  • 150 | 151 | Work 152 |
    • 153 |
  • 154 | 155 | Done 156 |
    • 157 |
  • 158 | 159 | To-Do 160 |
    • 161 |
  • 162 | 163 | Personal 164 |
    • 165 |
166 |
167 |
168 | 169 |
170 |
171 |
172 | Write a new mail from 173 |
174 | 178 | 179 |
180 |
181 | 182 |
183 |
184 |
185 |
To
186 | 187 |
188 |
189 |
Object
190 | 191 |
192 |
193 |
194 | 196 |
197 |
198 |
199 | 200 | 201 | 202 |
203 |
204 | 205 | 207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 | 218 |
219 |
220 | 221 | 222 | 223 |
224 |
225 |
226 |
Kanye West
227 |
Today, 15:14
228 |
229 |
230 | Please come back bro ! 231 |
232 |
233 | « Please, I need you to make my music fantastic! » 234 |
235 |
236 |
237 |
238 |
239 | 240 | 241 | 242 |
243 |
244 |
245 |
Phil Collins
246 |
Yesterday, 23:12
247 |
248 |
249 | Genesis... again ? 250 |
251 |
252 | « Hi Peter, are you interested in coming back to genesis? » 253 |
254 |
255 |
256 |
257 |
258 | 259 | 260 |
261 |
262 | 263 | 264 | 265 |
266 |
267 |
268 |
Tim Curry
269 |
Yesterday, 20:45
270 |
271 |
272 | I lost my glasses... 273 |
274 |
275 | « Hi, I lost my glasses in your living room, could you bring them back to me? » 276 |
277 |
278 |
279 |
280 |
281 | 282 | 283 | 284 |
285 |
286 |
287 |
Papy Bear
288 |
Yesterday, 12:01
289 |
290 |
291 | Am I on the Internet? 292 |
293 |
294 | « Oh, my God, I was scared! » 295 |
296 |
297 |
298 |
299 |
300 | 301 | 302 | 303 |
304 |
305 |
306 |
Josie Smith
307 |
Yesterday, 02:59
308 |
309 |
310 | Have you heard of our lord Raptor Jesus? 311 |
312 |
313 | « Do you know Raptor Jesus? He is the savior of us all. » 314 |
315 |
316 |
317 |
318 |
319 | 320 | 321 |
322 |
323 | 324 | 325 | 326 |
327 |
328 |
329 |
Vador
330 |
Monday, 23:12
331 |
332 |
333 | You know... The force... 334 |
335 |
336 | « HHhhhHHhhhhH Jean hhhhrrhrhhhr Claude hhhHhhhHH » 337 |
338 |
339 |
340 |
341 |
342 | 343 | 344 | 345 |
346 |
347 |
348 |
John Wayne
349 |
Monday, 17:08
350 |
351 |
352 | STOP saving people !!! 353 |
354 |
355 | « It's MY job, OKAY ?! » 356 |
357 |
358 |
359 |
360 |
361 | 362 |
363 |
364 | 365 | 366 | 367 |
368 |
369 |
370 |
Discount4Life
371 |
Monday, 11:28
372 |
373 |
374 | EXCLUSIVE DISCOUNT JUST FOR YOU 375 |
376 |
377 | « Unbelievable! Save 89% on the green sock catalogue! » 378 |
379 |
380 |
381 |
382 |
383 | 384 | 385 | 386 |
387 |
388 |
389 |
Dewey
390 |
Monday, 06:35
391 |
392 |
393 | Poupi Poupi Poupi Pou. 394 |
395 |
396 | « Poupi Poupi Poupi Pou. Poupi Poupi Poupi Pou. » 397 |
398 |
399 |
400 |
401 |
402 | 403 | 404 | 405 |
406 |
407 |
408 |
Vlad Poutipout
409 |
Monday, 04:52
410 |
411 |
412 | Vodka 413 |
414 |
415 | « Я люблю водку настолько, что пукнул алкоголиком. » 416 |
417 |
418 |
419 |
420 |
421 | 422 | 423 | 424 |
425 |
426 |
427 |
Captain Krabs
428 |
Monday, 02:16
429 |
430 |
431 | Need for crab meat 432 |
433 |
434 | « Hi, I need some coconut crab meat, quick. » 435 |
436 |
437 |
438 | 439 |
440 |
441 |
442 |
443 | 444 |
Am I on the Internet?
445 |
446 | 447 | 448 | 449 |
450 |
451 |
452 |
453 |
454 |
455 |
456 |
457 | 460 |
461 |
Papy Bear
462 |
itsmepapy@gmail.com
463 |
464 |
465 |
Yesterday, 11:17
466 |
467 |
468 |
469 |

I plugged in the computer, and I'm not sure I plugged 470 | in the internets properly. Do you think you could come and check me out? There 471 | are little beeps in the black box in the living room, maybe I broke the 472 | internet, I wouldn't want to do anything stupid!

473 |

Grandma tells me I'm an idiot and if I can see my messages it's 474 | because it's okay, but you know, Grandma's not good with these things. And then 475 | I'm suspicious, maybe the aliens aren't watching my internets? They would be 476 | able to fit into the small box in the living room, Jack told me last week, when 477 | we were drinking wine on the terrace... Do you think that's true?

478 |

Are you there?

479 |

Jean-Claude?

480 |

I call 911.

481 |
482 |
483 |
484 |
485 |
486 |
487 | 490 |
491 |
Jean-Claude
492 |
jeanclaude@gmail.com
493 |
494 |
495 |
Yesterday, 11:27
496 |
497 |
498 |
499 |

Grandpa! Don't call 911!

500 |

Don't panic! they're e-mails, I only see them when they're 501 | sent, I don't see your messages live! I'm coming to help you.

502 |
503 |
504 |
505 |
506 |
507 |
508 | 511 |
512 |
Papy Bear
513 |
itsmepapy@gmail.com
514 |
515 |
516 |
Yesterday, 12:01
517 |
518 |
519 |
520 |

Oh, my God, I was scared!

521 |
522 |
523 |
524 |
525 |
526 | 527 | 528 |
529 |
530 |
531 |
532 |
533 | 534 | 535 | 536 | --------------------------------------------------------------------------------