Browse Source

input 페이지 추가

master
minjubyun 1 year ago
parent
commit
0f98f7889c
4 changed files with 179 additions and 1088 deletions
  1. +6
    -539
      assets/css/layout.css
  2. +8
    -531
      assets/css/layout.scss
  3. +165
    -0
      pages/Input.html
  4. +0
    -18
      template/Login_ver1.html

+ 6
- 539
assets/css/layout.css View File

@ -251,12 +251,6 @@ html[data-theme=light] .lightmode > .inner {
.guide_wrap.two_line {
padding: 3.75rem 0;
}
.guide_wrap.cards {
background: var(--bg_01);
}
.guide_wrap.navigation {
background: var(--navigation-bg);
}
.guide_center {
width: 77.5rem;
@ -362,29 +356,6 @@ html[data-theme=light] .guide_top h1 {
flex: 1 !important;
}
.usage_box {
width: 53rem;
height: 46.688rem;
padding: 2.5rem;
border-radius: 0.5rem;
background: var(--white-w_6);
}
.card_box {
height: 100%;
padding: 0.625rem;
background: var(--white-w_6);
}
.card_box.dark {
background-color: transparent;
}
.black_box {
width: 33.75rem;
padding: 1.25em;
background: var(--white-w_6);
}
/*template*/
footer {
position: fixed;
@ -420,22 +391,6 @@ footer {
position: absolute;
}
.notification_box.main {
position: absolute;
left: 50%;
top: 3.5rem;
transform: translateX(-50%);
z-index: 80;
}
.notification_box.hide .notification_bg {
min-height: 0;
height: 0;
border-width: 0.063rem 0 0 0;
}
.notification_box.hide .btn_notification {
transform: rotate(180deg);
}
.board_line.signal.right {
position: absolute;
display: flex;
@ -577,57 +532,12 @@ footer {
opacity: 1;
}
.error_box {
display: flex;
-webkit-backdrop-filter: blur(1.875rem);
backdrop-filter: blur(1.875rem);
position: absolute;
padding: 3rem;
top: 33%;
left: 30%;
z-index: 0;
width: 44.563rem;
height: 18.25rem;
border-radius: 0.125rem;
border: 0.063rem solid rgba(255, 255, 255, 0.21);
background: rgba(162, 164, 184, 0.2);
-webkit-backdrop-filter: blur(3.75rem);
backdrop-filter: blur(3.75rem);
}
.marker_main {
position: absolute;
bottom: 40%;
left: 50%;
}
.indicator.main {
padding: 1.25rem 0.6rem 1.25rem 1.25rem;
}
.indicator.signal {
padding: 0;
}
.indi_conts.del {
display: none;
}
.indi_conts.signal {
margin: 0;
}
.tmbox_text {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.3;
color: var(--white-w_87-sec);
}
.tmbox.signal {
background-color: transparent;
padding: 0;
margin-bottom: 1.25rem;
}
.hd_profile {
position: relative;
width: 1.875rem;
@ -647,30 +557,6 @@ footer {
opacity: 1;
}
.marker_img_selected {
display: none;
}
.marker_main .tooltip_parents, .marker_main .infowindow_box.main.on {
display: none;
}
.marker_main.marker_hide .tooltip_parents, .marker_main.marker_hide .infowindow_box.main.on {
display: block;
}
.marker_main.marker_hide .img_off {
display: none !important;
}
.marker_main.marker_hide .marker_img_selected {
display: block !important;
}
.fab_wrap {
position: absolute;
top: 0%;
left: 108%;
margin-left: 0.5rem;
}
.popover_box.main {
position: absolute;
display: none;
@ -688,221 +574,6 @@ footer {
display: none;
}
.signal_board {
width: 100%;
height: 100%;
}
.signal_content {
display: flex;
align-items: center;
justify-content: center;
-moz-column-gap: 1rem;
column-gap: 1rem;
width: 100%;
height: 100%;
background: var(--bg_02_template);
}
.signal_body {
position: relative;
width: 100%;
height: 100%;
background-image: url("../images/signal_body_img.png");
background-repeat: no-repeat;
background-size: cover !important;
}
.accordion_box {
position: absolute;
margin-top: 0.5rem;
}
.indi_top.signal {
height: 3.5rem;
padding: 1.25rem 1rem 1.25rem;
}
.signal_dl {
display: flex;
align-items: center;
margin: 0.5rem 0;
}
.signal_dl:last-child {
margin-bottom: 0;
}
.signal_dl dt {
font-size: 0.8125rem;
font-weight: 300;
display: flex;
justify-content: space-between;
width: 4rem;
padding: 0 1rem 0 0;
color: var(--white-w_87-sec);
}
.signal_dl dd {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
}
.signal_dl dd .wrput {
width: 100%;
}
.signal_dl dd .ch_radio:last-child {
padding: 0;
}
.signal_dl.check {
margin: 1rem 0;
}
.accordion_block.signal {
-webkit-backdrop-filter: blur(1.875rem);
backdrop-filter: blur(1.875rem);
}
.accordion_block.signal .accordion_title:hover:not(.levle2), .accordion_block.signal .hover.accordion_title,
.accordion_block.signal .accordion_title:focus {
background: var(--primary-pri_20);
cursor: pointer;
}
.accordion_block.signal .accordion_title {
background: var(--primary-pri_20);
}
.accordion_block.signal .accordion_title:hover:not(.disabled), .accordion_block.signal .accordion_title:hover:not(.point.disabled), .accordion_block.signal .accordion_title:focus:not(.disabled) {
background: var(--primary-pri_20);
}
.accordion_block.signal .accordion_contents {
background: rgba(255, 255, 255, 0.06);
}
.accordion_block.signal .accordion_contents.signal {
padding: unset;
}
.map_label_line {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
bottom: 1.5rem;
padding: 0.125rem 0.75rem;
}
.map_label {
font-size: 1.25rem;
font-weight: 700;
width: auto;
padding: 0.125rem 0.75rem 0.25rem;
background-color: #0B1129;
color: #fff;
}
.record_wrap {
width: 100%;
height: 100%;
padding-top: 5rem;
}
.record_content {
width: 100%;
height: 100%;
padding: 1.25rem;
display: grid;
grid-auto-rows: 25.75rem auto;
row-gap: 1rem;
}
.record_box {
width: 100%;
height: 100%;
border: 0.063rem solid var(--line-pri_40-to-wh_40);
background: var(--bg_01_80);
box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
-webkit-backdrop-filter: blur(1.875rem);
backdrop-filter: blur(1.875rem);
padding: 0 1.25rem 1.25rem 1.25rem;
}
.record_title {
font-size: 1rem;
font-weight: 700;
width: 100%;
padding: 1.25rem 1rem 1rem 0;
color: var(--primary-to-grayscale-to-bk);
}
.record_box_content {
display: flex;
-moz-column-gap: 1rem;
column-gap: 1rem;
width: 100%;
height: calc(100% - 3.25rem);
}
.record_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1.5fr;
grid-template-rows: 8.125rem auto;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 1rem;
width: 100%;
height: 100%;
}
.record_top {
display: grid;
grid-column-gap: 1rem;
width: 9rem;
}
.chart_cont_box {
height: 100%;
width: 9rem;
}
.diagon_cont_box {
display: grid;
grid-column-gap: 1rem;
}
.diagon_cont.record {
width: 9rem;
height: 4.875rem;
}
.situation_box {
padding: 0.75rem;
border-radius: 0.125rem;
background: var(--more-visible-wh_6-to-100);
}
.situation_box.chart {
display: flex;
flex-direction: column;
justify-content: space-between;
grid-row: 1/3;
}
.situation_box.case1 {
grid-row: 1/2;
grid-column: 5/6;
}
.situation_box.case2 {
grid-row: 1/2;
grid-column: 6/7;
}
.situation_box.event {
display: grid;
grid-column: 5/7;
grid-template-columns: 1.5fr 1fr;
}
.situation_box h4 {
font-size: 0.875rem;
font-weight: 500;
color: var(--white-w_87-sec);
}
.case_wrap {
display: flex;
-moz-column-gap: 0.5rem;
@ -1020,55 +691,6 @@ footer {
line-height: 1.7;
}
.record_radio {
display: flex;
align-items: center;
cursor: pointer;
}
.record_radio .word {
color: var(--white-w_87-sec);
}
.record_radio.on .radio {
background-color: #fff;
border: 0.25rem solid #27d4ff;
}
.record_radio.on .word {
color: var(--white-w_87-sec);
}
.record_radio .radio {
display: inline-block;
width: 0.9375rem;
height: 0.9375rem;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 100%;
margin: 0 0.5rem 0 0;
}
.record_radio .radio.mini {
width: 0.625rem;
height: 0.625rem;
border: 0.125rem solid #27d4ff;
margin: 0 0.375rem 0 0;
}
.record_radio .radio.green {
border: 0.125rem solid #16D9AB;
}
.record_radio .radio.blue {
border: 0.125rem solid #07F;
}
.record_radio .radio.dark_blue {
border: 0.125rem solid #0E44E5;
}
.record_radio .radio.purple {
border: 0.125rem solid #8972FF;
}
.record_radio .radio.dark_purple {
border: 0.125rem solid #6E3DFF;
}
.record_radio .word {
font-size: 0.6875rem;
font-weight: 300;
}
.user_wrap {
width: 100%;
height: 100%;
@ -1168,18 +790,6 @@ footer {
color: var(--white-w_100-sec);
}
.white_w_87 {
color: var(--white-w_87) !important;
}
.white_w_bk {
color: var(--white-w_87-sec) !important;
}
.white_ff_bk {
color: var(--white-w_100-sec) !important;
}
/* html data-theme */
html[data-theme=light] .sp_logo_uniplus {
background: url("../images/logo_uniplus_light.svg") no-repeat left center;
@ -1254,12 +864,6 @@ html[data-theme=light] .btn_drop .put_see.off .img_see {
html[data-theme=light] .btn_drop .put_see.off .img_see_off {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .btn_arrow_circle img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_arrow_circle.selected img, html[data-theme=light] .btn_arrow_circle:hover:not(.disabled) img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_arrow_circle.line img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
@ -1297,42 +901,6 @@ html[data-theme=light] .btn_primary.disabled img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
opacity: 0.6;
}
html[data-theme=light] .btn_toggle_icon :not(.map) span img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_toggle_icon :not(.map) span.circle_grey32 img, html[data-theme=light] .btn_toggle_icon :not(.map) .circle_grey28.popover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map) span .circle_grey28.icon .img_on {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map):hover span .circle_grey28.popover img, html[data-theme=light] .btn_toggle_icon :not(.map).active span .circle_grey28.popover img, html[data-theme=light] .btn_toggle_icon :not(.map):focus span .circle_grey28.popover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map):hover span .circle_grey28.popover .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).active span .circle_grey28.popover .img_on, html[data-theme=light] .btn_toggle_icon :not(.map):focus span .circle_grey28.popover .img_on {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map):hover img, html[data-theme=light] .btn_toggle_icon :not(.map).active img, html[data-theme=light] .btn_toggle_icon :not(.map):focus img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map) .circle_grey28 .img_on {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map) span .circle_grey28 .icon .img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey32 img, html[data-theme=light] .btn_toggle_icon :not(.map).legend .circle_grey28.popover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover.selected img, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:hover:not(.legend) img, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:focus img, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:active img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover.selected .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:hover:not(.legend) .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:focus .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:active .img_on {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_file img, html[data-theme=light] .preview_box img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
@ -1353,21 +921,12 @@ html[data-theme=light] .btn_icon:focus img {
html[data-theme=light] .arr_up img, html[data-theme=light] .arr_right img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .diagon_cont {
filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);
}
html[data-theme=light] .datepicker {
background-image: url(../images/calendar_gray_24.svg);
}
html[data-theme=light] .datepicker:focus, html[data-theme=light] .datepicker.on {
background-image: url(../images/calendar_blue_24.svg);
}
html[data-theme=light] .accordion_block div button img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .accordion_block.accord_select .accordion_title.on img, html[data-theme=light] .accordion_block.accord_select .accordion_title.hover img, html[data-theme=light] .accordion_block.accord_select .accordion_title:hover img, html[data-theme=light] .accordion_block.accord_select .accordion_title:focus img, html[data-theme=light] .accordion_block.accord_select .accordion_title.selected img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .action_prev, html[data-theme=light] .action_next {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
@ -1389,24 +948,6 @@ html[data-theme=light] .selectbox_arrow img, html[data-theme=light] .selectbox i
html[data-theme=light] .bt_srch {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .hamberger_btn {
content: url("../images/hamburger_bk_24.svg");
}
html[data-theme=light] .logo_hd_kisa {
content: url("../images/logo_light.svg");
}
html[data-theme=light] .light_none img {
display: none;
}
html[data-theme=light] .lnb_popup_title_bg button img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_fnb_search img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .put_delete img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .selector {
background-image: url("../images/arrow_down_gray_16.svg");
}
@ -1428,86 +969,6 @@ html[data-theme=light] .arrival_marker img {
html[data-theme=light] .map_frame img {
content: url("../images/map_frame_light.svg");
}
html[data-theme=light] .eastside, html[data-theme=light] .westside, html[data-theme=light] .southside, html[data-theme=light] .northside {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .mapcontrol_btn {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .polygon.black img {
content: url("../images/Polygon_black_light.svg");
}
html[data-theme=light] .polygon.blue img {
content: url("../images/Polygon_blue_light.svg");
}
html[data-theme=light] .polygon.purple img {
content: url("../images/Polygon_purple_light.svg");
}
html[data-theme=light] .polygon.green img {
content: url("../images/Polygon_green_light.svg");
}
html[data-theme=light] .polygon.yellow img {
content: url("../images/Polygon_yellow_light.svg");
}
html[data-theme=light] .pass_road img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .light_conceal {
visibility: hidden;
}
html[data-theme=light] .marker.cctv .img_selected {
content: url("../images/cctv_light_selected_48.svg");
}
html[data-theme=light] .marker.weather .img_selected {
content: url("../images/weather_center_light_selected_48.svg");
}
html[data-theme=light] .marker.bus .img_selected {
content: url("../images/bus_light_selected_48.svg");
}
html[data-theme=light] .marker.depart .img_selected {
content: url("../images/depart_light_selected_48.svg");
}
html[data-theme=light] .park_sign.danger.on {
background: url("../images/park_danger_light_on.svg") no-repeat center center;
}
html[data-theme=light] .put_check img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .time_mark20 {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .row_type2 .tac img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .ic_artff {
background: url("../images/arr_traff_light_16.svg") no-repeat center center;
}
html[data-theme=light] .pg_prev img, html[data-theme=light] .pg_next img {
filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .sign_tri2.jam {
background: url(../images/sign_jam_light_28.svg) no-repeat center center;
background-size: contain;
}
html[data-theme=light] .sign_tri2.ambulace {
background: url(../images/ambulance_light.svg) no-repeat center center;
background-size: contain;
}
html[data-theme=light] .pos_rel.lightmode {
opacity: 0;
}
html[data-theme=light] .popup_close img {
filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .wrput.read_success {
display: none;
}
html[data-theme=light] .circle_g32.pencil img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .upload_btn img {
filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .main_contents {
width: 100%;
height: 100%;
@ -1527,6 +988,12 @@ html[data-theme=light] .main_contents.error2 {
html[data-theme=light] .login_logo {
content: url("../images/logo_light_big.svg");
}
html[data-theme=light] .hamberger_btn {
content: url("../images/hamburger_bk_24.svg");
}
html[data-theme=light] .logo_hd_kisa {
content: url("../images/logo_light.svg");
}
html[data-theme=light] .light_none {
display: none;
}

+ 8
- 531
assets/css/layout.scss View File

@ -250,12 +250,6 @@ html[data-theme=light] .lightmode > .inner{
&.two_line{
padding: 3.75rem 0;
}
&.cards{
background: var(--bg_01);
}
&.navigation{
background: var(--navigation-bg);
}
}
.guide_center{
width: 77.5rem;
@ -334,27 +328,6 @@ html[data-theme=light] .guide_top{
.flex_wrap {flex-wrap: wrap !important}
.flex_one{flex:1 !important}
.usage_box{
width: 53rem;
height: 46.688rem;
padding: 2.5rem;
border-radius: 0.5rem;
background: var(--white-w_6);
}
.card_box{
height: 100%;
padding: 0.625rem;
background: var(--white-w_6);
&.dark {
background-color: transparent;
}
}
.black_box{
width: 33.75rem;
padding: 1.25em;
background: var(--white-w_6);
}
/*template*/
footer {
position: fixed;
@ -385,25 +358,6 @@ footer {
.marker_wrap {
position: absolute;
}
.notification_box {
&.main {
position: absolute;
left: 50%;
top: 3.5rem;
transform: translateX(-50%);
z-index: 80;
}
&.hide {
.notification_bg {
min-height: 0;
height: 0;
border-width: 0.063rem 0 0 0;
}
.btn_notification {
transform: rotate(180deg);
}
}
}
.board_line {
&.signal {
&.right {
@ -551,50 +505,11 @@ footer {
opacity: 1;
}
}
.error_box {
@include dflx;
@include backFilter;
position: absolute;
padding: 3rem;
top: 33%;
left: 30%;
z-index: 0;
width: 44.563rem;
height: 18.25rem;
border-radius: 0.125rem;
border: 0.063rem solid rgba(255, 255, 255, 0.21);
background: rgba(162, 164, 184, 0.20);
backdrop-filter: blur(3.75rem);
}
.marker_main {
position: absolute;
bottom: 40%;
left: 50%;
}
.indicator{
&.main {
padding: 1.25rem 0.6rem 1.25rem 1.25rem;
}
&.signal {
padding: 0;
}
}
.indi_conts {
&.del {display: none}
&.signal {margin: 0}
}
.tmbox_text {
@include fs_14_medium;
line-height: 1.3;
color: var(--white-w_87-sec);
}
.tmbox{
&.signal {
background-color: transparent;
padding: 0;
margin-bottom: 1.25rem;
}
}
// 프로필
.hd_profile{
position: relative;
@ -616,28 +531,6 @@ footer {
}
}
}
// 마커
.marker_img_selected {
display: none;
}
.marker_main {
.tooltip_parents, .infowindow_box.main.on{
display: none;
}
&.marker_hide {
.tooltip_parents, .infowindow_box.main.on{
display: block;
}
.img_off {display: none !important;}
.marker_img_selected {display: block !important;}
}
}
.fab_wrap{
position: absolute;
top: 0%;
left: 108%;
margin-left: 0.5rem;
}
// 범례
.popover_box {
&.main {
@ -657,195 +550,6 @@ footer {
}
}
}
// 신호최적화
.signal_board {
width: 100%;
height: 100%;
}
.signal_content {
@include dflx_ac_jcent;
column-gap: 1rem;
width: 100%;
height: 100%;
background: var(--bg_02_template);
}
.signal_body {
position: relative;
width: 100%;
height: 100%;
background-image: url("../images/signal_body_img.png");
background-repeat: no-repeat;
background-size : cover !important;
}
.accordion_box {
position: absolute;
margin-top: 0.5rem;
}
.indi_top {
&.signal {
height: 3.5rem;
padding: 1.25rem 1rem 1.25rem;
}
}
.signal_dl {
@include dflx_ac;
//width: 100%;
margin: 0.5rem 0;
&:last-child {
margin-bottom: 0;
}
dt {
@include fs_13_light;
@include dflx_jbet;
width: 4rem;
padding: 0 1rem 0 0;
color: var(--white-w_87-sec);
}
dd {
@include dflx_ac_jbet;
flex: 1;
column-gap: 0.25rem;
.wrput{
width: 100%;
}
.ch_radio:last-child{
padding: 0;
}
}
&.check {
margin: 1rem 0;
}
}
// accordion
.accordion_block {
// 포인트
&.signal {
@include backFilter;
.accordion_title:hover:not(.levle2), .hover.accordion_title,
.accordion_title:focus {
background: var(--primary-pri_20);
cursor: pointer;
}
.accordion_title {
background: var(--primary-pri_20);
&:hover:not(.disabled),
&:hover:not(.point.disabled),
&:focus:not(.disabled) {
background: var(--primary-pri_20);
}
}
.accordion_contents {
background: rgba(255, 255, 255, 0.06);
}
.accordion_contents.signal {
padding: unset;
}
}
}
// map label
.map_label_line {
@include dflx_ac_jcent;
position: absolute;
width: 100%;
bottom: 1.5rem;
padding: 0.125rem 0.75rem;
}
.map_label {
@include fs_20_bold;
width: auto;
padding: 0.125rem 0.75rem 0.25rem;
background-color: #0B1129;
color: #fff;
}
// 상황관리이력
.record_wrap {
width: 100%;
height: 100%;
padding-top: 5rem;
}
.record_content {
width: 100%;
height: 100%;
padding: 1.25rem;
display: grid;
grid-auto-rows: 25.75rem auto;
row-gap: 1rem;
}
.record_box {
width: 100%;
height: 100%;
border: 0.063rem solid var(--line-pri_40-to-wh_40);
background: var(--bg_01_80);
box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
backdrop-filter: blur(1.875rem);
padding: 0 1.25rem 1.25rem 1.25rem;
}
.record_title {
@include fs_16_bold;
width: 100%;
padding: 1.25rem 1rem 1rem 0;
color: var(--primary-to-grayscale-to-bk);
}
.record_box_content {
display: flex;
column-gap: 1rem;
width: 100%;
height: calc(100% - 3.25rem);
}
.record_grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1.5fr;
grid-template-rows: 8.125rem auto;
column-gap: 1rem;
row-gap: 1rem;
width: 100%;
height: 100%;
}
.record_top {
display: grid;
grid-column-gap: 1rem;
width: 9rem;
}
.chart_cont_box {
height: 100%;
width: 9rem;
}
.diagon_cont_box {
display: grid;
grid-column-gap: 1rem;
}
.diagon_cont {
&.record {
width: 9rem;
height: 4.875rem;
}
}
.situation_box {
padding: 0.75rem;
border-radius: 0.125rem;
background: var(--more-visible-wh_6-to-100);
&.chart {
@include dflx_dcol_jbet;
grid-row: 1/3;
}
&.case1 {
grid-row: 1/2;
grid-column: 5/6;
}
&.case2 {
grid-row: 1/2;
grid-column: 6/7;
}
&.event {
display: grid;
grid-column: 5/7;
grid-template-columns: 1.5fr 1fr;
}
h4{
@include fs_14_medium;
color: var(--white-w_87-sec);
}
}
.case_wrap {
@include dflx;
column-gap: 0.5rem;
@ -938,45 +642,6 @@ footer {
line-height: 1.7;
}
}
// check box
.record_radio {
@include dflx_ac;
cursor: pointer;
.word {
color: var(--white-w_87-sec);
}
&.on {
.radio {
background-color: #fff;
border: 0.25rem solid #27d4ff;
}
.word {
color: var(--white-w_87-sec);
}
}
.radio {
display: inline-block;
width: 0.9375rem;
height: 0.9375rem;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 100%;
margin: 0 0.5rem 0 0;
&.mini{
width: 0.625rem;
height: 0.625rem;
border: 0.125rem solid #27d4ff;
margin: 0 0.375rem 0 0;
}
&.green {border: 0.125rem solid #16D9AB}
&.blue {border: 0.125rem solid #07F}
&.dark_blue {border: 0.125rem solid #0E44E5}
&.purple {border: 0.125rem solid #8972FF}
&.dark_purple {border: 0.125rem solid #6E3DFF}
}
.word {
@include fs_11_light;
}
}
// 사용자 관리 user
.user_wrap {
width: 100%;
@ -1065,11 +730,6 @@ footer {
.login_title {
color: var(--white-w_100-sec);
}
// font
.white_w_87 {color: var(--white-w_87) !important}
.white_w_bk {color: var(--white-w_87-sec) !important}
.white_ff_bk {color: var( --white-w_100-sec) !important}
/* html data-theme */
html[data-theme=light] {
@ -1145,16 +805,6 @@ html[data-theme=light] {
.img_see_off {@include filter_blue}
}
}
.btn_arrow_circle {
img {@include filter_black}
&.selected, &:hover:not(.disabled){
img {@include filter_black}
}
&.disabled{
// img {@include filter_white}
}
}
.btn_arrow_circle.line {
img {@include filter_black}
&.selected,&:hover:not(.disabled){
@ -1201,41 +851,6 @@ html[data-theme=light] {
opacity: 0.6;
}
}
.btn_toggle_icon :not(.map) {
span img {@include filter_black}
span.circle_grey32, .circle_grey28.popover {
img {@include filter_white}
}
span .circle_grey28.icon {
.img_on {@include filter_white}
}
&:hover, &.active, &:focus {
span .circle_grey28.popover {
img{@include filter_white}
.img_on {@include filter_white}
}
img {@include filter_white}
}
.circle_grey28 {
.img_on {@include filter_white}
}
span .circle_grey28 .icon {
.img {@include filter_white}
}
&.legend {
span.circle_grey32, .circle_grey28.popover {
img {@include filter_white}
}
span.circle_grey28.popover {
img{@include filter_white}
&.selected, &:hover:not(.legend), &:focus, &:active {
img {@include filter_white}
.img_on {@include filter_white}
}
}
}
}
.btn_file, .preview_box {
img{@include filter_black}
}
@ -1252,29 +867,12 @@ html[data-theme=light] {
.arr_up, .arr_right {
img {@include filter_black}
}
.diagon_cont {filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);}
.datepicker {
background-image: url(../images/calendar_gray_24.svg);
&:focus, &.on {
background-image: url(../images/calendar_blue_24.svg);
}
}
.accordion_block {
div {
button {
img {@include filter_black}
}
}
}
.accordion_block {
&.accord_select {
.accordion_title {
&.on, &.hover, &:hover, &:focus, &.selected {
img {@include filter_blue}
}
}
}
}
//date picker
.action_prev, .action_next {
@include filter_black
@ -1301,29 +899,7 @@ html[data-theme=light] {
.bt_srch{
@include filter_black
}
// main
.hamberger_btn {
content: url("../images/hamburger_bk_24.svg");
}
.logo_hd_kisa{
content: url("../images/logo_light.svg");
}
.light_none{
img{
display: none;
}
}
.lnb_popup_title_bg {
button{
img {@include filter_black}
}
}
.btn_fnb_search{
img {@include filter_blue;}
}
.put_delete{
img {@include filter_black}
}
.selector {
background-image: url("../images/arrow_down_gray_16.svg");
&.sm {
@ -1354,112 +930,6 @@ html[data-theme=light] {
content: url("../images/map_frame_light.svg")
}
}
// 3d map
.eastside, .westside, .southside, .northside{@include filter_blue;}
.mapcontrol_btn {@include filter_blue;}
// polygon
.polygon{
&.black{
img{
content: url("../images/Polygon_black_light.svg");
}
}
&.blue{
img{
content: url("../images/Polygon_blue_light.svg");
}
}
&.purple{
img{
content: url("../images/Polygon_purple_light.svg");
}
}
&.green{
img{
content: url("../images/Polygon_green_light.svg");
}
}
&.yellow{
img{
content: url("../images/Polygon_yellow_light.svg");
}
}
}
.pass_road{
img{@include filter_blue}
}
.light_conceal {
visibility: hidden;
}
.marker.cctv {
.img_selected{
content: url("../images/cctv_light_selected_48.svg");
}
}
.marker.weather {
.img_selected{
content: url("../images/weather_center_light_selected_48.svg");
}
}
.marker.bus {
.img_selected{
content: url("../images/bus_light_selected_48.svg");
}
}
.marker.depart {
.img_selected{
content: url("../images/depart_light_selected_48.svg");
}
}
.park_sign.danger.on {
background: url("../images/park_danger_light_on.svg") no-repeat center center;
}
.put_check {
img {@include filter_black}
}
.time_mark20 {@include filter_black}
// table
.row_type2{
.tac{img{@include filter_black}}
}
// card pattern
.ic_artff{
background: url('../images/arr_traff_light_16.svg') no-repeat center center;
}
.pg_prev, .pg_next {
img{@include filter_blue}
}
.sign_tri2 {
&.jam {
background: url(../images/sign_jam_light_28.svg) no-repeat center center;
background-size: contain;
}
&.ambulace{
background: url(../images/ambulance_light.svg) no-repeat center center;
background-size: contain;
}
}
// input
.pos_rel.lightmode{
opacity: 0;
}
.popup_close{
img{@include filter_white}
}
.wrput {
&.read_success {
display: none;
}
}
// card
.circle_g32.pencil{
img {@include filter_black}
}
// upload
.upload_btn{
img{@include filter_black;}
}
// template
.main_contents {
@ -1481,6 +951,13 @@ html[data-theme=light] {
.login_logo {
content: url("../images/logo_light_big.svg");
}
// main
.hamberger_btn {
content: url("../images/hamburger_bk_24.svg");
}
.logo_hd_kisa{
content: url("../images/logo_light.svg");
}
// light모드 display none
.light_none {
display: none;

+ 165
- 0
pages/Input.html View File

@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>KISA</title>
<meta name="keywords" content="KISA" />
<meta name="author" content="KISA" />
<meta name="descripption" content="KISA" />
<link rel="shortcut icon" href="../assets/images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="../assets/css/index.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" />
</head>
<body>
<div class="guide_back">
<div class="guide_wrap two_line">
<header class="two_line">
<article class="header_in">
<div class="header_left">
<h1 class="header_logo">
<a href="../template/Main.html">
<span class=""></span>
</a>
</h1>
</div>
<nav class="gnb two_line w500">
<ul class="col_gap40 w500">
<li>
<a href="Button.html">Button</a>
</li>
<li>
<a href="Input.html" class="on">Input</a>
</li>
<li class="m-t-36">
<div class="lightmode">
<div class="inner">
<input type="radio" name="toggle" id="toggle-radio-light" />
<label for="toggle-radio-light" class="tolight">
<i class="fas fa-sun tolight"></i>
</label>
<input type="radio" name="toggle" id="toggle-radio-dark" checked />
<label for="toggle-radio-dark" class="todark">
<i class="fas fa-moon todark"></i>
</label>
</div>
</div>
</li>
</ul>
</nav>
</article>
</header>
<div class="guide_center width1720">
<article class="guide_top">
<h1>Input</h1>
</article>
<article class="Gr_contents m-t-100">
<section class="comp_conts">
<dl class="comp_dl m-0">
<dt class="comp_dt w120 m-r-100">Text field</dt>
<dd class="comp_dd">
<div class="compline m-b-20">
<p class="comp_size m-r-40 fc_annotation87">Abled</p>
<div class="components">
<input type="text" class="wrput large w200" placeholder="Input text" />
<input type="text" class="wrput medium w200" placeholder="Input text" />
<input type="text" class="wrput small w200" placeholder="Input text" />
</div>
</div>
<div class="compline m-b-20">
<p class="comp_size m-r-40 fc_annotation87">Focused</p>
<div class="components">
<input type="text" class="wrput large on w200" placeholder="Input text" value="Input text" />
<input type="text" class="wrput medium on w200" placeholder="Input text" value="Input text" />
<input type="text" class="wrput small on w200" placeholder="Input text" value="Input text" />
</div>
</div>
<div class="compline m-b-20">
<p class="comp_size m-r-40 fc_annotation87">Disabled</p>
<div class="components">
<input type="text" class="wrput large disabled w200" placeholder="Input text" disabled />
<input type="text" class="wrput medium disabled w200" placeholder="Input text" disabled />
<input type="text" class="wrput small disabled w200" placeholder="Input text" disabled />
</div>
</div>
</dd>
</dl>
<dl class="comp_dl m-0">
<dt class="comp_dt w120 m-r-100">With timer</dt>
<dd class="comp_dd">
<div class="compline m-b-20">
<p class="comp_size m-r-40 fc_annotation87">Abled</p>
<div class="components">
<div class="put_zone">
<input type="text" class="wrput large w200" placeholder="Input text" />
<span class="timer">09:57</span>
</div>
<input type="text" class="wrput medium w200 op00" placeholder="Input text" />
<input type="text" class="wrput small w200 op00" placeholder="Input text" />
</div>
</div>
<div class="compline m-b-20">
<p class="comp_size m-r-40 fc_annotation87">Focused</p>
<div class="components">
<input type="text" class="wrput large on w200" placeholder="Input text" />
<input type="text" class="wrput medium w200 op00" placeholder="Input text" />
<input type="text" class="wrput small w200 op00" placeholder="Input text" />
</div>
</div>
<div class="compline m-b-20">
<p class="comp_size m-r-40 fc_annotation87">Disabled</p>
<div class="components">
<input type="text" class="wrput large w200" placeholder="Input text" />
<input type="text" class="wrput medium w200 op00" placeholder="Input text" />
<input type="text" class="wrput small w200 op00" placeholder="Input text" />
</div>
</div>
</dd>
</dl>
<dl class="comp_dl m-0 op00">
<dt class="comp_dt w120 m-r-100">Searchbar</dt>
<dd class="comp_dd">
<div class="compline m-b-20">
<p class="comp_size m-r-40 fc_annotation87">Abled</p>
<div class="components">
<input type="text" class="wrput large w200" placeholder="Input text" />
<input type="text" class="wrput medium w200" placeholder="Input text" />
<input type="text" class="wrput small w200" placeholder="Input text" />
</div>
</div>
<div class="compline m-b-20">
<p class="comp_size m-r-40 fc_annotation87">Focused</p>
<div class="components">
<input type="text" class="wrput large w200" placeholder="Input text" />
<input type="text" class="wrput medium w200" placeholder="Input text" />
<input type="text" class="wrput small w200" placeholder="Input text" />
</div>
</div>
<div class="compline m-b-20">
<p class="comp_size m-r-40 fc_annotation87">Disabled</p>
<div class="components">
<input type="text" class="wrput large w200" placeholder="Input text" />
<input type="text" class="wrput medium w200" placeholder="Input text" />
<input type="text" class="wrput small w200" placeholder="Input text" />
</div>
</div>
</dd>
</dl>
</section>
</article>
</div>
</div>
</div>
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/common.js"></script>
</body>
</html>

+ 0
- 18
template/Login_ver1.html View File

@ -57,23 +57,5 @@
</div>
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/common.js"></script>
<script>
$('.put_see').click(function(){
$(this).toggleClass('on');
});
$('.wrput').keydown(function(){
$(this).css('padding-right','2rem');
$(this).siblings('.put_delete').css('display','flex');
$(this).siblings('.put_see').css('display','flex');
});
$('.put_delete').click(function(){
$(this).siblings('.wrput').css('padding-right','0.75rem');
$(this).siblings('.wrput').val('');
$(this).css('display','none');
$(this).parent().siblings('.btn_srch28').removeClass('on');
});
</script>
</body>
</html>

Loading…
Cancel
Save