16 |
17 |
18 |
19 |
Meditation Helper
20 |
21 |
22 |
![]()
23 |
28 |
29 |
30 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
Total 00:
43 |
00:
44 |
00
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/page2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
Document
11 |
12 |
13 |
Mediation Helper
14 |
15 |
16 |
Meditation Timer
17 |
18 |
19 |
20 | 00
21 | Hours
22 |
23 |
24 | 00
25 | Minutes
26 |
27 |
28 | 00
29 | Seconds
30 |
31 |
32 |
33 |
34 |
please choose hrs and mins before pressing confirm!!!
35 |
36 |
hr
37 |
38 |
39 |
0 hr
40 |
1 hr
41 |
2 hr
42 |
3 hr
43 |
4 hr
44 |
45 |
46 |
47 |
min
48 |
49 |
50 |
0 min
51 |
0.1 min
52 |
10 min
53 |
20 min
54 |
40 min
55 |
56 |
57 |
58 |
59 |
60 |
61 |
Time Record
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/page2_bell.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HsuSungTing/Meditation-Helper-Website/7b520c2929a7c2e747fa09c8b95cc68aea693f9a/page2_bell.mp3
--------------------------------------------------------------------------------
/page2_img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HsuSungTing/Meditation-Helper-Website/7b520c2929a7c2e747fa09c8b95cc68aea693f9a/page2_img.jpg
--------------------------------------------------------------------------------
/script_page1.js:
--------------------------------------------------------------------------------
1 | let song_ary=[{
2 | name:"I. Start to Feel Your Body",
3 | img:"main_img1.jpg",
4 | path:"guide_part1.mp3"
5 | },{
6 | name:"II. Connect to Your Being",
7 | img:"main_img2.jpg",
8 | path:"guide_part2.mp3"
9 | },{
10 | name:"III. The Power of Being Now",
11 | img:"main_img3.jpg",
12 | path:"guide_part3.mp3"
13 | }];
14 | let track_img=document.querySelector("#track_img");
15 | let track_music=document.querySelector('#play_mp3');
16 | let track_title=document.querySelector('#left_title');
17 | let icon_switch=document.querySelector('#play_mp3');
18 | let slider=document.querySelector('#duration_btn');
19 | let vol_bar=document.querySelector('#vol_btn');
20 | let vol_value=document.querySelector('#vol_value');
21 |
22 | let auto_bool=0;
23 | let start_bool=0;
24 | let guide_bool=0;
25 |
26 | //-----------------------------
27 | let track = document.createElement('audio');
28 | let track_ct=0;
29 | //document.body.style.backgroundImage = "url('yoga_1200.jpg')";
30 | document.body.style.backgroundSize="100% 100%"
31 | load_data(track_ct);
32 |
33 | function load_data(track_ct){
34 | track.src=song_ary[track_ct].path;
35 | track_img.src=song_ary[track_ct].img;
36 | track_title.innerHTML=song_ary[track_ct].name;
37 | let timer = setInterval(background_run, 1000);
38 | track.load();//好像會重制
39 | }
40 | //two function use setinterval, one is in load_data, the other is in playsong()
41 | function start_or_stop(){
42 | if(start_bool==0){
43 | play_song();
44 | start_bool=1;
45 | }
46 | else{
47 | stop_song();
48 | start_bool=0;
49 | }
50 | }
51 | function play_song(){
52 | if(int!==null){
53 | clearInterval(int);
54 | }
55 | //開始計時，以每秒一次去執行display
56 | int = setInterval(displayTimer,1000);//window.setinterval()也可以
57 | track.play();
58 | icon_switch.innerHTML='
';
59 | }
60 | function volume_change(){
61 | //先拉條，拉條一動就會直接改動到value
62 | vol_value.innerHTML=vol_bar.value;
63 | vol_bar.innerHTML=vol_bar.value;
64 | track.volume=vol_bar.value/100;//track.volumeinput的值是0到1
65 | }
66 | function stop_song(){
67 | track.pause();
68 | clearInterval(int);//暫停計時，暫時不以每秒一次去執行display
69 | icon_switch.innerHTML='
';
70 | }
71 |
72 | function pre_song(){
73 | if(track_ct!=0){
74 | track_ct--;
75 | if(track_ct==0){
76 | document.body.style.backgroundImage = "url('main_img1.jpg')";
77 | }
78 | else if(track_ct==1){
79 | document.body.style.backgroundImage = "url('main_img2.jpg')";
80 | }
81 | else if(track_ct==2){
82 | document.body.style.backgroundImage = "url('main_img3.jpg')";
83 | }
84 | }
85 | load_data(track_ct);
86 | start_bool=0;
87 | icon_switch.innerHTML='
';
88 | stop_song();
89 | }
90 |
91 | function next_song(){
92 | if(track_ct<2){
93 | track_ct++;
94 | }
95 | if(track_ct==0){
96 | document.body.style.backgroundImage = "url('main_img1.jpg')";
97 | }
98 | else if(track_ct==1){
99 | document.body.style.backgroundImage = "url('main_img2.jpg')";
100 | }
101 | else if(track_ct==2){
102 | document.body.style.backgroundImage = "url('main_img3.jpg')";
103 | }
104 | load_data(track_ct);
105 | start_bool=0;
106 | icon_switch.innerHTML='
';
107 | stop_song();
108 | }
109 |
110 | function auto_play(){
111 | auto_bool=1;
112 | track_ct=0;//從頭播放
113 | load_data(track_ct);
114 | stop_song();
115 | time_set_zero();
116 | play_song();
117 | }
118 |
119 | function change_time(){
120 | stop_song();
121 | let slider_position = track.duration * (slider.value / 10000);
122 | track.currentTime = slider_position;
123 | stop_song();
124 | play_song();
125 | }
126 |
127 | function background_run() {
128 | let position = 0;
129 |
130 | // console.log(track.currentTime);
131 | // console.log("track.ended"+track.ended);
132 | // console.log("auto_bool"+auto_bool);
133 | // console.log("start_bool:"+start_bool);
134 | if (track.duration!=0) {
135 | position = track.currentTime * (10000 / track.duration);
136 | slider.value = position;
137 | }
138 | if(track.ended&&auto_bool&&track_ct<2){
139 | next_song();
140 | start_or_stop();
141 | }
142 | else if(track_ct==2&&track.ended==1){
143 | track.pause();
144 | icon_switch.innerHTML='
';
145 | }
146 | }
147 |
148 | //--------------------timer-------------------------
149 | let hr_ob=document.querySelector("#hr_id");
150 | let min_ob=document.querySelector("#min_id");
151 | let sec_ob=document.querySelector("#sec_id");
152 | let int = null;
153 | let hr=0,min=0,sec=0;
154 |
155 | function time_set_zero(){
156 | hr_ob.innerHTML="Total 00:";
157 | min_ob.innerHTML="00:";
158 | sec_ob.innerHTML="00";//finish
159 | sec=0,min=0,hr=0;
160 | }
161 | document.getElementById("reset_id").addEventListener("click", ()=>{
162 | stop_song();
163 | time_set_zero();
164 | });
165 | function displayTimer(){
166 | sec++;
167 | if(sec>=60){
168 | min++;
169 | sec-=60;
170 | }
171 | if(min>=60){
172 | hr++;
173 | min-=60;
174 | }
175 | if(sec>=10){
176 | sec_ob.innerHTML=sec;
177 | }
178 | else{
179 | sec_ob.innerHTML="0"+sec;
180 | }
181 | if(min>=10){
182 | min_ob.innerHTML=min+":";
183 | }
184 | else{
185 | min_ob.innerHTML="0"+min+":";
186 | }
187 | if(hr>=10){
188 | hr_ob.innerHTML="Total"+hr+":";
189 | }
190 | else{
191 | hr_ob.innerHTML="Total 0"+hr+":";
192 | }
193 | }
194 | //-----------showing toutorial------------
195 | function show_guide(){
196 | if(track_ct==0&&guide_bool==0){//原本是非導覽模式
197 | track_img.src="instruction1.jpg";
198 | guide_bool=1;
199 | }
200 | else if(track_ct==0&&guide_bool==1){//原本是導覽模式
201 | track_img.src="main_img1.jpg";
202 | guide_bool=0;
203 | }
204 |
205 | if(track_ct==1&&guide_bool==0){//原本是非導覽模式
206 | track_img.src="instruction2.jpg";
207 | guide_bool=1;
208 | }
209 | else if(track_ct==1&&guide_bool==1){//原本是導覽模式
210 | track_img.src="main_img2.jpg";
211 | guide_bool=0;
212 | }
213 |
214 | if(track_ct==2&&guide_bool==0){//原本是非導覽模式
215 | track_img.src="instruction3.jpg";
216 | guide_bool=1;
217 | }
218 | else if(track_ct==2&&guide_bool==1){//原本是導覽模式
219 | track_img.src="main_img3.jpg";
220 | guide_bool=0;
221 | }
222 | }
--------------------------------------------------------------------------------
/script_page2.js:
--------------------------------------------------------------------------------
1 | let hr=0,min=0,sec=0;
2 | let hr_ob=document.querySelector("#hr_id");
3 | let min_ob=document.querySelector("#min_id");
4 | let sec_ob=document.querySelector("#sec_id");
5 | let stop_resume=document.querySelector('#stop_btn');
6 | let track=document.createElement("audio");
7 | let record_box=document.getElementById("keep_time");
8 | record_box.innerText="Time Record";
9 | track.src="page2_bell.mp3";
10 | // let stop_btn_ob=document.querySelector("#stop_btn");
11 | // let reset_btn_ob=document.querySelector("#reset_btn");
12 | // let start_btn_ob=document.querySelector("#start_btn_id");
13 | //---------------------------------------------
14 | let stop_bool=0;//stop鍵未觸發
15 | let int;
16 | var count_down_sec;
17 | let conform_bool=0;//控制start與conform按鍵
18 | let min_set_bool=0,hr_set_bool=0;//if min and hr are both set
19 | let med_dura_hr=0,med_dura_min=0;//紀錄每次input的冥想時間總共多長
20 | function start(){
21 | if(int!=null){
22 | clearInterval(int);
23 | }
24 | if(min+hr+sec!=0){
25 | int=setInterval(display_time, 1000);
26 | }
27 | else if(min+hr+sec==0){
28 | reset();
29 | }
30 | }
31 | function stop(){
32 | if(stop_bool==0){
33 | clearInterval(int);//真的暫停
34 | stop_resume.innerHTML="resume";
35 | stop_bool=1;
36 | }
37 | else if(stop_bool==1){
38 | int=setInterval(display_time, 1000);//重新開始
39 | stop_resume.innerHTML="stop";
40 | stop_bool=0;
41 | }
42 | }
43 | function reset(){
44 | hr_ob.innerHTML="00";
45 | min_ob.innerHTML="00";
46 | sec_ob.innerHTML="00";//finish
47 | sec=0,min=0,hr=0;
48 | min_set_bool=0,hr_set_bool=0,conform_bool=0,stop_bool=0;
49 | clearInterval(int);
50 | document.getElementById('start_btn_id').style.display="flex";
51 | document.getElementById('stop_btn').style.display="none";
52 | document.getElementById('reset_btn').style.display="none";
53 | dropbtn_min_ob.innerHTML="min";
54 | dropbtn_hr_ob.innerHTML="hr";
55 | }
56 |
57 | function display_time(){
58 | if(sec==0&&min==0&&hr==0){
59 | getTime();
60 | reset();
61 | track.load();
62 | track.play();
63 | }
64 | else if(sec==0&&min!=0){//需要從min借位
65 | if(min>0){
66 | min--;
67 | sec=59;
68 | }
69 | }
70 | else if(sec==0&&min==0){//需要從hr借位
71 | hr--;
72 | min=59;
73 | sec=59;
74 | }
75 | else{//不用借位直接扣
76 | sec--;
77 | }
78 | //--------------
79 | if(sec>=10){
80 | sec_ob.innerHTML=sec;
81 | }
82 | else{
83 | sec_ob.innerHTML="0"+sec;
84 | }
85 | if(min>=10){
86 | min_ob.innerHTML=min;
87 | }
88 | else{
89 | min_ob.innerHTML="0"+min;
90 | }
91 | if(hr>=10){
92 | hr_ob.innerHTML=hr;
93 | }
94 | else{
95 | hr_ob.innerHTML="0"+hr;
96 | }
97 | }
98 | //-------------------------------
99 | function sub_Function_min() {
100 | document.getElementById("sub_dropdown_min").classList.toggle("show");
101 | }
102 | function sub_Function_hr() {
103 | document.getElementById("sub_dropdown_hr").classList.toggle("show");
104 | }
105 |
106 | function showDiv() {
107 | if(conform_bool==0){
108 | document.getElementById('dropbtn_hr').style.display = "block";
109 | document.getElementById('dropbtn_min').style.display = "block";
110 | conform_bool=1;//表示要切換成conform
111 | start_btn.innerHTML="confirm";
112 | document.getElementById('stop_btn').style.display="none";
113 | document.getElementById('reset_btn').style.display="none";
114 | }
115 | else if(hr_set_bool==0||min_set_bool==0){//兩個人當中有一人沒設定完成
116 | if(conform_bool==1){
117 | document.getElementById('warn_id').style.display = "flex";
118 | }
119 | }
120 | else if(conform_bool&&hr_set_bool&&min_set_bool){//全部設定完成
121 | start();
122 | conform_bool=0;
123 | start_btn.innerHTML="start";
124 | //兩個選單也要自動fold
125 | fold_min_menu();
126 | fold_hr_menu();
127 | document.getElementById('dropbtn_hr').style.display = "none";
128 | document.getElementById('dropbtn_min').style.display = "none";
129 | if(min+sec+hr==0){
130 | reset();
131 | }
132 | else{
133 | document.getElementById('stop_btn').style.display="flex";
134 | document.getElementById('reset_btn').style.display="flex";
135 | document.getElementById('start_btn_id').style.display="none";
136 | document.getElementById('warn_id').style.display = "none";
137 | }
138 | }
139 | }
140 |
141 |
142 | //--------------input time-------
143 | let dropbtn_min_ob=document.querySelector("#dropbtn_min");
144 | let dropbtn_hr_ob=document.querySelector("#dropbtn_hr");
145 | let start_btn=document.querySelector("#start_btn_id");
146 |
147 | function f1_min(){
148 | dropbtn_min_ob.innerHTML="0.1min";
149 | // min=1;
150 | sec=6;
151 | med_dura_min=1/10;
152 | min_set_bool=1;
153 | fold_min_menu();
154 | }
155 | function f5_min(){
156 | dropbtn_min_ob.innerHTML="0 min";
157 | // min=1;
158 | min=0;
159 | med_dura_min=1;
160 | min_set_bool=1;
161 | fold_min_menu();
162 | }
163 | function f2_min(){
164 | dropbtn_min_ob.innerHTML="10 min";
165 | min=10;
166 | med_dura_min=10;
167 | min_set_bool=1;
168 | fold_min_menu();
169 | }
170 | function f3_min(){
171 | dropbtn_min_ob.innerHTML="20 min";
172 | min=20;
173 | med_dura_min=20;
174 | min_set_bool=1;
175 | fold_min_menu();
176 | }
177 | function f4_min(){
178 | dropbtn_min_ob.innerHTML="40 min";
179 | min=40;
180 | med_dura_min=40;
181 | min_set_bool=1;
182 | fold_min_menu();
183 | }
184 |
185 |
186 | function f1_hr(){
187 | dropbtn_hr_ob.innerHTML="0 hr";
188 | hr=0;
189 | med_dura_hr=0;
190 | hr_set_bool=1;
191 | fold_hr_menu();
192 | }
193 | function f2_hr(){
194 | dropbtn_hr_ob.innerHTML="1 hr";
195 | hr=1;
196 | med_dura_hr=1;
197 | hr_set_bool=1;
198 | fold_hr_menu();
199 | }
200 | function f3_hr(){
201 | dropbtn_hr_ob.innerHTML="2 hr";
202 | hr=2;
203 | med_dura_hr=2;
204 | hr_set_bool=1;
205 | fold_hr_menu();
206 | }
207 | function f4_hr(){
208 | dropbtn_hr_ob.innerHTML="3 hr";
209 | hr=3;
210 | med_dura_hr=3;
211 | hr_set_bool=1;
212 | fold_hr_menu();
213 | }
214 | function f5_hr(){
215 | dropbtn_hr_ob.innerHTML="4 hr";
216 | hr=4;
217 | med_dura_hr=4;
218 | hr_set_bool=1;
219 | fold_hr_menu();
220 | }
221 |
222 | function fold_min_menu(){
223 | var dropdowns = document.getElementsByClassName("dropdown-content_min");
224 | for (var i = 0; i < dropdowns.length; i++) {
225 | var openDropdown = dropdowns[i];
226 | if (openDropdown.classList.contains('show')) {
227 | openDropdown.classList.remove('show');
228 | }
229 | }
230 | }
231 |
232 | function fold_hr_menu(){
233 | var dropdowns = document.getElementsByClassName("dropdown-content_hr");
234 | for (var i = 0; i < dropdowns.length; i++) {
235 | var openDropdown = dropdowns[i];
236 | if (openDropdown.classList.contains('show')) {
237 | openDropdown.classList.remove('show');
238 | }
239 | }
240 | }
241 | //----紀錄時間用-----
242 | function getTime(){
243 | let date=new Date();
244 | const month = ["January","February","March","April",
245 | "May","June","July","August","September",
246 | "October","November","December"];
247 | let Y=date.getFullYear();
248 | let M=month[date.getMonth()];
249 | let D=date.getDate();
250 | let hour=date.getHours();
251 | let minute=date.getMinutes();
252 | if(med_dura_hr+med_dura_min!=0){
253 | record_box.innerText+="\n"+"Finish "+med_dura_hr+"hr "+med_dura_min+"min meditation "+"on "+Y+" "+M+" "+D+", at "+hour+":"+minute;
254 | }
255 |
256 | }
257 |
--------------------------------------------------------------------------------
/style_page1.css:
--------------------------------------------------------------------------------
1 | body{
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | flex-direction: column;
6 | font-family: Arial, Helvetica, sans-serif;
7 | /*background-color: rgb(255, 255, 255);*/
8 | background-image: url("main_img1.jpg");
9 | background-repeat: no-repeat;
10 | }
11 | #link_id{
12 | position: absolute;
13 | background-color: coral;
14 | text-align: center;
15 | color:rgb(255, 255, 255);
16 | font-size: 20px;
17 | font-weight: bolder;
18 | width: 120px;
19 | height: 50px;
20 | top: 30px;
21 | left: 10px;
22 | border-radius: 15px;
23 | border: solid white 2px;
24 | }
25 | .big_square{
26 | display: flex;
27 | align-items: center;
28 | justify-content: center;
29 | flex-direction: column;
30 | flex-wrap: wrap;
31 | top: 400px;
32 | height: 450px;
33 | width: 1000px;
34 | background-color: rgba(255, 127, 80, 0.65);
35 | margin: 100px;
36 | padding: 10px;
37 | border-radius: 20px;
38 | }
39 | .right_part{
40 | display: flex;
41 | align-items: center;
42 | justify-content: center;
43 | flex-direction: column;
44 | flex-wrap: wrap;
45 | position: relative;
46 | }
47 | .left_part{
48 | display: flex;
49 | align-items: center;
50 | justify-content: center;
51 | flex-direction: column;
52 | flex-wrap: wrap;
53 | }
54 | .meditation_app{
55 | position: relative;
56 | font-size: 30px;
57 | color: aliceblue;
58 | font-weight: bold;
59 | height:fit-content;
60 | width:fit-content;
61 | /*background-color: #f9583f;*/
62 | border-radius: 20px;
63 | /*border: solid 2px white;*/
64 | top: 10px;
65 | padding: 2px;
66 | }
67 | #track_img{
68 | height: 300px;
69 | /* display: inline-block; */
70 | }
71 |
72 | #vol_value{
73 | width: fit-content;
74 | font-weight: bolder;
75 | font-size: 20px;
76 | height: fit-content;
77 | color: aliceblue;
78 | display: inline;
79 | position: relative;
80 | left: -5px;
81 | }
82 |
83 | input[type="range"]#vol_btn {
84 | -webkit-appearance: none;
85 | position: relative;
86 | width: 200px;
87 | height:20px;
88 | overflow: hidden;
89 | cursor: pointer;
90 | outline: none;
91 | background:none;
92 | border-bottom: 10px;
93 | margin-bottom: 100px;
94 | }
95 |
96 | input[type="range"]#vol_btn::-webkit-slider-thumb {
97 | top:-5px;
98 | position: relative;
99 | -webkit-appearance: none;
100 | height: 15px;
101 | width: 15px;
102 | background: #f9f7f6;
103 | border: solid 1px #5f5f5f;
104 | border-radius: 50%;
105 | cursor: pointer;
106 | }
107 | input[type="range"]#vol_btn::-webkit-slider-runnable-track {
108 | -webkit-appearance: none;
109 | height: 2px;
110 | background: rgb(243, 239, 239);
111 | }
112 |
113 | #vol_icon{
114 | font-size: 20px;
115 | height: fit-content;
116 | width: fit-content;
117 | padding: 3px;
118 | color: aliceblue;
119 | /*background-color: #e14414;*/
120 | }
121 | #sub_vol{
122 | display: flex;
123 | align-items: center;
124 | justify-content: center;
125 | }
126 | #sub_med{
127 | display: flex;
128 | align-items: center;
129 | justify-content: center;
130 | flex-wrap: wrap;
131 | }
132 | #men_icon{
133 | position: relative;
134 | top: 72px;
135 | left: -30px;
136 | font-size: 20px;
137 | color: aliceblue;
138 | }
139 | /*一群按鈕 右側*/
140 | .btns{
141 | display: flex;
142 | align-items: center;
143 | justify-content: center;
144 | flex-wrap: wrap;
145 | }
146 | .left_title_class{
147 | display: flex;
148 | align-items: center;
149 | justify-content: center;
150 | flex-wrap: wrap;
151 | top: 20px;
152 | position: relative;
153 | color: rgb(255, 255, 255);
154 | font-size: 30px;
155 | width: fit-content;
156 | height: fit-content;
157 | border-radius: 10px;
158 | font-weight: bolder;
159 | }
160 |
161 | input[type="range"]#duration_btn {
162 | -webkit-appearance: none;
163 | position: relative;
164 | width: 350px;
165 | height:20px;
166 | overflow: hidden;
167 | cursor: pointer;
168 | outline: none;
169 | background:none;
170 | border-bottom: 10px;
171 | margin-bottom: 100px;
172 | top: 20px;
173 | position: relative;
174 | }
175 |
176 | input[type="range"]#duration_btn::-webkit-slider-thumb {
177 | top:-5px;
178 | position: relative;
179 | -webkit-appearance: none;
180 | height: 17px;
181 | width: 17px;
182 | background: #444241;
183 | border-radius: 50%;
184 | cursor: pointer;
185 | }
186 | input[type="range"]#duration_btn::-webkit-slider-runnable-track {
187 | -webkit-appearance: none;
188 | height: 4px;
189 | background: rgb(243, 239, 239);
190 | }
191 |
192 | .btns button{
193 | border-radius: 50%;
194 | width: 30px;
195 | height: 30px;
196 | background-color: #5f5f5f;
197 | color: #f9f7f6;
198 | margin: 20px 7px 20px 7px ;
199 | border: #f9f7f6 solid 2px;
200 | }
201 | .time_class{
202 | position: relative;
203 | display: flex;
204 | align-items: center;
205 | justify-content: center;
206 | flex-wrap: wrap;
207 | font-size: 30px;
208 | font-weight: bold;
209 | color: aliceblue;
210 | margin-top: 2px;
211 | top: -40px
212 | }
213 | .bottom_btn{
214 | display: flex;
215 | align-items: center;
216 | justify-content: center;
217 | }
218 | .bottom_btn button{
219 | top: -25px;
220 | margin: 15px;
221 | font-size: 25px;
222 | width: fit-content;
223 | height: fit-content;
224 | background-color:rgb(210, 62, 91);
225 | border-radius: 15px;
226 | color: aliceblue;
227 | border: solid aliceblue 3px;
228 | position: relative;
229 | }
230 | .bottom_btn button:active{
231 | background-color: aliceblue;
232 | color: rgb(210, 62, 91);
233 | border: solid rgb(210, 62, 91) 3px;;
234 | }
235 | .bottom_btn #auto_btn{
236 | position: relative;
237 | left: -5px;
238 | }
239 | .bottom_btn #reset_id{
240 | position: relative;
241 | left: 5px;
242 | }
243 |
--------------------------------------------------------------------------------
/style_page2.css:
--------------------------------------------------------------------------------
1 | body{
2 | background-image: url("page2_img.jpg");
3 | font-family: Arial, Helvetica, sans-serif;
4 | background-repeat: no-repeat;
5 | background-size: 100%,100%;
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | flex-wrap: wrap;
10 | flex-direction: column;
11 | height: 100vh;
12 | }
13 | #link_id{
14 | position: absolute;
15 | background-color: rgb(255, 255, 255);
16 | text-align: center;
17 | color: rgb(21, 119, 8);
18 | font-size: 20px;
19 | font-weight: bolder;
20 | width: 120px;
21 | height: 50px;
22 | top: 30px;
23 | left: 10px;
24 | border-radius: 15px;
25 | border: solid rgb(2, 82, 30);
26 | }
27 | .upper_title{
28 | color: azure;
29 | text-shadow: 4px 4px 8px rgba(8, 8, 8, 0.7);
30 | font-size: 40px;
31 | font-weight: bolder;
32 | display: flex;
33 | justify-content: center;
34 | align-items: center;
35 | position: relative;
36 | top: 40px;
37 | }
38 | .upper_title i{
39 | font-size: 25px;
40 | position: relative;
41 | left: -15px;
42 | }
43 | .hr_calss,.min_calss,.sec_calss{
44 | height: 200px;
45 | width: 180px;
46 | background-color:rgb(144, 238, 144,0.7);
47 | font-size: 100px;
48 | text-align: center;
49 | display: flex;
50 | justify-content: center;
51 | align-items: center;
52 | flex-wrap: wrap;
53 | flex-direction: column;
54 | margin: 10px;
55 | color: aliceblue;
56 | text-shadow: 4px 4px 8px rgba(8, 8, 8, 0.3);
57 | }
58 | #hr_unit,#min_unit,#sec_unit{
59 | font-size: 30px;
60 | height: fit-content;
61 | width: 180px;
62 | background-color: rgba(80, 245, 159,0.9);
63 | position: relative;
64 | top:30px;
65 | text-shadow: 4px 4px 8px rgba(12, 12, 12, 0.3);
66 | letter-spacing: 8px;
67 | }
68 | .time_class{
69 | position: relative;
70 | display: flex;
71 | justify-content: center;
72 | align-items: center;
73 | }
74 | #warn_id{
75 | font-size: 25px;
76 | color: red;
77 | font-weight: bold;
78 | text-shadow: 4px 4px 8px rgba(8, 8, 8, 0.3);
79 | }
80 | .btn_class{
81 | display: flex;
82 | justify-content: center;
83 | align-items: center;
84 | flex-direction: column;
85 | }
86 | /*---------------------------*/
87 | #dropbtn_hr,#dropbtn_min {
88 | font-weight: bold;
89 | background-color: #fafefa;
90 | color: rgb(33, 88, 19);
91 | font-size: 30px;
92 | border: none;
93 | cursor: pointer;
94 | height: 50px;
95 | width: 100px;
96 | text-align: center;
97 | position: relative;
98 | top:20px;
99 | }
100 |
101 | #dropbtn_hr:hover,#dropbtn_min:hover {
102 | background-color: #0f370f;
103 | color: rgb(248, 248, 248);
104 | }
105 |
106 | .dropdown-content {
107 | position: relative;
108 | display: inline-block;/*https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1*/
109 |
110 | }
111 |
112 | .dropdown-content_hr,.dropdown-content_min {
113 | display: none;
114 | position: absolute;
115 | background-color: rgb(241, 241, 241);
116 | min-width: 160px;
117 | height: fit-content;
118 | overflow: auto;
119 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
120 | z-index: 1;
121 | margin: 0px 0px 0px 0px;
122 | /* position: relative;
123 | top:20px; */
124 | }
125 | .set_position{
126 | position: relative;
127 | top: 10px;
128 | }
129 | .dropdown-content_hr p,.dropdown-content_min p {
130 | color: black;
131 | padding: 12px 16px;
132 | text-decoration: none;
133 | display: block;
134 | margin: 0px 0px 0px 0px;
135 |
136 | }
137 |
138 | .dropdown-content_hr p:active,.dropdown-content_min p:active {
139 | background-color: rgb(187, 181, 181);
140 | height: fit-content;
141 | }
142 |
143 | .show {display: flex;}/*很特別的一行*/
144 | /*----------------處理btn---------------*/
145 | #stop_btn,#start_btn_id,#reset_btn{
146 | font-size: 30px;
147 | font-weight: bold;
148 | background-color: darkgreen;
149 | color: aliceblue;
150 | border: solid white 2px;
151 | border-radius: 15px;
152 | position: relative;
153 | top:20px;
154 | }
155 | #stop_btn:active,#start_btn_id:active,#reset_btn:active{
156 | background-color: rgb(233, 233, 233);
157 | color: rgb(0, 73, 17);
158 | }
159 | #reset_btn{
160 | position: relative;
161 | top:30px;
162 | }
163 | #keep_time{
164 | position: relative;
165 | top:30px;
166 | font-size: 20px;
167 | color: rgb(6, 100, 1);
168 | font-weight: bold;
169 | height: fit-content;
170 | width: fit-content;
171 | border-radius: 15px;
172 | background-color: rgba(240, 255, 255,0.8);
173 | border: solid 2px rgb(2, 76, 5);
174 | padding: 5px;
175 | }
176 |
--------------------------------------------------------------------------------