diff --git a/JavascriptDev/src/main/resources/static/css/images/browsermsg_icon_1.png b/JavascriptDev/src/main/resources/static/css/images/browsermsg_icon_1.png new file mode 100644 index 0000000..a9064f4 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/browsermsg_icon_1.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/browsermsg_icon_2.png b/JavascriptDev/src/main/resources/static/css/images/browsermsg_icon_2.png new file mode 100644 index 0000000..0994e2f Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/browsermsg_icon_2.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/browsermsg_icon_3.png b/JavascriptDev/src/main/resources/static/css/images/browsermsg_icon_3.png new file mode 100644 index 0000000..c1c264a Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/browsermsg_icon_3.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/browsermsg_pc_pic.png b/JavascriptDev/src/main/resources/static/css/images/browsermsg_pc_pic.png new file mode 100644 index 0000000..265aea6 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/browsermsg_pc_pic.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/camera_pic.png b/JavascriptDev/src/main/resources/static/css/images/camera_pic.png new file mode 100644 index 0000000..85c1c5f Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/camera_pic.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/card_pic.png b/JavascriptDev/src/main/resources/static/css/images/card_pic.png new file mode 100644 index 0000000..8c6dc2c Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/card_pic.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/down_arrow_select.png b/JavascriptDev/src/main/resources/static/css/images/down_arrow_select.png new file mode 100644 index 0000000..7f7719d Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/down_arrow_select.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/flag_04.png b/JavascriptDev/src/main/resources/static/css/images/flag_04.png new file mode 100644 index 0000000..b097bd0 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/flag_04.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/flag_05.png b/JavascriptDev/src/main/resources/static/css/images/flag_05.png new file mode 100644 index 0000000..820718c Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/flag_05.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/flag_cn.png b/JavascriptDev/src/main/resources/static/css/images/flag_cn.png new file mode 100644 index 0000000..5885622 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/flag_cn.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/flag_tw.png b/JavascriptDev/src/main/resources/static/css/images/flag_tw.png new file mode 100644 index 0000000..eb7025d Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/flag_tw.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/flag_us.png b/JavascriptDev/src/main/resources/static/css/images/flag_us.png new file mode 100644 index 0000000..7a4d958 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/flag_us.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_good.png b/JavascriptDev/src/main/resources/static/css/images/icon_good.png new file mode 100644 index 0000000..34e2664 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_good.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_link.png b/JavascriptDev/src/main/resources/static/css/images/icon_link.png new file mode 100644 index 0000000..eb1255c Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_link.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_link_hover.png b/JavascriptDev/src/main/resources/static/css/images/icon_link_hover.png new file mode 100644 index 0000000..9b72acc Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_link_hover.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_marvel.png b/JavascriptDev/src/main/resources/static/css/images/icon_marvel.png new file mode 100644 index 0000000..cf08a21 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_marvel.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_question.png b/JavascriptDev/src/main/resources/static/css/images/icon_question.png new file mode 100644 index 0000000..67b02e8 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_question.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_question_on.png b/JavascriptDev/src/main/resources/static/css/images/icon_question_on.png new file mode 100644 index 0000000..1ee9c0e Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_question_on.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_1.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_1.png new file mode 100644 index 0000000..8547d67 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_1.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_1_active.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_1_active.png new file mode 100644 index 0000000..5958f7f Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_1_active.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_2.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_2.png new file mode 100644 index 0000000..6deb8ec Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_2.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_2_active.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_2_active.png new file mode 100644 index 0000000..47c901e Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_2_active.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_3.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_3.png new file mode 100644 index 0000000..d73704a Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_3.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_3_active.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_3_active.png new file mode 100644 index 0000000..afb6128 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_3_active.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_4.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_4.png new file mode 100644 index 0000000..3abc41c Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_4.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_4_active.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_4_active.png new file mode 100644 index 0000000..0cb8007 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_4_active.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_5.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_5.png new file mode 100644 index 0000000..926ca52 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_5.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_5_active.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_5_active.png new file mode 100644 index 0000000..4d2ea19 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_5_active.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_6.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_6.png new file mode 100644 index 0000000..bb0da71 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_6.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_schedule_6_active.png b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_6_active.png new file mode 100644 index 0000000..f9bd07b Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_schedule_6_active.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_speaker.png b/JavascriptDev/src/main/resources/static/css/images/icon_speaker.png new file mode 100644 index 0000000..263b843 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_speaker.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_speaker_hover.png b/JavascriptDev/src/main/resources/static/css/images/icon_speaker_hover.png new file mode 100644 index 0000000..63bb219 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_speaker_hover.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_title_arrow.png b/JavascriptDev/src/main/resources/static/css/images/icon_title_arrow.png new file mode 100644 index 0000000..cdd5167 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_title_arrow.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/icon_true.png b/JavascriptDev/src/main/resources/static/css/images/icon_true.png new file mode 100644 index 0000000..0abd1b4 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/icon_true.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/input_checkbox.png b/JavascriptDev/src/main/resources/static/css/images/input_checkbox.png new file mode 100644 index 0000000..67437bf Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/input_checkbox.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/input_checkbox_checked.png b/JavascriptDev/src/main/resources/static/css/images/input_checkbox_checked.png new file mode 100644 index 0000000..02650a7 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/input_checkbox_checked.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/input_radio_off.png b/JavascriptDev/src/main/resources/static/css/images/input_radio_off.png new file mode 100644 index 0000000..08da98e Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/input_radio_off.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/input_radio_on.png b/JavascriptDev/src/main/resources/static/css/images/input_radio_on.png new file mode 100644 index 0000000..aa52f32 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/input_radio_on.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/loading.gif b/JavascriptDev/src/main/resources/static/css/images/loading.gif new file mode 100644 index 0000000..3f51be1 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/loading.gif differ diff --git a/JavascriptDev/src/main/resources/static/css/images/logo.png b/JavascriptDev/src/main/resources/static/css/images/logo.png new file mode 100644 index 0000000..185f97f Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/logo.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/main_pic.png b/JavascriptDev/src/main/resources/static/css/images/main_pic.png new file mode 100644 index 0000000..f6f321d Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/main_pic.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/msg_pic_01.png b/JavascriptDev/src/main/resources/static/css/images/msg_pic_01.png new file mode 100644 index 0000000..dc5004d Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/msg_pic_01.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/msg_pic_02.png b/JavascriptDev/src/main/resources/static/css/images/msg_pic_02.png new file mode 100644 index 0000000..454e3b4 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/msg_pic_02.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/msg_pic_03.png b/JavascriptDev/src/main/resources/static/css/images/msg_pic_03.png new file mode 100644 index 0000000..bb9ea41 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/msg_pic_03.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/msg_pic_04.png b/JavascriptDev/src/main/resources/static/css/images/msg_pic_04.png new file mode 100644 index 0000000..0d024e7 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/msg_pic_04.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/msg_pic_05.png b/JavascriptDev/src/main/resources/static/css/images/msg_pic_05.png new file mode 100644 index 0000000..e1cb03f Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/msg_pic_05.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/msg_pic_06.png b/JavascriptDev/src/main/resources/static/css/images/msg_pic_06.png new file mode 100644 index 0000000..d3d8659 Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/msg_pic_06.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/pic_001.png b/JavascriptDev/src/main/resources/static/css/images/pic_001.png new file mode 100644 index 0000000..ba357dd Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/pic_001.png differ diff --git a/JavascriptDev/src/main/resources/static/css/images/schedule_line.png b/JavascriptDev/src/main/resources/static/css/images/schedule_line.png new file mode 100644 index 0000000..5d170aa Binary files /dev/null and b/JavascriptDev/src/main/resources/static/css/images/schedule_line.png differ diff --git a/JavascriptDev/src/main/resources/static/js/JavaScriptLab/Lab17/03Mouseoverout.html b/JavascriptDev/src/main/resources/static/js/JavaScriptLab/Lab17/03Mouseoverout.html index dc5906d..9868893 100644 --- a/JavascriptDev/src/main/resources/static/js/JavaScriptLab/Lab17/03Mouseoverout.html +++ b/JavascriptDev/src/main/resources/static/js/JavaScriptLab/Lab17/03Mouseoverout.html @@ -5,19 +5,35 @@ 03Mouseoverout.html + - + +
+ + + + diff --git a/JavascriptDev/src/main/resources/static/notes/css/bootstrap.css b/JavascriptDev/src/main/resources/static/notes/css/bootstrap.css new file mode 100644 index 0000000..15d4553 --- /dev/null +++ b/JavascriptDev/src/main/resources/static/notes/css/bootstrap.css @@ -0,0 +1,164 @@ + +.modal-open { + overflow: hidden; +} + +.modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; + display: none; + overflow: hidden; + outline: 0; +} + +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +.modal-dialog { + position: relative; + width: auto; + margin: 0.5rem; + pointer-events: none; +} + +.modal.fade .modal-dialog { + transition: -webkit-transform 0.3s ease-out; + transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; + -webkit-transform: translate(0, -25%); + transform: translate(0, -25%); +} + +@media screen and (prefers-reduced-motion: reduce) { + .modal.fade .modal-dialog { + transition: none; + } +} + +.modal.show .modal-dialog { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); +} + +.modal-dialog-centered { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + min-height: calc(100% - (0.5rem * 2)); +} + +.modal-content { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + width: 100%; + pointer-events: auto; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.3rem; + outline: 0; +} + +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #000; +} + +.modal-backdrop.fade { + opacity: 0; +} + +.modal-backdrop.show { + opacity: 0.5; +} + +.modal-header { + display: -ms-flexbox; + display: flex; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 1rem; + border-bottom: 1px solid #e9ecef; + border-top-left-radius: 0.3rem; + border-top-right-radius: 0.3rem; +} + +.modal-header .close { + padding: 1rem; + margin: -1rem -1rem -1rem auto; +} + +.modal-title { + margin-bottom: 0; + line-height: 1.5; +} + +.modal-body { + position: relative; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 1rem; +} + +.modal-footer { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 1rem; + border-top: 1px solid #e9ecef; +} + +.modal-footer > :not(:first-child) { + margin-left: .25rem; +} + +.modal-footer > :not(:last-child) { + margin-right: .25rem; +} + +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +@media (min-width: 576px) { + .modal-dialog { + max-width: 500px; + margin: 1.75rem auto; + } + .modal-dialog-centered { + min-height: calc(100% - (1.75rem * 2)); + } + .modal-sm { + max-width: 300px; + } +} + +@media (min-width: 992px) { + .modal-lg { + max-width: 800px; + } +} diff --git a/JavascriptDev/src/main/resources/static/notes/css/cropper.css b/JavascriptDev/src/main/resources/static/notes/css/cropper.css new file mode 100644 index 0000000..f9c960e --- /dev/null +++ b/JavascriptDev/src/main/resources/static/notes/css/cropper.css @@ -0,0 +1,305 @@ +/*! + * Cropper.js v1.4.0 + * https://fengyuanchen.github.io/cropperjs + * + * Copyright 2015-present Chen Fengyuan + * Released under the MIT license + * + * Date: 2018-06-01T15:18:09.891Z + */ + +.cropper-container { + direction: ltr; + font-size: 0; + line-height: 0; + position: relative; + -ms-touch-action: none; + touch-action: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.cropper-container img {/*Avoid margin top issue (Occur only when margin-top <= -height) + */ + display: block; + height: 100%; + image-orientation: 0deg; + max-height: none !important; + max-width: none !important; + min-height: 0 !important; + min-width: 0 !important; + width: 100%; +} + +.cropper-wrap-box, +.cropper-canvas, +.cropper-drag-box, +.cropper-crop-box, +.cropper-modal { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +.cropper-wrap-box, +.cropper-canvas { + overflow: hidden; +} + +.cropper-drag-box { + background-color: #fff; + opacity: 0; +} + +.cropper-modal { + background-color: #000; + opacity: .5; +} + +.cropper-view-box { + display: block; + height: 100%; + outline-color: rgba(51, 153, 255, 0.75); + outline: 1px solid #39f; + overflow: hidden; + width: 100%; +} + +.cropper-dashed { + border: 0 dashed #eee; + display: block; + opacity: .5; + position: absolute; +} + +.cropper-dashed.dashed-h { + border-bottom-width: 1px; + border-top-width: 1px; + height: 33.33333%; + left: 0; + top: 33.33333%; + width: 100%; +} + +.cropper-dashed.dashed-v { + border-left-width: 1px; + border-right-width: 1px; + height: 100%; + left: 33.33333%; + top: 0; + width: 33.33333%; +} + +.cropper-center { + display: block; + height: 0; + left: 50%; + opacity: .75; + position: absolute; + top: 50%; + width: 0; +} + +.cropper-center:before, +.cropper-center:after { + background-color: #eee; + content: ' '; + display: block; + position: absolute; +} + +.cropper-center:before { + height: 1px; + left: -3px; + top: 0; + width: 7px; +} + +.cropper-center:after { + height: 7px; + left: 0; + top: -3px; + width: 1px; +} + +.cropper-face, +.cropper-line, +.cropper-point { + display: block; + height: 100%; + opacity: .1; + position: absolute; + width: 100%; +} + +.cropper-face { + background-color: #fff; + left: 0; + top: 0; +} + +.cropper-line { + background-color: #39f; +} + +.cropper-line.line-e { + cursor: ew-resize; + right: -3px; + top: 0; + width: 5px; +} + +.cropper-line.line-n { + cursor: ns-resize; + height: 5px; + left: 0; + top: -3px; +} + +.cropper-line.line-w { + cursor: ew-resize; + left: -3px; + top: 0; + width: 5px; +} + +.cropper-line.line-s { + bottom: -3px; + cursor: ns-resize; + height: 5px; + left: 0; +} + +.cropper-point { + background-color: #39f; + height: 5px; + opacity: .75; + width: 5px; +} + +.cropper-point.point-e { + cursor: ew-resize; + margin-top: -3px; + right: -3px; + top: 50%; +} + +.cropper-point.point-n { + cursor: ns-resize; + left: 50%; + margin-left: -3px; + top: -3px; +} + +.cropper-point.point-w { + cursor: ew-resize; + left: -3px; + margin-top: -3px; + top: 50%; +} + +.cropper-point.point-s { + bottom: -3px; + cursor: s-resize; + left: 50%; + margin-left: -3px; +} + +.cropper-point.point-ne { + cursor: nesw-resize; + right: -3px; + top: -3px; +} + +.cropper-point.point-nw { + cursor: nwse-resize; + left: -3px; + top: -3px; +} + +.cropper-point.point-sw { + bottom: -3px; + cursor: nesw-resize; + left: -3px; +} + +.cropper-point.point-se { + bottom: -3px; + cursor: nwse-resize; + height: 20px; + opacity: 1; + right: -3px; + width: 20px; +} + +@media (min-width: 768px) { + .cropper-point.point-se { + height: 15px; + width: 15px; + } +} + +@media (min-width: 992px) { + .cropper-point.point-se { + height: 10px; + width: 10px; + } +} + +@media (min-width: 1200px) { + .cropper-point.point-se { + height: 5px; + opacity: .75; + width: 5px; + } +} + +.cropper-point.point-se:before { + background-color: #39f; + bottom: -50%; + content: ' '; + display: block; + height: 200%; + opacity: 0; + position: absolute; + right: -50%; + width: 200%; +} + +.cropper-invisible { + opacity: 0; +} + +.cropper-bg { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'); +} + +.cropper-hide { + display: block; + height: 0; + position: absolute; + width: 0; +} + +.cropper-hidden { + display: none !important; +} + +.cropper-move { + cursor: move; +} + +.cropper-crop { + cursor: crosshair; +} + +.cropper-disabled .cropper-drag-box, +.cropper-disabled .cropper-face, +.cropper-disabled .cropper-line, +.cropper-disabled .cropper-point { + cursor: not-allowed; +} diff --git a/JavascriptDev/src/main/resources/static/notes/css/main2.css b/JavascriptDev/src/main/resources/static/notes/css/main2.css new file mode 100644 index 0000000..451343f --- /dev/null +++ b/JavascriptDev/src/main/resources/static/notes/css/main2.css @@ -0,0 +1,1390 @@ +@charset "UTF-8"; +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font: inherit; + font-size: 100%; + vertical-align: baseline; +} + +html { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +caption, th, td { + text-align: left; + font-weight: normal; + vertical-align: middle; +} + +q, blockquote { + quotes: none; +} +q:before, q:after, blockquote:before, blockquote:after { + content: ""; + content: none; +} + +a img { + border: none; +} + +article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { + display: block; +} + +html, body { + font-family: "Arial",微軟正黑體; + font-size: 100%; +} + +body { + margin: 0; + background-color: #F9F9F9; +} + +iframe { + border: none; +} + +img { + border: 0; + outline: none; + display: inline-block; +} + +a { + cursor: pointer; + display: inline-block; + text-decoration: none; +} + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + max-height: 99999px; +} + +button { + font-family: "Arial",微軟正黑體; +} + +.txt-sig { + word-break: break-all; + text-overflow: ellipsis; + white-space: nowrap; + -o-text-overflow: ellipsis; + overflow: hidden; +} + +.no-select { + -webkit-user-select: none; + /* Chrome all / Safari all */ + -moz-user-select: none; + /* Firefox all */ + -ms-user-select: none; + /* IE 10+ */ + user-select: none; + /* Likely future */ +} + +.row_center_btn { + text-align: center; + margin-top: 2rem; + margin-bottom: 2rem; + margin-left: 30px; + margin-right: 30px; +} + +.row_right_btn { + text-align: right; + margin-bottom: 1rem; + margin-left: 30px; + margin-right: 30px; +} + +.text_pos_c { + text-align: center; +} + +.text_pos_r { + text-align: right; +} + +.fl_r { + float: right; +} + +.fl_l { + float: left; +} + +.wrapper { + position: absolute; + width: 100%; + min-height: 100%; +} + +header { + position: relative; + border-top: 10px solid #4CA852; + height: 90px; +} +header .logo { + margin-left: 20px; +} +header .action_txt { + position: absolute; + top: 0px; + right: 0px; + height: 40px; + line-height: 40px; + color: #fff; + font-size: 1.125rem; + padding: 0px 20px; + display: inline-flex; + background-color: #4CA852; + /*border-radius: 0px 0px 0px 5px; + -moz-border-radius: 0px 0px 0px 5px; + -webkit-border-radius: 0px 0px 0px 5px;*/ + border-radius: 0px 0px 0px 11px; + -moz-border-radius: 0px 0px 0px 11px; + -webkit-border-radius: 0px 0px 0px 11px; +} + +.inner { + margin: 0px auto; + width: 100%; + max-width: 640px; + overflow: hidden; +} + +.row_input { + margin: 0px 30px 15px 30px; +} +.row_input label { + display: inline-block; + padding: 0rem .5rem; + font-size: 1.25rem; + line-height: 3rem; + color: #005D06; +} +.row_input small { + display: block; + margin-top: .25rem; + font-size: 80%; + font-weight: 400; + padding: 0rem .5rem; + color: #D8492C; + font-size: 1rem; + line-height: 1.25rem; +} + +.row_radio { + margin: 0px 45px 0px 45px; +} +.row_radio label { + display: inline-block; + /*margin-bottom: .5rem; + padding: 0rem .5rem;*/ + padding: 0rem 1rem 0 .5rem; + color: #707070; + font-size: 1.6rem; +} +.row_radio small { + display: block; + margin-top: .25rem; + font-size: 80%; + font-weight: 400; + padding: 0rem .5rem; +} +.row_radio p { + font-size: 1.125rem; + color: #707070; +} + +.row_radio_box { + padding-left: 80px; + margin-bottom: 15px; +} +.row_radio_box .row_input { + margin: 0px 30px 15px 0px; +} +.row_radio_box p { + font-size: 1.125rem; + color: #707070; + line-height: 2rem; +} +.row_radio_box table { + font-size: 1.125rem; + color: #707070; + line-height: 1.75rem; +} +.row_radio_box td { + vertical-align: top; +} +.row_radio_box td img { + margin-top: 5px; +} + +input, select { + font-family: "Arial",微軟正黑體; +} + +.input_txt { + display: block; + width: 100%; + padding: 1rem .75rem; + font-size: 1.5rem; + color: #707070; + background-color: #fcfcfc; + background-clip: padding-box; + border: 1px solid #82cd87; + border-radius: .25rem; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; + letter-spacing: .3rem; +} + +.input_radio { + position: relative; + display: inline-block; + margin: 1rem 0; +} + +input[type="button"] { + -webkit-appearance: none; +} + +input[type="radio"] { + opacity: 0; +} + +input[type="radio"]:checked + label:before, input[type="radio"] + label:before { + content: ""; + height: 24px; + width: 24px; + display: block; + position: absolute; + top: 0px; + left: 0px; + margin-left: 0px; + background: url(../images/input_radio.png) no-repeat; +} + +input[type="radio"]:checked + label:before { + background: url(../images/input_radio_on.png) no-repeat; +} + +input[type="radio"]:checked + label { + color: #329F3B; +} + +.input_checkbox_div { + position: relative; + display: inline-block; +} + +input[type="checkbox"] { + opacity: 0; +} + +input[type="checkbox"]:checked + label:before, input[type="checkbox"] + label:before { + position: absolute; + content: ""; + top: 0px; + left: 0px; + height: 24px; + width: 24px; + display: block; + background: url(../images/input_checked.png) no-repeat; +} + +input[type="checkbox"]:checked + label:before { + background: url(../images/input_checked_on.png) no-repeat; +} + +input[type="checkbox"]:checked + label { + color: #329F3B; +} + +input:matches([type="button"], [type="submit"], [type="reset"]){ + -webkit-appearance: none; +} + +.select_type { + display: block; + width: 100%; + overflow: hidden; + background: url(../images/down_arrow_select.png) no-repeat right #fcfcfc; + border: 1px solid #82cd87; + border-radius: .25rem; +} +.select_type select { + display: block; + background: transparent; + width: 100%; + width: calc(100% + 28px); + padding: .95rem .75rem; + font-size: 1.5rem; + border: 0; + outline: none; + color: #707070; + -webkit-appearance: none; + letter-spacing: .3rem; +} + +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .select_type select { + width: calc(100% + 32px); + } +} +.output_txt { + color: #707070; + font-size: 1.5rem; + line-height: 3rem; + padding: 0rem .5rem; + letter-spacing: .3rem; +} + +.btn_style_1 { + height: 65px; + line-height: 65px; + min-width: 235px; + border-radius: 35px; + background-color: #fff; + border: 1px solid #b5b5b5; + font-size: 1.5rem; + color: #707070; + margin: auto 5px; + cursor: pointer; + outline: none; + display: inline-block; +} +.btn_style_1:hover { + color: #fff; + background-color: #ff8f1e; + border: 1px solid #ff8f1e; +} + +.btn_style_1.active { + color: #fff; + background-color: #ff8f1e; + border: 1px solid #ff8f1e; +} + +.btn_style_2 { + line-height: 65px; + height: 65px; + min-width: 235px; + font-size: 1.5rem; + margin: auto 5px; + border-radius: 5px; + color: #fff; + border: 1px solid #E8E8E8; + color: #707070; + background: #fff; + cursor: auto; + cursor: pointer; + display: inline-block; +} +.btn_style_2:hover { + background: #329F3B; + border: 1px solid #329F3B; + color: #fff; +} + +.btn_style_2.active { + color: #fff; + border: initial; + background-color: #329F3B; + cursor: pointer; + border: 1px solid #329F3B; +} + +.btn_style_3 { + height: 65px; + line-height: 65px; + width: 100%; + border-radius: 35px; + background-color: #ff8f1e; + border: 1px solid #ff8f1e; + font-size: 1.5rem; + color: #fff; + display: inline-block; + text-align: center; + margin: 5px; + font-weight: bold; + text-shadow: 2px 2px 2px #CC6600; + letter-spacing: 5px; +} +.btn_style_3:hover { + background-color: #B5B5B5; + border: 1px solid #eee; + text-shadow: 2px 2px 2px #A4A4A4; +} + +.btn_style_3.active { + color: #fff; + background-color: #B5B5B5; + border: 1px solid #eee; + text-shadow: 2px 2px 2px #A4A4A4; +} + +.btn_style_4 { + height: 65px; + line-height: 65px; + width: 100%; + border-radius: 35px; + background-color: #B5B5B5; + border: 1px solid #eee; + font-size: 1.5rem; + color: #fff; + display: inline-block; + text-align: center; + margin: 5px; + font-weight: bold; + text-shadow: 2px 2px 2px #A4A4A4; + letter-spacing: 5px; +} +.btn_style_4:hover { + color: #fff; + background-color: #ff8f1e; + border: 1px solid #ff8f1e; + text-shadow: 2px 2px 2px #CC6600; +} + +.btn_style_4.active { + color: #fff; + background-color: #ff8f1e; + border: 1px solid #ff8f1e; + text-shadow: 2px 2px 2px #CC6600; +} + +.container { + position: absolute; + width: 100%; + min-height: calc(100% - 230px); + border-radius: 35px 35px 35px 35px; + -moz-border-radius: 35px 35px 35px 35px; + -webkit-border-radius: 35px 35px 35px 35px; + -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); + overflow: hidden; + padding: 15px 0px 50px 0px; + background: #fff; +} +.container .title { + position: relative; + text-align: center; + overflow: hidden; + padding: 0rem .5rem; + border-bottom: 3px solid #FAE505; + line-height: 3rem; + font-size: 1.75rem; + letter-spacing: .5rem; + margin: 0px 30px 15px 30px; +} +.container .pre_btn { + position: absolute; + left: 0px; + top: 50%; + margin-top: -10px; + width: 13px; + height: 21px; + display: block; + content: ""; + background: url(../images/icon/icon_title_arrow.png) no-repeat; + background-position: left center; +} +.container .colm .box { + border-collapse: collapse; + border-spacing: 0; + display: inline-block; +} +.container .colm .tr { + display: table-row; +} +.container .colm .td_input { + text-align: left; + font-weight: normal; + vertical-align: middle; + display: table-cell; + width: 100%; +} +.container .colm .td_txt { + text-align: left; + font-weight: normal; + vertical-align: middle; + display: table-cell; + padding: 0rem .3rem; + color: #005D06; +} +.container .colm_block_3 .box { + width: 32.6%; +} +.container .colm_block_2 { + overflow: hidden; +} +.container .colm_block_2 .box { + float: left; + width: 48%; +} +.container .box_verification { + padding: 0px 5px; +} +.container .box_verification img { + vertical-align: middle; + margin-top: -5px; +} + +.progressbar { + width: 96%; + max-width: 560px; + margin: 30px auto 60px auto; + padding: 0; + height: 2px; + background-color: #C1C1C1; +} +.progressbar li { + list-style-type: none; + width: 25%; + float: left; + font-size: 1.125rem; + position: relative; + height: 2px; + text-align: center; + line-height: 1.2rem; + padding-top: 17px; + color: #7d7d7d; +} +.progressbar li .line { + position: absolute; + top: -1px; + left: -50%; + width: 100%; + height: 4px; +} +.progressbar li:before { + content: ''; + position: absolute; + border-radius: 6px; + width: 6px; + height: 6px; + border: 2px solid #7d7d7d; + top: -4px; + left: -4%; + z-index: 1; + background-color: #fff; +} +.progressbar li:last-child:after { + content: ''; + position: absolute; + border-radius: 6px; + width: 6px; + height: 6px; + border: 2px solid #7d7d7d; + top: -4px; + right: -4%; + z-index: 1; + background-color: #fff; +} +.progressbar li:first-child .line { + left: 0%; + width: 50%; +} +.progressbar li.active { + color: #329F3B; +} +.progressbar li.active .line { + background-color: #188F20; +} +.progressbar li.active:before { + border: 2px solid #188F20; + background-color: #188F20; +} +.progressbar li.complete .line { + background-color: #188F20; +} +.progressbar li.complete:before { + border: 2px solid #188F20; + background-color: #188F20; +} +.progressbar li.finish { + color: #329F3B; +} +.progressbar li.finish .line { + background-color: #188F20; + width: 150%; +} +.progressbar li.finish:before { + border: 2px solid #188F20; + background-color: #188F20; +} +.progressbar li.finish:after { + border: 2px solid #188F20; + background-color: #188F20; +} + +.progressbar_list_3 li { + width: 33.3%; +} + +.step_reading_terms .row { + margin: 0px 35px; +} + +.scroll { + position: relative; + padding: 10px; + margin: 20px auto; + height: 360px; + width: 550px; + border: 1px solid #999999; +} + +.msg_box { + padding: 50px 0px; +} +.msg_box h3 { + color: #FF8000; + font-size: 2.265rem; + text-align: center; + margin-bottom: 30px; +} +.msg_box p { + color: #707070; + font-size: 1.5rem; + line-height: 2.8rem; + padding: 0px 30px; +} +.msg_box li { + color: #707070; + font-size: 1.5rem; + line-height: 2.8rem; + padding: 0px 30px; +} +.msg_box li:before { + content: ""; + background: url("../images/icon/icon_true.png") no-repeat; + width: 20px; + height: 13px; + display: inline-block; +} +.msg_box .pic { + margin: 20px auto; + text-align: center; +} + +.photo_box { + margin-bottom: 50px; +} +.photo_box .pic { + position: relative; + margin: 10px auto; + width: 558px; + height: 295px; + line-height: 295px; + background-position: center; + background-image: url(../images/card_pic.png); + background-repeat: no-repeat; + text-align: center; +} +.photo_box .pic span { + letter-spacing: 2px; + font-weight: bold; + color: #707070; + font-size: 1.5rem; +} +.photo_box .photo_finish { + position: absolute; + width: 100%; + height: 100%; + top: 0px; + left: 0px; +} +.photo_box .btn { + margin: auto; + width: 558px; + height: 80px; + border-radius: 80px; + background-color: #329F3B; + text-align: center; + line-height: 80px; + font-size: 1.5rem; + display: block; +} +.photo_box .btn span { + background-image: url(../images/camera_pic.png); + background-position: left center; + background-repeat: no-repeat; + color: #E6F3E7; + font-weight: bold; + padding: 10px 0px 10px 75px; +} +.photo_box [type=file] { + position: absolute; + filter: alpha(opacity=0); + opacity: 0; +} + +.remind_txt { + position: relative; + font-size: 1.125rem; + line-height: 1.62rem; + color: #707070; + margin: 0px 30px 50px 75px; +} +.remind_txt:before { + position: absolute; + top: 3px; + left: -20px; + width: 17px; + height: 100%; + content: ""; + background: url(../images/icon/icon_marvel.png) no-repeat; + background-position: left top; +} + +.table_checked_list { + margin: 0px 30px 15px 30px; +} +.table_checked_list th { + padding: 10px .25rem; +} +.table_checked_list td { + padding: .25rem; +} +.table_checked_list td:nth-child(1) { + width: 25px; +} +.table_checked_list label { + display: inline; + margin-bottom: 0; + padding: 0; +} +.table_checked_list thead th { + color: #005D06; + font-size: 1.25rem; +} +.table_checked_list tbody th { + color: #707070; + font-size: 1.5rem; +} +.table_checked_list tbody td { + padding: 10px 0; + color: #9B9B9B; + font-size: 1.125rem; + line-height: 1.75rem; +} +.table_checked_list .btn_q { + margin-left: 5px; + display: inline-block; + width: 17px; + height: 17px; + cursor: pointer; + background: url(../images/icon/icon_question_on.png) no-repeat; +} +.table_checked_list .btn_q.active { + background: url(../images/icon/icon_question.png) no-repeat; +} +.table_checked_list .txt { + display: none; +} + +.text_box { + margin: 0px 30px 15px 30px; +} +.text_box h3 { + font-size: 1.25rem; + color: #005D06; +} +.text_box h3 span { + color: #999999; +} + +.row_recommend { + margin: 0px 30px 15px 30px; + width: calc(100% - 60px); +} +.row_recommend .txt { + vertical-align: middle; + color: #188F20; + font-size: 1.25rem; +} +.row_recommend img { + vertical-align: middle; + margin-right: 5px; +} +.row_recommend input { + width: 100%; + border: 1px solid #7FCC84; + color: #707070; + font-size: 1.25rem; + padding: .6rem .75rem; +} +.row_recommend td { + padding: 0px 5px; +} + +.why_box { + padding: 15px 20px; + color: #707070; + font-size: 1.125rem; + line-height: 1.6rem; + margin: 0px 45px 0px 45px; +} +.why_box h3 { + position: relative; + font-weight: bold; + line-height: 2.25rem; +} +.why_box h3:before { + position: absolute; + left: -20px; + width: 17px; + height: 100%; + content: ""; + background: url(../images/icon/icon_question.png) no-repeat; + background-position: left center; +} +.why_box p { + margin-bottom: 10px; +} + +.explanation_box { + width: 100%; + padding: 15px 45px; + background-color: #f5f5f5; + color: #707070; + font-size: 1.125rem; + line-height: 1.6rem; +} +.explanation_box h3 { + position: relative; + font-weight: bold; + line-height: 2.25rem; +} +.explanation_box h3:before { + position: absolute; + left: -20px; + width: 17px; + height: 100%; + content: ""; + background: url(../images/icon/icon_marvel.png) no-repeat; + background-position: left center; +} +.explanation_box p { + margin-bottom: 10px; +} +.explanation_box .btn { + font-size: 1.125rem; + border: inherit; + border-radius: 5px; + background-color: #999999; + height: 50px; + line-height: 50px; + text-align: center; + color: #fff; + padding: 0px 15px; +} +.explanation_box .btn.active { + background-color: #329F3B; +} +.explanation_box .time { + color: #D8492C; + line-height: 2.25rem; + font-size: 1.3rem; + padding: 0px 10px; +} + +.section_main { + background: url(../images/home_bg.jpg) repeat-x; +} +.section_main .inner { + position: relative; + max-width: 1300px; + min-height: 640px; +} +.section_main .side_pic { + position: absolute; + left: 0px; + bottom: -10px; +} +.section_main .side_txt { + position: absolute; + right: 0px; + top: 85px; + width: 575px; + border-radius: 22px 22px 22px 22px; + -moz-border-radius: 22px 22px 22px 22px; + -webkit-border-radius: 22px 22px 22px 22px; + -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); + overflow: hidden; + padding: 30px; + background: #fff; +} +.section_main p { + margin: 30px 0px; + color: #707070; + font-size: 1.5rem; + line-height: 2.3rem; +} +.section_main .sp_txt { + position: relative; + color: #FF5C4B; + height: 92px; + font-size: 1.5rem; + line-height: 2.3rem; + background: #FFF5B5; + padding: 10px 30px 10px 15px; +} +.section_main .sp_txt:after { + position: absolute; + right: 0px; + top: 0px; + content: ""; + width: 0; + height: 0; + border-style: solid; + border-width: 46px 25px 46px 0; + border-color: transparent #ffffff transparent transparent; +} + +.section_bottom { + overflow: hidden; +} +.section_bottom .inner { + max-width: 1300px; + padding: 15px; +} + +.announce_txt { + position: relative; + display: inline-block; + color: #329F3B; + line-height: 30px; +} +.announce_txt:before { + content: ""; + background: url("../images/icon/icon_speaker.png") no-repeat; + width: 45px; + height: 30px; + display: inline-block; + background-position: left center; + vertical-align: bottom; +} +.announce_txt:after { + content: ""; + background: url("../images/icon/icon_link.png") no-repeat; + width: 25px; + height: 30px; + display: inline-block; + background-position: left center; + vertical-align: bottom; +} +.announce_txt:hover { + color: #999999; +} +.announce_txt:hover:before { + background: url("../images/icon/icon_speaker_hover.png") no-repeat; + background-position: left center; +} +.announce_txt:hover:after { + background: url("../images/icon/icon_link_hover.png") no-repeat; + background-position: left center; +} + +.schedule_box { + color: #333333; + font-size: 1.5rem; +} +.schedule_box table { + width: 570px; + margin: auto; +} +.schedule_box tr:nth-child(1) td:nth-child(2):before { + background-color: inherit; +} +.schedule_box tr:nth-last-child(1) td:nth-child(2):before { + background-color: inherit; +} +.schedule_box td { + position: relative; + padding: 10px 0px; + height: 100px; +} +.schedule_box td:nth-child(2):before { + position: absolute; + content: ""; + width: 2px; + height: 100%; + min-height: 100px; + top: 50%; + left: 50%; + margin-left: -1px; + background-color: #B0CFB7; +} +.schedule_box td:nth-child(3) { + padding-left: 10px; +} +.schedule_box td span { + position: relative; + display: inline-block; +} +.schedule_box .year { + color: #329F3B; + font-size: 1.875rem; + line-height: 4rem; + font-weight: bold; +} +.schedule_box .date { + color: #3A874C; + font-size: 1.125rem; + line-height: 2rem; + display: block; +} +.schedule_box .time { + color: #999999; + font-size: 1rem; + display: block; +} +.schedule_box .status_1 { + width: 62px; + height: 72px; + background: url("../images/icon/icon_schedule_1.png") no-repeat; +} +.schedule_box .status_1.active { + background: url("../images/icon/icon_schedule_1_active.png") no-repeat; +} +.schedule_box .status_2 { + width: 62px; + height: 72px; + background: url("../images/icon/icon_schedule_2.png") no-repeat; +} +.schedule_box .status_2.active { + background: url("../images/icon/icon_schedule_2_active.png") no-repeat; +} +.schedule_box .status_3 { + width: 62px; + height: 72px; + background: url("../images/icon/icon_schedule_3.png") no-repeat; +} +.schedule_box .status_3.active { + background: url("../images/icon/icon_schedule_3_active.png") no-repeat; +} +.schedule_box .status_4 { + width: 62px; + height: 72px; + background: url("../images/icon/icon_schedule_4.png") no-repeat; +} +.schedule_box .status_4.active { + background: url("../images/icon/icon_schedule_4_active.png") no-repeat; +} +.schedule_box .status_5 { + width: 62px; + height: 72px; + background: url("../images/icon/icon_schedule_5.png") no-repeat; +} +.schedule_box .status_5.active { + background: url("../images/icon/icon_schedule_5_active.png") no-repeat; +} +.schedule_box .status_6 { + width: 62px; + height: 72px; + background: url("../images/icon/icon_schedule_6.png") no-repeat; +} +.schedule_box .status_6.active { + background: url("../images/icon/icon_schedule_6_active.png") no-repeat; +} + +.popup_msg { + position: fixed; + z-index: 9; + top: 0px; + left: 0px; + width: 100%; + height: 100%; +} +.popup_msg .mask { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-color: #333333; + opacity: 0.4; +} +.popup_msg .popup_content { + position: absolute; + top: 150px; + width: 570px; + margin: 0px auto; + background-color: #fff; + padding: 50px 0px; + border-radius: 35px; + left: 50%; + margin-left: -285px; +} +.popup_msg h3 { + color: #FF8000; + font-size: 2.265rem; + text-align: center; + margin-bottom: 30px; +} +.popup_msg p { + color: #707070; + font-size: 1.5rem; + line-height: 2.8rem; + padding: 0px 30px; + text-align: center; +} + +.popup_load { + position: fixed; + z-index: 9; + top: 0px; + left: 0px; + width: 100%; + height: 100%; +} +.popup_load .mask { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-color: #333333; + opacity: 0.4; +} +.popup_load .popup_content { + position: absolute; + top: 150px; + width: 570px; + margin: 0px auto; + background-color: #fff; + padding: 50px 0px; + border-radius: 35px; + left: 50%; + margin-left: -285px; + text-align: center; +} + +@media only screen and (max-width: 1240px) { + .section_main .side_pic { + position: relative; + left: 0px; + bottom: -10px; + max-width: 640px; + margin: 0px auto; + } + .section_main .side_pic img { + width: 100%; + max-width: 682px; + } + .section_main .side_txt { + position: relative; + right: 0px; + top: 0px; + width: 100%; + } + .section_main .box { + max-width: 640px; + margin: 0px auto; + } +} +@media only screen and (max-width: 639px) and (min-width: 1px) { + .container .colm_block_3 .box { + width: 31.5%; + } +} +.img-container { + overflow: hidden; + width: 460px; + height: 300px; +} +.img-container img { + width: 100%; +} + +.apply_write_basicInfo { + display: none; +} + +.apply_verification_phone { + display: none; +} + +.apply_inVerification_phone { + display: none; +} + +.apply_verification_mail { + display: none; +} + +.apply_inVerification_mail { + display: none; +} + +.apply_ste_remitMoney { + display: none; +} + +.apply_apply_item { + display: none; +} + +.apply_reading_terms_1 { + display: none; +} + +.apply_reading_terms_2 { + display: none; +} + +.apply_reading_terms_3 { + display: none; +} + +.apply_reading_terms_4 { + display: none; +} + +.apply_reading_terms_5 { + display: none; +} + +.apply_upload_doc { + display: none; +} + +.apply_verification_identity { + display: none; +} + +.msg_accept_success { + display: none; +} + +.msg_verification_fail { + display: none; +} + +.msg_verification_more_fail { + display: none; +} + +.msg_accept_fail { + display: none; +} + +.inquire_write_basicInfo { + display: none; +} + +.inquire_schedule_info { + display: none; +} + +.msg_schedule_fail { + display: none; +} + +.complement_write_basicInfo { + display: none; +} + +.complement_upload_doc { + display: none; +} + +.msg_complement_success { + display: none; +} + +.msg_complement_fail { + display: none; +} + +.completedGreen { + background: #329F3B; + border: 1px solid #329F3B; + color: #fff; +} +.confirmDisabled { + font-size: 1.12rem; + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 10px; /* Location of the box */ + left: 12%; + top: 25%; + width: 500px; /* Full width */ + height: 200px; /* Full height */ + border-radius: 35px 35px 35px 35px; + -moz-border-radius: 35px 35px 35px 35px; + -webkit-border-radius: 35px 35px 35px 35px; + -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); + -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); + box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); + overflow: hidden; + background: #fff; +} +.confirmDisabled .btn { + font-size: 1.12rem; + border: inherit; + border-radius: 5px; + background-color: #999999; + height: 50px; + line-height: 50px; + text-align: center; + color: #fff; + padding: 0px 15px; +} +.confirmDisabled .btn_green { + font-size: 1.12rem; + border: inherit; + border-radius: 5px; + background-color: #329F3B; + height: 50px; + line-height: 50px; + text-align: center; + color: #fff; + padding: 0px 15px; +} + +.disabled { + opacity: 0.65; + cursor: not-allowed; +} +.completed { + color: #fff; + background-color: #ff8f1e; + border: 1px solid #ff8f1e; +} \ No newline at end of file diff --git a/JavascriptDev/src/main/resources/static/notes/css/tinyscrollbar.css b/JavascriptDev/src/main/resources/static/notes/css/tinyscrollbar.css new file mode 100644 index 0000000..70208d6 --- /dev/null +++ b/JavascriptDev/src/main/resources/static/notes/css/tinyscrollbar.css @@ -0,0 +1,18 @@ +.scrollbars { + width: 530px; +} +.scrollbars .viewport { + height: 340px; + overflow: hidden; + position: relative; + width: 520px; +} +.scrollbars .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; } +.scrollbars .scrollbar{ position: relative; background-position: 0 0; float: right; width: 10px; } +.scrollbars .track { height: 100%; width:4px; position: relative; padding: 0 1px; +background-color: #999999; +} +.scrollbars .thumb { background-color:#FF8000; height: 20px; width: 5px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 0px; } +.scrollbars .thumb .end { background-color:#FF8000; overflow: hidden; height: 5px; width: 10px; } +.scrollbars .disable { display: none; } +.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } diff --git a/JavascriptDev/src/main/resources/static/notes/html/snippets/InputCheckbox.html b/JavascriptDev/src/main/resources/static/notes/html/snippets/InputCheckbox.html new file mode 100644 index 0000000..59b597d --- /dev/null +++ b/JavascriptDev/src/main/resources/static/notes/html/snippets/InputCheckbox.html @@ -0,0 +1,31 @@ + + + + + + + + Document + + + + + + + + + + + \ No newline at end of file diff --git a/JavascriptDev/src/main/resources/static/notes/html/snippets/overlayCheckbox.html b/JavascriptDev/src/main/resources/static/notes/html/snippets/overlayCheckbox.html new file mode 100644 index 0000000..0a703ad --- /dev/null +++ b/JavascriptDev/src/main/resources/static/notes/html/snippets/overlayCheckbox.html @@ -0,0 +1,79 @@ + + + + + + + + Document + + + + + + + + +

