├── .DS_Store ├── .firebaserc ├── .gitignore ├── .vscode ├── javascriptreact.json.code-snippets └── scss.code-snippets.json.code-snippets ├── README.md ├── components ├── .DS_Store ├── Avatar.js ├── Bar.js ├── Button.js ├── Calendar.js ├── Card.js ├── Center.js ├── Checkbox.js ├── Discount.js ├── Dropdown.js ├── Flexbox.js ├── Footer.js ├── Form.js ├── Gradient.js ├── Grid.js ├── Header.js ├── Icon.js ├── Image.js ├── Input.js ├── Layout.js ├── Line.js ├── List.js ├── List2.js ├── Loading.js ├── Media.js ├── Menu.js ├── Meta.js ├── Modal.js ├── Navigation.js ├── Notification.js ├── Overlay.js ├── Page.js ├── Player.js ├── Pricing.js ├── Search.js ├── Shadow.js ├── Sidebar.js ├── SignUp.js ├── SingleDiv.js ├── Social.js ├── Tab.js ├── Table.js ├── Tags.js ├── Template.js ├── Text.js ├── UpComing.js ├── ViewCode.js ├── course │ └── CourseItem.js └── temp.js ├── database.rules.json ├── firebase.json ├── lib └── copyToClipboard.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js ├── center.js ├── flexbox.js └── index.js ├── public ├── .DS_Store ├── favicon.ico ├── fonts │ ├── .DS_Store │ ├── SF-Mono-Light.otf │ └── SF-Mono-Regular.otf ├── images │ ├── .DS_Store │ ├── banner.png │ ├── brand-codingui.png │ ├── brand-evondev.png │ ├── dell.jpeg │ ├── electro │ │ ├── .DS_Store │ │ ├── apple-watch-1.png │ │ ├── express-icon-1.png │ │ ├── headphone-1.png │ │ ├── home-gadget-about-1.png │ │ ├── home-gadget-vr_small-1.png │ │ ├── icon-boxed.png │ │ ├── icon-card.png │ │ ├── icon-express.png │ │ ├── icon-percent.png │ │ ├── icon-policy.png │ │ ├── img-apple-watch-rtl.png │ │ ├── img-apple-watch.jpg │ │ ├── img-apple-watch.png │ │ ├── img-big-headphone-white.png │ │ ├── img-drone.png │ │ ├── img-game-white.png │ │ ├── img-headphone.jpg │ │ ├── img-mouse.jpg │ │ ├── img-sony-headphone.png │ │ ├── img-sony.jpg │ │ ├── img-sound.jpg │ │ ├── img-vr-glasses.jpg │ │ ├── img-xiaomi.jpg │ │ ├── img-zenbook.png │ │ ├── logo-black.png │ │ ├── logo2-1.png │ │ ├── logo22x.png │ │ ├── logo_01.png │ │ ├── logo_02.png │ │ ├── logo_03.png │ │ ├── logo_04.png │ │ ├── logo_05.png │ │ ├── logoblack2x.png │ │ ├── pattern_bg.png │ │ ├── sony_headphone.png │ │ └── zenbook.png │ ├── girl1.jpeg │ ├── girl2.jpeg │ ├── girl3.jpeg │ ├── header-img.jpg │ ├── html-css-course.jpg │ ├── html-css-psd-course.png │ ├── iu-logo.png │ ├── js-course.jpg │ ├── logo.png │ ├── me.jpeg │ ├── me.png │ ├── og-image.jpg │ ├── og-image.png │ ├── outer-space.png │ ├── poker-building.png │ ├── rachelizmarvel.png │ ├── rachelizmarvel2021.png │ ├── torii.png │ └── unicorn.png ├── js │ └── grid.js ├── reset.css ├── slick.css ├── util.css └── vercel.svg ├── server.js ├── styles ├── FilterStyles.js ├── FooterStyles.js ├── GlobalStyles.js ├── GridStyles.js ├── HeaderStyles.js ├── Theme.js ├── UIStyles.js └── sass │ └── main.scss ├── vendors └── fire.js └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/codingui/d13c9311fcf9c7e9414c845e1555938383319e49/.DS_Store -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "codingui-bdd21" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .history 2 | /node_modules 3 | .next -------------------------------------------------------------------------------- /.vscode/javascriptreact.json.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "New component": { 3 | "prefix": "new-component", 4 | "body": [ 5 | "const $1 = () => {", 6 | " ", 7 | " return (", 8 | " <>", 9 | "$0", 10 | " ", 18 | " ", 19 | " );", 20 | "};" 21 | ], 22 | "description": "New component" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.vscode/scss.code-snippets.json.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Each loop in SASS": { 3 | "prefix": "scss-each", 4 | "body": ["@each $1 in $2{$3}"], 5 | "description": "Each loop in SASS" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is codingui project development by [Evondev](https://evondev.com) 2 | -------------------------------------------------------------------------------- /components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/evondev/codingui/d13c9311fcf9c7e9414c845e1555938383319e49/components/.DS_Store -------------------------------------------------------------------------------- /components/Avatar.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import Template from "./Template"; 3 | 4 | export const AvatarDefault = () => { 5 | return ( 6 | 22 | ); 23 | }; 24 | export const AvatarDefault1 = () => { 25 | return ( 26 | 57 | ); 58 | }; 59 | export const AvatarDefault2 = () => { 60 | return ( 61 | 92 | ); 93 | }; 94 | export const AvatarDefault3 = () => { 95 | return ( 96 | 127 | ); 128 | }; 129 | 130 | export const AvatarDefault4 = () => { 131 | return ( 132 | 163 | ); 164 | }; 165 | 166 | export const AvatarDefault5 = () => { 167 | return ( 168 | 204 | ); 205 | }; 206 | -------------------------------------------------------------------------------- /components/Bar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Template from "./Template"; 3 | 4 | const ProgressBar = () => { 5 | return ( 6 | <> 7 | 28 | 29 | ); 30 | }; 31 | const CircleBar = () => { 32 | return ( 33 | <> 34 | 63 | 64 | ); 65 | }; 66 | 67 | export { ProgressBar, CircleBar }; 68 | -------------------------------------------------------------------------------- /components/Button.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Template from "./Template"; 3 | 4 | export const Button = function () { 5 | return ( 6 | 43 | ); 44 | }; 45 | export const Button2 = function () { 46 | return ( 47 | 84 | ); 85 | }; 86 | export const Button3 = function () { 87 | return ( 88 | 125 | ); 126 | }; 127 | export const Button4 = function () { 128 | return ( 129 | 166 | ); 167 | }; 168 | export const Button5 = function () { 169 | return ( 170 | 208 | ); 209 | }; 210 | export const Button6 = function () { 211 | return ( 212 | 250 | ); 251 | }; 252 | export const Button7 = function () { 253 | return ( 254 | 306 | ); 307 | }; 308 | export const Button8 = function () { 309 | return ( 310 | 339 | ); 340 | }; 341 | -------------------------------------------------------------------------------- /components/Calendar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Template from "./Template"; 3 | 4 | const Calendar = () => { 5 | return ( 6 | <> 7 | 163 | 164 | ); 165 | }; 166 | 167 | export { Calendar }; 168 | -------------------------------------------------------------------------------- /components/Card.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Template from "./Template"; 3 | 4 | const FlipCard = () => { 5 | return ( 6 | <> 7 | 60 | 61 | ); 62 | }; 63 | 64 | export { FlipCard }; 65 | -------------------------------------------------------------------------------- /components/Checkbox.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Template from "./Template"; 3 | 4 | const CustomCheckboxToggle = () => { 5 | return ( 6 | <> 7 | 49 | 50 | ); 51 | }; 52 | 53 | const CustomRadio = () => { 54 | return ( 55 | <> 56 | 85 | 86 | ); 87 | }; 88 | 89 | export { CustomCheckboxToggle, CustomRadio }; 90 | -------------------------------------------------------------------------------- /components/Discount.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Template from "./Template"; 3 | 4 | const DiscountUI = () => { 5 | return ( 6 | <> 7 | 30 | 31 | ); 32 | }; 33 | 34 | export { DiscountUI }; 35 | -------------------------------------------------------------------------------- /components/Dropdown.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useEffect } from "react"; 3 | import Template from "./Template"; 4 | 5 | const Dropdown = () => { 6 | return ( 7 | <> 8 | 110 | 111 | ); 112 | }; 113 | 114 | export { Dropdown }; 115 | -------------------------------------------------------------------------------- /components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FooterStyles } from "../styles/FooterStyles"; 3 | 4 | const Footer = () => { 5 | return ( 6 | 7 |
8 | Development by{" "} 9 | 14 | Evondev 15 | {" "} 16 | with ©  17 | {new Date().getFullYear()} 18 |
19 | 20 | ); 21 | }; 22 | 23 | export default Footer; 24 | -------------------------------------------------------------------------------- /components/Form.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Template from "./Template"; 3 | import { useEffect } from "react"; 4 | 5 | const SearchForm = () => { 6 | return ( 7 | <> 8 | 30 | 31 | ); 32 | }; 33 | 34 | const LoginForm = () => { 35 | useEffect(() => { 36 | window.addEventListener("load", function () { 37 | const loginForm = document.querySelector(".login-form"); 38 | const showPasswordIcon = 39 | loginForm && loginForm.querySelector(".show-password"); 40 | const inputPassword = 41 | loginForm && loginForm.querySelector(`input[type="password"`); 42 | showPasswordIcon?.addEventListener("click", function () { 43 | const inputPasswordType = inputPassword.getAttribute("type"); 44 | inputPasswordType === "password" 45 | ? inputPassword.setAttribute("type", "text") 46 | : inputPassword.setAttribute("type", "password"); 47 | }); 48 | }); 49 | }, []); 50 | return ( 51 | <> 52 | 133 | 134 | ); 135 | }; 136 | 137 | const ContactForm = () => { 138 | return ( 139 | <> 140 | 243 | 244 | ); 245 | }; 246 | 247 | const SubscribeForm = () => { 248 | return ( 249 | <> 250 | 301 | 302 | ); 303 | }; 304 | 305 | export { SearchForm, LoginForm, ContactForm, SubscribeForm }; 306 | -------------------------------------------------------------------------------- /components/Gradient.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import Template from "./Template"; 3 | 4 | const GradientDefault = ({ number = 1, dir = "to right", color1, color2 }) => { 5 | return ( 6 | 29 | ); 30 | }; 31 | 32 | export const Gradient1 = () => 33 | GradientDefault({ 34 | number: 1, 35 | color1: "f40076", 36 | color2: "df98fa", 37 | }); 38 | export const Gradient2 = () => 39 | GradientDefault({ 40 | number: 2, 41 | color1: "d6ff7f", 42 | color2: "00b3cc", 43 | }); 44 | export const Gradient3 = () => 45 | GradientDefault({ 46 | number: 3, 47 | color1: "cb5eee", 48 | color2: "4be1ec", 49 | }); 50 | export const Gradient4 = () => 51 | GradientDefault({ 52 | number: 4, 53 | color1: "0b63f6", 54 | color2: "003cc5", 55 | }); 56 | export const Gradient5 = () => 57 | GradientDefault({ 58 | number: 5, 59 | color1: "df98fa", 60 | color2: "9055ff", 61 | }); 62 | export const Gradient6 = () => 63 | GradientDefault({ 64 | number: 6, 65 | color1: "FFA70F", 66 | color2: "E33ED9", 67 | }); 68 | export const Gradient7 = () => 69 | GradientDefault({ 70 | number: 7, 71 | color1: "1ABCF4", 72 | color2: "5DEFB8", 73 | }); 74 | export const Gradient8 = () => 75 | GradientDefault({ 76 | number: 8, 77 | color1: "1BF67B", 78 | color2: "0D736E", 79 | }); 80 | export const Gradient9 = () => 81 | GradientDefault({ 82 | number: 9, 83 | color1: "D73350", 84 | color2: "FC6F69", 85 | }); 86 | export const Gradient10 = () => 87 | GradientDefault({ 88 | number: 10, 89 | color1: "A73EF5", 90 | color2: "FB53E1", 91 | }); 92 | export const Gradient11 = () => 93 | GradientDefault({ 94 | number: 11, 95 | color1: "FFCD2B", 96 | color2: "FB07EE", 97 | }); 98 | export const Gradient12 = () => 99 | GradientDefault({ 100 | number: 12, 101 | color1: "00FB8E", 102 | color2: "4101B7", 103 | }); 104 | export const Gradient13 = () => 105 | GradientDefault({ 106 | number: 13, 107 | color1: "FE0C6B", 108 | color2: "29055E", 109 | dir: "to right bottom", 110 | }); 111 | export const Gradient14 = () => 112 | GradientDefault({ 113 | number: 14, 114 | color1: "FF7C2C", 115 | color2: "0BC799", 116 | }); 117 | export const Gradient15 = () => 118 | GradientDefault({ 119 | number: 15, 120 | color1: "37CCFF", 121 | color2: "7B22FF", 122 | }); 123 | -------------------------------------------------------------------------------- /components/Grid.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { GridStyles } from "../styles/GridStyles"; 3 | import { Dropdown } from "./Dropdown"; 4 | import { 5 | InputFile, 6 | InputFocusEffect, 7 | TextField1, 8 | TextField2, 9 | TextField3, 10 | } from "./Input"; 11 | import { SocialShare, Pagination, Countdown } from "./List"; 12 | import { CustomCheckboxToggle, CustomRadio } from "./Checkbox"; 13 | import { FlipCard } from "./Card"; 14 | import { Calendar } from "./Calendar"; 15 | import { Tabs1, Tabs5, Tabs7 } from "./Tab"; 16 | import { SocialShareButon } from "./Social"; 17 | import { 18 | Button, 19 | Button2, 20 | Button3, 21 | Button4, 22 | Button5, 23 | Button6, 24 | Button7, 25 | Button8, 26 | } from "./Button"; 27 | import { 28 | BallLoading, 29 | BallsLoading, 30 | CircleLoading, 31 | CircleLoading2, 32 | DashedLoading, 33 | DotsLoading, 34 | FadeLoading, 35 | LineLoading, 36 | SquareLoading, 37 | } from "./Loading"; 38 | 39 | const Grid = () => { 40 | return ( 41 | 42 |
43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 |
84 |
85 | 86 | ); 87 | }; 88 | 89 | export default Grid; 90 | -------------------------------------------------------------------------------- /components/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { HeaderStyles } from "../styles/HeaderStyles"; 3 | import { FilterStyles } from "../styles/FilterStyles"; 4 | import { useEffect } from "react"; 5 | import { useState } from "react"; 6 | import { firebaseApp } from "../vendors/fire"; 7 | import Link from "next/link"; 8 | import Head from "next/head"; 9 | 10 | const Header = () => { 11 | const [loveCount, setLoveCount] = useState(1); 12 | const [counter, setCounter] = useState(1); 13 | 14 | useEffect(() => { 15 | const counterLove = parseInt(localStorage.getItem("counter")) || 1; 16 | setCounter(parseInt(counterLove)); 17 | }, []); 18 | 19 | useEffect(() => { 20 | const gridItems = document.querySelectorAll(".grid-item"); 21 | const filterItems = document.querySelectorAll(".filter-item"); 22 | 23 | function handleFilterItems(e) { 24 | filterItems.forEach((el) => el.classList.remove("active")); 25 | const elm = e.target; 26 | if (!elm) return; 27 | elm.classList.add("active"); 28 | const { source } = e.target.dataset; 29 | gridItems.length > 0 && 30 | gridItems.forEach((item) => { 31 | const itemSource = item.getAttribute("data-source"); 32 | if (itemSource === source || source === "all") { 33 | item.style.display = "block"; 34 | } else { 35 | item.style.display = "none"; 36 | } 37 | if (itemSource === "fixed") item.style.display = "block"; 38 | }); 39 | } 40 | 41 | filterItems.length > 0 && 42 | filterItems.forEach((item) => 43 | item.addEventListener("click", handleFilterItems) 44 | ); 45 | }); 46 | 47 | useEffect(() => { 48 | firebaseApp 49 | ?.database() 50 | ?.ref("love") 51 | .on("value", function (snapshot) { 52 | setLoveCount(snapshot.val().value + 1); 53 | }); 54 | }, [loveCount]); 55 | 56 | const handleLove = () => { 57 | localStorage.setItem("counter", counter); 58 | if (counter >= 50) return; 59 | setCounter(counter + 1); 60 | setLoveCount(loveCount + 1); 61 | firebaseApp?.database()?.ref("love").set({ value: loveCount }); 62 | const loveIcon = document.querySelector(".love-icon"); 63 | const loveHeart = document.querySelector(".love-heart"); 64 | if (loveIcon && loveHeart) { 65 | loveIcon.classList.add("active"); 66 | loveHeart.classList.add("active"); 67 | setTimeout(() => { 68 | loveIcon.classList.remove("active"); 69 | }, 50); 70 | setTimeout(() => { 71 | loveHeart.classList.remove("active"); 72 | }, 250); 73 | } 74 | }; 75 | 76 | return ( 77 | <> 78 | 79 | 83 |