├── .gitignore ├── README.md ├── calculation.js ├── common.css ├── common.js ├── d1.css ├── d2.css ├── d3.css ├── d4.css ├── dark.js ├── font ├── PB.ttf ├── PL.ttf ├── PM.ttf ├── PR.ttf ├── ProductSans-Black.ttf ├── ProductSans-BlackItalic.ttf ├── ProductSans-BoldItalic.ttf ├── ProductSans-Italic.ttf ├── ProductSans-LightItalic.ttf ├── ProductSans-MediumItalic.ttf ├── ProductSans-Thin.ttf ├── ProductSans-ThinItalic.ttf ├── Segoe UI Bold Italic.ttf ├── Segoe UI Bold.ttf ├── Segoe UI Italic.ttf └── Segoe UI.ttf ├── img ├── data.svg ├── mainLogo.svg ├── subjectS.svg └── update.svg ├── index.html ├── jQuery.js ├── main.css ├── main.html ├── main.js ├── main ├── about.svg ├── back.svg ├── backup.svg ├── book.svg ├── bookON.svg ├── checkForUpdate.svg ├── delete.svg ├── feedback.svg ├── history.svg ├── home.svg ├── homeON.svg ├── more.svg ├── moreON.svg ├── music.svg ├── music2.svg ├── musicOff.svg ├── musicOn.svg ├── next.svg ├── pause.svg ├── play.svg ├── plus.svg ├── prev.svg ├── rArrow.svg ├── stop.svg ├── sun.svg ├── time.svg └── timeON.svg ├── more ├── aboutApp&dev.html ├── addSubject.html ├── checkForUpdate.html ├── common.css └── deleteAll.html ├── music.js ├── music ├── 0.mp3 ├── 1.mp3 ├── 2.mp3 ├── 3.mp3 ├── 4.mp3 ├── 5.mp3 ├── 6.mp3 └── Music List.txt └── start.html /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/README.md -------------------------------------------------------------------------------- /calculation.js: -------------------------------------------------------------------------------- 1 | if(!localStorage.readingTime) localStorage.readingTime = JSON.stringify([0,0,0,0,0,0,0,0,0,0]); 2 | 3 | var readingTime = JSON.parse(localStorage.readingTime); 4 | 5 | if(localStorage.subjects){}else{ 6 | localStorage.subjects = JSON.stringify(["Mathematics","Physics","Biology","Chemistry","Bengali","English","","","",""]); 7 | } 8 | 9 | setTimeout(() => { 10 | var subjects = JSON.parse(localStorage.subjects); 11 | for (i=0;i"+subject+ ""); 16 | }else{ 17 | $(".main .d1 .glass2 .sub"+(i+1)).hide(); 18 | $(".main .d2 .subWin p:nth-child(" + (2+i)+")").hide(); 19 | readingTime[i] = 0; 20 | } 21 | } 22 | }, 200); 23 | 24 | /*START READING*/ 25 | function startReading(){ 26 | dr.showWindow(".subWin"); 27 | dr.showWindow(".d2 .none"); 28 | 29 | } 30 | 31 | //SELECT SUBJECTS 32 | function selectSubject(i){ 33 | setTimeout(() => { 34 | $(".subWin").hide(); 35 | $(".d2 .none").hide(); 36 | setTimeout(() => { 37 | book(); 38 | }, 50); 39 | }, 50); 40 | localStorage.lastWin = "book"; 41 | localStorage.isReading = "yes"; 42 | if(!localStorage.startupMusic) palyPause(0); 43 | readSubject(i); 44 | // var subjects = JSON.parse(localStorage.subjects); 45 | } 46 | 47 | 48 | 49 | 50 | ///////////////////////// 51 | //TIME CONTAINS ONLY TODAY'S READING TIME IN ARRAY 52 | //FULL TIME CONTAINS FULL TIME OF READING 53 | 54 | //if(!localStorage.fullReadingTime){localStorage.fullReadingTime = JSON.stringify([0,0,0,0,0,0,0,0,0,0])} 55 | //var fullReadingTime = JSON.parse(localStorage.fullReadingTime); 56 | ///////////////////////////////////////////////// 57 | //////////////////////////////////////////////// 58 | 59 | 60 | var subjects = JSON.parse(localStorage.subjects); 61 | function readSubject(i){ 62 | if(localStorage.isReading){ 63 | var now = (new Date()).getTime(); 64 | localStorage.startedReadingTime = now; 65 | localStorage.readingSubject = subjects[i]; 66 | localStorage.readingSubjectNumber = i; 67 | document.getElementById("readingPlayPause").style.display="block"; 68 | document.getElementById("readingSubject").innerText = subjects[i]; 69 | showCountdown(); 70 | } 71 | else{ 72 | localStorage.startedReadingTime = ""; 73 | localStorage.readingSubject = ""; 74 | localStorage.readingSubjectNumber = ""; 75 | } 76 | } 77 | 78 | function showCountdown() { 79 | //alert(123); 80 | if(localStorage.isReading){ 81 | var now = (new Date()).getTime(); 82 | var diff = now - Number(localStorage.startedReadingTime); 83 | var hour = (diff/(1000*60*60)); 84 | var minute = (hour - Math.floor(hour))*60; 85 | var second = Math.floor((minute - Math.floor(minute))*60); 86 | hour = Math.floor(hour); 87 | minute = Math.floor(minute); 88 | document.getElementById("second").innerText = addZero(second); 89 | document.getElementById("hourMinute").innerText = addZero(hour) + ":" + addZero(minute); 90 | setTimeout(() => {showCountdown();}, 1000); 91 | } 92 | } 93 | 94 | setTimeout(() => { 95 | if(localStorage.isReading){ 96 | document.getElementById("readingSubject").innerText =localStorage.readingSubject; 97 | showCountdown(); 98 | }else{ 99 | document.getElementById("readingPlayPause").style.display="none"; 100 | } 101 | },200); 102 | 103 | 104 | //readingTime[2]= 123; 105 | 106 | function stopReading(){ 107 | home(); 108 | var i = parseInt(localStorage.readingSubjectNumber); 109 | document.getElementById("readingPlayPause").style.display="none"; 110 | document.getElementById("readingSubject").innerText ="..."; 111 | document.getElementById("hourMinute").innerText = "00:00"; 112 | document.getElementById("second").innerText = "00"; 113 | localStorage.isReading = ""; 114 | palyPause(1); 115 | var diff = (new Date).getTime() - parseInt(localStorage.startedReadingTime); 116 | readingTime[i] += diff; 117 | localStorage.readingTime = JSON.stringify(readingTime); 118 | //alert(localStorage.readingTime); 119 | } 120 | 121 | 122 | 123 | /////LOAD GRAPH DATA 124 | //////////////////// 125 | //////////////////// 126 | function setRanges() { 127 | setTimeout(() => { 128 | var ranges = document.querySelectorAll(".main .d1 .glass2 .sub .container .content"); 129 | var max = readingTime.reduce(function(a, b) {return Math.max(a, b);}); 130 | 131 | for(i=0;i=10) return x; 210 | else return "0"+x; 211 | } -------------------------------------------------------------------------------- /common.css: -------------------------------------------------------------------------------- 1 | 2 | html{ 3 | background: var(--theme-color); 4 | } 5 | *{ 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | font-family: Arial, Helvetica, sans-serif; 10 | } 11 | body{ 12 | min-height: 100vh; 13 | transition:0.3s transform,0.5s opacity; 14 | background: var(--theme-color); 15 | opacity: 0; 16 | } 17 | 18 | @font-face{ 19 | font-family: PR; 20 | src: url("font/PR.ttf"); 21 | } 22 | @font-face{ 23 | font-family: PM; 24 | src: url("font/PM.ttf"); 25 | } 26 | @font-face{ 27 | font-family: PL; 28 | src: url("font/PL.ttf"); 29 | } 30 | a{ 31 | text-decoration: none; 32 | color: var(--text-color); 33 | } -------------------------------------------------------------------------------- /common.js: -------------------------------------------------------------------------------- 1 | 2 | /* Get the element you want displayed in fullscreen mode (a video in this example): */ 3 | var elem = document.documentElement; 4 | 5 | /* When the openFullscreen() function is executed, open the video in fullscreen. 6 | Note that we must include prefixes for different browsers, as they don't support the requestFullscreen method yet */ 7 | function fs() { 8 | if (elem.requestFullscreen) { 9 | elem.requestFullscreen(); 10 | } else if (elem.webkitRequestFullscreen) { /* Safari */ 11 | elem.webkitRequestFullscreen(); 12 | } else if (elem.msRequestFullscreen) { /* IE11 */ 13 | elem.msRequestFullscreen(); 14 | } 15 | } 16 | 17 | 18 | 19 | function openPage(i){ 20 | //$('body').css('transform','translateX(-100vw)'); 21 | setTimeout(() => { 22 | location.assign(i); 23 | }, 50); 24 | } 25 | function goBack(){ 26 | //$('body').css('transform','translateX(100vw)'); 27 | setTimeout(() => { 28 | window.history.back(); 29 | }, 50); 30 | } 31 | -------------------------------------------------------------------------------- /d1.css: -------------------------------------------------------------------------------- 1 | .d1{ 2 | background: var(--thrme-color); 3 | left: 0; 4 | background: var(--theme-color); 5 | padding-bottom: 150px; 6 | position: fixed; 7 | top: 0; 8 | overflow-y: scroll; 9 | overflow-x: hidden; 10 | } 11 | .main .d1 .history{ 12 | position: absolute; 13 | top: 25px; 14 | right: 20px; 15 | height: 25px; 16 | } 17 | .main .glass{ 18 | margin-top: 50px; 19 | height:60vw; 20 | width: 85vw; 21 | background:var(--glass-back); 22 | display: flex; 23 | margin-right: auto; 24 | margin-left: auto; 25 | border-radius: 10px; 26 | backdrop-filter: blur(10px); 27 | border: 1px solid #88888822; 28 | justify-content: center; 29 | align-items: center; 30 | flex-direction: column; 31 | } 32 | .main .d1 .glass2{ 33 | height: auto; 34 | width: 80vw; 35 | margin-left:10vw; 36 | } 37 | .main .d1 .glass2 .sub p { 38 | padding: 20px 0 10px 0; 39 | font-family:PM; 40 | } 41 | .main .d1 .glass2 .sub .container{ 42 | height: 12px; 43 | width: 100%; 44 | border-radius: 20px; 45 | } 46 | .main .d1 .glass2 .sub .content{ 47 | width: 70%; 48 | height: inherit; 49 | border-radius: inherit; 50 | width: 0; 51 | transition: 0.7s ease-out width; 52 | } 53 | 54 | 55 | 56 | .main .d1 .glass h2{ 57 | font-size: 1.5em; 58 | color: var(--sub-text-color); 59 | font-family: PR; 60 | letter-spacing: 1px; 61 | } 62 | .main .d1 .glass .todayTime{ 63 | font-size: 2.2em; 64 | color:var(--main-color); 65 | padding: 30px 0; 66 | font-family: PR; 67 | letter-spacing: 2px; 68 | filter:var(--main-dark-icon); 69 | } 70 | 71 | .main .d1 .c1{ 72 | position: absolute; 73 | height: 130px; 74 | width: 130px; 75 | border-radius: 50%; 76 | background: linear-gradient(#ff3434,#ff1fff); 77 | top: 5vw; 78 | right: 1vw; 79 | z-index: -5; 80 | animation: bubble 10s ease-in-out infinite; 81 | animation-delay:-4s; 82 | } 83 | .main .d1 .c2{ 84 | position: absolute; 85 | height: 200px; 86 | width: 200px; 87 | border-radius: 50%; 88 | background: linear-gradient(to right,rgb(0, 115, 255),rgb(0, 200, 255)); 89 | top: 30vw; 90 | left: -30vw; 91 | z-index: -5; 92 | animation: bubble 8s ease-in-out infinite; 93 | animation-delay:-3s; 94 | } 95 | .main .d1 .c3{ 96 | position: absolute; 97 | height: 50px; 98 | width: 50px; 99 | border-radius: 50%; 100 | top: 27%; 101 | left: 50%; 102 | background:red; 103 | animation: bubble 10s ease-in-out infinite; 104 | animation-delay:0s; 105 | } 106 | .main .d1 .c4{ 107 | height: 50px; 108 | width: 50px; 109 | background:rgb(0, 235, 145); 110 | border-radius: 50%; 111 | position: absolute; 112 | top: 22vw; 113 | left: 18vw; 114 | animation: bubble 8s ease-in-out infinite; 115 | animation-delay:-6s; 116 | } 117 | .main .d1 .quote{ 118 | text-align: center; 119 | padding:40px 15vw 15px; 120 | font-size: 1em; 121 | color: var(--sub-text-color); 122 | font-family: PM; 123 | } 124 | .main .d1 button{ 125 | display: flex; 126 | margin-right: auto; 127 | margin-left: auto; 128 | border: none; 129 | outline: none; 130 | padding: 15px 27px; 131 | background: linear-gradient(45deg,#ff5f6c,#FFC371); 132 | color: white; 133 | font-size: 1.1em; 134 | border-radius: 8px; 135 | font-family:PM; 136 | text-transform: uppercase; 137 | letter-spacing: 1px; 138 | transition: 0.1s ease-in-out transform; 139 | } 140 | .main .d1 button:active{ 141 | transform: scale(1.05); 142 | } 143 | 144 | .main .d1 .glass2 .sub1 .container, 145 | .main .d1 .glass2 .sub5 .container, 146 | .main .d1 .glass2 .sub9 .container 147 | { 148 | background: rgba(0, 235, 145, 0.3); 149 | } 150 | .main .d1 .glass2 .sub1 .content, 151 | .main .d1 .glass2 .sub5 .content, 152 | .main .d1 .glass2 .sub9 .content 153 | { 154 | background: rgb(0, 235, 145); 155 | } 156 | .main .d1 .glass2 .sub2 .container, 157 | .main .d1 .glass2 .sub6 .container, 158 | .main .d1 .glass2 .sub10 .container 159 | { 160 | background:linear-gradient(to left,rgba(255, 95, 108, 0.2),rgba(255, 196, 113, 0.2)); 161 | } 162 | .main .d1 .glass2 .sub2 .content, 163 | .main .d1 .glass2 .sub6 .content, 164 | .main .d1 .glass2 .sub10 .content 165 | { 166 | background: linear-gradient(to left,#ff5f6c,#FFC371); 167 | } 168 | .main .d1 .glass2 .sub3 .container, 169 | .main .d1 .glass2 .sub7 .container 170 | { 171 | background: linear-gradient(to right,#a244ff44,#9501ff44);} 172 | .main .d1 .glass2 .sub3 .content, 173 | .main .d1 .glass2 .sub7 .content 174 | { 175 | background: linear-gradient(to right,#A044FF,#8b42c0); 176 | } 177 | .main .d1 .glass2 .sub4 .container, 178 | .main .d1 .glass2 .sub8 .container 179 | { 180 | background: linear-gradient(to right,rgba(0, 115, 255, 0.3),rgba(0, 200, 255, 0.3)); 181 | } 182 | .main .d1 .glass2 .sub4 .content, 183 | .main .d1 .glass2 .sub8 .content{ 184 | background: linear-gradient(to left,rgb(0, 115, 255),rgb(0, 200, 255)); 185 | } 186 | 187 | 188 | -------------------------------------------------------------------------------- /d2.css: -------------------------------------------------------------------------------- 1 | .d2{ 2 | left: 100vw; 3 | padding-bottom: 100px; 4 | } 5 | /* .d2 .end{ 6 | position: absolute; 7 | top: 10px; 8 | right: 10px; 9 | border: none; 10 | outline: none; 11 | font-size: 1em; 12 | font-family: PM; 13 | padding: 10px 20px; 14 | color: var(--main-color); 15 | font-weight:bold; 16 | text-transform: uppercase; 17 | letter-spacing: 1px; 18 | background: rgba(107, 99, 255, 0.1); 19 | border: 1px solid var(--main-color); 20 | border-radius: 2px; 21 | 22 | } */ 23 | .d2 .none{ 24 | height: 100vh; 25 | width: 100vw; 26 | position: fixed; 27 | top: 0; 28 | left: 0; 29 | background-color: rgba(0, 0, 0, 0); 30 | display: none; 31 | } 32 | .d2 .subWin{ 33 | height: auto; 34 | width: 80%; 35 | background: var(--glass-back); 36 | position: fixed; 37 | transform: translate(-50%,-50%); 38 | top: 50%; 39 | left: 50%; 40 | backdrop-filter: blur(30px); 41 | text-align: center; 42 | border-radius: 10px; 43 | padding: 30px 0 10px 0px; 44 | text-transform: uppercase; 45 | max-height: 40vh; 46 | overflow: scroll; 47 | display: none; 48 | } 49 | 50 | .d2 .subWin h1{ 51 | text-align: center; 52 | font-size: 1.4em; 53 | font-family: PM; 54 | letter-spacing: 1px; 55 | color: var(--sub-text-color); 56 | padding-bottom: 10px; 57 | } 58 | .d2 .subWin p{ 59 | font-size: 1.2; 60 | padding: 15px 0; 61 | color: var(--main-color); 62 | font-family: PM; 63 | font-weight: bold; 64 | letter-spacing: 2px; 65 | transition: 0.1s background,transform; 66 | filter:var(--main-dark-icon); 67 | 68 | } 69 | .d2 .subWin p:active{ 70 | background: #99999944; 71 | transform: scale(1.01); 72 | } 73 | .d2 .musicWin{ 74 | height: auto; 75 | width: 85%; 76 | height: auto; 77 | border-radius: 20px; 78 | position: fixed; 79 | transform: translate(-50%,-50%); 80 | top: 50%; 81 | left: 50%; 82 | background: var(--glass-back); 83 | display: flex; 84 | justify-content:space-between; 85 | align-items: center; 86 | flex-direction: column; 87 | backdrop-filter: blur(30px); 88 | display: none; 89 | } 90 | .d2 .musicWin .content{ 91 | height: auto; 92 | width: 100%; 93 | } 94 | .d2 .musicWin .content h1{ 95 | padding: 15px 0 0 25px; 96 | color: var(--sub-text-color); 97 | font-family: PR; 98 | letter-spacing: 2px; 99 | font-size: 1em; 100 | } 101 | .d2 .musicWin .content p{ 102 | color: var(--main-color); 103 | font-family: PR; 104 | font-size: 1.5em; 105 | font-weight: bold; 106 | padding: 5px 25px 0 25px; 107 | letter-spacing: 2px; 108 | white-space: nowrap; 109 | overflow: hidden; 110 | text-overflow: ellipsis; 111 | } 112 | .d2 .musicWin .content h2{ 113 | overflow: hidden; 114 | text-overflow: ellipsis; 115 | font-size: 1em; 116 | font-family: PR; 117 | font-weight:100; 118 | color: var(--sub-text-color); 119 | padding: 5px 25px 0 25px; 120 | text-align: justify; 121 | } 122 | .d2 .musicWin .content #musicRange{ 123 | width: 85%; 124 | display: flex; 125 | margin:20px auto 0 auto; 126 | -webkit-appearance: none; 127 | height: 10px; 128 | border-radius: 10px; 129 | background: #99999944; 130 | overflow: hidden; 131 | } 132 | .d2 .musicWin .content #musicRange::-webkit-slider-thumb { 133 | -webkit-appearance: none; 134 | appearance: none; 135 | width: 10px; 136 | height: 10px; 137 | border-radius: 50%; 138 | background: var(--main-color); 139 | cursor: pointer; 140 | box-shadow: -1005px 0px 0 1000px var(--main-color); 141 | border-radius: 50%; 142 | border: none; 143 | outline: none; 144 | } 145 | 146 | 147 | .d2 .musicWin .controls{ 148 | height: 100px; 149 | width: 100%; 150 | display: flex; 151 | justify-content: center; 152 | align-items: center; 153 | 154 | 155 | } 156 | 157 | 158 | .d2 .musicWin .controls img{ 159 | padding: 25px; 160 | height: 75px; 161 | transition: 0.2s linear transform; 162 | } 163 | .d2 .musicWin .controls img:active{ 164 | transform: scale(1.3); 165 | } 166 | .d2 .time{ 167 | height:80vw; 168 | width: 100%; 169 | display:flex; 170 | justify-content: center; 171 | align-items: center; 172 | } 173 | .d2 .time .sec{ 174 | font-size: 70vw; 175 | width: 100%; 176 | text-align: center; 177 | position: absolute; 178 | font-family: PR; 179 | font-weight: 100; 180 | color:var(--main-color); 181 | filter:var(--main-dark-icon); 182 | opacity:var(--color-opacity); 183 | z-index:-5; 184 | } 185 | .d2 .time .hm{ 186 | font-size: 25vw; 187 | font-family: PL; 188 | letter-spacing: 10px; 189 | color: var(--sub-text-color); 190 | } 191 | .d2 .sub{ 192 | text-align: center; 193 | font-size: 1.5em; 194 | font-family: PM; 195 | letter-spacing: 1px; 196 | /*color: #ffa751;*/ 197 | color: var(--main-color); 198 | padding:0 0 20px 0; 199 | z-index:-5; 200 | } 201 | .d2 .music{ 202 | display: flex; 203 | margin: auto; 204 | width: 40px; 205 | height: auto; 206 | } 207 | .d2 .mainLogo{ 208 | width: 80%; 209 | height: auto; 210 | display: flex; 211 | margin: auto; 212 | } 213 | /* .d2 .txt{ 214 | text-align: center; 215 | font-size: 1.2em; 216 | font-family: PR; 217 | color: var(--sub-text-color); 218 | padding: 25px; 219 | } */ 220 | .d2 .control{ 221 | width: 50%; 222 | display: flex; 223 | margin: auto; 224 | height: 50px; 225 | margin-top: 40px; 226 | justify-content: space-around; 227 | align-items: center; 228 | } 229 | .d2 .control img{ 230 | height: 50px; 231 | width: auto; 232 | padding: 10px; 233 | transition: 0.2s linear transform; 234 | filter:var(--main-dark-icon); 235 | } 236 | .d2 .control img:active{ 237 | transform: scale(1.4); 238 | } 239 | -------------------------------------------------------------------------------- /d3.css: -------------------------------------------------------------------------------- 1 | .d3 .top{ 2 | height: 70vh; 3 | display: flex; 4 | justify-content:space-between; 5 | align-items: center; 6 | margin-top: 50px; 7 | } 8 | .d3 .top .left{ 9 | height:inherit; 10 | width: 50%; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | .d3 .top .left .container{ 16 | height: inherit; 17 | width: 75%; 18 | background: pink; 19 | border-radius: 10px; 20 | overflow: hidden; 21 | } 22 | .d3 .top .left .container div{ 23 | width: 100%; 24 | height: 7vh; 25 | background: lime; 26 | } 27 | .d3 .top .left .container div:nth-child(1){ 28 | background: #00FF9F; 29 | }.d3 .top .left .container div:nth-child(2){ 30 | background: #FFC371; 31 | }.d3 .top .left .container div:nth-child(3){ 32 | background: #A044FF; 33 | }.d3 .top .left .container div:nth-child(4){ 34 | background:#2FB0FF; 35 | }.d3 .top .left .container div:nth-child(5){ 36 | background: #FF2600; 37 | }.d3 .top .left .container div:nth-child(6){ 38 | background: #FFC371; 39 | }.d3 .top .left .container div:nth-child(7){ 40 | background: #A044FF; 41 | }.d3 .top .left .container div:nth-child(8){ 42 | background: #00FF9F; 43 | }.d3 .top .left .container div:nth-child(9){ 44 | background: #FFC371; 45 | }.d3 .top .left .container div:nth-child(10){ 46 | background: #2FB0FF; 47 | } 48 | .d3 .top .right{ 49 | height:inherit; 50 | width: 50%; 51 | } 52 | -------------------------------------------------------------------------------- /d4.css: -------------------------------------------------------------------------------- 1 | .d4{ 2 | background:var(--theme-color); 3 | left: 300vw; 4 | padding-bottom: 100px; 5 | } 6 | 7 | .d4 .c1{ 8 | position: absolute; 9 | top:-50px; 10 | right:-50px; 11 | /* background: linear-gradient(#6C63FF,#FF00FF); */ 12 | background: linear-gradient(to left,rgb(0, 115, 255),rgb(0, 200, 255)); 13 | height: 200px; 14 | width: 200px; 15 | border-radius: 50%; 16 | z-index: -1; 17 | animation: bubble 5s ease-in-out infinite; 18 | } 19 | 20 | .d4 .c2{ 21 | position: absolute; 22 | top:150px; 23 | left:-20px; 24 | background: linear-gradient(45deg,#ff5f6c,#FFC371); 25 | height: 100px; 26 | width: 100px; 27 | border-radius: 50%; 28 | z-index: -1; 29 | animation: bubble 8s ease-in-out infinite; 30 | animation-delay:-4s; 31 | } 32 | .d4 .c3{ 33 | height: 50px; 34 | width: 50px; 35 | background: red; 36 | border-radius: 50%; 37 | position: absolute; 38 | top: 60vw; 39 | left: 70vw; 40 | animation: bubble 8s ease-in-out infinite; 41 | animation-delay:-1s; 42 | } 43 | .d4 .c4{ 44 | height: 50px; 45 | width: 50px; 46 | background:rgb(0, 235, 145); 47 | border-radius: 50%; 48 | position: absolute; 49 | top: 22vw; 50 | left: 18vw; 51 | animation: bubble 8s ease-in-out infinite; 52 | animation-delay:-6s; 53 | } 54 | .d4 .glass{ 55 | text-transform: uppercase; 56 | text-align: center; 57 | } 58 | .d4 .glass h1{ 59 | color: var(--main-color); 60 | font-size: 2.5em; 61 | filter:var(--main-dark-icon); 62 | letter-spacing: 2px; 63 | } 64 | .d4 .glass p{ 65 | color: var(--sub-text-color); 66 | padding: 5px; 67 | font-size: 0.9em; 68 | font-family: PM; 69 | } 70 | .d4 .setting{ 71 | min-height: 200px; 72 | height: auto; 73 | width: 100%; 74 | padding-top: 20px; 75 | } 76 | .d4 .setting .op{ 77 | width: 100%; 78 | height:auto; 79 | display: flex; 80 | display: flex; 81 | align-items: center; 82 | padding:15px 30px; 83 | /* border: 1px solid red; */ 84 | } 85 | .d4 .setting .op:active{ 86 | background: rgba(165, 165, 165, 0.25); 87 | } 88 | .d4 .setting .op .l{ 89 | height: 25px; 90 | width: 25px ; 91 | } 92 | .d4 .setting .op .r{ 93 | height: 10px; 94 | width: 10px; 95 | position: absolute; 96 | right:calc(7.5vw); 97 | } 98 | .d4 .setting .op .center{ 99 | padding-left: 15px; 100 | font-family: PM; 101 | letter-spacing: 1px; 102 | } 103 | .d4 .setting .op .right{ 104 | position: absolute; 105 | right: calc(30px); 106 | font-size: 0.8em; 107 | color: var(--sub-text-color); 108 | font-family: PM; 109 | display: flex; 110 | justify-content: center; 111 | align-items: center; 112 | } 113 | .darkic{ 114 | transition: 1s ease-in-out transform; 115 | } 116 | -------------------------------------------------------------------------------- /dark.js: -------------------------------------------------------------------------------- 1 | 2 | if(localStorage.darkVar) 3 | dark(); 4 | else 5 | light(); 6 | 7 | 8 | var darkVar = !(localStorage.darkVar); 9 | function swdark(){ 10 | darkVar = !(darkVar); 11 | if(darkVar) 12 | light(); 13 | else 14 | dark(); 15 | spinIcon(); 16 | } 17 | function light() { 18 | document.body.style.setProperty('--main-color','#6c63ff'); 19 | document.body.style.setProperty('--theme-color','white'); 20 | document.body.style.setProperty('--sub-text-color','#555'); 21 | document.body.style.setProperty('--text-color','#000'); 22 | document.body.style.setProperty('--icon-color','invert(-1)'); 23 | document.body.style.setProperty('--color-opacity','0.1'); 24 | //document.body.style.setProperty('--main-dark-icon','brightness(100%)'); 25 | 26 | $(".darkTextOnOff").text("OFF"); 27 | localStorage.darkVar=""; 28 | } 29 | function dark(){ 30 | document.body.style.setProperty('--main-color','#6c63ff'); 31 | document.body.style.setProperty('--theme-color','#000'); 32 | document.body.style.setProperty('--sub-text-color','#eee'); 33 | document.body.style.setProperty('--text-color','#fff'); 34 | document.body.style.setProperty('--icon-color','invert(1)'); 35 | document.body.style.setProperty('--color-opacity','0.3'); 36 | //document.body.style.setProperty('--main-dark-icon','brightness(150%)'); 37 | $(".darkTextOnOff").text("ON"); 38 | localStorage.darkVar="on"; 39 | } 40 | rotateVar = 360; 41 | function spinIcon(){ 42 | $(".darkic").css("transform","rotate(" + rotateVar + "deg)"); 43 | rotateVar+=360; 44 | } 45 | 46 | //////////////////////////////////////////////// 47 | //EXTRA DATA TO LOAD 48 | setTimeout(() => { 49 | if(localStorage.darkVar) 50 | dark(); 51 | else 52 | light(); 53 | }, 500); -------------------------------------------------------------------------------- /font/PB.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/PB.ttf -------------------------------------------------------------------------------- /font/PL.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/PL.ttf -------------------------------------------------------------------------------- /font/PM.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/PM.ttf -------------------------------------------------------------------------------- /font/PR.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/PR.ttf -------------------------------------------------------------------------------- /font/ProductSans-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/ProductSans-Black.ttf -------------------------------------------------------------------------------- /font/ProductSans-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/ProductSans-BlackItalic.ttf -------------------------------------------------------------------------------- /font/ProductSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/ProductSans-BoldItalic.ttf -------------------------------------------------------------------------------- /font/ProductSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/ProductSans-Italic.ttf -------------------------------------------------------------------------------- /font/ProductSans-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/ProductSans-LightItalic.ttf -------------------------------------------------------------------------------- /font/ProductSans-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/ProductSans-MediumItalic.ttf -------------------------------------------------------------------------------- /font/ProductSans-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/ProductSans-Thin.ttf -------------------------------------------------------------------------------- /font/ProductSans-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/ProductSans-ThinItalic.ttf -------------------------------------------------------------------------------- /font/Segoe UI Bold Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/Segoe UI Bold Italic.ttf -------------------------------------------------------------------------------- /font/Segoe UI Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/Segoe UI Bold.ttf -------------------------------------------------------------------------------- /font/Segoe UI Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/Segoe UI Italic.ttf -------------------------------------------------------------------------------- /font/Segoe UI.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/font/Segoe UI.ttf -------------------------------------------------------------------------------- /img/data.svg: -------------------------------------------------------------------------------- 1 | data_report -------------------------------------------------------------------------------- /img/mainLogo.svg: -------------------------------------------------------------------------------- 1 | studying -------------------------------------------------------------------------------- /img/subjectS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/update.svg: -------------------------------------------------------------------------------- 1 | update -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | index 9 | 10 | 11 | 12 | 24 | 25 | 30 | 32 | 54 | 55 | 63 | 64 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | 2 | html{ 3 | background: var(--theme-color); 4 | } 5 | ::-webkit-scrollbar { 6 | width: 0px; 7 | } 8 | body{ 9 | height: 100vh; 10 | color: var(--text-color); 11 | width: 100vw; 12 | background: var(--theme-color); 13 | } 14 | .main{ 15 | height:calc(100vh - 80px); 16 | width: 400vw; 17 | background:var(--text-color); 18 | position: fixed; 19 | top: 0; 20 | left: 0; 21 | } 22 | .main div header{ 23 | /*background:#ffffff44;*/ 24 | position: fixed; 25 | top: 0; 26 | height: 60px; 27 | width: 100%; 28 | z-index: 2; 29 | backdrop-filter: blur(10px); 30 | } 31 | /*.main div .heading{ 32 | color:var(--main-color); 33 | padding:15px 20px; 34 | font-family: PR; 35 | font-size: 1.7em; 36 | filter:var(--main-dark-icon); 37 | 38 | }*/ 39 | 40 | 41 | 42 | 43 | .d1, .d2, .d3, .d4{ 44 | width: 100vw; 45 | height:100%; 46 | position: fixed; 47 | top: 0; 48 | overflow-y: scroll; 49 | overflow-x: hidden; 50 | transition: 0.4s ease-in-out background, 0.4s ease-in-out color, 0.1s ease-out left; 51 | } 52 | 53 | .d2{ 54 | background: var(--theme-color); 55 | left: 100vw; 56 | } 57 | .d3{ 58 | background: var(--theme-color); 59 | left: 200vw; 60 | } 61 | 62 | 63 | footer{ 64 | height: 70px; 65 | width: 100vw; 66 | position: fixed; 67 | bottom: 0; 68 | display: flex; 69 | justify-content: space-around; 70 | align-items: center; 71 | backdrop-filter: blur(35px); 72 | background: var(--glass-back); 73 | } 74 | footer img{ 75 | height: 30px; 76 | transition: 0.1s ease-in-out transform; 77 | filter:var(--main-dark-icon); 78 | } 79 | 80 | footer img:active{ 81 | transform: translateY(-10px); 82 | } 83 | @keyframes bubble{ 84 | 0%{ 85 | transform: translate(20px,25px); 86 | } 87 | 25%{ 88 | transform: translate(20px,0px); 89 | } 90 | 50%{ 91 | transform: translate(10px,25px); 92 | } 93 | 75%{ 94 | transform: translate(30px,25px); 95 | } 96 | 100%{ 97 | transform: translate(20px,25px); 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 23 |
24 |
25 |
26 |
27 |
28 |
29 | 33 |
34 |

Total

35 |

36 |
37 |

Motivating

38 | 39 | 40 | 41 |
42 |
43 |

Subject 1

44 |
45 |
46 |
47 |
48 |
49 |

Subject 2

50 |
51 |
52 |
53 |
54 |
55 |

Subject 3

56 |
57 |
58 |
59 |
60 |
61 |

Subject 4

62 |
63 |
64 |
65 |
66 |
67 |

Subject 5

68 |
69 |
70 |
71 |
72 |
73 |

Subject 6

74 |
75 |
76 |
77 |
78 |
79 |

Subject 7

80 |
81 |
82 |
83 |
84 |
85 |

Subject 8

86 |
87 |
88 |
89 |
90 |
91 |

Subject 9

92 |
93 |
94 |
95 |
96 |
97 |

Subject 10

98 |
99 |
100 |
101 |
102 |
103 |
104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 |
113 |
114 |
115 |

Select Subject

116 |

Mathematics

117 |

Physics

118 |

Chemistry

119 |

Biology

120 |

Computer Science

121 |

Computer Science

122 |

Computer Science

123 |

Computer Science

124 |

Computer Science

125 |
126 |
127 | 131 |
132 |

Music for Concentration

133 |

Waltz of flowerWaltz of flower

134 |

Lorem ipsum dolor sitLorem ipsum dolor sit

135 | 136 |
137 |
138 | prev 139 | play 140 | pause 141 |
142 | 143 |
144 | 145 |
146 |

00

147 |

00:00

148 |
149 |

...

150 | Music 151 | 152 | 153 |
154 | stop 155 |
156 | 157 |
158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 | Not completed, This page will release in STUDY 2.0. 187 |
188 |
189 | 190 |
191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 |
203 |
204 |
205 |
206 |
207 | 210 |
211 |

study

212 |

V 1.2.5 BETA
dark rose software

213 |
214 |
215 |
216 | music 217 |

Repeat Music

218 |

ONE

219 |
220 |
221 | music 222 |

Play Music on Startup

223 |

YES

224 |
225 |
226 |
227 | music 228 |

Dark Mode

229 |

OFF

230 |
231 |
232 | 233 | 234 |
235 | music 236 |

Add Custom Subject

237 |

238 | 239 |
240 | 241 |
242 | delete 243 |

Delete All Study Data

244 |

245 | 246 |
247 | 248 | 249 |
250 | 251 | 252 |
253 | music 254 |

About developer

255 |

256 | 257 |
258 | 259 |
260 | music 261 |

Send Feedback

262 |

263 | 264 |
265 |
266 |
267 | music 268 |

Backup & Restore(2.0)

269 |

270 | 271 |
272 | 273 | 274 |
275 | music 276 |

Check for update

277 |

278 | 279 |
280 |
281 |
282 |
283 | 284 |
285 | home 286 | book 287 | time 288 | more 289 |
290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(() => { 2 | $("footer .home").click(() => {home();}) 3 | $("footer .book").click(() => {book();}); 4 | $("footer .time").click(() => {time();}); 5 | $("footer .more").click(() => {more();}); 6 | }); 7 | 8 | const main = ".main"; 9 | const d1 = ".main .d1"; 10 | const d2 = ".main .d2"; 11 | const d3 = ".main .d3"; 12 | const d4 = ".main .d4"; 13 | function home(){ 14 | $(d1).css("left","0vw"); 15 | $(d2).css("left","100vw"); 16 | $(d3).css("left","200vw"); 17 | $(d4).css("left","300vw"); 18 | //$("footer .home .homed").css("stop-color","red"); 19 | document.querySelector("footer .home").src="main/homeON.svg"; 20 | document.querySelector("footer .book").src="main/book.svg"; 21 | document.querySelector("footer .time").src="main/time.svg"; 22 | document.querySelector("footer .more").src="main/more.svg"; 23 | localStorage.lastWin="home"; 24 | } 25 | function book(){ 26 | $(d1).css("left","-100vw"); 27 | $(d2).css("left","0vw"); 28 | $(d3).css("left","100vw"); 29 | $(d4).css("left","200vw"); 30 | document.querySelector("footer .home").src="main/home.svg"; 31 | document.querySelector("footer .book").src="main/bookON.svg"; 32 | document.querySelector("footer .time").src="main/time.svg"; 33 | document.querySelector("footer .more").src="main/more.svg"; 34 | localStorage.lastWin="book"; 35 | } 36 | function time(){ 37 | $(d1).css("left","-200vw"); 38 | $(d2).css("left","-100vw"); 39 | $(d3).css("left","0vw"); 40 | $(d4).css("left","100vw"); 41 | document.querySelector("footer .home").src="main/home.svg"; 42 | document.querySelector("footer .book").src="main/book.svg"; 43 | document.querySelector("footer .time").src="main/timeON.svg"; 44 | document.querySelector("footer .more").src="main/more.svg"; 45 | localStorage.lastWin="time"; 46 | } 47 | function more(){ 48 | $(d1).css("left","-300vw"); 49 | $(d2).css("left","-200vw"); 50 | $(d3).css("left","-100vw"); 51 | $(d4).css("left","0vw"); 52 | document.querySelector("footer .home").src="main/home.svg"; 53 | document.querySelector("footer .book").src="main/book.svg"; 54 | document.querySelector("footer .time").src="main/time.svg"; 55 | document.querySelector("footer .more").src="main/moreON.svg"; 56 | localStorage.lastWin="more"; 57 | } 58 | 59 | 60 | /*LIBRARY FUNCTIONS*/ 61 | var dr = {}; 62 | dr.showWindow = function(selector){ 63 | selector = document.querySelectorAll(selector); 64 | for(i=0;i 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/backup.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /main/book.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/bookON.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/checkForUpdate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /main/feedback.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /main/history.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/homeON.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/more.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/moreON.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/music.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /main/music2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /main/musicOff.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/musicOn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /main/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/prev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/rArrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/stop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/sun.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/time.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/timeON.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /more/aboutApp&dev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About developer 7 | 8 | 9 | 10 | 11 | 16 | 17 | 23 |
24 | back 25 |

About developer

26 |
27 |
28 | 29 | me 30 |

Abinash

31 |

darkrosesoftware@gmail.com
facebook : Abinash.Dark.Rose

32 | 33 | 34 | 35 |
36 | 37 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /more/addSubject.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About developer 7 | 8 | 9 | 10 | 11 | 16 | 17 | 23 |
24 | back 25 |

About developer

26 |
27 |
28 | 29 | 30 |

Add Subject

31 |

Subject Limit is 10. Add your subject Typing the name in the text boxes. If you want to add more subject, go for pro version.

32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 80 | 81 | 82 | 104 | -------------------------------------------------------------------------------- /more/checkForUpdate.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cheor For Update 7 | 8 | 9 | 10 | 11 | 16 | 17 | 23 |
24 | back 25 |

Check for Update

26 |
27 |
28 | 29 |

STUDY

30 |

Version 1.0.1

31 | 32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /more/common.css: -------------------------------------------------------------------------------- 1 | html{ 2 | background: var(--theme-color); 3 | } 4 | body{ 5 | opacity: 0; 6 | padding-bottom: 100px; 7 | background: var(--theme-color); 8 | transition:0.3s transform,0.5s opacity; 9 | } 10 | header{ 11 | position: fixed; 12 | height: 70px; 13 | width: 100%; 14 | background: var(--glass-back); 15 | display: flex; 16 | align-items: center; 17 | backdrop-filter: blur(40px); 18 | } 19 | header img{ 20 | height: 20px; 21 | width: auto; 22 | padding:0 10px 0 20px; 23 | filter: var(--icon-color); 24 | } 25 | header h1{ 26 | font-size: 1.15em; 27 | font-family: PR; 28 | letter-spacing: 1px; 29 | color: var(--text-color); 30 | padding-left: 10px; 31 | } 32 | .content{ 33 | padding-top: 70px; 34 | width: 100%; 35 | height: auto; 36 | } 37 | .logo{ 38 | width: 85%; 39 | display: flex; 40 | margin-right: auto; 41 | margin-left: auto; 42 | margin-bottom: 40px; 43 | margin-top: 50px; 44 | } 45 | .content .appName{ 46 | text-align: center; 47 | font-family: PM; 48 | color: var(--sub-text-color); 49 | letter-spacing: 2px; 50 | padding: 10px; 51 | font-size: 2.5em; 52 | } 53 | .content .version{ 54 | text-align: center; 55 | font-family: PM; 56 | font-size: 1.3em; 57 | color: var(--sub-text-color); 58 | letter-spacing: 1px; 59 | 60 | } 61 | button{ 62 | position: fixed; 63 | width:60%; 64 | margin-left: 20%; 65 | bottom: 5%; 66 | border: none; 67 | outline: none; 68 | background: var(--main-color); 69 | color: white; 70 | padding: 15px 20px; 71 | border-radius: 10px; 72 | font-size: 1em; 73 | letter-spacing: 1px; 74 | font-family: PR; 75 | transition: 0.1s linear transform; 76 | box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2) ; 77 | font-weight: bold; 78 | } 79 | 80 | button:active{ 81 | transform: scale(1.03); 82 | } 83 | -------------------------------------------------------------------------------- /more/deleteAll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Check For Update 7 | 8 | 9 | 10 | 11 | 16 | 17 | 23 |
24 | back 25 |

Delete Study Data

26 |
27 |
28 | 29 |

!

30 |

You will no longer be able to see old data. Do you really want to clear all your data from your study application?

31 | 32 |
33 | 34 | 35 | 55 | 56 | -------------------------------------------------------------------------------- /music.js: -------------------------------------------------------------------------------- 1 | //On Load the page set the music in the localStorage 2 | var musicData = {}; 3 | musicData.name = [ 4 | "Waltz of the Flowers Tchaikovsky", 5 | "Countryside - woods - bird - Giswil, Switzerland.", 6 | "Nature park ambience - Lynn Canyon - medium waterfall - medium close perspective - light activity - Vancouver.", 7 | "Quiet street ambience - Summer night slum atmosphere with many crickets.", 8 | "Colombian Caribbean coast - Moderate waves washing on beach, far perspective (2).", 9 | " Rain - summer rain - forest - under the tree - subtle birds - stereo.", 10 | "Wood burning stove fire hiss" 11 | ]; 12 | musicData.description = [ 13 | "The \"Waltz of the Flowers\" (1892) is a piece of orchestral music from the second act of The Nutcracker, a ballet composed by Tchaikovsky.", 14 | "Countryside - woods - bird - Giswil, Switzerland.", 15 | "Nature park ambience - Lynn Canyon - medium waterfall - medium close perspective - light activity - Vancouver.", 16 | "Quiet street ambience - Summer night slum atmosphere with many crickets.", 17 | "Colombian Caribbean coast - Moderate waves washing on beach, far perspective (2).", 18 | " Rain - summer rain - forest - under the tree - subtle birds - stereo.", 19 | "Wood burning stove fire hiss" 20 | ]; 21 | 22 | if(!localStorage.currentMusic) localStorage.currentMusic = "0"; 23 | if(!localStorage.currentMusicTime) localStorage.currentMusicTime = 0; 24 | function setMusicDesc(){ 25 | $(".d2 .musicWin .content #musicName").text(musicData.name[localStorage.currentMusic]); 26 | $(".d2 .musicWin .content #musicDesc").text(musicData.description[localStorage.currentMusic]); 27 | } 28 | 29 | 30 | var music = document.getElementById("m1"); 31 | music.setAttribute('src', "music/"+localStorage.currentMusic+".mp3"); 32 | music.currentTime = localStorage.currentMusicTime; 33 | 34 | //MUSIC CONTROL 35 | var isPlaying = false; 36 | function palyPause(x){ 37 | isPlaying = !(isPlaying); 38 | if(isPlaying){ 39 | //x.src="main/pause.svg"; 40 | document.getElementById("playPauseButton").src="main/pause.svg"; 41 | document.getElementById("musicIcon").src="main/musicOn.svg"; 42 | music.play(); 43 | }else{ 44 | //x.src = "main/play.svg"; 45 | document.getElementById("playPauseButton").src="main/play.svg"; 46 | document.getElementById("musicIcon").src="main/musicOff.svg"; 47 | music.pause(); 48 | } 49 | if(x==0){ 50 | isPlaying=true; 51 | music.play(); 52 | document.getElementById("playPauseButton").src="main/pause.svg"; 53 | document.getElementById("musicIcon").src="main/musicON.svg"; 54 | } 55 | if(x==1){ 56 | isPlaying=true; 57 | music.pause(); 58 | document.getElementById("playPauseButton").src="main/play.svg"; 59 | document.getElementById("musicIcon").src="main/musicOFF.svg"; 60 | isPlaying = false; 61 | } 62 | //x.src = "main/".concat((isPlaying)?"pause.svg":"play.svg"); 63 | } 64 | 65 | var mn = 7 // Numbers f music 66 | function prev(elem){ 67 | var x = localStorage.currentMusic; 68 | if(--x<0) x=(mn+7)%mn; 69 | localStorage.currentMusic = x; 70 | music.setAttribute('src', "music/"+x+".mp3"); 71 | palyPause(0); 72 | setMusicDesc(); 73 | 74 | } 75 | function next(elem){ 76 | var x = localStorage.currentMusic; 77 | x=++x%mn; 78 | localStorage.currentMusic = x; 79 | music.setAttribute('src', "music/"+x+".mp3"); 80 | palyPause(0); 81 | setMusicDesc(); 82 | 83 | } 84 | 85 | 86 | 87 | 88 | function musicSliderChange(value){ 89 | music.currentTime = music.duration*value/100; 90 | } 91 | 92 | 93 | 94 | 95 | //Set the slider 96 | var slider = document.getElementById("musicRange"); 97 | function setSlider(){ 98 | var time = Math.floor((music.currentTime/music.duration)*100); 99 | slider.value = time; 100 | if(music.ended){ 101 | if(localStorage.repeatMusic==1) music.play(); 102 | if(localStorage.repeatMusic==2) next(); 103 | if(localStorage.repeatMusic == 0){ 104 | isPlaying = false; 105 | document.getElementById("playPauseButton").src="main/play.svg"; 106 | document.getElementById("musicIcon").src="main/musicOff.svg"; 107 | } 108 | } 109 | localStorage.currentMusicTime = music.currentTime; 110 | setTimeout(setSlider, 1000); 111 | } 112 | setSlider(); 113 | 114 | 115 | 116 | 117 | 118 | //MUSIC SETTINGS 119 | var rMusic = localStorage.repeatMusic; 120 | if(!localStorage.repeatMusic){localStorage.repeatMusic=2} 121 | function repeatMusic(){ 122 | rMusic=++rMusic%3; 123 | localStorage.repeatMusic = rMusic; 124 | setRepeatMusicData(); 125 | } 126 | 127 | 128 | 129 | function setRepeatMusicData(){ 130 | switch(parseInt(localStorage.repeatMusic)){ 131 | case 0 : $("#repeatMusicIndc").text("NO REPEAT");break; 132 | case 1 : $("#repeatMusicIndc").text("REPEAT ONE");break; 133 | case 2 : $("#repeatMusicIndc").text("REPEAT ALL");break; 134 | default : alert("Something Went Wrong. Try Restarting The browser"); 135 | } 136 | } 137 | 138 | 139 | 140 | /////////////////////////////////////////////////////////// 141 | ///////STARTUP MUSIC SETTINGS 142 | 143 | var startupMusicVar = localStorage.startupMusic; 144 | setTimeout(() => { 145 | if(startupMusicVar) 146 | document.getElementById("startUpMusic").innerText = "OFF"; 147 | else 148 | document.getElementById("startUpMusic").innerText = "ON"; 149 | }, 500); 150 | function startupMusic(){ 151 | startupMusicVar = !(startupMusicVar); 152 | if(startupMusicVar){ 153 | document.getElementById("startUpMusic").innerText = "OFF"; 154 | localStorage.startupMusic = "OK"; 155 | }else{ 156 | document.getElementById("startUpMusic").innerText = "ON"; 157 | localStorage.startupMusic = ""; 158 | } 159 | } 160 | 161 | 162 | 163 | 164 | ////////////////////////////////////////////////////// 165 | $(document).ready(function(){ 166 | setRepeatMusicData(); 167 | setMusicDesc(); 168 | }); 169 | 170 | -------------------------------------------------------------------------------- /music/0.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/music/0.mp3 -------------------------------------------------------------------------------- /music/1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/music/1.mp3 -------------------------------------------------------------------------------- /music/2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/music/2.mp3 -------------------------------------------------------------------------------- /music/3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/music/3.mp3 -------------------------------------------------------------------------------- /music/4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/music/4.mp3 -------------------------------------------------------------------------------- /music/5.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/music/5.mp3 -------------------------------------------------------------------------------- /music/6.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeAbinash/Study/901dbcd302dbe9c124c8fdecca2aa31997c5538b/music/6.mp3 -------------------------------------------------------------------------------- /music/Music List.txt: -------------------------------------------------------------------------------- 1 | 0.mp3 -> Waltz of flower 2 | 1.mp3 -> Countryside - woods - bird - Giswil, Switzerland. 3 | 2.mp3 -> Nature park ambience - Lynn Canyon - medium waterfall - medium close perspective - light activity - Vancouver. 4 | 3.mp3 -> Quiet street ambience - Summer night slum atmosphere with many crickets. 5 | 4.mp3 -> Colombian Caribbean coast - Moderate waves washing on beach, far perspective (2). 6 | 5.mp3 -> Rain - summer rain - forest - under the tree - subtle birds - stereo. 7 | 6.mp3 -> Wood burning stove fire hiss 8 | 9 | 10 | -------------------------------------------------------------------------------- /start.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Introduction to study 8 | 126 | 127 | 128 |
129 |
130 |

Study

131 |

Version 1.2.5

132 |
133 |
134 |
135 | 136 | 137 |
138 | 139 | 176 | 177 | 183 | --------------------------------------------------------------------------------