diff --git a/TaskManager/ahsan-abc/index.css b/TaskManager/ahsan-abc/index.css index 55d0a78f5..004531341 100644 --- a/TaskManager/ahsan-abc/index.css +++ b/TaskManager/ahsan-abc/index.css @@ -1,429 +1,566 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,300&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); + *{ - padding:0; margin:0; - font-family: 'Roboto'; + padding:0; + box-sizing:border-box; + font-family:'Poppins',sans-serif; } -body +body { - background-color: turquoise; + background: linear-gradient(135deg,#43cea2,#185a9d); + min-height:100vh; + color:white; + overflow-x:hidden; } +/* scrollbar */ +::-webkit-scrollbar +{ + width:8px; +} +::-webkit-scrollbar-thumb +{ + background:white; + border-radius:10px; +} +/* DATE + TIME */ - -/* to-do__________________________________________ */ -/* to-do__________________________________________ */ - -#note +#boss { - text-align: center; - background-color:turquoise; + width:fit-content; + margin:40px auto 20px auto; + text-align:center; } +#time +{ + font-size:4rem; + font-weight:600; + padding:15px 25px; -.note + background: rgba(255,255,255,0.15); + + backdrop-filter: blur(10px); + + border-radius:20px; + + box-shadow:0 8px 25px rgba(0,0,0,0.2); +} + +#date { - display:inline-flex; - flex-direction: column; - box-shadow: 1px 1px 1px rgb(44, 44, 44); + margin-top:10px; + background: rgba(255,255,255,0.2); - height:500px; - width:40vw; - background-color: rgba(255, 255, 255, 0.806); - color: rgb(0, 0, 0); - - border-radius:5% ; - margin:20px; - + padding:8px 15px; + border-radius:12px; + font-size:1rem; } -ul{ - color: white; - font-size: 1.2rem; - list-style: none; - margin : 0 12px; - text-align: left; - - +/* SEARCH */ + +#search +{ + display:flex; + justify-content:center; + margin:25px 0; } -.note >h2 + +#google { - margin-top: 5px; - color: rgb(85, 85, 85); + width:55vw; + max-width:700px; + + padding:15px 20px; + + border:none; + outline:none; + + border-radius:15px; + + background:white; + + font-size:1rem; + + box-shadow:0 5px 15px rgba(0,0,0,0.15); } -.note > input +/* SITE SHORTCUTS */ +#sites { - padding: 0 2%; - width: 91%; - height: 25px; + width:85%; + margin:auto; + + display:flex; + justify-content:center; + align-items:center; + + flex-wrap:wrap; - /* margin: 0 12px; */ - margin:auto; - margin-top: 10px; + gap:20px; + padding:20px; } -#in > li +.site_iteam { - margin : 15px 0 ; - padding: 2px 2px ; - background-color:deepskyblue; - white-space: 3; - + width:90px; + height:110px; + + border-radius:20px; + + display:flex; + flex-direction:column; + + justify-content:center; + align-items:center; + + transition:0.3s; + + position:relative; } -.but +.site_iteam:hover { - background-color: aquamarine; - visibility:hidden; + background:rgba(255,255,255,0.15); + + backdrop-filter:blur(10px); + + transform:translateY(-5px); } -@media only screen and (max-width :800px) +.site_iteam a { - .note -{ - - display:inline-block; - width:90vw; - - + width:65px; + height:65px; -} + border-radius:50%; -} + background:white; + display:flex; + justify-content:center; + align-items:center; -/* search_____________________________________________________________ */ -/* search_____________________________________________________________ */ + overflow:hidden; +} -#search +.site_iteam img { - height: 50px; - background-color: turquoise; - text-align: center; + width:70%; + height:70%; } - -#google +.site_iteam i { - padding: 10px; + margin-top:8px; + + color:white; + + font-size:0.9rem; - border: 0; - margin : 10px 0 ; - outline: 0; - height: 1rem; - width:45vw; - box-shadow: 1px 1px rgb(55, 55, 55); - border-radius: 10px; - font-size: medium; + text-align:center; } -@media screen and (max-width:800px) -{ -#google +.site_iteam button { + margin-top:5px; + border:none; - width:80vw; + background:#ff4d4d; + + color:white; + + padding:4px 8px; + + border-radius:8px; + + cursor:pointer; + + display:none; } + +.site_iteam:hover button +{ + display:block; } +/* MAIN NOTE SECTION */ + +#note +{ + width:90%; + margin:30px auto; + + display:flex; + + justify-content:center; + + align-items:flex-start; -/* note________________________________ */ -/* note________________________________ */ + gap:30px; -#note2{ - position: relative; - height: 500px; + flex-wrap:wrap; } +/* CARDS */ +.note +{ + width:700px; + min-height:550px; -#area + background:rgba(255,255,255,0.15); + + backdrop-filter:blur(15px); + + border-radius:25px; + + padding:25px; + + box-shadow:0 10px 30px rgba(0,0,0,0.2); + + display:flex; + flex-direction:column; +} + +/* HEADINGS */ + +.note h2 { - height: 85%; - width: 97%; - border: 0; - outline: 0; + display:flex; - + justify-content:space-between; + align-items:center; - font-size: 1.3rem; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - margin: 3px; + margin-bottom:20px; - background-color: unset; - color: rgba(45, 108, 255, 0.995); - resize: none; - position: relative; - - + font-size:1.5rem; + + color:rgb(16, 15, 15); } +/* BUTTONS */ -#show_count +button { - position:relative; - z-index: 2; - top: 3px; - left: 2px; - background-color: unset; - display: inline; - margin-bottom: 5px; - text-align: center; - justify-content: space-around; + border:none; + + background:#5b7fff; + color:white; + + padding:8px 14px; + + border-radius:10px; + + cursor:pointer; + + transition:0.3s; } -#next_note +button:hover { - display: inline; - - - + transform:scale(1.05); + + opacity:0.9; } -/* date ________________________________ */ -/* date ________________________________ */ +/* TASK INPUT */ -#boss +.task_controls { - align-items: center; - justify-self: center; - text-align: center; - - height:160px; + display:flex; - width:15rem; - margin: auto; - margin: 6vh auto; + gap:10px; + margin-bottom:20px; } - -#date +#input { + flex:1; + + padding:12px; + + border:none; + + border-radius:12px; - - background-color: bisque; - padding: 5px; - font-size: 1.2rem; - box-shadow: 1px 1px rgb(55, 55, 55); - border-radius: 10px; + outline:none; + + font-size:1rem; } -#time +#priority { - height: 60%; - color: white; + width:120px; + + border:none; + + border-radius:12px; + padding:10px; - padding-bottom: 0; - font-size: 3.5rem; - background-color: rgb(176, 11, 253); - - box-shadow: 1px 1px rgb(55, 55, 55); - border-radius: 10px; - text-align: center; + + outline:none; } -/* sites_________________________________________________________________ */ -/* sites_________________________________________________________________ */ -#sites +/* TASK LIST */ + +ul { - /* background-color: blue; */ - display: flex; - - width:70%; /* 90% - mobile*/ - margin:auto; - padding: 2%; - align-items: center; - justify-content: center; - flex-wrap: wrap; - height: max-content; - flex-direction: row-reverse; + list-style:none; + + margin-top:10px; + overflow-y:auto; } -.site_iteam + +#in li { - /* background-color: black; */ - margin: 0 10px; - width:6rem; - height:8rem; - border-radius: 5px; - display: flex; - align-content: center; - justify-content: center; - text-align: center; - flex-wrap: wrap; - overflow: hidden; - - + background:rgba(255,255,255,0.18); + + margin-bottom:12px; + + padding:14px; + + border-radius:14px; + + display:flex; + justify-content:space-between; + + align-items:center; + + gap:10px; + + color:white; + + transition:0.3s; } - .site_iteam > a +#in li:hover { - display: flex; - margin:4px; - width:4rem; - height:4rem; - background-color: white; - flex-wrap: wrap; - - text-align: center; - border-radius: 51%; - justify-content: center; - align-items: center; + background:rgba(255,255,255,0.3); +} + +.but +{ + background:#ff4d4d; + + width:25px; + height:25px; + + border-radius:50%; + + padding:0; - + visibility:hidden; } -.site_iteam > a > img +#in li:hover .but { - width:60%; - height:60%; - margin: auto; - + visibility:visible; } -.site_iteam > i +#in { - font-style:normal; - color: white; - width:100%; - font-size: 1.2rem; - display: block; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + flex:1; + overflow-y:auto; + padding-right:5px; } -.site_iteam > button +/* TEXTAREA */ + +#area { - opacity: 50%; -margin-top: 2px; -display: none; + flex:1; + + width:100%; + + resize:none; + + border:none; + + outline:none; + + border-radius:15px; + + padding:15px; + + font-size:1rem; + + margin-top:10px; + + background:rgba(255,255,255,0.2); + + color:white; } +/* NOTE NAVIGATION */ -.site_iteam:hover +#show { - background-color: rgba(186, 185, 185, 0.548); - + display:flex; + + justify-content:center; + + align-items:center; + + gap:10px; + + margin-top:15px; } +/* SITE POPUP */ + #site_add { - width:100vw; - height:100vh; - position:sticky; - background-color: rgba(187, 187, 187, 0.703); - z-index:2; - top: 0; - left: 0; - display: none; - justify-content: center; - align-items: center; + position:fixed; + + top:0; + left:0; - + width:100%; + height:100%; + + background:rgba(0,0,0,0.4); + + display:none; + + justify-content:center; + align-items:center; + + z-index:100; } #site_add > div { + width:350px; - width:30%; - height:30%; - background-color: rgb(255, 255, 255); - border-radius: 5px; - padding: 3%; - + background:white; -} + border-radius:20px; -#site_add > div > input -{ - display: block; - margin:10%; - width:80%; - height: 30px; - padding: 4px; - font-size: 1rem; - -} + padding:25px; + display:flex; -@media screen and ( max-width:800px) { - #sites -{ + flex-direction:column; - - - width:90%; /* 90% - mobile*/ - margin:auto; - padding: 2%; - align-items: center; - justify-content: center; - flex-wrap: wrap; - height: max-content; + gap:15px; } -.site_iteam +#site_add input { - margin:0; - height: max-content; - padding-bottom: 5px; - width: 5rem; - height:7rem; -} + padding:12px; + border-radius:10px; + border:1px solid #ccc; -.site_iteam > a > img -{ - width:80%; - height:80%; - margin: auto; - border-radius: 51%; - - + outline:none; } -#site_add > div +/* MOBILE */ + +@media screen and (max-width:900px) { + #google + { + width:85vw; + } - width:90%; - height:43%; - - + .note + { + width:95%; + } -} + #time + { + font-size:2.8rem; + } + + .task_controls + { + flex-direction:column; + } + #priority + { + width:100%; + } +} +.task_content +{ + display:flex; + align-items:center; + gap:12px; + flex:1; } +.task_text +{ + word-break:break-word; +} -.site_iteam > i +.priority_badge { - font-size: 0.8rem; + padding:5px 10px; + border-radius:20px; + font-size:0.75rem; + font-weight:600; + min-width:70px; + text-align:center; } - +/* COLORS */ +.low +{ + background:#22c55e; +} -.push +.medium { - display: block; + background:#f59e0b; } -.pull +.high { - display: none; + background:#ef4444; } +.add_icon +{ + width:65px; + height:65px; + + border-radius:50%; + + background:white; + + display:flex; + justify-content:center; + align-items:center; + + font-size:2.5rem; + + font-weight:600; + + color:#185a9d; + + text-decoration:none; + cursor:pointer; +} \ No newline at end of file diff --git a/TaskManager/ahsan-abc/index.html b/TaskManager/ahsan-abc/index.html index adb4fbfa8..5c69df726 100644 --- a/TaskManager/ahsan-abc/index.html +++ b/TaskManager/ahsan-abc/index.html @@ -17,6 +17,7 @@ id="site_name" placeholder="enter name (atlest 4 charecter)" />. + @@ -40,26 +41,39 @@
+