How do you customize how an input checkbox looks? By overlaying it with an image and then hiding the input checkbox

+
+
+ Source imgs loaded into body - click them to console.log(this.src)
+ + + + + + + + +
+
+
+ Click the image to swap it out for another image - the input-checkbox is linked to the image change onclick event, to store value input.checked = true/false
+ // Image: + + // checkbox storing value: + + // hidden checkbox: + + // + +
+
+ + \ No newline at end of file diff --git a/JavascriptDev/src/main/resources/static/notes/js/jQuery/selectorCheckbox.html b/JavascriptDev/src/main/resources/static/notes/js/jQuery/selectorCheckbox.html index adb389e..c5d07d1 100644 --- a/JavascriptDev/src/main/resources/static/notes/js/jQuery/selectorCheckbox.html +++ b/JavascriptDev/src/main/resources/static/notes/js/jQuery/selectorCheckbox.html @@ -14,7 +14,7 @@ 個人資料保護法告知事項(點此閱讀) - + @@ -27,6 +27,9 @@ // javascript selector input-checkbox let input2 = document.getElementById("AGREE_PRIVACY"); console.log("AGREE_PRIVACY (js) = ", input2.value, input2.checked); + + // document.getElementById("checkboxMsg").value = "asd"; + document.querySelector("#checkboxMsg").value = "triggered f1()"; } diff --git a/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number.html b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number.html deleted file mode 100644 index 37505a7..0000000 --- a/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - Document - - - - - - \ No newline at end of file diff --git a/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/jsParseInt.html b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number/jsParseInt.html similarity index 100% rename from JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/jsParseInt.html rename to JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number/jsParseInt.html diff --git a/JavascriptDev/src/main/resources/static/notes/js/vanilla/snippets/math.html b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number/math.html similarity index 100% rename from JavascriptDev/src/main/resources/static/notes/js/vanilla/snippets/math.html rename to JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number/math.html diff --git a/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number/mathRandom.html b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number/mathRandom.html new file mode 100644 index 0000000..f70a85b --- /dev/null +++ b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number/mathRandom.html @@ -0,0 +1,24 @@ + + + + + + + Document + + + + +
+ +
+ + + \ No newline at end of file diff --git a/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number/number.html b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number/number.html new file mode 100644 index 0000000..25ffc71 --- /dev/null +++ b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/number/number.html @@ -0,0 +1,36 @@ + + + + + + Document + + + + +
+ + + \ No newline at end of file diff --git a/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex/regexAlphaNumeric.html b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex/regexAlphaNumeric.html new file mode 100644 index 0000000..f251deb --- /dev/null +++ b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex/regexAlphaNumeric.html @@ -0,0 +1,38 @@ + + + + + + + Document + + + + Correct regex patterns will have their loops // commented out + Incorrect regex patterns have a // Note: ... on the same line as the const + + + + + + \ No newline at end of file diff --git a/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex.html b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex/regexDate.html similarity index 85% rename from JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex.html rename to JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex/regexDate.html index 6955f43..4e41e71 100644 --- a/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex.html +++ b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex/regexDate.html @@ -140,26 +140,6 @@ // console.log(a); // } // } - - // Looks for strings with only numbers and letters (alphanumeric), does not include international chars like A with accent - let array7 = ["dGgs1s23", "12fUgdf", "121232", "abchfe", "abd()*", "42232^5$", "john paul", "johnpaul", "K999"]; - const regEx_Nums_EnLetters_Only = /^[a-z0-9]+$/i; - // ^ Start of string - // [a-z0-9] a or b or ... z or 0 or 1 or ... 9 - // + one or more times (change to * to allow empty string) - // $ end of string - // /i case-insensitive - for (i = 0; i < array7.length; i++) { - a = array7[i].match(regEx_Nums_EnLetters_Only); - if (a == null) { - console.log(array7[i], a); - document.getElementById('span1').innerText = '請輸入英文/數字'; - document.getElementById('input1').style.backgroundColor = 'red'; - } else { - console.log(a); - } - } - \ No newline at end of file diff --git a/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regexReplace.html b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex/regexReplace.html similarity index 100% rename from JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regexReplace.html rename to JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/regex/regexReplace.html diff --git a/JavascriptDev/src/main/resources/static/notes/js/vanilla/snippets/GenerateRandom.html b/JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/string/GenerateRandomString.html similarity index 100% rename from JavascriptDev/src/main/resources/static/notes/js/vanilla/snippets/GenerateRandom.html rename to JavascriptDev/src/main/resources/static/notes/js/vanilla/dataTypes/string/GenerateRandomString.html diff --git a/JavascriptDev/src/main/resources/static/notes/js/vanilla/snippets/limitingUserInput.html b/JavascriptDev/src/main/resources/static/notes/js/vanilla/snippets/limitingUserInput.html new file mode 100644 index 0000000..4645998 --- /dev/null +++ b/JavascriptDev/src/main/resources/static/notes/js/vanilla/snippets/limitingUserInput.html @@ -0,0 +1,35 @@ + + + + + + + + Document + + + + // input type="text" id="tel" + + + + + + \ No newline at end of file