// App.jsx import React from 'react'; import ReactDOM from 'react-dom/client'; // We can embed the Google Fonts via an @import at the start of our CSS: const embeddedStyles = ` @import url('https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap'); /* ----------------------- */ /* CSS STYLES */ /* ----------------------- */ * { box-sizing: border-box; outline: none; } :root { --bg-color: #1a1b1f; --main-color: #f1f1f1; --secondary-color: #8e92a4; --main-text-color: #e3e4e8; --secondary-dark-color: #9496a5; --tag-color-one: #1b3a3a; --tag-color-text-one: #58c2a9; --tag-color-two: #2a2640; --tag-color-text-two: #8972f3; --tag-color-three: #3a2a2a; --tag-color-text-three: #e77f89; --tag-color-four: #272831; --tag-color-text-four: #a0a6b5; --checkbox-color: #00c9b7; --button-color: #49beb7; --box-color: #fff1d6; --box-color-2: #d3e6ff; --box-color-3: #ffd9d9; --box-color-4: #daffe5; --task-color: #b4b6bb; } body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; padding: 0; font-family: 'DM Sans', sans-serif; overflow: hidden; font-size: 12px; background-image: linear-gradient(21deg, rgba(64, 83, 206, 0.3697) 68%, rgba(255, 206, 196, 0.5) 163%), linear-gradient(163deg, rgba(49, 146, 170, 0.0794) 86%, rgba(239, 112, 138, 0.5) 40%), linear-gradient(30deg, rgba(76, 79, 173, 0.6173) 22%, rgba(237, 106, 134, 0.5) 169%), linear-gradient(48deg, rgba(31, 85, 147, 0.7323) 64%, rgba(247, 126, 132, 0.5) 43%); background-blend-mode: overlay,multiply,color,normal; } ul { list-style-type: none; padding: 0; } button { border: none; background: none; cursor: pointer; } .task-manager { display: flex; justify-content: space-between; width: 95%; max-width: 1200px; height: 85vh; max-height: 900px; margin: auto; background: #202124; position: relative; top: 50%; transform: translateY(-50%); border-radius: 4px; box-shadow: 0 0.3px 2.2px rgba(0, 0, 0, 0.011), 0 0.7px 5.3px rgba(0, 0, 0, 0.016), 0 1.3px 10px rgba(0, 0, 0, 0.02), 0 2.2px 17.9px rgba(0, 0, 0, 0.024), 0 4.2px 33.4px rgba(0, 0, 0, 0.029), 0 10px 80px rgba(0, 0, 0, 0.04); overflow: hidden; } .left-bar { background-color: #202124; width: 230px; border-right: 1px solid #2d2e33; position: relative; } .left-content { padding: 40px; } .item { display: flex; align-items: center; color: var(--main-color); margin-bottom: 14px; font-weight: 500; } .item svg { width: 14px; height: 14px; color: currentcolor; margin-right: 10px; } .category-list { margin-top: 50px; } .category-list .item { color: var(--secondary-color); } .actions { padding: 12px; display: flex; justify-content: space-between; } .circle { border-radius: 50%; width: 10px; height: 10px; background-color: #fe4d46; box-shadow: 14px 0 0 0 #fbc023, 28px 0 0 0 #7dd21f; } .circle-2 { border-radius: 50%; width: 4px; height: 4px; background-color: #d5d7e3; box-shadow: -6px 0 0 0 #d5d7e3, 6px 0 0 0 #d5d7e3; } .right-bar { width: 320px; border-left: 1px solid #2d2e33; display: flex; flex-direction: column; } .right-bar .header { font-size: 20px; color: var(--main-text-color); margin-left: 30px; } .top-part { padding: 30px; display: flex; align-items: center; align-self: flex-end; } .top-part svg { width: 14px; height: 14px; color: var(--main-color); margin-right: 14px; } .count { font-size: 12px; border-radius: 50%; width: 24px; height: 24px; background-color: #623ce8; color: #fff; display: flex; align-items: center; justify-content: center; } .right-content { padding: 10px 40px; overflow-y: auto; flex: 1; } .task-box { position: relative; border-radius: 12px; width: 100%; margin: 20px 0; padding: 16px; cursor: pointer; box-shadow: 2px 2px 4px 0px rgba(235,235,235,1); transition: 0.2s ease-in-out; } .task-box:hover { transform: scale(1.02); } .time { margin-bottom: 6px; opacity: 0.4; font-size: 10px; } .task-name { font-size: 14px; font-weight: 500; opacity: 0.6; } .yellow { background-color: var(--box-color); } .blue { background-color: var(--box-color-2); } .red { background-color: var(--box-color-3); } .green { background-color: var(--box-color-4); } .more-button { position: absolute; width: 3px; height: 3px; border-radius: 50%; background-color: #8e92a4; box-shadow: 0 -4px 0 0 #8e92a4, 0 4px 0 0 #8e92a4; opacity: 0.4; right: 20px; top: 30px; cursor: pointer; } .members { display: flex; margin-top: 14px; } .members img { border-radius: 50%; width: 30px; height: 30px; margin-right: 4px; object-fit: cover; } .page-content { display: flex; flex-direction: column; flex: 1; padding: 40px 20px 0 20px; } .page-content .header { font-size: 26px; color: var(--main-color); margin-top: 30px; } .content-categories { display: flex; justify-content: space-evenly; width: 100%; border-bottom: 1px solid #2d2e33; padding: 20px 0; } .nav-item { display: none; } .category { font-weight: 500; color: var(--secondary-color); border-bottom: 1px solid #2d2e33; transition: 0.4s ease-in; padding: 20px 30px; cursor: pointer; } #opt-1:checked + label, #opt-2:checked + label, #opt-3:checked + label, #opt-4:checked + label { color: var(--checkbox-color); border-bottom: 2px solid var(--checkbox-color); } .task-item { display: none; } .tasks-wrapper { padding: 30px 0; flex: 1; overflow-y: auto; height: 100%; padding-right: 8px; } .task { display: flex; justify-content: space-between; position: relative; margin-bottom: 16px; padding-left: 30px; color: var(--task-color); font-size: 13px; font-weight: 500; transition: 0.2s ease-in-out; } .task:hover { transform: translatex(2px); } .task label { cursor: pointer; } .task label .label-text { position: relative; } .task label .label-text:before { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid #2d2e33; border-radius: 2px; left: -24px; transition: 0.2s ease; } .task-item:checked + label .label-text:before { background-color: var(--checkbox-color); border: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 10px; background-position: center; border: 1px solid var(--checkbox-color); } .tag { font-size: 10px; padding: 4px 8px; border-radius: 20px; } .tag.approved { background-color: var(--tag-color-one); color: var(--tag-color-text-one); } .tag.progress { background-color: var(--tag-color-two); color: var(--tag-color-text-two); } .tag.review { background-color: var(--tag-color-three); color: var(--tag-color-text-three); } .tag.waiting { background-color: var(--tag-color-four); color: var(--tag-color-text-four); } .upcoming { border-bottom: 1px solid #2d2e33; padding-bottom: 30px; margin-bottom: 30px; } /* Responsive */ @media screen and (max-width: 900px) { .left-bar { display: none; } } @media screen and (max-width: 700px) { .task-manager { flex-direction: column; overflow-y: auto; } .right-bar, .page-content { width: 100%; display: block; } .tasks-wrapper { height: auto; } } @media screen and (max-width: 520px) { .page-content { padding: 40px 10px 0 10px; } .right-content { padding: 10px 16px; } .category { padding: 20px; } } `; function App() { return ( <> {/* Inject all styles via a

About Colorful Task Dashboard UI

Other games like this