fonts 폴더 삭제 및 font 참조 url 추가
This commit is contained in:
Binary file not shown.
Binary file not shown.
@@ -1,5 +0,0 @@
|
||||
# Font Squirrel Font-face Generator Configuration File
|
||||
# Upload this file to the generator to recreate the settings
|
||||
# you used to create these fonts.
|
||||
|
||||
{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 687 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,7 +0,0 @@
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
@@ -1,129 +0,0 @@
|
||||
/*Notes about grid:
|
||||
Columns: 12
|
||||
Grid Width: 825px
|
||||
Column Width: 55px
|
||||
Gutter Width: 15px
|
||||
-------------------------------*/
|
||||
|
||||
|
||||
|
||||
.section {margin-bottom: 18px;
|
||||
}
|
||||
.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
|
||||
.section {*zoom: 1;}
|
||||
|
||||
.section .firstcolumn,
|
||||
.section .firstcol {margin-left: 0;}
|
||||
|
||||
|
||||
/* Border on left hand side of a column. */
|
||||
.border {
|
||||
padding-left: 7px;
|
||||
margin-left: 7px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Border with more whitespace, spans one column. */
|
||||
.colborder {
|
||||
padding-left: 42px;
|
||||
margin-left: 42px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The Grid Classes */
|
||||
.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
|
||||
{margin-left: 15px;float: left;display: inline; overflow: hidden;}
|
||||
|
||||
|
||||
.width1, .grid1, .span-1 {width: 55px;}
|
||||
.width1_2cols,.grid1_2cols {width: 20px;}
|
||||
.width1_3cols,.grid1_3cols {width: 8px;}
|
||||
.width1_4cols,.grid1_4cols {width: 2px;}
|
||||
.input_width1 {width: 49px;}
|
||||
|
||||
.width2, .grid2, .span-2 {width: 125px;}
|
||||
.width2_3cols,.grid2_3cols {width: 31px;}
|
||||
.width2_4cols,.grid2_4cols {width: 20px;}
|
||||
.input_width2 {width: 119px;}
|
||||
|
||||
.width3, .grid3, .span-3 {width: 195px;}
|
||||
.width3_2cols,.grid3_2cols {width: 90px;}
|
||||
.width3_4cols,.grid3_4cols {width: 37px;}
|
||||
.input_width3 {width: 189px;}
|
||||
|
||||
.width4, .grid4, .span-4 {width: 265px;}
|
||||
.width4_3cols,.grid4_3cols {width: 78px;}
|
||||
.input_width4 {width: 259px;}
|
||||
|
||||
.width5, .grid5, .span-5 {width: 335px;}
|
||||
.width5_2cols,.grid5_2cols {width: 160px;}
|
||||
.width5_3cols,.grid5_3cols {width: 101px;}
|
||||
.width5_4cols,.grid5_4cols {width: 72px;}
|
||||
.input_width5 {width: 329px;}
|
||||
|
||||
.width6, .grid6, .span-6 {width: 405px;}
|
||||
.width6_4cols,.grid6_4cols {width: 90px;}
|
||||
.input_width6 {width: 399px;}
|
||||
|
||||
.width7, .grid7, .span-7 {width: 475px;}
|
||||
.width7_2cols,.grid7_2cols {width: 230px;}
|
||||
.width7_3cols,.grid7_3cols {width: 148px;}
|
||||
.width7_4cols,.grid7_4cols {width: 107px;}
|
||||
.input_width7 {width: 469px;}
|
||||
|
||||
.width8, .grid8, .span-8 {width: 545px;}
|
||||
.width8_3cols,.grid8_3cols {width: 171px;}
|
||||
.input_width8 {width: 539px;}
|
||||
|
||||
.width9, .grid9, .span-9 {width: 615px;}
|
||||
.width9_2cols,.grid9_2cols {width: 300px;}
|
||||
.width9_4cols,.grid9_4cols {width: 142px;}
|
||||
.input_width9 {width: 609px;}
|
||||
|
||||
.width10, .grid10, .span-10 {width: 685px;}
|
||||
.width10_3cols,.grid10_3cols {width: 218px;}
|
||||
.width10_4cols,.grid10_4cols {width: 160px;}
|
||||
.input_width10 {width: 679px;}
|
||||
|
||||
.width11, .grid11, .span-11 {width: 755px;}
|
||||
.width11_2cols,.grid11_2cols {width: 370px;}
|
||||
.width11_3cols,.grid11_3cols {width: 241px;}
|
||||
.width11_4cols,.grid11_4cols {width: 177px;}
|
||||
.input_width11 {width: 749px;}
|
||||
|
||||
.width12, .grid12, .span-12 {width: 825px;}
|
||||
.input_width12 {width: 819px;}
|
||||
|
||||
/* Subdivided grid spaces */
|
||||
.emptycols_left1, .prepend-1 {padding-left: 70px;}
|
||||
.emptycols_right1, .append-1 {padding-right: 70px;}
|
||||
.emptycols_left2, .prepend-2 {padding-left: 140px;}
|
||||
.emptycols_right2, .append-2 {padding-right: 140px;}
|
||||
.emptycols_left3, .prepend-3 {padding-left: 210px;}
|
||||
.emptycols_right3, .append-3 {padding-right: 210px;}
|
||||
.emptycols_left4, .prepend-4 {padding-left: 280px;}
|
||||
.emptycols_right4, .append-4 {padding-right: 280px;}
|
||||
.emptycols_left5, .prepend-5 {padding-left: 350px;}
|
||||
.emptycols_right5, .append-5 {padding-right: 350px;}
|
||||
.emptycols_left6, .prepend-6 {padding-left: 420px;}
|
||||
.emptycols_right6, .append-6 {padding-right: 420px;}
|
||||
.emptycols_left7, .prepend-7 {padding-left: 490px;}
|
||||
.emptycols_right7, .append-7 {padding-right: 490px;}
|
||||
.emptycols_left8, .prepend-8 {padding-left: 560px;}
|
||||
.emptycols_right8, .append-8 {padding-right: 560px;}
|
||||
.emptycols_left9, .prepend-9 {padding-left: 630px;}
|
||||
.emptycols_right9, .append-9 {padding-right: 630px;}
|
||||
.emptycols_left10, .prepend-10 {padding-left: 700px;}
|
||||
.emptycols_right10, .append-10 {padding-right: 700px;}
|
||||
.emptycols_left11, .prepend-11 {padding-left: 770px;}
|
||||
.emptycols_right11, .append-11 {padding-right: 770px;}
|
||||
.pull-1 {margin-left: -70px;}
|
||||
.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
|
||||
.pull-2 {margin-left: -140px;}
|
||||
.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
|
||||
.pull-3 {margin-left: -210px;}
|
||||
.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
|
||||
.pull-4 {margin-left: -280px;}
|
||||
.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
|
||||
@@ -1,396 +0,0 @@
|
||||
@import url('grid_12-825-55-15.css');
|
||||
|
||||
/*
|
||||
CSS Reset by Eric Meyer - Released under Public Domain
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
*/
|
||||
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, font, 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
|
||||
{margin: 0;padding: 0;border: 0;outline: 0;
|
||||
font-size: 100%;vertical-align: baseline;
|
||||
background: transparent;}
|
||||
body {line-height: 1;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {content: ''; content: none;}
|
||||
:focus {outline: 0;}
|
||||
ins {text-decoration: none;}
|
||||
del {text-decoration: line-through;}
|
||||
table {border-collapse: collapse;border-spacing: 0;}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1883ba;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 865px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
|
||||
#header {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#header span {
|
||||
color: #666;
|
||||
}
|
||||
#main_content {
|
||||
background-color: #fff;
|
||||
padding: 60px 20px 20px;
|
||||
}
|
||||
|
||||
|
||||
#footer p {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 50px;
|
||||
color: #333;
|
||||
font: 10px Arial, sans-serif;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font: bold 11px/11px 'Arial';
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tabs li a:hover {
|
||||
background-color: #00b3ff;
|
||||
|
||||
}
|
||||
|
||||
.tabs li.active a {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.huge {
|
||||
|
||||
font-size: 120px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
letter-spacing: -.02em;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.glyph_range {
|
||||
font-size: 72px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.size10{ font-size: 10px; }
|
||||
.size11{ font-size: 11px; }
|
||||
.size12{ font-size: 12px; }
|
||||
.size13{ font-size: 13px; }
|
||||
.size14{ font-size: 14px; }
|
||||
.size16{ font-size: 16px; }
|
||||
.size18{ font-size: 18px; }
|
||||
.size20{ font-size: 20px; }
|
||||
.size24{ font-size: 24px; }
|
||||
.size30{ font-size: 30px; }
|
||||
.size36{ font-size: 36px; }
|
||||
.size48{ font-size: 48px; }
|
||||
.size60{ font-size: 60px; }
|
||||
.size72{ font-size: 72px; }
|
||||
.size90{ font-size: 90px; }
|
||||
|
||||
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row2 { height: 160px;}
|
||||
.psample_row3 { height: 160px;}
|
||||
.psample_row4 { height: 160px;}
|
||||
|
||||
.psample {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.psample p {
|
||||
line-height: 1.3em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.psample span {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.white_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.black_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fullreverse {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
.sample_table td {
|
||||
padding-top: 3px;
|
||||
padding-bottom:5px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.sample_table td:first-child {
|
||||
background-color: #eee;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
padding-left: 0;
|
||||
padding: 5px;
|
||||
font: 11px/12px "Courier New", Courier, mono;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
|
||||
|
||||
.box {
|
||||
padding: 18px;
|
||||
margin-bottom: 18px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
|
||||
|
||||
#bodycomparison {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 72px;
|
||||
height: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#bodycomparison div{
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
display: inline;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#bodycomparison div span{
|
||||
font: 10px Arial;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#xheight {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #d9f3ff;
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.fontbody {
|
||||
position: relative;
|
||||
}
|
||||
.arialbody{
|
||||
font-family: Arial;
|
||||
position: relative;
|
||||
}
|
||||
.verdanabody{
|
||||
font-family: Verdana;
|
||||
position: relative;
|
||||
}
|
||||
.georgiabody{
|
||||
font-family: Georgia;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* @group Layout page
|
||||
*/
|
||||
|
||||
#layout h1 {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h2 {
|
||||
font-size: 24px;
|
||||
line-height: 23px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h3 {
|
||||
font-size: 22px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 1em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
#layout p.byline {
|
||||
font-size: 12px;
|
||||
margin-top: 18px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#layout p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#layout p.large{
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#layout .sidebar p{
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#layout p.caption {
|
||||
font-size: 10px;
|
||||
margin-top: -16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group Glyphs */
|
||||
|
||||
#glyph_chart div{
|
||||
background-color: #d9f3ff;
|
||||
color: black;
|
||||
float: left;
|
||||
font-size: 36px;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
text-align: center;
|
||||
width: 1.2em;
|
||||
position: relative;
|
||||
padding: .6em .2em .2em;
|
||||
}
|
||||
|
||||
#glyph_chart div p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font: bold 9px Arial, sans-serif;
|
||||
background-color: #3a768f;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
|
||||
#glyphs h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Installing */
|
||||
|
||||
#installing {
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
#installing p,
|
||||
#glyphs p{
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 18px;
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#installing h3{
|
||||
font-size: 15px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
#rendering h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.render_table td {
|
||||
font: 11px "Courier New", Courier, mono;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'notokr-black';
|
||||
src: url('notokr-black.eot');
|
||||
src: url('notokr-black.eot?#iefix') format('embedded-opentype'),
|
||||
url('notokr-black.woff2') format('woff2'),
|
||||
url('notokr-black.woff') format('woff'),
|
||||
url('notokr-black.ttf') format('truetype'),
|
||||
url('notokr-black.svg#notokr-black') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
# Font Squirrel Font-face Generator Configuration File
|
||||
# Upload this file to the generator to recreate the settings
|
||||
# you used to create these fonts.
|
||||
|
||||
{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 690 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,7 +0,0 @@
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
@@ -1,129 +0,0 @@
|
||||
/*Notes about grid:
|
||||
Columns: 12
|
||||
Grid Width: 825px
|
||||
Column Width: 55px
|
||||
Gutter Width: 15px
|
||||
-------------------------------*/
|
||||
|
||||
|
||||
|
||||
.section {margin-bottom: 18px;
|
||||
}
|
||||
.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
|
||||
.section {*zoom: 1;}
|
||||
|
||||
.section .firstcolumn,
|
||||
.section .firstcol {margin-left: 0;}
|
||||
|
||||
|
||||
/* Border on left hand side of a column. */
|
||||
.border {
|
||||
padding-left: 7px;
|
||||
margin-left: 7px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Border with more whitespace, spans one column. */
|
||||
.colborder {
|
||||
padding-left: 42px;
|
||||
margin-left: 42px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The Grid Classes */
|
||||
.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
|
||||
{margin-left: 15px;float: left;display: inline; overflow: hidden;}
|
||||
|
||||
|
||||
.width1, .grid1, .span-1 {width: 55px;}
|
||||
.width1_2cols,.grid1_2cols {width: 20px;}
|
||||
.width1_3cols,.grid1_3cols {width: 8px;}
|
||||
.width1_4cols,.grid1_4cols {width: 2px;}
|
||||
.input_width1 {width: 49px;}
|
||||
|
||||
.width2, .grid2, .span-2 {width: 125px;}
|
||||
.width2_3cols,.grid2_3cols {width: 31px;}
|
||||
.width2_4cols,.grid2_4cols {width: 20px;}
|
||||
.input_width2 {width: 119px;}
|
||||
|
||||
.width3, .grid3, .span-3 {width: 195px;}
|
||||
.width3_2cols,.grid3_2cols {width: 90px;}
|
||||
.width3_4cols,.grid3_4cols {width: 37px;}
|
||||
.input_width3 {width: 189px;}
|
||||
|
||||
.width4, .grid4, .span-4 {width: 265px;}
|
||||
.width4_3cols,.grid4_3cols {width: 78px;}
|
||||
.input_width4 {width: 259px;}
|
||||
|
||||
.width5, .grid5, .span-5 {width: 335px;}
|
||||
.width5_2cols,.grid5_2cols {width: 160px;}
|
||||
.width5_3cols,.grid5_3cols {width: 101px;}
|
||||
.width5_4cols,.grid5_4cols {width: 72px;}
|
||||
.input_width5 {width: 329px;}
|
||||
|
||||
.width6, .grid6, .span-6 {width: 405px;}
|
||||
.width6_4cols,.grid6_4cols {width: 90px;}
|
||||
.input_width6 {width: 399px;}
|
||||
|
||||
.width7, .grid7, .span-7 {width: 475px;}
|
||||
.width7_2cols,.grid7_2cols {width: 230px;}
|
||||
.width7_3cols,.grid7_3cols {width: 148px;}
|
||||
.width7_4cols,.grid7_4cols {width: 107px;}
|
||||
.input_width7 {width: 469px;}
|
||||
|
||||
.width8, .grid8, .span-8 {width: 545px;}
|
||||
.width8_3cols,.grid8_3cols {width: 171px;}
|
||||
.input_width8 {width: 539px;}
|
||||
|
||||
.width9, .grid9, .span-9 {width: 615px;}
|
||||
.width9_2cols,.grid9_2cols {width: 300px;}
|
||||
.width9_4cols,.grid9_4cols {width: 142px;}
|
||||
.input_width9 {width: 609px;}
|
||||
|
||||
.width10, .grid10, .span-10 {width: 685px;}
|
||||
.width10_3cols,.grid10_3cols {width: 218px;}
|
||||
.width10_4cols,.grid10_4cols {width: 160px;}
|
||||
.input_width10 {width: 679px;}
|
||||
|
||||
.width11, .grid11, .span-11 {width: 755px;}
|
||||
.width11_2cols,.grid11_2cols {width: 370px;}
|
||||
.width11_3cols,.grid11_3cols {width: 241px;}
|
||||
.width11_4cols,.grid11_4cols {width: 177px;}
|
||||
.input_width11 {width: 749px;}
|
||||
|
||||
.width12, .grid12, .span-12 {width: 825px;}
|
||||
.input_width12 {width: 819px;}
|
||||
|
||||
/* Subdivided grid spaces */
|
||||
.emptycols_left1, .prepend-1 {padding-left: 70px;}
|
||||
.emptycols_right1, .append-1 {padding-right: 70px;}
|
||||
.emptycols_left2, .prepend-2 {padding-left: 140px;}
|
||||
.emptycols_right2, .append-2 {padding-right: 140px;}
|
||||
.emptycols_left3, .prepend-3 {padding-left: 210px;}
|
||||
.emptycols_right3, .append-3 {padding-right: 210px;}
|
||||
.emptycols_left4, .prepend-4 {padding-left: 280px;}
|
||||
.emptycols_right4, .append-4 {padding-right: 280px;}
|
||||
.emptycols_left5, .prepend-5 {padding-left: 350px;}
|
||||
.emptycols_right5, .append-5 {padding-right: 350px;}
|
||||
.emptycols_left6, .prepend-6 {padding-left: 420px;}
|
||||
.emptycols_right6, .append-6 {padding-right: 420px;}
|
||||
.emptycols_left7, .prepend-7 {padding-left: 490px;}
|
||||
.emptycols_right7, .append-7 {padding-right: 490px;}
|
||||
.emptycols_left8, .prepend-8 {padding-left: 560px;}
|
||||
.emptycols_right8, .append-8 {padding-right: 560px;}
|
||||
.emptycols_left9, .prepend-9 {padding-left: 630px;}
|
||||
.emptycols_right9, .append-9 {padding-right: 630px;}
|
||||
.emptycols_left10, .prepend-10 {padding-left: 700px;}
|
||||
.emptycols_right10, .append-10 {padding-right: 700px;}
|
||||
.emptycols_left11, .prepend-11 {padding-left: 770px;}
|
||||
.emptycols_right11, .append-11 {padding-right: 770px;}
|
||||
.pull-1 {margin-left: -70px;}
|
||||
.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
|
||||
.pull-2 {margin-left: -140px;}
|
||||
.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
|
||||
.pull-3 {margin-left: -210px;}
|
||||
.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
|
||||
.pull-4 {margin-left: -280px;}
|
||||
.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
|
||||
@@ -1,396 +0,0 @@
|
||||
@import url('grid_12-825-55-15.css');
|
||||
|
||||
/*
|
||||
CSS Reset by Eric Meyer - Released under Public Domain
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
*/
|
||||
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, font, 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
|
||||
{margin: 0;padding: 0;border: 0;outline: 0;
|
||||
font-size: 100%;vertical-align: baseline;
|
||||
background: transparent;}
|
||||
body {line-height: 1;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {content: ''; content: none;}
|
||||
:focus {outline: 0;}
|
||||
ins {text-decoration: none;}
|
||||
del {text-decoration: line-through;}
|
||||
table {border-collapse: collapse;border-spacing: 0;}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1883ba;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 865px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
|
||||
#header {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#header span {
|
||||
color: #666;
|
||||
}
|
||||
#main_content {
|
||||
background-color: #fff;
|
||||
padding: 60px 20px 20px;
|
||||
}
|
||||
|
||||
|
||||
#footer p {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 50px;
|
||||
color: #333;
|
||||
font: 10px Arial, sans-serif;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font: bold 11px/11px 'Arial';
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tabs li a:hover {
|
||||
background-color: #00b3ff;
|
||||
|
||||
}
|
||||
|
||||
.tabs li.active a {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.huge {
|
||||
|
||||
font-size: 120px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
letter-spacing: -.02em;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.glyph_range {
|
||||
font-size: 72px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.size10{ font-size: 10px; }
|
||||
.size11{ font-size: 11px; }
|
||||
.size12{ font-size: 12px; }
|
||||
.size13{ font-size: 13px; }
|
||||
.size14{ font-size: 14px; }
|
||||
.size16{ font-size: 16px; }
|
||||
.size18{ font-size: 18px; }
|
||||
.size20{ font-size: 20px; }
|
||||
.size24{ font-size: 24px; }
|
||||
.size30{ font-size: 30px; }
|
||||
.size36{ font-size: 36px; }
|
||||
.size48{ font-size: 48px; }
|
||||
.size60{ font-size: 60px; }
|
||||
.size72{ font-size: 72px; }
|
||||
.size90{ font-size: 90px; }
|
||||
|
||||
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row2 { height: 160px;}
|
||||
.psample_row3 { height: 160px;}
|
||||
.psample_row4 { height: 160px;}
|
||||
|
||||
.psample {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.psample p {
|
||||
line-height: 1.3em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.psample span {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.white_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.black_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fullreverse {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
.sample_table td {
|
||||
padding-top: 3px;
|
||||
padding-bottom:5px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.sample_table td:first-child {
|
||||
background-color: #eee;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
padding-left: 0;
|
||||
padding: 5px;
|
||||
font: 11px/12px "Courier New", Courier, mono;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
|
||||
|
||||
.box {
|
||||
padding: 18px;
|
||||
margin-bottom: 18px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
|
||||
|
||||
#bodycomparison {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 72px;
|
||||
height: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#bodycomparison div{
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
display: inline;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#bodycomparison div span{
|
||||
font: 10px Arial;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#xheight {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #d9f3ff;
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.fontbody {
|
||||
position: relative;
|
||||
}
|
||||
.arialbody{
|
||||
font-family: Arial;
|
||||
position: relative;
|
||||
}
|
||||
.verdanabody{
|
||||
font-family: Verdana;
|
||||
position: relative;
|
||||
}
|
||||
.georgiabody{
|
||||
font-family: Georgia;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* @group Layout page
|
||||
*/
|
||||
|
||||
#layout h1 {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h2 {
|
||||
font-size: 24px;
|
||||
line-height: 23px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h3 {
|
||||
font-size: 22px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 1em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
#layout p.byline {
|
||||
font-size: 12px;
|
||||
margin-top: 18px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#layout p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#layout p.large{
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#layout .sidebar p{
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#layout p.caption {
|
||||
font-size: 10px;
|
||||
margin-top: -16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group Glyphs */
|
||||
|
||||
#glyph_chart div{
|
||||
background-color: #d9f3ff;
|
||||
color: black;
|
||||
float: left;
|
||||
font-size: 36px;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
text-align: center;
|
||||
width: 1.2em;
|
||||
position: relative;
|
||||
padding: .6em .2em .2em;
|
||||
}
|
||||
|
||||
#glyph_chart div p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font: bold 9px Arial, sans-serif;
|
||||
background-color: #3a768f;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
|
||||
#glyphs h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Installing */
|
||||
|
||||
#installing {
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
#installing p,
|
||||
#glyphs p{
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 18px;
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#installing h3{
|
||||
font-size: 15px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
#rendering h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.render_table td {
|
||||
font: 11px "Courier New", Courier, mono;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'notokr-bold';
|
||||
src: url('notokr-bold.eot');
|
||||
src: url('notokr-bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('notokr-bold.woff2') format('woff2'),
|
||||
url('notokr-bold.woff') format('woff'),
|
||||
url('notokr-bold.ttf') format('truetype'),
|
||||
url('notokr-bold.svg#notokr-bold') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
# Font Squirrel Font-face Generator Configuration File
|
||||
# Upload this file to the generator to recreate the settings
|
||||
# you used to create these fonts.
|
||||
|
||||
{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 717 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,7 +0,0 @@
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
@@ -1,129 +0,0 @@
|
||||
/*Notes about grid:
|
||||
Columns: 12
|
||||
Grid Width: 825px
|
||||
Column Width: 55px
|
||||
Gutter Width: 15px
|
||||
-------------------------------*/
|
||||
|
||||
|
||||
|
||||
.section {margin-bottom: 18px;
|
||||
}
|
||||
.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
|
||||
.section {*zoom: 1;}
|
||||
|
||||
.section .firstcolumn,
|
||||
.section .firstcol {margin-left: 0;}
|
||||
|
||||
|
||||
/* Border on left hand side of a column. */
|
||||
.border {
|
||||
padding-left: 7px;
|
||||
margin-left: 7px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Border with more whitespace, spans one column. */
|
||||
.colborder {
|
||||
padding-left: 42px;
|
||||
margin-left: 42px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The Grid Classes */
|
||||
.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
|
||||
{margin-left: 15px;float: left;display: inline; overflow: hidden;}
|
||||
|
||||
|
||||
.width1, .grid1, .span-1 {width: 55px;}
|
||||
.width1_2cols,.grid1_2cols {width: 20px;}
|
||||
.width1_3cols,.grid1_3cols {width: 8px;}
|
||||
.width1_4cols,.grid1_4cols {width: 2px;}
|
||||
.input_width1 {width: 49px;}
|
||||
|
||||
.width2, .grid2, .span-2 {width: 125px;}
|
||||
.width2_3cols,.grid2_3cols {width: 31px;}
|
||||
.width2_4cols,.grid2_4cols {width: 20px;}
|
||||
.input_width2 {width: 119px;}
|
||||
|
||||
.width3, .grid3, .span-3 {width: 195px;}
|
||||
.width3_2cols,.grid3_2cols {width: 90px;}
|
||||
.width3_4cols,.grid3_4cols {width: 37px;}
|
||||
.input_width3 {width: 189px;}
|
||||
|
||||
.width4, .grid4, .span-4 {width: 265px;}
|
||||
.width4_3cols,.grid4_3cols {width: 78px;}
|
||||
.input_width4 {width: 259px;}
|
||||
|
||||
.width5, .grid5, .span-5 {width: 335px;}
|
||||
.width5_2cols,.grid5_2cols {width: 160px;}
|
||||
.width5_3cols,.grid5_3cols {width: 101px;}
|
||||
.width5_4cols,.grid5_4cols {width: 72px;}
|
||||
.input_width5 {width: 329px;}
|
||||
|
||||
.width6, .grid6, .span-6 {width: 405px;}
|
||||
.width6_4cols,.grid6_4cols {width: 90px;}
|
||||
.input_width6 {width: 399px;}
|
||||
|
||||
.width7, .grid7, .span-7 {width: 475px;}
|
||||
.width7_2cols,.grid7_2cols {width: 230px;}
|
||||
.width7_3cols,.grid7_3cols {width: 148px;}
|
||||
.width7_4cols,.grid7_4cols {width: 107px;}
|
||||
.input_width7 {width: 469px;}
|
||||
|
||||
.width8, .grid8, .span-8 {width: 545px;}
|
||||
.width8_3cols,.grid8_3cols {width: 171px;}
|
||||
.input_width8 {width: 539px;}
|
||||
|
||||
.width9, .grid9, .span-9 {width: 615px;}
|
||||
.width9_2cols,.grid9_2cols {width: 300px;}
|
||||
.width9_4cols,.grid9_4cols {width: 142px;}
|
||||
.input_width9 {width: 609px;}
|
||||
|
||||
.width10, .grid10, .span-10 {width: 685px;}
|
||||
.width10_3cols,.grid10_3cols {width: 218px;}
|
||||
.width10_4cols,.grid10_4cols {width: 160px;}
|
||||
.input_width10 {width: 679px;}
|
||||
|
||||
.width11, .grid11, .span-11 {width: 755px;}
|
||||
.width11_2cols,.grid11_2cols {width: 370px;}
|
||||
.width11_3cols,.grid11_3cols {width: 241px;}
|
||||
.width11_4cols,.grid11_4cols {width: 177px;}
|
||||
.input_width11 {width: 749px;}
|
||||
|
||||
.width12, .grid12, .span-12 {width: 825px;}
|
||||
.input_width12 {width: 819px;}
|
||||
|
||||
/* Subdivided grid spaces */
|
||||
.emptycols_left1, .prepend-1 {padding-left: 70px;}
|
||||
.emptycols_right1, .append-1 {padding-right: 70px;}
|
||||
.emptycols_left2, .prepend-2 {padding-left: 140px;}
|
||||
.emptycols_right2, .append-2 {padding-right: 140px;}
|
||||
.emptycols_left3, .prepend-3 {padding-left: 210px;}
|
||||
.emptycols_right3, .append-3 {padding-right: 210px;}
|
||||
.emptycols_left4, .prepend-4 {padding-left: 280px;}
|
||||
.emptycols_right4, .append-4 {padding-right: 280px;}
|
||||
.emptycols_left5, .prepend-5 {padding-left: 350px;}
|
||||
.emptycols_right5, .append-5 {padding-right: 350px;}
|
||||
.emptycols_left6, .prepend-6 {padding-left: 420px;}
|
||||
.emptycols_right6, .append-6 {padding-right: 420px;}
|
||||
.emptycols_left7, .prepend-7 {padding-left: 490px;}
|
||||
.emptycols_right7, .append-7 {padding-right: 490px;}
|
||||
.emptycols_left8, .prepend-8 {padding-left: 560px;}
|
||||
.emptycols_right8, .append-8 {padding-right: 560px;}
|
||||
.emptycols_left9, .prepend-9 {padding-left: 630px;}
|
||||
.emptycols_right9, .append-9 {padding-right: 630px;}
|
||||
.emptycols_left10, .prepend-10 {padding-left: 700px;}
|
||||
.emptycols_right10, .append-10 {padding-right: 700px;}
|
||||
.emptycols_left11, .prepend-11 {padding-left: 770px;}
|
||||
.emptycols_right11, .append-11 {padding-right: 770px;}
|
||||
.pull-1 {margin-left: -70px;}
|
||||
.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
|
||||
.pull-2 {margin-left: -140px;}
|
||||
.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
|
||||
.pull-3 {margin-left: -210px;}
|
||||
.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
|
||||
.pull-4 {margin-left: -280px;}
|
||||
.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
|
||||
@@ -1,396 +0,0 @@
|
||||
@import url('grid_12-825-55-15.css');
|
||||
|
||||
/*
|
||||
CSS Reset by Eric Meyer - Released under Public Domain
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
*/
|
||||
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, font, 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
|
||||
{margin: 0;padding: 0;border: 0;outline: 0;
|
||||
font-size: 100%;vertical-align: baseline;
|
||||
background: transparent;}
|
||||
body {line-height: 1;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {content: ''; content: none;}
|
||||
:focus {outline: 0;}
|
||||
ins {text-decoration: none;}
|
||||
del {text-decoration: line-through;}
|
||||
table {border-collapse: collapse;border-spacing: 0;}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1883ba;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 865px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
|
||||
#header {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#header span {
|
||||
color: #666;
|
||||
}
|
||||
#main_content {
|
||||
background-color: #fff;
|
||||
padding: 60px 20px 20px;
|
||||
}
|
||||
|
||||
|
||||
#footer p {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 50px;
|
||||
color: #333;
|
||||
font: 10px Arial, sans-serif;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font: bold 11px/11px 'Arial';
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tabs li a:hover {
|
||||
background-color: #00b3ff;
|
||||
|
||||
}
|
||||
|
||||
.tabs li.active a {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.huge {
|
||||
|
||||
font-size: 120px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
letter-spacing: -.02em;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.glyph_range {
|
||||
font-size: 72px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.size10{ font-size: 10px; }
|
||||
.size11{ font-size: 11px; }
|
||||
.size12{ font-size: 12px; }
|
||||
.size13{ font-size: 13px; }
|
||||
.size14{ font-size: 14px; }
|
||||
.size16{ font-size: 16px; }
|
||||
.size18{ font-size: 18px; }
|
||||
.size20{ font-size: 20px; }
|
||||
.size24{ font-size: 24px; }
|
||||
.size30{ font-size: 30px; }
|
||||
.size36{ font-size: 36px; }
|
||||
.size48{ font-size: 48px; }
|
||||
.size60{ font-size: 60px; }
|
||||
.size72{ font-size: 72px; }
|
||||
.size90{ font-size: 90px; }
|
||||
|
||||
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row2 { height: 160px;}
|
||||
.psample_row3 { height: 160px;}
|
||||
.psample_row4 { height: 160px;}
|
||||
|
||||
.psample {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.psample p {
|
||||
line-height: 1.3em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.psample span {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.white_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.black_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fullreverse {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
.sample_table td {
|
||||
padding-top: 3px;
|
||||
padding-bottom:5px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.sample_table td:first-child {
|
||||
background-color: #eee;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
padding-left: 0;
|
||||
padding: 5px;
|
||||
font: 11px/12px "Courier New", Courier, mono;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
|
||||
|
||||
.box {
|
||||
padding: 18px;
|
||||
margin-bottom: 18px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
|
||||
|
||||
#bodycomparison {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 72px;
|
||||
height: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#bodycomparison div{
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
display: inline;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#bodycomparison div span{
|
||||
font: 10px Arial;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#xheight {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #d9f3ff;
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.fontbody {
|
||||
position: relative;
|
||||
}
|
||||
.arialbody{
|
||||
font-family: Arial;
|
||||
position: relative;
|
||||
}
|
||||
.verdanabody{
|
||||
font-family: Verdana;
|
||||
position: relative;
|
||||
}
|
||||
.georgiabody{
|
||||
font-family: Georgia;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* @group Layout page
|
||||
*/
|
||||
|
||||
#layout h1 {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h2 {
|
||||
font-size: 24px;
|
||||
line-height: 23px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h3 {
|
||||
font-size: 22px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 1em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
#layout p.byline {
|
||||
font-size: 12px;
|
||||
margin-top: 18px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#layout p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#layout p.large{
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#layout .sidebar p{
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#layout p.caption {
|
||||
font-size: 10px;
|
||||
margin-top: -16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group Glyphs */
|
||||
|
||||
#glyph_chart div{
|
||||
background-color: #d9f3ff;
|
||||
color: black;
|
||||
float: left;
|
||||
font-size: 36px;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
text-align: center;
|
||||
width: 1.2em;
|
||||
position: relative;
|
||||
padding: .6em .2em .2em;
|
||||
}
|
||||
|
||||
#glyph_chart div p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font: bold 9px Arial, sans-serif;
|
||||
background-color: #3a768f;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
|
||||
#glyphs h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Installing */
|
||||
|
||||
#installing {
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
#installing p,
|
||||
#glyphs p{
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 18px;
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#installing h3{
|
||||
font-size: 15px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
#rendering h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.render_table td {
|
||||
font: 11px "Courier New", Courier, mono;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'notokr-demilight';
|
||||
src: url('notokr-demilight.eot');
|
||||
src: url('notokr-demilight.eot?#iefix') format('embedded-opentype'),
|
||||
url('notokr-demilight.woff2') format('woff2'),
|
||||
url('notokr-demilight.woff') format('woff'),
|
||||
url('notokr-demilight.ttf') format('truetype'),
|
||||
url('notokr-demilight.svg#notokr-demilight') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
# Font Squirrel Font-face Generator Configuration File
|
||||
# Upload this file to the generator to recreate the settings
|
||||
# you used to create these fonts.
|
||||
|
||||
{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 731 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,7 +0,0 @@
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
@@ -1,129 +0,0 @@
|
||||
/*Notes about grid:
|
||||
Columns: 12
|
||||
Grid Width: 825px
|
||||
Column Width: 55px
|
||||
Gutter Width: 15px
|
||||
-------------------------------*/
|
||||
|
||||
|
||||
|
||||
.section {margin-bottom: 18px;
|
||||
}
|
||||
.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
|
||||
.section {*zoom: 1;}
|
||||
|
||||
.section .firstcolumn,
|
||||
.section .firstcol {margin-left: 0;}
|
||||
|
||||
|
||||
/* Border on left hand side of a column. */
|
||||
.border {
|
||||
padding-left: 7px;
|
||||
margin-left: 7px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Border with more whitespace, spans one column. */
|
||||
.colborder {
|
||||
padding-left: 42px;
|
||||
margin-left: 42px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The Grid Classes */
|
||||
.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
|
||||
{margin-left: 15px;float: left;display: inline; overflow: hidden;}
|
||||
|
||||
|
||||
.width1, .grid1, .span-1 {width: 55px;}
|
||||
.width1_2cols,.grid1_2cols {width: 20px;}
|
||||
.width1_3cols,.grid1_3cols {width: 8px;}
|
||||
.width1_4cols,.grid1_4cols {width: 2px;}
|
||||
.input_width1 {width: 49px;}
|
||||
|
||||
.width2, .grid2, .span-2 {width: 125px;}
|
||||
.width2_3cols,.grid2_3cols {width: 31px;}
|
||||
.width2_4cols,.grid2_4cols {width: 20px;}
|
||||
.input_width2 {width: 119px;}
|
||||
|
||||
.width3, .grid3, .span-3 {width: 195px;}
|
||||
.width3_2cols,.grid3_2cols {width: 90px;}
|
||||
.width3_4cols,.grid3_4cols {width: 37px;}
|
||||
.input_width3 {width: 189px;}
|
||||
|
||||
.width4, .grid4, .span-4 {width: 265px;}
|
||||
.width4_3cols,.grid4_3cols {width: 78px;}
|
||||
.input_width4 {width: 259px;}
|
||||
|
||||
.width5, .grid5, .span-5 {width: 335px;}
|
||||
.width5_2cols,.grid5_2cols {width: 160px;}
|
||||
.width5_3cols,.grid5_3cols {width: 101px;}
|
||||
.width5_4cols,.grid5_4cols {width: 72px;}
|
||||
.input_width5 {width: 329px;}
|
||||
|
||||
.width6, .grid6, .span-6 {width: 405px;}
|
||||
.width6_4cols,.grid6_4cols {width: 90px;}
|
||||
.input_width6 {width: 399px;}
|
||||
|
||||
.width7, .grid7, .span-7 {width: 475px;}
|
||||
.width7_2cols,.grid7_2cols {width: 230px;}
|
||||
.width7_3cols,.grid7_3cols {width: 148px;}
|
||||
.width7_4cols,.grid7_4cols {width: 107px;}
|
||||
.input_width7 {width: 469px;}
|
||||
|
||||
.width8, .grid8, .span-8 {width: 545px;}
|
||||
.width8_3cols,.grid8_3cols {width: 171px;}
|
||||
.input_width8 {width: 539px;}
|
||||
|
||||
.width9, .grid9, .span-9 {width: 615px;}
|
||||
.width9_2cols,.grid9_2cols {width: 300px;}
|
||||
.width9_4cols,.grid9_4cols {width: 142px;}
|
||||
.input_width9 {width: 609px;}
|
||||
|
||||
.width10, .grid10, .span-10 {width: 685px;}
|
||||
.width10_3cols,.grid10_3cols {width: 218px;}
|
||||
.width10_4cols,.grid10_4cols {width: 160px;}
|
||||
.input_width10 {width: 679px;}
|
||||
|
||||
.width11, .grid11, .span-11 {width: 755px;}
|
||||
.width11_2cols,.grid11_2cols {width: 370px;}
|
||||
.width11_3cols,.grid11_3cols {width: 241px;}
|
||||
.width11_4cols,.grid11_4cols {width: 177px;}
|
||||
.input_width11 {width: 749px;}
|
||||
|
||||
.width12, .grid12, .span-12 {width: 825px;}
|
||||
.input_width12 {width: 819px;}
|
||||
|
||||
/* Subdivided grid spaces */
|
||||
.emptycols_left1, .prepend-1 {padding-left: 70px;}
|
||||
.emptycols_right1, .append-1 {padding-right: 70px;}
|
||||
.emptycols_left2, .prepend-2 {padding-left: 140px;}
|
||||
.emptycols_right2, .append-2 {padding-right: 140px;}
|
||||
.emptycols_left3, .prepend-3 {padding-left: 210px;}
|
||||
.emptycols_right3, .append-3 {padding-right: 210px;}
|
||||
.emptycols_left4, .prepend-4 {padding-left: 280px;}
|
||||
.emptycols_right4, .append-4 {padding-right: 280px;}
|
||||
.emptycols_left5, .prepend-5 {padding-left: 350px;}
|
||||
.emptycols_right5, .append-5 {padding-right: 350px;}
|
||||
.emptycols_left6, .prepend-6 {padding-left: 420px;}
|
||||
.emptycols_right6, .append-6 {padding-right: 420px;}
|
||||
.emptycols_left7, .prepend-7 {padding-left: 490px;}
|
||||
.emptycols_right7, .append-7 {padding-right: 490px;}
|
||||
.emptycols_left8, .prepend-8 {padding-left: 560px;}
|
||||
.emptycols_right8, .append-8 {padding-right: 560px;}
|
||||
.emptycols_left9, .prepend-9 {padding-left: 630px;}
|
||||
.emptycols_right9, .append-9 {padding-right: 630px;}
|
||||
.emptycols_left10, .prepend-10 {padding-left: 700px;}
|
||||
.emptycols_right10, .append-10 {padding-right: 700px;}
|
||||
.emptycols_left11, .prepend-11 {padding-left: 770px;}
|
||||
.emptycols_right11, .append-11 {padding-right: 770px;}
|
||||
.pull-1 {margin-left: -70px;}
|
||||
.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
|
||||
.pull-2 {margin-left: -140px;}
|
||||
.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
|
||||
.pull-3 {margin-left: -210px;}
|
||||
.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
|
||||
.pull-4 {margin-left: -280px;}
|
||||
.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
|
||||
@@ -1,396 +0,0 @@
|
||||
@import url('grid_12-825-55-15.css');
|
||||
|
||||
/*
|
||||
CSS Reset by Eric Meyer - Released under Public Domain
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
*/
|
||||
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, font, 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
|
||||
{margin: 0;padding: 0;border: 0;outline: 0;
|
||||
font-size: 100%;vertical-align: baseline;
|
||||
background: transparent;}
|
||||
body {line-height: 1;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {content: ''; content: none;}
|
||||
:focus {outline: 0;}
|
||||
ins {text-decoration: none;}
|
||||
del {text-decoration: line-through;}
|
||||
table {border-collapse: collapse;border-spacing: 0;}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1883ba;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 865px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
|
||||
#header {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#header span {
|
||||
color: #666;
|
||||
}
|
||||
#main_content {
|
||||
background-color: #fff;
|
||||
padding: 60px 20px 20px;
|
||||
}
|
||||
|
||||
|
||||
#footer p {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 50px;
|
||||
color: #333;
|
||||
font: 10px Arial, sans-serif;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font: bold 11px/11px 'Arial';
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tabs li a:hover {
|
||||
background-color: #00b3ff;
|
||||
|
||||
}
|
||||
|
||||
.tabs li.active a {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.huge {
|
||||
|
||||
font-size: 120px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
letter-spacing: -.02em;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.glyph_range {
|
||||
font-size: 72px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.size10{ font-size: 10px; }
|
||||
.size11{ font-size: 11px; }
|
||||
.size12{ font-size: 12px; }
|
||||
.size13{ font-size: 13px; }
|
||||
.size14{ font-size: 14px; }
|
||||
.size16{ font-size: 16px; }
|
||||
.size18{ font-size: 18px; }
|
||||
.size20{ font-size: 20px; }
|
||||
.size24{ font-size: 24px; }
|
||||
.size30{ font-size: 30px; }
|
||||
.size36{ font-size: 36px; }
|
||||
.size48{ font-size: 48px; }
|
||||
.size60{ font-size: 60px; }
|
||||
.size72{ font-size: 72px; }
|
||||
.size90{ font-size: 90px; }
|
||||
|
||||
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row2 { height: 160px;}
|
||||
.psample_row3 { height: 160px;}
|
||||
.psample_row4 { height: 160px;}
|
||||
|
||||
.psample {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.psample p {
|
||||
line-height: 1.3em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.psample span {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.white_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.black_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fullreverse {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
.sample_table td {
|
||||
padding-top: 3px;
|
||||
padding-bottom:5px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.sample_table td:first-child {
|
||||
background-color: #eee;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
padding-left: 0;
|
||||
padding: 5px;
|
||||
font: 11px/12px "Courier New", Courier, mono;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
|
||||
|
||||
.box {
|
||||
padding: 18px;
|
||||
margin-bottom: 18px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
|
||||
|
||||
#bodycomparison {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 72px;
|
||||
height: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#bodycomparison div{
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
display: inline;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#bodycomparison div span{
|
||||
font: 10px Arial;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#xheight {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #d9f3ff;
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.fontbody {
|
||||
position: relative;
|
||||
}
|
||||
.arialbody{
|
||||
font-family: Arial;
|
||||
position: relative;
|
||||
}
|
||||
.verdanabody{
|
||||
font-family: Verdana;
|
||||
position: relative;
|
||||
}
|
||||
.georgiabody{
|
||||
font-family: Georgia;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* @group Layout page
|
||||
*/
|
||||
|
||||
#layout h1 {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h2 {
|
||||
font-size: 24px;
|
||||
line-height: 23px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h3 {
|
||||
font-size: 22px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 1em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
#layout p.byline {
|
||||
font-size: 12px;
|
||||
margin-top: 18px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#layout p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#layout p.large{
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#layout .sidebar p{
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#layout p.caption {
|
||||
font-size: 10px;
|
||||
margin-top: -16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group Glyphs */
|
||||
|
||||
#glyph_chart div{
|
||||
background-color: #d9f3ff;
|
||||
color: black;
|
||||
float: left;
|
||||
font-size: 36px;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
text-align: center;
|
||||
width: 1.2em;
|
||||
position: relative;
|
||||
padding: .6em .2em .2em;
|
||||
}
|
||||
|
||||
#glyph_chart div p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font: bold 9px Arial, sans-serif;
|
||||
background-color: #3a768f;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
|
||||
#glyphs h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Installing */
|
||||
|
||||
#installing {
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
#installing p,
|
||||
#glyphs p{
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 18px;
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#installing h3{
|
||||
font-size: 15px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
#rendering h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.render_table td {
|
||||
font: 11px "Courier New", Courier, mono;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'notokr-light';
|
||||
src: url('notokr-light.eot');
|
||||
src: url('notokr-light.eot?#iefix') format('embedded-opentype'),
|
||||
url('notokr-light.woff2') format('woff2'),
|
||||
url('notokr-light.woff') format('woff'),
|
||||
url('notokr-light.ttf') format('truetype'),
|
||||
url('notokr-light.svg#notokr-light') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
# Font Squirrel Font-face Generator Configuration File
|
||||
# Upload this file to the generator to recreate the settings
|
||||
# you used to create these fonts.
|
||||
|
||||
{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 700 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,7 +0,0 @@
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
@@ -1,129 +0,0 @@
|
||||
/*Notes about grid:
|
||||
Columns: 12
|
||||
Grid Width: 825px
|
||||
Column Width: 55px
|
||||
Gutter Width: 15px
|
||||
-------------------------------*/
|
||||
|
||||
|
||||
|
||||
.section {margin-bottom: 18px;
|
||||
}
|
||||
.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
|
||||
.section {*zoom: 1;}
|
||||
|
||||
.section .firstcolumn,
|
||||
.section .firstcol {margin-left: 0;}
|
||||
|
||||
|
||||
/* Border on left hand side of a column. */
|
||||
.border {
|
||||
padding-left: 7px;
|
||||
margin-left: 7px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Border with more whitespace, spans one column. */
|
||||
.colborder {
|
||||
padding-left: 42px;
|
||||
margin-left: 42px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The Grid Classes */
|
||||
.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
|
||||
{margin-left: 15px;float: left;display: inline; overflow: hidden;}
|
||||
|
||||
|
||||
.width1, .grid1, .span-1 {width: 55px;}
|
||||
.width1_2cols,.grid1_2cols {width: 20px;}
|
||||
.width1_3cols,.grid1_3cols {width: 8px;}
|
||||
.width1_4cols,.grid1_4cols {width: 2px;}
|
||||
.input_width1 {width: 49px;}
|
||||
|
||||
.width2, .grid2, .span-2 {width: 125px;}
|
||||
.width2_3cols,.grid2_3cols {width: 31px;}
|
||||
.width2_4cols,.grid2_4cols {width: 20px;}
|
||||
.input_width2 {width: 119px;}
|
||||
|
||||
.width3, .grid3, .span-3 {width: 195px;}
|
||||
.width3_2cols,.grid3_2cols {width: 90px;}
|
||||
.width3_4cols,.grid3_4cols {width: 37px;}
|
||||
.input_width3 {width: 189px;}
|
||||
|
||||
.width4, .grid4, .span-4 {width: 265px;}
|
||||
.width4_3cols,.grid4_3cols {width: 78px;}
|
||||
.input_width4 {width: 259px;}
|
||||
|
||||
.width5, .grid5, .span-5 {width: 335px;}
|
||||
.width5_2cols,.grid5_2cols {width: 160px;}
|
||||
.width5_3cols,.grid5_3cols {width: 101px;}
|
||||
.width5_4cols,.grid5_4cols {width: 72px;}
|
||||
.input_width5 {width: 329px;}
|
||||
|
||||
.width6, .grid6, .span-6 {width: 405px;}
|
||||
.width6_4cols,.grid6_4cols {width: 90px;}
|
||||
.input_width6 {width: 399px;}
|
||||
|
||||
.width7, .grid7, .span-7 {width: 475px;}
|
||||
.width7_2cols,.grid7_2cols {width: 230px;}
|
||||
.width7_3cols,.grid7_3cols {width: 148px;}
|
||||
.width7_4cols,.grid7_4cols {width: 107px;}
|
||||
.input_width7 {width: 469px;}
|
||||
|
||||
.width8, .grid8, .span-8 {width: 545px;}
|
||||
.width8_3cols,.grid8_3cols {width: 171px;}
|
||||
.input_width8 {width: 539px;}
|
||||
|
||||
.width9, .grid9, .span-9 {width: 615px;}
|
||||
.width9_2cols,.grid9_2cols {width: 300px;}
|
||||
.width9_4cols,.grid9_4cols {width: 142px;}
|
||||
.input_width9 {width: 609px;}
|
||||
|
||||
.width10, .grid10, .span-10 {width: 685px;}
|
||||
.width10_3cols,.grid10_3cols {width: 218px;}
|
||||
.width10_4cols,.grid10_4cols {width: 160px;}
|
||||
.input_width10 {width: 679px;}
|
||||
|
||||
.width11, .grid11, .span-11 {width: 755px;}
|
||||
.width11_2cols,.grid11_2cols {width: 370px;}
|
||||
.width11_3cols,.grid11_3cols {width: 241px;}
|
||||
.width11_4cols,.grid11_4cols {width: 177px;}
|
||||
.input_width11 {width: 749px;}
|
||||
|
||||
.width12, .grid12, .span-12 {width: 825px;}
|
||||
.input_width12 {width: 819px;}
|
||||
|
||||
/* Subdivided grid spaces */
|
||||
.emptycols_left1, .prepend-1 {padding-left: 70px;}
|
||||
.emptycols_right1, .append-1 {padding-right: 70px;}
|
||||
.emptycols_left2, .prepend-2 {padding-left: 140px;}
|
||||
.emptycols_right2, .append-2 {padding-right: 140px;}
|
||||
.emptycols_left3, .prepend-3 {padding-left: 210px;}
|
||||
.emptycols_right3, .append-3 {padding-right: 210px;}
|
||||
.emptycols_left4, .prepend-4 {padding-left: 280px;}
|
||||
.emptycols_right4, .append-4 {padding-right: 280px;}
|
||||
.emptycols_left5, .prepend-5 {padding-left: 350px;}
|
||||
.emptycols_right5, .append-5 {padding-right: 350px;}
|
||||
.emptycols_left6, .prepend-6 {padding-left: 420px;}
|
||||
.emptycols_right6, .append-6 {padding-right: 420px;}
|
||||
.emptycols_left7, .prepend-7 {padding-left: 490px;}
|
||||
.emptycols_right7, .append-7 {padding-right: 490px;}
|
||||
.emptycols_left8, .prepend-8 {padding-left: 560px;}
|
||||
.emptycols_right8, .append-8 {padding-right: 560px;}
|
||||
.emptycols_left9, .prepend-9 {padding-left: 630px;}
|
||||
.emptycols_right9, .append-9 {padding-right: 630px;}
|
||||
.emptycols_left10, .prepend-10 {padding-left: 700px;}
|
||||
.emptycols_right10, .append-10 {padding-right: 700px;}
|
||||
.emptycols_left11, .prepend-11 {padding-left: 770px;}
|
||||
.emptycols_right11, .append-11 {padding-right: 770px;}
|
||||
.pull-1 {margin-left: -70px;}
|
||||
.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
|
||||
.pull-2 {margin-left: -140px;}
|
||||
.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
|
||||
.pull-3 {margin-left: -210px;}
|
||||
.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
|
||||
.pull-4 {margin-left: -280px;}
|
||||
.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
|
||||
@@ -1,396 +0,0 @@
|
||||
@import url('grid_12-825-55-15.css');
|
||||
|
||||
/*
|
||||
CSS Reset by Eric Meyer - Released under Public Domain
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
*/
|
||||
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, font, 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
|
||||
{margin: 0;padding: 0;border: 0;outline: 0;
|
||||
font-size: 100%;vertical-align: baseline;
|
||||
background: transparent;}
|
||||
body {line-height: 1;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {content: ''; content: none;}
|
||||
:focus {outline: 0;}
|
||||
ins {text-decoration: none;}
|
||||
del {text-decoration: line-through;}
|
||||
table {border-collapse: collapse;border-spacing: 0;}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1883ba;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 865px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
|
||||
#header {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#header span {
|
||||
color: #666;
|
||||
}
|
||||
#main_content {
|
||||
background-color: #fff;
|
||||
padding: 60px 20px 20px;
|
||||
}
|
||||
|
||||
|
||||
#footer p {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 50px;
|
||||
color: #333;
|
||||
font: 10px Arial, sans-serif;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font: bold 11px/11px 'Arial';
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tabs li a:hover {
|
||||
background-color: #00b3ff;
|
||||
|
||||
}
|
||||
|
||||
.tabs li.active a {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.huge {
|
||||
|
||||
font-size: 120px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
letter-spacing: -.02em;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.glyph_range {
|
||||
font-size: 72px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.size10{ font-size: 10px; }
|
||||
.size11{ font-size: 11px; }
|
||||
.size12{ font-size: 12px; }
|
||||
.size13{ font-size: 13px; }
|
||||
.size14{ font-size: 14px; }
|
||||
.size16{ font-size: 16px; }
|
||||
.size18{ font-size: 18px; }
|
||||
.size20{ font-size: 20px; }
|
||||
.size24{ font-size: 24px; }
|
||||
.size30{ font-size: 30px; }
|
||||
.size36{ font-size: 36px; }
|
||||
.size48{ font-size: 48px; }
|
||||
.size60{ font-size: 60px; }
|
||||
.size72{ font-size: 72px; }
|
||||
.size90{ font-size: 90px; }
|
||||
|
||||
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row2 { height: 160px;}
|
||||
.psample_row3 { height: 160px;}
|
||||
.psample_row4 { height: 160px;}
|
||||
|
||||
.psample {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.psample p {
|
||||
line-height: 1.3em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.psample span {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.white_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.black_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fullreverse {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
.sample_table td {
|
||||
padding-top: 3px;
|
||||
padding-bottom:5px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.sample_table td:first-child {
|
||||
background-color: #eee;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
padding-left: 0;
|
||||
padding: 5px;
|
||||
font: 11px/12px "Courier New", Courier, mono;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
|
||||
|
||||
.box {
|
||||
padding: 18px;
|
||||
margin-bottom: 18px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
|
||||
|
||||
#bodycomparison {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 72px;
|
||||
height: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#bodycomparison div{
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
display: inline;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#bodycomparison div span{
|
||||
font: 10px Arial;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#xheight {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #d9f3ff;
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.fontbody {
|
||||
position: relative;
|
||||
}
|
||||
.arialbody{
|
||||
font-family: Arial;
|
||||
position: relative;
|
||||
}
|
||||
.verdanabody{
|
||||
font-family: Verdana;
|
||||
position: relative;
|
||||
}
|
||||
.georgiabody{
|
||||
font-family: Georgia;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* @group Layout page
|
||||
*/
|
||||
|
||||
#layout h1 {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h2 {
|
||||
font-size: 24px;
|
||||
line-height: 23px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h3 {
|
||||
font-size: 22px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 1em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
#layout p.byline {
|
||||
font-size: 12px;
|
||||
margin-top: 18px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#layout p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#layout p.large{
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#layout .sidebar p{
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#layout p.caption {
|
||||
font-size: 10px;
|
||||
margin-top: -16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group Glyphs */
|
||||
|
||||
#glyph_chart div{
|
||||
background-color: #d9f3ff;
|
||||
color: black;
|
||||
float: left;
|
||||
font-size: 36px;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
text-align: center;
|
||||
width: 1.2em;
|
||||
position: relative;
|
||||
padding: .6em .2em .2em;
|
||||
}
|
||||
|
||||
#glyph_chart div p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font: bold 9px Arial, sans-serif;
|
||||
background-color: #3a768f;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
|
||||
#glyphs h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Installing */
|
||||
|
||||
#installing {
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
#installing p,
|
||||
#glyphs p{
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 18px;
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#installing h3{
|
||||
font-size: 15px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
#rendering h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.render_table td {
|
||||
font: 11px "Courier New", Courier, mono;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'notokr-medium';
|
||||
src: url('notokr-medium.eot');
|
||||
src: url('notokr-medium.eot?#iefix') format('embedded-opentype'),
|
||||
url('notokr-medium.woff2') format('woff2'),
|
||||
url('notokr-medium.woff') format('woff'),
|
||||
url('notokr-medium.ttf') format('truetype'),
|
||||
url('notokr-medium.svg#notokr-medium') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
# Font Squirrel Font-face Generator Configuration File
|
||||
# Upload this file to the generator to recreate the settings
|
||||
# you used to create these fonts.
|
||||
|
||||
{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 710 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,7 +0,0 @@
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
@@ -1,129 +0,0 @@
|
||||
/*Notes about grid:
|
||||
Columns: 12
|
||||
Grid Width: 825px
|
||||
Column Width: 55px
|
||||
Gutter Width: 15px
|
||||
-------------------------------*/
|
||||
|
||||
|
||||
|
||||
.section {margin-bottom: 18px;
|
||||
}
|
||||
.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
|
||||
.section {*zoom: 1;}
|
||||
|
||||
.section .firstcolumn,
|
||||
.section .firstcol {margin-left: 0;}
|
||||
|
||||
|
||||
/* Border on left hand side of a column. */
|
||||
.border {
|
||||
padding-left: 7px;
|
||||
margin-left: 7px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Border with more whitespace, spans one column. */
|
||||
.colborder {
|
||||
padding-left: 42px;
|
||||
margin-left: 42px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The Grid Classes */
|
||||
.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
|
||||
{margin-left: 15px;float: left;display: inline; overflow: hidden;}
|
||||
|
||||
|
||||
.width1, .grid1, .span-1 {width: 55px;}
|
||||
.width1_2cols,.grid1_2cols {width: 20px;}
|
||||
.width1_3cols,.grid1_3cols {width: 8px;}
|
||||
.width1_4cols,.grid1_4cols {width: 2px;}
|
||||
.input_width1 {width: 49px;}
|
||||
|
||||
.width2, .grid2, .span-2 {width: 125px;}
|
||||
.width2_3cols,.grid2_3cols {width: 31px;}
|
||||
.width2_4cols,.grid2_4cols {width: 20px;}
|
||||
.input_width2 {width: 119px;}
|
||||
|
||||
.width3, .grid3, .span-3 {width: 195px;}
|
||||
.width3_2cols,.grid3_2cols {width: 90px;}
|
||||
.width3_4cols,.grid3_4cols {width: 37px;}
|
||||
.input_width3 {width: 189px;}
|
||||
|
||||
.width4, .grid4, .span-4 {width: 265px;}
|
||||
.width4_3cols,.grid4_3cols {width: 78px;}
|
||||
.input_width4 {width: 259px;}
|
||||
|
||||
.width5, .grid5, .span-5 {width: 335px;}
|
||||
.width5_2cols,.grid5_2cols {width: 160px;}
|
||||
.width5_3cols,.grid5_3cols {width: 101px;}
|
||||
.width5_4cols,.grid5_4cols {width: 72px;}
|
||||
.input_width5 {width: 329px;}
|
||||
|
||||
.width6, .grid6, .span-6 {width: 405px;}
|
||||
.width6_4cols,.grid6_4cols {width: 90px;}
|
||||
.input_width6 {width: 399px;}
|
||||
|
||||
.width7, .grid7, .span-7 {width: 475px;}
|
||||
.width7_2cols,.grid7_2cols {width: 230px;}
|
||||
.width7_3cols,.grid7_3cols {width: 148px;}
|
||||
.width7_4cols,.grid7_4cols {width: 107px;}
|
||||
.input_width7 {width: 469px;}
|
||||
|
||||
.width8, .grid8, .span-8 {width: 545px;}
|
||||
.width8_3cols,.grid8_3cols {width: 171px;}
|
||||
.input_width8 {width: 539px;}
|
||||
|
||||
.width9, .grid9, .span-9 {width: 615px;}
|
||||
.width9_2cols,.grid9_2cols {width: 300px;}
|
||||
.width9_4cols,.grid9_4cols {width: 142px;}
|
||||
.input_width9 {width: 609px;}
|
||||
|
||||
.width10, .grid10, .span-10 {width: 685px;}
|
||||
.width10_3cols,.grid10_3cols {width: 218px;}
|
||||
.width10_4cols,.grid10_4cols {width: 160px;}
|
||||
.input_width10 {width: 679px;}
|
||||
|
||||
.width11, .grid11, .span-11 {width: 755px;}
|
||||
.width11_2cols,.grid11_2cols {width: 370px;}
|
||||
.width11_3cols,.grid11_3cols {width: 241px;}
|
||||
.width11_4cols,.grid11_4cols {width: 177px;}
|
||||
.input_width11 {width: 749px;}
|
||||
|
||||
.width12, .grid12, .span-12 {width: 825px;}
|
||||
.input_width12 {width: 819px;}
|
||||
|
||||
/* Subdivided grid spaces */
|
||||
.emptycols_left1, .prepend-1 {padding-left: 70px;}
|
||||
.emptycols_right1, .append-1 {padding-right: 70px;}
|
||||
.emptycols_left2, .prepend-2 {padding-left: 140px;}
|
||||
.emptycols_right2, .append-2 {padding-right: 140px;}
|
||||
.emptycols_left3, .prepend-3 {padding-left: 210px;}
|
||||
.emptycols_right3, .append-3 {padding-right: 210px;}
|
||||
.emptycols_left4, .prepend-4 {padding-left: 280px;}
|
||||
.emptycols_right4, .append-4 {padding-right: 280px;}
|
||||
.emptycols_left5, .prepend-5 {padding-left: 350px;}
|
||||
.emptycols_right5, .append-5 {padding-right: 350px;}
|
||||
.emptycols_left6, .prepend-6 {padding-left: 420px;}
|
||||
.emptycols_right6, .append-6 {padding-right: 420px;}
|
||||
.emptycols_left7, .prepend-7 {padding-left: 490px;}
|
||||
.emptycols_right7, .append-7 {padding-right: 490px;}
|
||||
.emptycols_left8, .prepend-8 {padding-left: 560px;}
|
||||
.emptycols_right8, .append-8 {padding-right: 560px;}
|
||||
.emptycols_left9, .prepend-9 {padding-left: 630px;}
|
||||
.emptycols_right9, .append-9 {padding-right: 630px;}
|
||||
.emptycols_left10, .prepend-10 {padding-left: 700px;}
|
||||
.emptycols_right10, .append-10 {padding-right: 700px;}
|
||||
.emptycols_left11, .prepend-11 {padding-left: 770px;}
|
||||
.emptycols_right11, .append-11 {padding-right: 770px;}
|
||||
.pull-1 {margin-left: -70px;}
|
||||
.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
|
||||
.pull-2 {margin-left: -140px;}
|
||||
.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
|
||||
.pull-3 {margin-left: -210px;}
|
||||
.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
|
||||
.pull-4 {margin-left: -280px;}
|
||||
.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
|
||||
@@ -1,396 +0,0 @@
|
||||
@import url('grid_12-825-55-15.css');
|
||||
|
||||
/*
|
||||
CSS Reset by Eric Meyer - Released under Public Domain
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
*/
|
||||
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, font, 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
|
||||
{margin: 0;padding: 0;border: 0;outline: 0;
|
||||
font-size: 100%;vertical-align: baseline;
|
||||
background: transparent;}
|
||||
body {line-height: 1;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {content: ''; content: none;}
|
||||
:focus {outline: 0;}
|
||||
ins {text-decoration: none;}
|
||||
del {text-decoration: line-through;}
|
||||
table {border-collapse: collapse;border-spacing: 0;}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1883ba;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 865px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
|
||||
#header {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#header span {
|
||||
color: #666;
|
||||
}
|
||||
#main_content {
|
||||
background-color: #fff;
|
||||
padding: 60px 20px 20px;
|
||||
}
|
||||
|
||||
|
||||
#footer p {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 50px;
|
||||
color: #333;
|
||||
font: 10px Arial, sans-serif;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font: bold 11px/11px 'Arial';
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tabs li a:hover {
|
||||
background-color: #00b3ff;
|
||||
|
||||
}
|
||||
|
||||
.tabs li.active a {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.huge {
|
||||
|
||||
font-size: 120px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
letter-spacing: -.02em;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.glyph_range {
|
||||
font-size: 72px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.size10{ font-size: 10px; }
|
||||
.size11{ font-size: 11px; }
|
||||
.size12{ font-size: 12px; }
|
||||
.size13{ font-size: 13px; }
|
||||
.size14{ font-size: 14px; }
|
||||
.size16{ font-size: 16px; }
|
||||
.size18{ font-size: 18px; }
|
||||
.size20{ font-size: 20px; }
|
||||
.size24{ font-size: 24px; }
|
||||
.size30{ font-size: 30px; }
|
||||
.size36{ font-size: 36px; }
|
||||
.size48{ font-size: 48px; }
|
||||
.size60{ font-size: 60px; }
|
||||
.size72{ font-size: 72px; }
|
||||
.size90{ font-size: 90px; }
|
||||
|
||||
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row2 { height: 160px;}
|
||||
.psample_row3 { height: 160px;}
|
||||
.psample_row4 { height: 160px;}
|
||||
|
||||
.psample {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.psample p {
|
||||
line-height: 1.3em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.psample span {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.white_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.black_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fullreverse {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
.sample_table td {
|
||||
padding-top: 3px;
|
||||
padding-bottom:5px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.sample_table td:first-child {
|
||||
background-color: #eee;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
padding-left: 0;
|
||||
padding: 5px;
|
||||
font: 11px/12px "Courier New", Courier, mono;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
|
||||
|
||||
.box {
|
||||
padding: 18px;
|
||||
margin-bottom: 18px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
|
||||
|
||||
#bodycomparison {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 72px;
|
||||
height: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#bodycomparison div{
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
display: inline;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#bodycomparison div span{
|
||||
font: 10px Arial;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#xheight {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #d9f3ff;
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.fontbody {
|
||||
position: relative;
|
||||
}
|
||||
.arialbody{
|
||||
font-family: Arial;
|
||||
position: relative;
|
||||
}
|
||||
.verdanabody{
|
||||
font-family: Verdana;
|
||||
position: relative;
|
||||
}
|
||||
.georgiabody{
|
||||
font-family: Georgia;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* @group Layout page
|
||||
*/
|
||||
|
||||
#layout h1 {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h2 {
|
||||
font-size: 24px;
|
||||
line-height: 23px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h3 {
|
||||
font-size: 22px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 1em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
#layout p.byline {
|
||||
font-size: 12px;
|
||||
margin-top: 18px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#layout p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#layout p.large{
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#layout .sidebar p{
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#layout p.caption {
|
||||
font-size: 10px;
|
||||
margin-top: -16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group Glyphs */
|
||||
|
||||
#glyph_chart div{
|
||||
background-color: #d9f3ff;
|
||||
color: black;
|
||||
float: left;
|
||||
font-size: 36px;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
text-align: center;
|
||||
width: 1.2em;
|
||||
position: relative;
|
||||
padding: .6em .2em .2em;
|
||||
}
|
||||
|
||||
#glyph_chart div p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font: bold 9px Arial, sans-serif;
|
||||
background-color: #3a768f;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
|
||||
#glyphs h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Installing */
|
||||
|
||||
#installing {
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
#installing p,
|
||||
#glyphs p{
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 18px;
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#installing h3{
|
||||
font-size: 15px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
#rendering h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.render_table td {
|
||||
font: 11px "Courier New", Courier, mono;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'notokr-regular';
|
||||
src: url('notokr-regular.eot');
|
||||
src: url('notokr-regular.eot?#iefix') format('embedded-opentype'),
|
||||
url('notokr-regular.woff2') format('woff2'),
|
||||
url('notokr-regular.woff') format('woff'),
|
||||
url('notokr-regular.ttf') format('truetype'),
|
||||
url('notokr-regular.svg#notokr-regular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
# Font Squirrel Font-face Generator Configuration File
|
||||
# Upload this file to the generator to recreate the settings
|
||||
# you used to create these fonts.
|
||||
|
||||
{"mode":"basic","formats":["ttf","woff","woff2","eotz"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 744 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,7 +0,0 @@
|
||||
(function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;}
|
||||
if(typeof param.defaultContent=="number")
|
||||
{var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;}
|
||||
$(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();}
|
||||
function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none")
|
||||
{$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}}
|
||||
$(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery);
|
||||
@@ -1,129 +0,0 @@
|
||||
/*Notes about grid:
|
||||
Columns: 12
|
||||
Grid Width: 825px
|
||||
Column Width: 55px
|
||||
Gutter Width: 15px
|
||||
-------------------------------*/
|
||||
|
||||
|
||||
|
||||
.section {margin-bottom: 18px;
|
||||
}
|
||||
.section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
|
||||
.section {*zoom: 1;}
|
||||
|
||||
.section .firstcolumn,
|
||||
.section .firstcol {margin-left: 0;}
|
||||
|
||||
|
||||
/* Border on left hand side of a column. */
|
||||
.border {
|
||||
padding-left: 7px;
|
||||
margin-left: 7px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* Border with more whitespace, spans one column. */
|
||||
.colborder {
|
||||
padding-left: 42px;
|
||||
margin-left: 42px;
|
||||
border-left: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* The Grid Classes */
|
||||
.grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12
|
||||
{margin-left: 15px;float: left;display: inline; overflow: hidden;}
|
||||
|
||||
|
||||
.width1, .grid1, .span-1 {width: 55px;}
|
||||
.width1_2cols,.grid1_2cols {width: 20px;}
|
||||
.width1_3cols,.grid1_3cols {width: 8px;}
|
||||
.width1_4cols,.grid1_4cols {width: 2px;}
|
||||
.input_width1 {width: 49px;}
|
||||
|
||||
.width2, .grid2, .span-2 {width: 125px;}
|
||||
.width2_3cols,.grid2_3cols {width: 31px;}
|
||||
.width2_4cols,.grid2_4cols {width: 20px;}
|
||||
.input_width2 {width: 119px;}
|
||||
|
||||
.width3, .grid3, .span-3 {width: 195px;}
|
||||
.width3_2cols,.grid3_2cols {width: 90px;}
|
||||
.width3_4cols,.grid3_4cols {width: 37px;}
|
||||
.input_width3 {width: 189px;}
|
||||
|
||||
.width4, .grid4, .span-4 {width: 265px;}
|
||||
.width4_3cols,.grid4_3cols {width: 78px;}
|
||||
.input_width4 {width: 259px;}
|
||||
|
||||
.width5, .grid5, .span-5 {width: 335px;}
|
||||
.width5_2cols,.grid5_2cols {width: 160px;}
|
||||
.width5_3cols,.grid5_3cols {width: 101px;}
|
||||
.width5_4cols,.grid5_4cols {width: 72px;}
|
||||
.input_width5 {width: 329px;}
|
||||
|
||||
.width6, .grid6, .span-6 {width: 405px;}
|
||||
.width6_4cols,.grid6_4cols {width: 90px;}
|
||||
.input_width6 {width: 399px;}
|
||||
|
||||
.width7, .grid7, .span-7 {width: 475px;}
|
||||
.width7_2cols,.grid7_2cols {width: 230px;}
|
||||
.width7_3cols,.grid7_3cols {width: 148px;}
|
||||
.width7_4cols,.grid7_4cols {width: 107px;}
|
||||
.input_width7 {width: 469px;}
|
||||
|
||||
.width8, .grid8, .span-8 {width: 545px;}
|
||||
.width8_3cols,.grid8_3cols {width: 171px;}
|
||||
.input_width8 {width: 539px;}
|
||||
|
||||
.width9, .grid9, .span-9 {width: 615px;}
|
||||
.width9_2cols,.grid9_2cols {width: 300px;}
|
||||
.width9_4cols,.grid9_4cols {width: 142px;}
|
||||
.input_width9 {width: 609px;}
|
||||
|
||||
.width10, .grid10, .span-10 {width: 685px;}
|
||||
.width10_3cols,.grid10_3cols {width: 218px;}
|
||||
.width10_4cols,.grid10_4cols {width: 160px;}
|
||||
.input_width10 {width: 679px;}
|
||||
|
||||
.width11, .grid11, .span-11 {width: 755px;}
|
||||
.width11_2cols,.grid11_2cols {width: 370px;}
|
||||
.width11_3cols,.grid11_3cols {width: 241px;}
|
||||
.width11_4cols,.grid11_4cols {width: 177px;}
|
||||
.input_width11 {width: 749px;}
|
||||
|
||||
.width12, .grid12, .span-12 {width: 825px;}
|
||||
.input_width12 {width: 819px;}
|
||||
|
||||
/* Subdivided grid spaces */
|
||||
.emptycols_left1, .prepend-1 {padding-left: 70px;}
|
||||
.emptycols_right1, .append-1 {padding-right: 70px;}
|
||||
.emptycols_left2, .prepend-2 {padding-left: 140px;}
|
||||
.emptycols_right2, .append-2 {padding-right: 140px;}
|
||||
.emptycols_left3, .prepend-3 {padding-left: 210px;}
|
||||
.emptycols_right3, .append-3 {padding-right: 210px;}
|
||||
.emptycols_left4, .prepend-4 {padding-left: 280px;}
|
||||
.emptycols_right4, .append-4 {padding-right: 280px;}
|
||||
.emptycols_left5, .prepend-5 {padding-left: 350px;}
|
||||
.emptycols_right5, .append-5 {padding-right: 350px;}
|
||||
.emptycols_left6, .prepend-6 {padding-left: 420px;}
|
||||
.emptycols_right6, .append-6 {padding-right: 420px;}
|
||||
.emptycols_left7, .prepend-7 {padding-left: 490px;}
|
||||
.emptycols_right7, .append-7 {padding-right: 490px;}
|
||||
.emptycols_left8, .prepend-8 {padding-left: 560px;}
|
||||
.emptycols_right8, .append-8 {padding-right: 560px;}
|
||||
.emptycols_left9, .prepend-9 {padding-left: 630px;}
|
||||
.emptycols_right9, .append-9 {padding-right: 630px;}
|
||||
.emptycols_left10, .prepend-10 {padding-left: 700px;}
|
||||
.emptycols_right10, .append-10 {padding-right: 700px;}
|
||||
.emptycols_left11, .prepend-11 {padding-left: 770px;}
|
||||
.emptycols_right11, .append-11 {padding-right: 770px;}
|
||||
.pull-1 {margin-left: -70px;}
|
||||
.push-1 {margin-right: -70px;margin-left: 18px;float: right;}
|
||||
.pull-2 {margin-left: -140px;}
|
||||
.push-2 {margin-right: -140px;margin-left: 18px;float: right;}
|
||||
.pull-3 {margin-left: -210px;}
|
||||
.push-3 {margin-right: -210px;margin-left: 18px;float: right;}
|
||||
.pull-4 {margin-left: -280px;}
|
||||
.push-4 {margin-right: -280px;margin-left: 18px;float: right;}
|
||||
@@ -1,396 +0,0 @@
|
||||
@import url('grid_12-825-55-15.css');
|
||||
|
||||
/*
|
||||
CSS Reset by Eric Meyer - Released under Public Domain
|
||||
http://meyerweb.com/eric/tools/css/reset/
|
||||
*/
|
||||
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, font, 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
|
||||
{margin: 0;padding: 0;border: 0;outline: 0;
|
||||
font-size: 100%;vertical-align: baseline;
|
||||
background: transparent;}
|
||||
body {line-height: 1;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {content: ''; content: none;}
|
||||
:focus {outline: 0;}
|
||||
ins {text-decoration: none;}
|
||||
del {text-decoration: line-through;}
|
||||
table {border-collapse: collapse;border-spacing: 0;}
|
||||
|
||||
|
||||
|
||||
|
||||
body {
|
||||
color: #000;
|
||||
background-color: #dcdcdc;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1883ba;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 865px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
|
||||
#header {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#header span {
|
||||
color: #666;
|
||||
}
|
||||
#main_content {
|
||||
background-color: #fff;
|
||||
padding: 60px 20px 20px;
|
||||
}
|
||||
|
||||
|
||||
#footer p {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 50px;
|
||||
color: #333;
|
||||
font: 10px Arial, sans-serif;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #444;
|
||||
}
|
||||
.tabs li a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font: bold 11px/11px 'Arial';
|
||||
text-transform: uppercase;
|
||||
padding: 10px 15px;
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
|
||||
.tabs li a:hover {
|
||||
background-color: #00b3ff;
|
||||
|
||||
}
|
||||
|
||||
.tabs li.active a {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.huge {
|
||||
|
||||
font-size: 120px;
|
||||
line-height: 1em;
|
||||
padding: 0;
|
||||
letter-spacing: -.02em;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.glyph_range {
|
||||
font-size: 72px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.size10{ font-size: 10px; }
|
||||
.size11{ font-size: 11px; }
|
||||
.size12{ font-size: 12px; }
|
||||
.size13{ font-size: 13px; }
|
||||
.size14{ font-size: 14px; }
|
||||
.size16{ font-size: 16px; }
|
||||
.size18{ font-size: 18px; }
|
||||
.size20{ font-size: 20px; }
|
||||
.size24{ font-size: 24px; }
|
||||
.size30{ font-size: 30px; }
|
||||
.size36{ font-size: 36px; }
|
||||
.size48{ font-size: 48px; }
|
||||
.size60{ font-size: 60px; }
|
||||
.size72{ font-size: 72px; }
|
||||
.size90{ font-size: 90px; }
|
||||
|
||||
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row1 { height: 120px;}
|
||||
.psample_row2 { height: 160px;}
|
||||
.psample_row3 { height: 160px;}
|
||||
.psample_row4 { height: 160px;}
|
||||
|
||||
.psample {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.psample p {
|
||||
line-height: 1.3em;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.psample span {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.white_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.black_blend {
|
||||
width: 100%;
|
||||
height: 61px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.fullreverse {
|
||||
background: #000 !important;
|
||||
color: #fff !important;
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
.sample_table td {
|
||||
padding-top: 3px;
|
||||
padding-bottom:5px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.sample_table td:first-child {
|
||||
background-color: #eee;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
padding-left: 0;
|
||||
padding: 5px;
|
||||
font: 11px/12px "Courier New", Courier, mono;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
background-color: #eee;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 18px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;}
|
||||
|
||||
.box {
|
||||
padding: 18px;
|
||||
margin-bottom: 18px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;}
|
||||
|
||||
#bodycomparison {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-size: 72px;
|
||||
height: 90px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#bodycomparison div{
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
display: inline;
|
||||
margin: 0 15px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#bodycomparison div span{
|
||||
font: 10px Arial;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#xheight {
|
||||
float: none;
|
||||
position: absolute;
|
||||
color: #d9f3ff;
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
.fontbody {
|
||||
position: relative;
|
||||
}
|
||||
.arialbody{
|
||||
font-family: Arial;
|
||||
position: relative;
|
||||
}
|
||||
.verdanabody{
|
||||
font-family: Verdana;
|
||||
position: relative;
|
||||
}
|
||||
.georgiabody{
|
||||
font-family: Georgia;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* @group Layout page
|
||||
*/
|
||||
|
||||
#layout h1 {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h2 {
|
||||
font-size: 24px;
|
||||
line-height: 23px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#layout h3 {
|
||||
font-size: 22px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 1em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
#layout p.byline {
|
||||
font-size: 12px;
|
||||
margin-top: 18px;
|
||||
line-height: 12px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#layout p {
|
||||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
#layout p.large{
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#layout .sidebar p{
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#layout p.caption {
|
||||
font-size: 10px;
|
||||
margin-top: -16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
/* @group Glyphs */
|
||||
|
||||
#glyph_chart div{
|
||||
background-color: #d9f3ff;
|
||||
color: black;
|
||||
float: left;
|
||||
font-size: 36px;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 1px;
|
||||
margin-right: 1px;
|
||||
text-align: center;
|
||||
width: 1.2em;
|
||||
position: relative;
|
||||
padding: .6em .2em .2em;
|
||||
}
|
||||
|
||||
#glyph_chart div p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font: bold 9px Arial, sans-serif;
|
||||
background-color: #3a768f;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
|
||||
#glyphs h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Installing */
|
||||
|
||||
#installing {
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
#installing p,
|
||||
#glyphs p{
|
||||
line-height: 1.2em;
|
||||
margin-bottom: 18px;
|
||||
font: 13px Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#installing h3{
|
||||
font-size: 15px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* @end */
|
||||
|
||||
#rendering h1 {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.render_table td {
|
||||
font: 11px "Courier New", Courier, mono;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 28, 2015 */
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'notokr-thin';
|
||||
src: url('notokr-thin.eot');
|
||||
src: url('notokr-thin.eot?#iefix') format('embedded-opentype'),
|
||||
url('notokr-thin.woff2') format('woff2'),
|
||||
url('notokr-thin.woff') format('woff'),
|
||||
url('notokr-thin.ttf') format('truetype'),
|
||||
url('notokr-thin.svg#notokr-thin') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
@@ -78,7 +78,7 @@ class ChapterCardManager {
|
||||
}
|
||||
|
||||
this.cardsContainer = this.domUtils?.$(".chapter-list", gaugeElement) || gaugeElement.querySelector(".chapter-list");
|
||||
|
||||
|
||||
if (!this.cardsContainer) {
|
||||
this.cardsContainer = this.domUtils?.createElement('ul', { class: 'chapter-list' }) || document.createElement("ul");
|
||||
this.cardsContainer.className = "chapter-list";
|
||||
@@ -166,18 +166,18 @@ class ChapterCardManager {
|
||||
|
||||
const thumbnail = this.domUtils?.createElement('img', {
|
||||
class: 'card-thumbnail',
|
||||
src: `./assets/images/learning/img_learning_0${(chapterIndex % 6) + 1}.jpg`,
|
||||
src: `/img/learning/img_learning_0${(chapterIndex % 6) + 1}.jpg`,
|
||||
alt: chapter.name,
|
||||
loading: 'lazy'
|
||||
}) || document.createElement("img");
|
||||
|
||||
|
||||
if (!this.domUtils) {
|
||||
thumbnail.className = "card-thumbnail";
|
||||
thumbnail.src = `./assets/images/learning/img_learning_0${(chapterIndex % 6) + 1}.jpg`;
|
||||
thumbnail.src = `/img/learning/img_learning_0${(chapterIndex % 6) + 1}.jpg`;
|
||||
thumbnail.alt = chapter.name;
|
||||
thumbnail.loading = "lazy";
|
||||
}
|
||||
|
||||
|
||||
thumbnailContainer.appendChild(thumbnail);
|
||||
|
||||
// 플레이 버튼
|
||||
@@ -187,14 +187,14 @@ class ChapterCardManager {
|
||||
alt: '재생',
|
||||
loading: 'lazy'
|
||||
}) || document.createElement("img");
|
||||
|
||||
|
||||
if (!this.domUtils) {
|
||||
playButton.className = "card-play-button";
|
||||
playButton.src = this._getPlayButtonImagePath(state);
|
||||
playButton.alt = "재생";
|
||||
playButton.loading = "lazy";
|
||||
}
|
||||
|
||||
|
||||
thumbnailContainer.appendChild(playButton);
|
||||
|
||||
// 스탬프 아이콘 추가 (completed 상태일 때만 표시)
|
||||
@@ -207,7 +207,7 @@ class ChapterCardManager {
|
||||
// 게이지바 추가
|
||||
const gaugeBar = this.domUtils?.createElement('div', { class: 'card-gauge-bar' }) || document.createElement("div");
|
||||
gaugeBar.className = "card-gauge-bar";
|
||||
|
||||
|
||||
const gaugeFill = this.domUtils?.createElement('div', { class: 'card-gauge-fill' }) || document.createElement("div");
|
||||
gaugeFill.className = "card-gauge-fill";
|
||||
|
||||
@@ -235,7 +235,7 @@ class ChapterCardManager {
|
||||
const shadow = this.domUtils?.createElement('div', { class: 'shadow-effect' }) || document.createElement("div");
|
||||
shadow.className = "shadow-effect";
|
||||
inner.appendChild(shadow);
|
||||
|
||||
|
||||
return inner;
|
||||
} catch (error) {
|
||||
this._handleError(error, 'ChapterCardManager._createCardContent', { chapter, state, chapterIndex });
|
||||
@@ -341,11 +341,11 @@ class ChapterCardManager {
|
||||
_getPlayButtonImagePath(state) {
|
||||
switch (state) {
|
||||
case "completed":
|
||||
return "./assets/images/learning/btn_play_completed.png";
|
||||
return "/img/learning/btn_play_completed.png";
|
||||
case "current":
|
||||
return "./assets/images/learning/btn_play_current.png";
|
||||
return "/img/learning/btn_play_current.png";
|
||||
default:
|
||||
return "./assets/images/learning/btn_play_base.png";
|
||||
return "/img/learning/btn_play_base.png";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -147,7 +147,7 @@ const LEARNING_CONFIG = {
|
||||
pathPercent: 0.585,
|
||||
gaugePercent: 0.582, // 게이지 라인 위치 (없으면 pathPercent 사용)
|
||||
type: "normal",
|
||||
label: "성희롱 예방 교육 1",
|
||||
label: "성희롱 예방 교육 1",
|
||||
url: "OXTYn3JkkCQ",
|
||||
completed: false,
|
||||
},
|
||||
@@ -225,27 +225,27 @@ const LEARNING_CONFIG = {
|
||||
// 평균 학습량 설정 (전체 학습 항목 대비 %)
|
||||
averageProgress: {
|
||||
threshold: 60, // 평균 학습량: 전체의 60%
|
||||
},
|
||||
},
|
||||
|
||||
// 마커 이미지 경로
|
||||
markerImages: {
|
||||
normal: {
|
||||
base: "./assets/images/learning/mark_base.png",
|
||||
current: "./assets/images/learning/mark_current.png",
|
||||
completed: "./assets/images/learning/mark_completed.png",
|
||||
base: "/img/learning/mark_base.png",
|
||||
current: "/img/learning/mark_current.png",
|
||||
completed: "/img/learning/mark_completed.png",
|
||||
},
|
||||
chapter: {
|
||||
base: "./assets/images/learning/mark_chapter_base.png",
|
||||
current: "./assets/images/learning/mark_chapter_current.png",
|
||||
completed: "./assets/images/learning/mark_chapter_completed.png",
|
||||
base: "/img/learning/mark_chapter_base.png",
|
||||
current: "/img/learning/mark_chapter_current.png",
|
||||
completed: "/img/learning/mark_chapter_completed.png",
|
||||
},
|
||||
},
|
||||
|
||||
// 상태 이미지 경로
|
||||
stateImages: {
|
||||
below: "./assets/images/learning/img_state_01.svg", // 평균 이하
|
||||
average: "./assets/images/learning/img_state_02.svg", // 평균
|
||||
above: "./assets/images/learning/img_state_03.svg", // 평균 이상
|
||||
below: "/img/learning/img_state_01.svg", // 평균 이하
|
||||
average: "/img/learning/img_state_02.svg", // 평균
|
||||
above: "/img/learning/img_state_03.svg", // 평균 이상
|
||||
},
|
||||
|
||||
// 모달 경로
|
||||
@@ -376,7 +376,7 @@ const LEARNING_CONFIG = {
|
||||
}
|
||||
|
||||
const allMarkers = this.getAllMarkers();
|
||||
|
||||
|
||||
if (!Array.isArray(allMarkers) || globalIndex >= allMarkers.length) {
|
||||
console.warn(`[LEARNING_CONFIG] globalIndex ${globalIndex}가 범위를 벗어났습니다. (총 ${allMarkers.length}개)`);
|
||||
return null;
|
||||
@@ -480,7 +480,7 @@ const LEARNING_CONFIG = {
|
||||
}
|
||||
|
||||
globalIndex += 1; // 챕터 마커
|
||||
|
||||
|
||||
if (chapter.lessons && Array.isArray(chapter.lessons)) {
|
||||
globalIndex += chapter.lessons.length; // 하위 lessons
|
||||
}
|
||||
|
||||
@@ -18,10 +18,10 @@ class MarkerManager {
|
||||
this.gaugeManager = gaugeManager;
|
||||
this.config = config;
|
||||
this.markers = [];
|
||||
|
||||
|
||||
this.gaugeSvg = this.domUtils?.$("#gauge-svg") || document.getElementById("gauge-svg");
|
||||
this.markersContainer = this.domUtils?.$("#markers-container") || document.getElementById("markers-container");
|
||||
|
||||
|
||||
if (!this.gaugeSvg) {
|
||||
this._handleError(new Error('gauge-svg 요소를 찾을 수 없습니다.'), 'constructor');
|
||||
}
|
||||
@@ -84,10 +84,10 @@ class MarkerManager {
|
||||
// 완료된 학습이 없거나, 모든 학습이 완료되었으면 off
|
||||
const hasCompletedLessons = completedCount > 0;
|
||||
const shouldShowOn = hasCompletedLessons && !allCompleted;
|
||||
|
||||
|
||||
const imagePath = shouldShowOn
|
||||
? "./assets/images/learning/img_start_on.svg"
|
||||
: "./assets/images/learning/img_start_off.svg";
|
||||
? "/img/learning/img_start_on.svg"
|
||||
: "/img/learning/img_start_off.svg";
|
||||
|
||||
startLineImg.src = imagePath;
|
||||
|
||||
@@ -172,7 +172,7 @@ class MarkerManager {
|
||||
// Utils.throttle 사용 (있는 경우)
|
||||
if (this.utils && this.utils.throttle) {
|
||||
const throttledResize = this.utils.throttle(resizeHandler, 100);
|
||||
|
||||
|
||||
if (this.eventManager) {
|
||||
const listenerId = this.eventManager.on(window, "resize", throttledResize);
|
||||
this.listenerIds.push({ element: window, id: listenerId, type: 'resize' });
|
||||
@@ -294,12 +294,12 @@ class MarkerManager {
|
||||
style: { height: 'auto' },
|
||||
loading: 'lazy'
|
||||
}) || document.createElement("img");
|
||||
|
||||
|
||||
if (!this.domUtils) {
|
||||
img.style.height = "auto";
|
||||
img.loading = "lazy";
|
||||
}
|
||||
|
||||
|
||||
marker.appendChild(img);
|
||||
this.markersContainer.appendChild(marker);
|
||||
|
||||
@@ -539,165 +539,165 @@ class MarkerManager {
|
||||
// 1. allMarkers 업데이트
|
||||
this.allMarkers[index].completed = true;
|
||||
|
||||
// 2. 원본 config의 lessons도 업데이트
|
||||
const markerData = this.allMarkers[index];
|
||||
const chapterId = markerData.chapterId;
|
||||
const chapter = this.config.chapters.find((ch) => ch.id === chapterId);
|
||||
// 2. 원본 config의 lessons도 업데이트
|
||||
const markerData = this.allMarkers[index];
|
||||
const chapterId = markerData.chapterId;
|
||||
const chapter = this.config.chapters.find((ch) => ch.id === chapterId);
|
||||
|
||||
if (chapter && !markerData.isChapterMarker) {
|
||||
// 실제 강의인 경우 원본 lessons 배열에서 찾아서 업데이트
|
||||
const lesson = chapter.lessons.find(
|
||||
(l) =>
|
||||
l.pathPercent === markerData.pathPercent &&
|
||||
l.label === markerData.label
|
||||
if (chapter && !markerData.isChapterMarker) {
|
||||
// 실제 강의인 경우 원본 lessons 배열에서 찾아서 업데이트
|
||||
const lesson = chapter.lessons.find(
|
||||
(l) =>
|
||||
l.pathPercent === markerData.pathPercent &&
|
||||
l.label === markerData.label
|
||||
);
|
||||
if (lesson) {
|
||||
lesson.completed = true;
|
||||
console.log(
|
||||
`[MarkerManager] 원본 config 업데이트: ${lesson.label} completed = true`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 챕터 완료 상태 업데이트
|
||||
this.config.updateChapterCompletionStatus();
|
||||
|
||||
// 4. allMarkers 재로드 (챕터 completed 상태 반영)
|
||||
this.allMarkers = this.config.getAllMarkers();
|
||||
|
||||
const settings = this.config.settings || {};
|
||||
let progressPercent;
|
||||
|
||||
// 실제 강의만 카운트 (챕터 제외)
|
||||
const learningMarkers = this.allMarkers.filter(
|
||||
(m) => m.isLearningContent !== false
|
||||
);
|
||||
if (lesson) {
|
||||
lesson.completed = true;
|
||||
console.log(
|
||||
`[MarkerManager] 원본 config 업데이트: ${lesson.label} completed = true`
|
||||
);
|
||||
}
|
||||
}
|
||||
const completedLearningCount = learningMarkers.filter(
|
||||
(m) => m.completed
|
||||
).length;
|
||||
|
||||
// 3. 챕터 완료 상태 업데이트
|
||||
this.config.updateChapterCompletionStatus();
|
||||
let targetPathPercent = 0;
|
||||
let targetConfig = null;
|
||||
|
||||
// 4. allMarkers 재로드 (챕터 completed 상태 반영)
|
||||
this.allMarkers = this.config.getAllMarkers();
|
||||
|
||||
const settings = this.config.settings || {};
|
||||
let progressPercent;
|
||||
|
||||
// 실제 강의만 카운트 (챕터 제외)
|
||||
const learningMarkers = this.allMarkers.filter(
|
||||
(m) => m.isLearningContent !== false
|
||||
);
|
||||
const completedLearningCount = learningMarkers.filter(
|
||||
(m) => m.completed
|
||||
).length;
|
||||
|
||||
let targetPathPercent = 0;
|
||||
let targetConfig = null;
|
||||
|
||||
if (settings.allowDisabledClick) {
|
||||
// 비활성 마커 클릭 허용 모드: 다음 학습 마커까지
|
||||
if (completedLearningCount === 0) {
|
||||
// 첫 번째 챕터 마커까지
|
||||
const firstChapterMarker = this.allMarkers.find(
|
||||
(m) => m.isChapterMarker === true
|
||||
);
|
||||
targetConfig = firstChapterMarker;
|
||||
} else if (completedLearningCount >= learningMarkers.length) {
|
||||
// 전체 완료: 마지막 마커 위치
|
||||
targetConfig = this.allMarkers[this.allMarkers.length - 1];
|
||||
if (settings.allowDisabledClick) {
|
||||
// 비활성 마커 클릭 허용 모드: 다음 학습 마커까지
|
||||
if (completedLearningCount === 0) {
|
||||
// 첫 번째 챕터 마커까지
|
||||
const firstChapterMarker = this.allMarkers.find(
|
||||
(m) => m.isChapterMarker === true
|
||||
);
|
||||
targetConfig = firstChapterMarker;
|
||||
} else if (completedLearningCount >= learningMarkers.length) {
|
||||
// 전체 완료: 마지막 마커 위치
|
||||
targetConfig = this.allMarkers[this.allMarkers.length - 1];
|
||||
} else {
|
||||
// 다음 학습할 강의 마커 위치
|
||||
const nextLearningMarker = learningMarkers[completedLearningCount];
|
||||
const nextMarkerIndex = this.allMarkers.findIndex(
|
||||
(m) =>
|
||||
m.pathPercent === nextLearningMarker.pathPercent &&
|
||||
m.label === nextLearningMarker.label
|
||||
);
|
||||
targetConfig = this.allMarkers[nextMarkerIndex];
|
||||
}
|
||||
} else {
|
||||
// 다음 학습할 강의 마커 위치
|
||||
const nextLearningMarker = learningMarkers[completedLearningCount];
|
||||
const nextMarkerIndex = this.allMarkers.findIndex(
|
||||
(m) =>
|
||||
m.pathPercent === nextLearningMarker.pathPercent &&
|
||||
m.label === nextLearningMarker.label
|
||||
);
|
||||
targetConfig = this.allMarkers[nextMarkerIndex];
|
||||
// 순차 학습 모드: 다음 학습 마커까지
|
||||
if (completedLearningCount === 0) {
|
||||
// 첫 번째 챕터 마커까지
|
||||
const firstChapterMarker = this.allMarkers.find(
|
||||
(m) => m.isChapterMarker === true
|
||||
);
|
||||
targetConfig = firstChapterMarker;
|
||||
} else if (completedLearningCount >= learningMarkers.length) {
|
||||
// 전체 완료: 마지막 마커 위치
|
||||
targetConfig = this.allMarkers[this.allMarkers.length - 1];
|
||||
} else {
|
||||
// 다음 학습할 강의 마커 위치
|
||||
const nextLearningMarker = learningMarkers[completedLearningCount];
|
||||
const nextMarkerIndex = this.allMarkers.findIndex(
|
||||
(m) =>
|
||||
m.pathPercent === nextLearningMarker.pathPercent &&
|
||||
m.label === nextLearningMarker.label
|
||||
);
|
||||
targetConfig = this.allMarkers[nextMarkerIndex];
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 순차 학습 모드: 다음 학습 마커까지
|
||||
if (completedLearningCount === 0) {
|
||||
// 첫 번째 챕터 마커까지
|
||||
const firstChapterMarker = this.allMarkers.find(
|
||||
(m) => m.isChapterMarker === true
|
||||
);
|
||||
targetConfig = firstChapterMarker;
|
||||
} else if (completedLearningCount >= learningMarkers.length) {
|
||||
// 전체 완료: 마지막 마커 위치
|
||||
targetConfig = this.allMarkers[this.allMarkers.length - 1];
|
||||
} else {
|
||||
// 다음 학습할 강의 마커 위치
|
||||
const nextLearningMarker = learningMarkers[completedLearningCount];
|
||||
const nextMarkerIndex = this.allMarkers.findIndex(
|
||||
(m) =>
|
||||
m.pathPercent === nextLearningMarker.pathPercent &&
|
||||
m.label === nextLearningMarker.label
|
||||
);
|
||||
targetConfig = this.allMarkers[nextMarkerIndex];
|
||||
}
|
||||
}
|
||||
|
||||
// 타겟 마커 찾기 (pathPercent로 비교)
|
||||
const targetMarker = targetConfig
|
||||
? this.markers.find(
|
||||
// 타겟 마커 찾기 (pathPercent로 비교)
|
||||
const targetMarker = targetConfig
|
||||
? this.markers.find(
|
||||
(m) =>
|
||||
m.config &&
|
||||
m.config.pathPercent === targetConfig.pathPercent &&
|
||||
m.config.label === targetConfig.label
|
||||
)
|
||||
: null;
|
||||
: null;
|
||||
|
||||
// 100% 완료 시 게이지바를 100%로 채움
|
||||
if (completedLearningCount >= learningMarkers.length) {
|
||||
targetPathPercent = 1.0; // 100% 완료
|
||||
progressPercent = 100;
|
||||
console.log(
|
||||
`[MarkerManager] 모든 학습 완료: 게이지바 100%로 설정`
|
||||
);
|
||||
} else if (targetMarker && targetMarker.element) {
|
||||
// gaugePercent가 있으면 우선 사용, 없으면 마커의 실제 DOM 위치 기반으로 계산
|
||||
if (targetConfig.gaugePercent !== undefined) {
|
||||
targetPathPercent = targetConfig.gaugePercent;
|
||||
// 100% 완료 시 게이지바를 100%로 채움
|
||||
if (completedLearningCount >= learningMarkers.length) {
|
||||
targetPathPercent = 1.0; // 100% 완료
|
||||
progressPercent = 100;
|
||||
console.log(
|
||||
`[MarkerManager] 모든 학습 완료: 게이지바 100%로 설정`
|
||||
);
|
||||
} else if (targetMarker && targetMarker.element) {
|
||||
// gaugePercent가 있으면 우선 사용, 없으면 마커의 실제 DOM 위치 기반으로 계산
|
||||
if (targetConfig.gaugePercent !== undefined) {
|
||||
targetPathPercent = targetConfig.gaugePercent;
|
||||
progressPercent = targetPathPercent * 100;
|
||||
console.log(
|
||||
`[MarkerManager] gaugePercent 사용: ${progressPercent.toFixed(1)}%`
|
||||
);
|
||||
} else {
|
||||
// 마커의 실제 DOM 위치 가져오기
|
||||
const markerLeft = parseFloat(targetMarker.element.style.left) || 0;
|
||||
const markerTop = parseFloat(targetMarker.element.style.top) || 0;
|
||||
|
||||
// maskPath에서 마커 위치에 가장 가까운 지점 찾기
|
||||
targetPathPercent = this.gaugeManager.findClosestPathPercent(markerLeft, markerTop);
|
||||
|
||||
progressPercent = targetPathPercent * 100; // 로그용
|
||||
console.log(
|
||||
`[MarkerManager] 마커 실제 위치 기반: (${markerLeft.toFixed(2)}%, ${markerTop.toFixed(2)}%) → pathPercent: ${targetPathPercent.toFixed(4)} (${progressPercent.toFixed(1)}%)`
|
||||
);
|
||||
}
|
||||
} else if (targetConfig) {
|
||||
// 마커를 찾을 수 없는 경우 gaugePercent 우선 사용, 없으면 pathPercent 사용
|
||||
targetPathPercent = targetConfig.gaugePercent !== undefined ? targetConfig.gaugePercent : (targetConfig.pathPercent || 0);
|
||||
progressPercent = targetPathPercent * 100;
|
||||
console.log(
|
||||
`[MarkerManager] gaugePercent 사용: ${progressPercent.toFixed(1)}%`
|
||||
);
|
||||
} else {
|
||||
// 마커의 실제 DOM 위치 가져오기
|
||||
const markerLeft = parseFloat(targetMarker.element.style.left) || 0;
|
||||
const markerTop = parseFloat(targetMarker.element.style.top) || 0;
|
||||
|
||||
// maskPath에서 마커 위치에 가장 가까운 지점 찾기
|
||||
targetPathPercent = this.gaugeManager.findClosestPathPercent(markerLeft, markerTop);
|
||||
|
||||
progressPercent = targetPathPercent * 100; // 로그용
|
||||
console.log(
|
||||
`[MarkerManager] 마커 실제 위치 기반: (${markerLeft.toFixed(2)}%, ${markerTop.toFixed(2)}%) → pathPercent: ${targetPathPercent.toFixed(4)} (${progressPercent.toFixed(1)}%)`
|
||||
`[MarkerManager] 마커를 찾을 수 없음, ${targetConfig.gaugePercent !== undefined ? 'gaugePercent' : 'pathPercent'} 직접 사용: ${progressPercent.toFixed(1)}%`
|
||||
);
|
||||
}
|
||||
} else if (targetConfig) {
|
||||
// 마커를 찾을 수 없는 경우 gaugePercent 우선 사용, 없으면 pathPercent 사용
|
||||
targetPathPercent = targetConfig.gaugePercent !== undefined ? targetConfig.gaugePercent : (targetConfig.pathPercent || 0);
|
||||
progressPercent = targetPathPercent * 100;
|
||||
console.log(
|
||||
`[MarkerManager] 마커를 찾을 수 없음, ${targetConfig.gaugePercent !== undefined ? 'gaugePercent' : 'pathPercent'} 직접 사용: ${progressPercent.toFixed(1)}%`
|
||||
);
|
||||
}
|
||||
|
||||
// 마커 실제 위치에 가장 가까운 pathPercent를 사용하여 채움
|
||||
this.gaugeManager.setProgress(targetPathPercent, true);
|
||||
this.updateMarkers(progressPercent);
|
||||
this.updateMarkerClickability();
|
||||
// 마커 실제 위치에 가장 가까운 pathPercent를 사용하여 채움
|
||||
this.gaugeManager.setProgress(targetPathPercent, true);
|
||||
this.updateMarkers(progressPercent);
|
||||
this.updateMarkerClickability();
|
||||
|
||||
// Start-line 상태 업데이트 (첫 학습 완료 시 OFF → ON 전환)
|
||||
this._updateStartLine();
|
||||
// Start-line 상태 업데이트 (첫 학습 완료 시 OFF → ON 전환)
|
||||
this._updateStartLine();
|
||||
|
||||
// 100% 완료 시 폭죽 애니메이션 표시 (실제 강의 기준)
|
||||
const allLearningCompleted = learningMarkers.every((m) => m.completed);
|
||||
if (allLearningCompleted && !this.completionAnimationShown) {
|
||||
// 기존 정적 배경이 있으면 제거
|
||||
const existingStaticBg = document.querySelector(".completion-background");
|
||||
if (existingStaticBg) {
|
||||
existingStaticBg.remove();
|
||||
// 100% 완료 시 폭죽 애니메이션 표시 (실제 강의 기준)
|
||||
const allLearningCompleted = learningMarkers.every((m) => m.completed);
|
||||
if (allLearningCompleted && !this.completionAnimationShown) {
|
||||
// 기존 정적 배경이 있으면 제거
|
||||
const existingStaticBg = document.querySelector(".completion-background");
|
||||
if (existingStaticBg) {
|
||||
existingStaticBg.remove();
|
||||
}
|
||||
this._showCompletionAnimation();
|
||||
this.completionAnimationShown = true;
|
||||
}
|
||||
this._showCompletionAnimation();
|
||||
this.completionAnimationShown = true;
|
||||
}
|
||||
|
||||
// 챕터 카드 상태 업데이트
|
||||
if (window.learningApp && window.learningApp.updateChapterCards) {
|
||||
window.learningApp.updateChapterCards();
|
||||
}
|
||||
// 챕터 카드 상태 업데이트
|
||||
if (window.learningApp && window.learningApp.updateChapterCards) {
|
||||
window.learningApp.updateChapterCards();
|
||||
}
|
||||
|
||||
console.log(
|
||||
`[MarkerManager] 학습 ${index + 1} 완료! (${completedLearningCount}/${learningMarkers.length} 강의) ` +
|
||||
`진행률: ${progressPercent ? progressPercent.toFixed(1) : 0}%`
|
||||
`진행률: ${progressPercent ? progressPercent.toFixed(1) : 0}%`
|
||||
);
|
||||
} catch (error) {
|
||||
this._handleError(error, 'completeLesson', { index });
|
||||
@@ -720,7 +720,7 @@ class MarkerManager {
|
||||
const h3 = this.domUtils?.$("h3", pageTitle) || pageTitle.querySelector("h3");
|
||||
const em = h3 ? (this.domUtils?.$("em", h3) || h3.querySelector("em")) : null;
|
||||
let userName = "";
|
||||
|
||||
|
||||
if (em) {
|
||||
// "님" 제거하여 이름만 추출
|
||||
userName = em.textContent.replace(/님$/, "").trim();
|
||||
@@ -779,7 +779,7 @@ class MarkerManager {
|
||||
zIndex: '1'
|
||||
}
|
||||
}) || document.createElement("div");
|
||||
|
||||
|
||||
if (!this.domUtils) {
|
||||
backgroundContainer.className = "completion-background";
|
||||
backgroundContainer.style.cssText = `
|
||||
@@ -806,7 +806,7 @@ class MarkerManager {
|
||||
animation: 'fadeIn 1.5s ease-in-out forwards'
|
||||
}
|
||||
}) || document.createElement("div");
|
||||
|
||||
|
||||
if (!this.domUtils) {
|
||||
svgWrapper.style.cssText = `
|
||||
position: absolute;
|
||||
@@ -821,7 +821,7 @@ class MarkerManager {
|
||||
}
|
||||
|
||||
// SVG 로드 및 추가
|
||||
fetch("./assets/images/learning/completion-bg.svg")
|
||||
fetch("/img/learning/completion-bg.svg")
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`SVG 로드 실패: ${response.status}`);
|
||||
@@ -1002,7 +1002,7 @@ class MarkerManager {
|
||||
zIndex: '1'
|
||||
}
|
||||
}) || document.createElement("div");
|
||||
|
||||
|
||||
if (!this.domUtils) {
|
||||
backgroundContainer.className = "completion-background";
|
||||
backgroundContainer.style.cssText = `
|
||||
@@ -1028,7 +1028,7 @@ class MarkerManager {
|
||||
translate: '-50% -50%'
|
||||
}
|
||||
}) || document.createElement("div");
|
||||
|
||||
|
||||
if (!this.domUtils) {
|
||||
svgWrapper.style.cssText = `
|
||||
position: absolute;
|
||||
@@ -1042,7 +1042,7 @@ class MarkerManager {
|
||||
}
|
||||
|
||||
// SVG 로드 및 추가
|
||||
fetch("./assets/images/learning/completion-bg.svg")
|
||||
fetch("/img/learning/completion-bg.svg")
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`SVG 로드 실패: ${response.status}`);
|
||||
@@ -1054,97 +1054,97 @@ class MarkerManager {
|
||||
svgWrapper.innerHTML = svgContent;
|
||||
const svg = svgWrapper.querySelector("svg");
|
||||
if (svg) {
|
||||
// 패턴 ID 중복 방지: 고유한 ID로 변경
|
||||
const uniqueId = `completion-bg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||
const patterns = svg.querySelectorAll(
|
||||
"pattern[id], filter[id], mask[id], linearGradient[id], radialGradient[id]"
|
||||
);
|
||||
const idMap = new Map();
|
||||
// 패턴 ID 중복 방지: 고유한 ID로 변경
|
||||
const uniqueId = `completion-bg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||
const patterns = svg.querySelectorAll(
|
||||
"pattern[id], filter[id], mask[id], linearGradient[id], radialGradient[id]"
|
||||
);
|
||||
const idMap = new Map();
|
||||
|
||||
patterns.forEach((pattern) => {
|
||||
const oldId = pattern.getAttribute("id");
|
||||
if (oldId) {
|
||||
const newId = `${oldId}-${uniqueId}`;
|
||||
idMap.set(oldId, newId);
|
||||
pattern.setAttribute("id", newId);
|
||||
}
|
||||
});
|
||||
|
||||
// 패턴을 참조하는 모든 요소의 url(#...) 업데이트
|
||||
const allElements = svg.querySelectorAll("*");
|
||||
allElements.forEach((el) => {
|
||||
// fill, stroke, filter, mask 등 속성 업데이트
|
||||
["fill", "stroke", "filter", "mask"].forEach((attr) => {
|
||||
const value = el.getAttribute(attr);
|
||||
if (value && value.startsWith("url(#")) {
|
||||
const match = value.match(/url\(#([^)]+)\)/);
|
||||
if (match) {
|
||||
const oldId = match[1];
|
||||
if (idMap.has(oldId)) {
|
||||
el.setAttribute(attr, `url(#${idMap.get(oldId)})`);
|
||||
}
|
||||
patterns.forEach((pattern) => {
|
||||
const oldId = pattern.getAttribute("id");
|
||||
if (oldId) {
|
||||
const newId = `${oldId}-${uniqueId}`;
|
||||
idMap.set(oldId, newId);
|
||||
pattern.setAttribute("id", newId);
|
||||
}
|
||||
});
|
||||
|
||||
// 패턴을 참조하는 모든 요소의 url(#...) 업데이트
|
||||
const allElements = svg.querySelectorAll("*");
|
||||
allElements.forEach((el) => {
|
||||
// fill, stroke, filter, mask 등 속성 업데이트
|
||||
["fill", "stroke", "filter", "mask"].forEach((attr) => {
|
||||
const value = el.getAttribute(attr);
|
||||
if (value && value.startsWith("url(#")) {
|
||||
const match = value.match(/url\(#([^)]+)\)/);
|
||||
if (match) {
|
||||
const oldId = match[1];
|
||||
if (idMap.has(oldId)) {
|
||||
el.setAttribute(attr, `url(#${idMap.get(oldId)})`);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
console.log(`[MarkerManager] 패턴 ID 고유화 완료: ${uniqueId}`);
|
||||
|
||||
// 흰색 배경 rect/path 요소 제거 (x="-34" y="-19" 또는 fill="white"인 요소)
|
||||
const whiteBgElements = svg.querySelectorAll(
|
||||
'rect[fill="white"], path[fill="#fff"], path[fill="white"]'
|
||||
);
|
||||
whiteBgElements.forEach((el) => {
|
||||
const x = el.getAttribute("x");
|
||||
const y = el.getAttribute("y");
|
||||
// SVG 파일의 흰색 배경 rect (x="-34" y="-19") 제거
|
||||
if (
|
||||
(x === "-34" && y === "-19") ||
|
||||
el.getAttribute("fill") === "white" ||
|
||||
el.getAttribute("fill") === "#fff"
|
||||
) {
|
||||
el.remove();
|
||||
console.log("[MarkerManager] 흰색 배경 요소 제거");
|
||||
}
|
||||
});
|
||||
|
||||
// "수강완료" 텍스트 요소 제거 또는 숨김
|
||||
const allTexts = svg.querySelectorAll("text, tspan");
|
||||
allTexts.forEach((textEl) => {
|
||||
const textContent = textEl.textContent || "";
|
||||
if (
|
||||
textContent.includes("수강완료") ||
|
||||
textContent.includes("완료")
|
||||
) {
|
||||
textEl.style.display = "none";
|
||||
console.log("[MarkerManager] '수강완료' 텍스트 요소 숨김");
|
||||
}
|
||||
});
|
||||
|
||||
// 화면 크기에 맞게 viewBox 동적 조정
|
||||
const screenWidth = window.innerWidth;
|
||||
const screenHeight = window.innerHeight;
|
||||
const screenRatio = screenWidth / screenHeight;
|
||||
const svgRatio = 1911 / 918;
|
||||
|
||||
let newViewBox;
|
||||
if (screenRatio > svgRatio) {
|
||||
// 화면이 더 넓음 - 세로 기준으로 viewBox 확장
|
||||
const newWidth = 918 * screenRatio;
|
||||
const offsetX = (newWidth - 1911) / 2;
|
||||
newViewBox = `${-offsetX} 0 ${newWidth} 918`;
|
||||
} else {
|
||||
// 화면이 더 높음 - 가로 기준으로 viewBox 확장
|
||||
const newHeight = 1911 / screenRatio;
|
||||
const offsetY = (newHeight - 918) / 2;
|
||||
newViewBox = `0 ${-offsetY} 1911 ${newHeight}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
console.log(`[MarkerManager] 패턴 ID 고유화 완료: ${uniqueId}`);
|
||||
|
||||
// 흰색 배경 rect/path 요소 제거 (x="-34" y="-19" 또는 fill="white"인 요소)
|
||||
const whiteBgElements = svg.querySelectorAll(
|
||||
'rect[fill="white"], path[fill="#fff"], path[fill="white"]'
|
||||
);
|
||||
whiteBgElements.forEach((el) => {
|
||||
const x = el.getAttribute("x");
|
||||
const y = el.getAttribute("y");
|
||||
// SVG 파일의 흰색 배경 rect (x="-34" y="-19") 제거
|
||||
if (
|
||||
(x === "-34" && y === "-19") ||
|
||||
el.getAttribute("fill") === "white" ||
|
||||
el.getAttribute("fill") === "#fff"
|
||||
) {
|
||||
el.remove();
|
||||
console.log("[MarkerManager] 흰색 배경 요소 제거");
|
||||
}
|
||||
});
|
||||
|
||||
// "수강완료" 텍스트 요소 제거 또는 숨김
|
||||
const allTexts = svg.querySelectorAll("text, tspan");
|
||||
allTexts.forEach((textEl) => {
|
||||
const textContent = textEl.textContent || "";
|
||||
if (
|
||||
textContent.includes("수강완료") ||
|
||||
textContent.includes("완료")
|
||||
) {
|
||||
textEl.style.display = "none";
|
||||
console.log("[MarkerManager] '수강완료' 텍스트 요소 숨김");
|
||||
}
|
||||
});
|
||||
|
||||
// 화면 크기에 맞게 viewBox 동적 조정
|
||||
const screenWidth = window.innerWidth;
|
||||
const screenHeight = window.innerHeight;
|
||||
const screenRatio = screenWidth / screenHeight;
|
||||
const svgRatio = 1911 / 918;
|
||||
|
||||
let newViewBox;
|
||||
if (screenRatio > svgRatio) {
|
||||
// 화면이 더 넓음 - 세로 기준으로 viewBox 확장
|
||||
const newWidth = 918 * screenRatio;
|
||||
const offsetX = (newWidth - 1911) / 2;
|
||||
newViewBox = `${-offsetX} 0 ${newWidth} 918`;
|
||||
} else {
|
||||
// 화면이 더 높음 - 가로 기준으로 viewBox 확장
|
||||
const newHeight = 1911 / screenRatio;
|
||||
const offsetY = (newHeight - 918) / 2;
|
||||
newViewBox = `0 ${-offsetY} 1911 ${newHeight}`;
|
||||
}
|
||||
|
||||
svg.setAttribute("viewBox", newViewBox);
|
||||
svg.removeAttribute("width");
|
||||
svg.removeAttribute("height");
|
||||
svg.setAttribute("preserveAspectRatio", "xMidYMid slice");
|
||||
svg.style.cssText = `
|
||||
svg.setAttribute("viewBox", newViewBox);
|
||||
svg.removeAttribute("width");
|
||||
svg.removeAttribute("height");
|
||||
svg.setAttribute("preserveAspectRatio", "xMidYMid slice");
|
||||
svg.style.cssText = `
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
@@ -248,38 +248,38 @@ class VideoModal extends VideoModalBase {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 모달 HTML 가져오기 (VideoModalBase 활용)
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 모달 HTML 가져오기 (VideoModalBase 활용)
|
||||
* @private
|
||||
*/
|
||||
async _fetchModal() {
|
||||
// VideoModalBase의 loadModalHTML 메서드 활용
|
||||
return await this.loadModalHTML("learning");
|
||||
}
|
||||
|
||||
/**
|
||||
* 모달 HTML 파싱 (VideoModalBase 활용)
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 모달 HTML 파싱 (VideoModalBase 활용)
|
||||
* @private
|
||||
*/
|
||||
_parseModal(modalHTML, modalType = "learning") {
|
||||
// VideoModalBase의 createModalFromHTML 메서드 활용
|
||||
return this.createModalFromHTML(modalHTML, modalType);
|
||||
}
|
||||
|
||||
/**
|
||||
* 비디오 설정 (VideoModalBase 활용)
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 비디오 설정 (VideoModalBase 활용)
|
||||
* @private
|
||||
*/
|
||||
_setupVideo(modalElement, videoUrl) {
|
||||
// VideoModalBase의 setupVideo 메서드 활용
|
||||
const videoData = { url: videoUrl, id: videoUrl };
|
||||
this.setupVideo(modalElement, videoData);
|
||||
}
|
||||
|
||||
/**
|
||||
* 모달 컨텐츠 업데이트
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 모달 컨텐츠 업데이트
|
||||
* @private
|
||||
*/
|
||||
_updateContent(modalElement, videoData, currentIndex, recreateList = true) {
|
||||
this._updateTitle(modalElement, videoData.label);
|
||||
this._updateProgress(modalElement, currentIndex);
|
||||
@@ -392,10 +392,10 @@ class VideoModal extends VideoModalBase {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 학습 목차 생성 (현재 챕터만)
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 학습 목차 생성 (현재 챕터만)
|
||||
* @private
|
||||
*/
|
||||
_createLearningList(modalElement, currentGlobalIndex) {
|
||||
const list = modalElement.querySelector(".learning-list");
|
||||
if (!list) return;
|
||||
@@ -451,10 +451,10 @@ class VideoModal extends VideoModalBase {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 학습 목차 상태만 업데이트 (목록 재생성 없이)
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 학습 목차 상태만 업데이트 (목록 재생성 없이)
|
||||
* @private
|
||||
*/
|
||||
_updateLearningListState(modalElement, currentGlobalIndex) {
|
||||
const list = modalElement.querySelector(".learning-list");
|
||||
if (!list) return;
|
||||
@@ -518,10 +518,10 @@ class VideoModal extends VideoModalBase {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 목차 항목 생성
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 목차 항목 생성
|
||||
* @private
|
||||
*/
|
||||
_createListItem(lesson, globalIndex, localIndex, currentGlobalIndex) {
|
||||
const li = document.createElement("li");
|
||||
|
||||
@@ -567,7 +567,7 @@ class VideoModal extends VideoModalBase {
|
||||
<span class="seq">${localIndex + 1}차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img src="./assets/images/video/img_learning_thumb_0${imageNum}.png" />
|
||||
<img src="/img/video/img_learning_thumb_0${imageNum}.png" />
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">${lesson.label}</div>
|
||||
@@ -583,10 +583,10 @@ class VideoModal extends VideoModalBase {
|
||||
return li;
|
||||
}
|
||||
|
||||
/**
|
||||
* 상태 텍스트 반환
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 상태 텍스트 반환
|
||||
* @private
|
||||
*/
|
||||
_getStateText(lesson, isCurrentLesson, isRelearning) {
|
||||
if (isRelearning) return "학습중";
|
||||
if (lesson.completed) return "학습완료";
|
||||
@@ -594,10 +594,10 @@ class VideoModal extends VideoModalBase {
|
||||
return "미진행";
|
||||
}
|
||||
|
||||
/**
|
||||
* 목차 항목 이벤트 설정
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 목차 항목 이벤트 설정
|
||||
* @private
|
||||
*/
|
||||
_setupListItemEvent(li, globalIndex) {
|
||||
const link = li.querySelector(".list");
|
||||
|
||||
@@ -611,16 +611,16 @@ class VideoModal extends VideoModalBase {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 모달 표시
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 모달 표시
|
||||
* @private
|
||||
*/
|
||||
_show(modalElement) {
|
||||
// 모달을 먼저 숨긴 상태로 표시 (높이 조정이 보이지 않도록)
|
||||
modalElement.style.display = "block";
|
||||
modalElement.style.visibility = "hidden";
|
||||
modalElement.style.opacity = "0";
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
this._setupCloseEvents(modalElement);
|
||||
// 높이 조정 완료 후 모달 표시
|
||||
@@ -638,10 +638,10 @@ class VideoModal extends VideoModalBase {
|
||||
// 스크롤 관리
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* 현재 학습 중인 항목으로 스크롤
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 현재 학습 중인 항목으로 스크롤
|
||||
* @private
|
||||
*/
|
||||
_scrollToCurrentLesson() {
|
||||
const learningList = this.currentModal?.querySelector(".learning-list");
|
||||
if (!learningList) {
|
||||
@@ -679,10 +679,10 @@ class VideoModal extends VideoModalBase {
|
||||
this._highlightCurrentLesson(currentItem);
|
||||
}
|
||||
|
||||
/**
|
||||
* 현재 학습 항목 시각적 강조
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 현재 학습 항목 시각적 강조
|
||||
* @private
|
||||
*/
|
||||
_highlightCurrentLesson(currentItem) {
|
||||
// 이미 active 클래스가 있으므로 추가 효과는 선택사항
|
||||
// 예: 깜빡임 효과, 테두리 강조 등
|
||||
@@ -698,11 +698,11 @@ class VideoModal extends VideoModalBase {
|
||||
// 높이 조정
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* 높이 조정 초기화
|
||||
* @private
|
||||
* @param {Function} onComplete - 높이 조정 완료 후 실행할 콜백
|
||||
*/
|
||||
/**
|
||||
* 높이 조정 초기화
|
||||
* @private
|
||||
* @param {Function} onComplete - 높이 조정 완료 후 실행할 콜백
|
||||
*/
|
||||
_initializeHeightAdjustment(onComplete) {
|
||||
// 1단계: 즉시 시도
|
||||
this._adjustModalContentHeight();
|
||||
@@ -730,7 +730,7 @@ class VideoModal extends VideoModalBase {
|
||||
setTimeout(() => {
|
||||
this._adjustModalContentHeight();
|
||||
this._adjustLearningListHeight();
|
||||
|
||||
|
||||
// 높이 조정 완료 콜백 실행
|
||||
if (onComplete && typeof onComplete === 'function') {
|
||||
onComplete();
|
||||
@@ -747,11 +747,11 @@ class VideoModal extends VideoModalBase {
|
||||
this._waitForImagesAndAdjust();
|
||||
}
|
||||
|
||||
/**
|
||||
* 모달 컨텐츠 높이 조정
|
||||
* 높이가 화면 높이의 80% 이상일 때만 조절하고, 아닐 경우 80%로 유지
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 모달 컨텐츠 높이 조정
|
||||
* 높이가 화면 높이의 80% 이상일 때만 조절하고, 아닐 경우 80%로 유지
|
||||
* @private
|
||||
*/
|
||||
_adjustModalContentHeight() {
|
||||
const modalContent = this.currentModal?.querySelector(".modal-content");
|
||||
if (!modalContent) {
|
||||
@@ -789,10 +789,10 @@ class VideoModal extends VideoModalBase {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 학습 목록 높이 조정
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 학습 목록 높이 조정
|
||||
* @private
|
||||
*/
|
||||
_adjustLearningListHeight() {
|
||||
const videoSide = this.currentModal?.querySelector(".video-side");
|
||||
const videoHeader = this.currentModal?.querySelector(".video-header");
|
||||
@@ -846,7 +846,7 @@ class VideoModal extends VideoModalBase {
|
||||
let titleHeight = 0;
|
||||
let paddingTop = 0;
|
||||
let paddingBottom = 0;
|
||||
|
||||
|
||||
if (videoList) {
|
||||
// video-list의 제목 높이
|
||||
const videoListTitle = videoList.querySelector("h5.tit");
|
||||
@@ -906,47 +906,47 @@ class VideoModal extends VideoModalBase {
|
||||
// video-list의 제목 높이
|
||||
const videoListTitle = videoList.querySelector("h5.tit");
|
||||
const videoListTitleHeight = videoListTitle ? videoListTitle.offsetHeight : 0;
|
||||
|
||||
|
||||
// video-list의 padding 값 계산
|
||||
const videoListStyle = window.getComputedStyle(videoList);
|
||||
const videoListPaddingTop = parseInt(videoListStyle.paddingTop) || 0;
|
||||
const videoListPaddingBottom = parseInt(videoListStyle.paddingBottom) || 0;
|
||||
|
||||
|
||||
// video-list에 사용 가능한 높이 계산
|
||||
// video-list는 learning-list를 포함하므로, 전체 높이에서 헤더, 댓글, 제목, padding을 제외
|
||||
// gaugeHeight는 headerHeight에 이미 포함되어 있으므로 별도로 빼지 않음
|
||||
const commentWrapHeight = commentWrap && commentWrap.offsetHeight > 0 ? commentWrap.offsetHeight : 0;
|
||||
const videoListAvailableHeight =
|
||||
totalHeight -
|
||||
headerHeight -
|
||||
commentWrapHeight -
|
||||
const videoListAvailableHeight =
|
||||
totalHeight -
|
||||
headerHeight -
|
||||
commentWrapHeight -
|
||||
|
||||
10;
|
||||
|
||||
|
||||
// video-list의 실제 컨텐츠 높이 측정 (learning-list 포함)
|
||||
const videoListOriginalHeight = videoList.style.height;
|
||||
const videoListOriginalOverflow = videoList.style.overflowY;
|
||||
|
||||
|
||||
videoList.style.height = "auto";
|
||||
videoList.style.overflowY = "visible";
|
||||
|
||||
|
||||
const videoListContentHeight = videoList.scrollHeight;
|
||||
|
||||
|
||||
videoList.style.height = videoListOriginalHeight;
|
||||
videoList.style.overflowY = videoListOriginalOverflow;
|
||||
|
||||
|
||||
// video-list의 높이 계산
|
||||
const videoListHeight = Math.min(videoListContentHeight, videoListAvailableHeight);
|
||||
const videoListFinalHeight = Math.max(videoListHeight, 100);
|
||||
|
||||
|
||||
// video-list의 현재 높이 확인
|
||||
const videoListCurrentHeight = videoList.style.height
|
||||
? parseInt(videoList.style.height)
|
||||
: videoList.offsetHeight;
|
||||
|
||||
|
||||
const videoListHeightChanged = Math.abs(videoListCurrentHeight - videoListFinalHeight) > 1;
|
||||
const videoListNeedsScroll = videoListContentHeight > videoListFinalHeight;
|
||||
|
||||
|
||||
// video-list 높이 및 스크롤 설정
|
||||
requestAnimationFrame(() => {
|
||||
if (videoListHeightChanged) {
|
||||
@@ -979,10 +979,10 @@ class VideoModal extends VideoModalBase {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ResizeObserver 설정
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* ResizeObserver 설정
|
||||
* @private
|
||||
*/
|
||||
_setupResizeObserver() {
|
||||
const videoSide = this.currentModal?.querySelector(".video-side");
|
||||
const gaugeWrap = this.currentModal?.querySelector(".gauge-wrap");
|
||||
@@ -1017,7 +1017,7 @@ class VideoModal extends VideoModalBase {
|
||||
this._windowResizeHandler = () => {
|
||||
try {
|
||||
clearTimeout(this.heightAdjustTimer);
|
||||
|
||||
|
||||
// Utils.throttle 사용 (있는 경우)
|
||||
const adjustHeight = () => {
|
||||
console.log("Window resize 감지: 높이 재조정");
|
||||
@@ -1044,10 +1044,10 @@ class VideoModal extends VideoModalBase {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* MutationObserver 설정
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* MutationObserver 설정
|
||||
* @private
|
||||
*/
|
||||
_setupMutationObserver() {
|
||||
const learningList = this.currentModal?.querySelector(".learning-list");
|
||||
|
||||
@@ -1075,8 +1075,8 @@ class VideoModal extends VideoModalBase {
|
||||
return false;
|
||||
}
|
||||
// childList 변경이나 다른 요소의 변경만 감지
|
||||
return mutation.type === "childList" ||
|
||||
(mutation.type === "attributes" && mutation.target !== learningList);
|
||||
return mutation.type === "childList" ||
|
||||
(mutation.type === "attributes" && mutation.target !== learningList);
|
||||
});
|
||||
|
||||
if (!hasRelevantChange) {
|
||||
@@ -1100,10 +1100,10 @@ class VideoModal extends VideoModalBase {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 이미지 로딩 대기 후 높이 조정
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 이미지 로딩 대기 후 높이 조정
|
||||
* @private
|
||||
*/
|
||||
async _waitForImagesAndAdjust() {
|
||||
const learningList = this.currentModal?.querySelector(".learning-list");
|
||||
if (!learningList) return;
|
||||
@@ -1151,10 +1151,10 @@ class VideoModal extends VideoModalBase {
|
||||
// 이벤트 핸들러
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* 닫기 이벤트 설정 (ModalUtils 활용)
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* 닫기 이벤트 설정 (ModalUtils 활용)
|
||||
* @private
|
||||
*/
|
||||
_setupCloseEvents(modalElement) {
|
||||
// ModalUtils를 사용하여 공통 닫기 이벤트 설정
|
||||
this._closeEventHandlers = ModalUtils.setupCloseEvents(modalElement, {
|
||||
@@ -1194,10 +1194,10 @@ class VideoModal extends VideoModalBase {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 모달 닫기 (ModalUtils 활용)
|
||||
*/
|
||||
close() {
|
||||
/**
|
||||
* 모달 닫기 (ModalUtils 활용)
|
||||
*/
|
||||
close() {
|
||||
if (!this.currentModal) return;
|
||||
|
||||
// ModalUtils를 사용하여 비디오 정지
|
||||
|
||||
@@ -20,7 +20,7 @@ class ProgressIndicator {
|
||||
this.markerManager = markerManager; // 마커 매니저 참조 추가
|
||||
this.indicator = null;
|
||||
this.stateIndicator = null; // 평균 상태 표시 요소
|
||||
|
||||
|
||||
this.gaugeSvg = this.domUtils?.$("#gauge-svg") || document.getElementById("gauge-svg");
|
||||
if (!this.gaugeSvg) {
|
||||
this._handleError(new Error('gauge-svg 요소를 찾을 수 없습니다.'), 'constructor');
|
||||
@@ -100,7 +100,7 @@ class ProgressIndicator {
|
||||
class: 'progress-indicator',
|
||||
id: 'progress-indicator'
|
||||
}) || document.createElement("div");
|
||||
|
||||
|
||||
if (!this.domUtils) {
|
||||
this.indicator.className = "progress-indicator";
|
||||
this.indicator.id = "progress-indicator";
|
||||
@@ -109,8 +109,8 @@ class ProgressIndicator {
|
||||
// 곡선 경로 가져오기
|
||||
const curvePath = this._getCurvePath();
|
||||
|
||||
// SVG 이미지 추가
|
||||
this.indicator.innerHTML = `
|
||||
// SVG 이미지 추가
|
||||
this.indicator.innerHTML = `
|
||||
<svg width="131" height="145" viewBox="0 0 131 145" fill="none" xmlns="http://www.w3.org/2000/svg" style="overflow: visible;">
|
||||
<!-- 트로피 이미지 -->
|
||||
<g filter="url(#filter0_d_2000_114823)">
|
||||
@@ -229,7 +229,7 @@ class ProgressIndicator {
|
||||
class: 'state-indicator',
|
||||
id: 'state-indicator'
|
||||
}) || document.createElement("div");
|
||||
|
||||
|
||||
if (!this.domUtils) {
|
||||
this.stateIndicator.className = "state-indicator";
|
||||
this.stateIndicator.id = "state-indicator";
|
||||
@@ -482,7 +482,7 @@ class ProgressIndicator {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// state-indicator 표시
|
||||
if (this.stateIndicator.style.display === "none") {
|
||||
this.stateIndicator.style.display = "";
|
||||
@@ -575,7 +575,7 @@ class ProgressIndicator {
|
||||
const markerPathPercent = targetLearningMarker.pathPercent || 0;
|
||||
const point = this.gaugeManager.getPointAtPercent(markerPathPercent);
|
||||
const viewBox = this.gaugeSvg.viewBox.baseVal;
|
||||
|
||||
|
||||
const percentX = (point.x / viewBox.width) * 100;
|
||||
const percentY = (point.y / viewBox.height) * 100;
|
||||
|
||||
@@ -866,7 +866,7 @@ class ProgressIndicator {
|
||||
// Utils.throttle 사용 (있는 경우)
|
||||
if (this.utils && this.utils.throttle) {
|
||||
const throttledResize = this.utils.throttle(resizeHandler, 100);
|
||||
|
||||
|
||||
if (this.eventManager) {
|
||||
const listenerId = this.eventManager.on(window, "resize", throttledResize);
|
||||
this.listenerIds.push({ element: window, id: listenerId, type: 'resize' });
|
||||
@@ -953,7 +953,7 @@ class ProgressIndicator {
|
||||
}
|
||||
|
||||
// 외부 SVG 파일 경로
|
||||
const svgPath = "./assets/images/learning/img_trophy_completed.svg";
|
||||
const svgPath = "/img/learning/img_trophy_completed.svg";
|
||||
|
||||
// SVG 파일 로드
|
||||
const response = await fetch(svgPath);
|
||||
|
||||
@@ -50,9 +50,9 @@ class GaugeChart {
|
||||
dotRadius: config.dotRadius || 7,
|
||||
// 아이콘 이미지 경로 설정
|
||||
rocketIconPath:
|
||||
config.rocketIconPath || "./assets/images/ico/icon-rocket.svg",
|
||||
config.rocketIconPath || "/img/ico/icon-rocket.svg",
|
||||
snailIconPath:
|
||||
config.snailIconPath || "./assets/images/ico/icon-snail.svg",
|
||||
config.snailIconPath || "/img/ico/icon-snail.svg",
|
||||
};
|
||||
|
||||
this.svg = null;
|
||||
|
||||
@@ -9,7 +9,7 @@ const DEFAULT_CONFIG = {
|
||||
SVG: {
|
||||
NAMESPACE: "http://www.w3.org/2000/svg",
|
||||
XLINK_NAMESPACE: "http://www.w3.org/1999/xlink",
|
||||
VIEWBOX: "0 0 1870 801",
|
||||
VIEWBOX: "0 0 1870 801",
|
||||
DIMENSIONS: { width: 1870, height: 801 },
|
||||
},
|
||||
|
||||
@@ -23,7 +23,7 @@ const DEFAULT_CONFIG = {
|
||||
FILTER_IDS: {
|
||||
INNER_SHADOW: "inner-shadow-effect",
|
||||
HOVER_SHADOW: "hover-shadow-effect",
|
||||
PIECE_EMBOSSING: "piece-embossing-effect",
|
||||
PIECE_EMBOSSING: "piece-embossing-effect",
|
||||
},
|
||||
|
||||
GRADIENT_IDS: {
|
||||
@@ -34,16 +34,16 @@ const DEFAULT_CONFIG = {
|
||||
},
|
||||
|
||||
IMAGE_PATHS: {
|
||||
BASE: "./assets/images/onboarding/bg_piece.jpg",
|
||||
BASE: "/img/onboarding/bg_piece.jpg",
|
||||
COMPLETED: {
|
||||
ACTIVE: "./assets/images/onboarding/bg_piece_completed.png",
|
||||
COMPLETED: "./assets/images/onboarding/bg_piece_finish.png",
|
||||
ALL_COMPLETED: "./assets/images/onboarding/bg_piece_all_completed.png",
|
||||
ACTIVE: "/img/onboarding/bg_piece_completed.png",
|
||||
COMPLETED: "/img/onboarding/bg_piece_finish.png",
|
||||
ALL_COMPLETED: "/img/onboarding/bg_piece_all_completed.png",
|
||||
},
|
||||
FINISH: {
|
||||
ACTIVE: "./assets/images/onboarding/bg_piece_all_completed.png",
|
||||
COMPLETED: "./assets/images/onboarding/bg_piece_finish.png",
|
||||
ALL_COMPLETED: "./assets/images/onboarding/bg_piece_all_completed.png",
|
||||
ACTIVE: "/img/onboarding/bg_piece_all_completed.png",
|
||||
COMPLETED: "/img/onboarding/bg_piece_finish.png",
|
||||
ALL_COMPLETED: "/img/onboarding/bg_piece_all_completed.png",
|
||||
},
|
||||
},
|
||||
|
||||
@@ -162,7 +162,7 @@ const BOUNDARY_LINES = [
|
||||
{ x1: 1615, y1: 268, x2: 1615, y2: 617, label: "vertical-1615" },
|
||||
{ x1: 330, y1: 267, x2: 330, y2: 523, label: "vertical-330" },
|
||||
{ x1: 256, y1: 11, x2: 256, y2: 267, label: "vertical-256-top" },
|
||||
|
||||
|
||||
// 수평 경계선들 (가로)
|
||||
{ x1: 709, y1: 268, x2: 1615, y2: 268, label: "horizontal-268" },
|
||||
{ x1: 22, y1: 523, x2: 1615, y2: 523, label: "horizontal-523" },
|
||||
@@ -312,13 +312,13 @@ const GAUGE_CONFIG = {
|
||||
class ChapterManager {
|
||||
constructor(chapterData, dependencies = {}) {
|
||||
this.chapters = chapterData || [];
|
||||
|
||||
|
||||
// 의존성 주입 (폴백 포함)
|
||||
this.errorHandler = dependencies.errorHandler || (typeof ErrorHandler !== 'undefined' ? ErrorHandler : null);
|
||||
this.utils = dependencies.utils || (typeof Utils !== 'undefined' ? Utils : null);
|
||||
|
||||
|
||||
console.log('[ChapterManager] 초기화:', this.chapters);
|
||||
|
||||
|
||||
try {
|
||||
this._validateAndInitialize();
|
||||
} catch (error) {
|
||||
@@ -332,18 +332,18 @@ class ChapterManager {
|
||||
if (!chapter.lessons || !Array.isArray(chapter.lessons)) {
|
||||
chapter.lessons = [];
|
||||
}
|
||||
|
||||
|
||||
// completed 속성 초기화
|
||||
if (chapter.completed === undefined) {
|
||||
chapter.completed = false;
|
||||
}
|
||||
|
||||
|
||||
chapter.lessons.forEach((lesson) => {
|
||||
if (lesson.completed === undefined) {
|
||||
lesson.completed = false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
console.log(`[ChapterManager] 챕터 ${index}: ${chapter.name}, pieceId: ${chapter.pieceId}, lessons: ${chapter.lessons.length}`);
|
||||
});
|
||||
} catch (error) {
|
||||
@@ -439,7 +439,7 @@ class ChapterManager {
|
||||
}
|
||||
|
||||
const lesson = chapter.lessons[lessonIndex];
|
||||
|
||||
|
||||
// 이미 완료된 학습이면 처리하지 않음
|
||||
if (lesson.completed) {
|
||||
console.log(
|
||||
@@ -771,7 +771,7 @@ class FilterFactory {
|
||||
"color-interpolation-filters": "sRGB",
|
||||
});
|
||||
|
||||
// 배경 이미지 고정
|
||||
// 배경 이미지 고정
|
||||
filter.appendChild(
|
||||
SVGHelper.createElement("feFlood", {
|
||||
"flood-opacity": "0",
|
||||
@@ -779,7 +779,7 @@ class FilterFactory {
|
||||
})
|
||||
);
|
||||
|
||||
// 원본 모양 유지
|
||||
// 원본 모양 유지
|
||||
filter.appendChild(
|
||||
SVGHelper.createElement("feBlend", {
|
||||
mode: "normal",
|
||||
@@ -1170,7 +1170,7 @@ class FilterFactory {
|
||||
// Inner Shadow 1: 우하단 밝은 그림자
|
||||
// 13px 12px 6px rgba(254, 227, 179, 0.80)
|
||||
// ========================================
|
||||
|
||||
|
||||
// Alpha 채널 추출
|
||||
filter.appendChild(
|
||||
SVGHelper.createElement("feColorMatrix", {
|
||||
@@ -1227,7 +1227,7 @@ class FilterFactory {
|
||||
// Inner Shadow 2: 좌상단 어두운 그림자
|
||||
// -11px -11px 5px rgba(0, 0, 0, 0.40)
|
||||
// ========================================
|
||||
|
||||
|
||||
// Alpha 채널 추출
|
||||
filter.appendChild(
|
||||
SVGHelper.createElement("feColorMatrix", {
|
||||
@@ -1283,7 +1283,7 @@ class FilterFactory {
|
||||
// Drop Shadow: 외부 그림자
|
||||
// 1px 1px 2px rgba(0, 0, 0, 0.80)
|
||||
// ========================================
|
||||
|
||||
|
||||
// 외부 그림자용 Alpha
|
||||
filter.appendChild(
|
||||
SVGHelper.createElement("feColorMatrix", {
|
||||
@@ -1371,8 +1371,8 @@ class ContentManager {
|
||||
*/
|
||||
getThumbnailUrl(pieceId) {
|
||||
const chapterInfo = this.getChapterByPieceId(pieceId);
|
||||
if (!chapterInfo || !chapterInfo.chapter.lessons ||
|
||||
chapterInfo.chapter.lessons.length === 0) {
|
||||
if (!chapterInfo || !chapterInfo.chapter.lessons ||
|
||||
chapterInfo.chapter.lessons.length === 0) {
|
||||
return CONFIG.IMAGE_PATHS.BASE;
|
||||
}
|
||||
|
||||
@@ -1401,7 +1401,7 @@ class ContentManager {
|
||||
getType(pieceId) {
|
||||
const chapterInfo = this.getChapterByPieceId(pieceId);
|
||||
if (!chapterInfo) return "youtube";
|
||||
|
||||
|
||||
return chapterInfo.chapter.type || "youtube";
|
||||
}
|
||||
}
|
||||
@@ -1442,7 +1442,7 @@ class PuzzlePiece {
|
||||
`bg-image-${this.data.id}`,
|
||||
currentUrl
|
||||
);
|
||||
|
||||
|
||||
// Hover 이미지 - stroke: 2, 엠보싱: 적용
|
||||
this._createImageLayer(
|
||||
"piece-hover-image",
|
||||
@@ -1450,7 +1450,7 @@ class PuzzlePiece {
|
||||
currentUrl,
|
||||
"0"
|
||||
);
|
||||
|
||||
|
||||
// Completed 이미지 - stroke: 2, 엠보싱: 적용
|
||||
this._createImageLayer(
|
||||
"piece-completed-image",
|
||||
@@ -1459,7 +1459,7 @@ class PuzzlePiece {
|
||||
"1.0",
|
||||
true
|
||||
);
|
||||
|
||||
|
||||
// All Completed 이미지 - stroke: 0, 엠보싱: 없음 (하나의 이미지처럼)
|
||||
this._createImageLayer(
|
||||
"piece-all-completed-image",
|
||||
@@ -1468,7 +1468,7 @@ class PuzzlePiece {
|
||||
"1.0",
|
||||
true
|
||||
);
|
||||
|
||||
|
||||
// Finish 이미지 - stroke: 2, 엠보싱: 적용
|
||||
this._createImageLayer(
|
||||
"piece-finish-image",
|
||||
@@ -1497,18 +1497,18 @@ class PuzzlePiece {
|
||||
opacity = "1.0",
|
||||
hidden = false
|
||||
) {
|
||||
const strokeWidth =
|
||||
const strokeWidth =
|
||||
className === "piece-base-image" ? "2" :
|
||||
className === "piece-all-completed-image" ? "0" :
|
||||
className === "piece-completed-image" ? "2" :
|
||||
className === "piece-finish-image" ? "2" : "2";
|
||||
|
||||
className === "piece-all-completed-image" ? "0" :
|
||||
className === "piece-completed-image" ? "2" :
|
||||
className === "piece-finish-image" ? "2" : "2";
|
||||
|
||||
// ✅ 모든 레이어에서 stroke 색상을 #333 (검은색)으로 통일
|
||||
const strokeColor = "#000";
|
||||
|
||||
|
||||
const flatLayers = ["piece-base-image", "piece-all-completed-image", "piece-hover-image"];
|
||||
const shouldApplyEmbossing = !flatLayers.includes(className);
|
||||
|
||||
|
||||
const attributes = {
|
||||
d: this.data.path,
|
||||
class: className,
|
||||
@@ -1519,23 +1519,23 @@ class PuzzlePiece {
|
||||
"stroke-linejoin": "round",
|
||||
"stroke-linecap": "round",
|
||||
};
|
||||
|
||||
|
||||
if (shouldApplyEmbossing) {
|
||||
// PIECE_EMBOSSING만 적용 (completed-effect 제거)
|
||||
attributes.filter = `url(#${CONFIG.FILTER_IDS.PIECE_EMBOSSING})`;
|
||||
}
|
||||
|
||||
|
||||
if (className === "piece-completed-image") {
|
||||
attributes["clip-path"] = `url(#clip-piece-${this.data.id})`;
|
||||
}
|
||||
|
||||
|
||||
const path = SVGHelper.createElement("path", attributes);
|
||||
|
||||
|
||||
if (hidden) path.style.display = "none";
|
||||
if (className === "piece-hover-image") {
|
||||
path.style.transition = CONFIG.ANIMATION.HOVER_TRANSITION;
|
||||
}
|
||||
|
||||
|
||||
this.group.appendChild(path);
|
||||
}
|
||||
_createOverlay(className) {
|
||||
@@ -1581,7 +1581,7 @@ class PuzzlePiece {
|
||||
const enterId = this.eventManager.on(this.group, "mouseenter", mouseEnterHandler);
|
||||
const leaveId = this.eventManager.on(this.group, "mouseleave", mouseLeaveHandler);
|
||||
const clickId = this.eventManager.on(this.group, "click", clickHandler);
|
||||
|
||||
|
||||
this.listenerIds.push(
|
||||
{ element: this.group, id: enterId, type: 'mouseenter' },
|
||||
{ element: this.group, id: leaveId, type: 'mouseleave' },
|
||||
@@ -1745,18 +1745,18 @@ class PuzzlePiece {
|
||||
|
||||
markComplete() {
|
||||
if (this.isCompleted) return;
|
||||
|
||||
|
||||
this.isCompleted = true;
|
||||
this.group.classList.add("completed");
|
||||
|
||||
|
||||
const baseImage = this.group.querySelector(".piece-base-image");
|
||||
const completedImage = this.group.querySelector(".piece-completed-image");
|
||||
|
||||
|
||||
// ✅ base 이미지를 완전히 숨기고 completed 이미지만 표시
|
||||
if (baseImage) {
|
||||
baseImage.style.display = "none";
|
||||
}
|
||||
|
||||
|
||||
if (completedImage) {
|
||||
completedImage.style.display = "block";
|
||||
// completed-effect 필터 완전히 제거하고 PIECE_EMBOSSING만 적용
|
||||
@@ -1767,24 +1767,24 @@ class PuzzlePiece {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ✅ 새로운 메서드: Finish Image 표시 (최종 표시)
|
||||
showFinish() {
|
||||
const baseImg = this.group.querySelector(".piece-base-image");
|
||||
const completedImg = this.group.querySelector(".piece-completed-image");
|
||||
const allCompletedImg = this.group.querySelector(".piece-all-completed-image");
|
||||
const finishImg = this.group.querySelector(".piece-finish-image");
|
||||
showFinish() {
|
||||
const baseImg = this.group.querySelector(".piece-base-image");
|
||||
const completedImg = this.group.querySelector(".piece-completed-image");
|
||||
const allCompletedImg = this.group.querySelector(".piece-all-completed-image");
|
||||
const finishImg = this.group.querySelector(".piece-finish-image");
|
||||
|
||||
// 모든 이미지 숨기기
|
||||
if (baseImg) baseImg.style.display = "none";
|
||||
if (completedImg) completedImg.style.display = "none";
|
||||
if (allCompletedImg) allCompletedImg.style.display = "none";
|
||||
// 모든 이미지 숨기기
|
||||
if (baseImg) baseImg.style.display = "none";
|
||||
if (completedImg) completedImg.style.display = "none";
|
||||
if (allCompletedImg) allCompletedImg.style.display = "none";
|
||||
|
||||
// ✅ FINISH 이미지 표시 (bg_piece_finish.png - COMPLETED 이미지)
|
||||
if (finishImg) {
|
||||
finishImg.style.display = "block";
|
||||
// ✅ FINISH 이미지 표시 (bg_piece_finish.png - COMPLETED 이미지)
|
||||
if (finishImg) {
|
||||
finishImg.style.display = "block";
|
||||
}
|
||||
}
|
||||
}
|
||||
// ❌ showAllCompleted는 이제 사용 안 함 (showFinish로 대체)
|
||||
showAllCompleted() {
|
||||
// 더 이상 사용하지 않음 - showFinish로 대체
|
||||
@@ -1831,14 +1831,14 @@ class GaugeManager {
|
||||
// 다른 피스는 전체 xRange의 중앙
|
||||
centerX = (xRange.left + xRange.right) / 2;
|
||||
}
|
||||
|
||||
|
||||
// 중앙 정렬: centerX에서 bgWidth의 절반을 빼서 시작점 계산
|
||||
let gaugeX = centerX - (bgWidth / 2);
|
||||
|
||||
// strokeRadius 고려하여 최소 여백 확보
|
||||
const strokeRadius = CONFIG.GAUGE.HEIGHT / 2;
|
||||
const minMargin = strokeRadius;
|
||||
|
||||
|
||||
// 왼쪽 경계 확인 및 조정
|
||||
if (gaugeX < xRange.left + minMargin) {
|
||||
gaugeX = xRange.left + minMargin;
|
||||
@@ -1846,7 +1846,7 @@ class GaugeManager {
|
||||
const maxEndX = xRange.right - minMargin;
|
||||
bgWidth = Math.min(bgWidth, maxEndX - gaugeX);
|
||||
}
|
||||
|
||||
|
||||
// 오른쪽 경계 확인 및 조정
|
||||
const calculatedEndX = gaugeX + bgWidth;
|
||||
const maxEndX = xRange.right - minMargin;
|
||||
@@ -1942,7 +1942,7 @@ class GaugeManager {
|
||||
if (bgLine) {
|
||||
let originalX1 = parseFloat(bgLine.getAttribute("data-original-x1"));
|
||||
let originalX2 = parseFloat(bgLine.getAttribute("data-original-x2"));
|
||||
|
||||
|
||||
// 원본 좌표가 없으면 현재 좌표를 원본으로 저장
|
||||
if (!originalX1 || isNaN(originalX1)) {
|
||||
originalX1 = parseFloat(bgLine.getAttribute("x1"));
|
||||
@@ -1950,28 +1950,28 @@ class GaugeManager {
|
||||
bgLine.setAttribute("data-original-x1", originalX1);
|
||||
bgLine.setAttribute("data-original-x2", originalX2);
|
||||
}
|
||||
|
||||
|
||||
// 원본 opacity 가져오기
|
||||
let originalOpacity = parseFloat(bgLine.getAttribute("data-original-opacity"));
|
||||
if (!originalOpacity || isNaN(originalOpacity)) {
|
||||
originalOpacity = CONFIG.GAUGE.BG_OPACITY;
|
||||
bgLine.setAttribute("data-original-opacity", originalOpacity);
|
||||
}
|
||||
|
||||
|
||||
// progress에 따라 opacity 설정: 학습 내용이 없으면(progress === 0) opacity 0, 있으면 원본 opacity
|
||||
if (progress > 0) {
|
||||
bgLine.setAttribute("opacity", originalOpacity);
|
||||
} else {
|
||||
bgLine.setAttribute("opacity", 0);
|
||||
}
|
||||
|
||||
|
||||
if (isCompleted) {
|
||||
// 중앙 정렬 유지: 원본 중앙에서 조정된 너비의 절반씩 빼고 더함
|
||||
const originalCenterX = (originalX1 + originalX2) / 2;
|
||||
const adjustedBgWidth = (originalX2 - originalX1) - (EMBOSSING_INSET * 2);
|
||||
const newX1 = originalCenterX - (adjustedBgWidth / 2);
|
||||
const newX2 = originalCenterX + (adjustedBgWidth / 2);
|
||||
|
||||
|
||||
bgLine.setAttribute("x1", newX1);
|
||||
bgLine.setAttribute("x2", newX2);
|
||||
} else {
|
||||
@@ -2174,32 +2174,32 @@ class UIElementFactory {
|
||||
/**
|
||||
* 퍼즐 조각 경계선 생성
|
||||
*/
|
||||
static createBoundaryLines(svg) {
|
||||
const boundaryGroup = SVGHelper.createElement("g", {
|
||||
class: "puzzle-boundaries",
|
||||
id: "puzzleBoundaries",
|
||||
style: "pointer-events: none;", // 클릭 이벤트 차단
|
||||
});
|
||||
|
||||
BOUNDARY_LINES.forEach((boundary) => {
|
||||
const line = SVGHelper.createElement("line", {
|
||||
x1: boundary.x1,
|
||||
y1: boundary.y1,
|
||||
x2: boundary.x2,
|
||||
y2: boundary.y2,
|
||||
stroke: "#000000", // 검은색
|
||||
"stroke-width": "2",
|
||||
"stroke-linecap": "butt",
|
||||
"stroke-opacity": "0.8", // 약간 투명하게
|
||||
class: "boundary-line",
|
||||
"data-boundary": boundary.label,
|
||||
static createBoundaryLines(svg) {
|
||||
const boundaryGroup = SVGHelper.createElement("g", {
|
||||
class: "puzzle-boundaries",
|
||||
id: "puzzleBoundaries",
|
||||
style: "pointer-events: none;", // 클릭 이벤트 차단
|
||||
});
|
||||
|
||||
boundaryGroup.appendChild(line);
|
||||
});
|
||||
BOUNDARY_LINES.forEach((boundary) => {
|
||||
const line = SVGHelper.createElement("line", {
|
||||
x1: boundary.x1,
|
||||
y1: boundary.y1,
|
||||
x2: boundary.x2,
|
||||
y2: boundary.y2,
|
||||
stroke: "#000000", // 검은색
|
||||
"stroke-width": "2",
|
||||
"stroke-linecap": "butt",
|
||||
"stroke-opacity": "0.8", // 약간 투명하게
|
||||
class: "boundary-line",
|
||||
"data-boundary": boundary.label,
|
||||
});
|
||||
|
||||
svg.appendChild(boundaryGroup);
|
||||
}
|
||||
boundaryGroup.appendChild(line);
|
||||
});
|
||||
|
||||
svg.appendChild(boundaryGroup);
|
||||
}
|
||||
}
|
||||
// ============================================================================
|
||||
// 모달 관리 클래스 (VideoModalBase 활용) - 퍼즐 온보딩 전용
|
||||
@@ -2239,19 +2239,19 @@ class PuzzleModalManager {
|
||||
try {
|
||||
// VideoModalBase 초기화
|
||||
const videoModalBase = this._initVideoModalBase();
|
||||
|
||||
|
||||
// 기존 모달 제거
|
||||
this._removeExistingModal();
|
||||
|
||||
// VideoModalBase를 사용하여 모달 HTML 로드
|
||||
const modalHTML = await videoModalBase.loadModalHTML("onboarding");
|
||||
|
||||
|
||||
// VideoModalBase를 사용하여 모달 요소 생성
|
||||
const modal = videoModalBase.createModalFromHTML(modalHTML, "onboarding");
|
||||
|
||||
|
||||
// DOM에 추가
|
||||
document.body.appendChild(modal);
|
||||
|
||||
|
||||
// ✅ 모달을 먼저 숨긴 상태로 표시 (높이 조정이 보이지 않도록)
|
||||
modal.style.display = "block";
|
||||
modal.style.visibility = "hidden";
|
||||
@@ -2315,13 +2315,13 @@ class PuzzleModalManager {
|
||||
isAdjustingHeight: false,
|
||||
isInitialLoadComplete: false,
|
||||
};
|
||||
|
||||
|
||||
// 첫 번째 학습 로드
|
||||
this._loadLesson(modal, chapter, modalState.currentLessonIndex);
|
||||
|
||||
|
||||
// 진행률 업데이트
|
||||
this._updateProgress(modal, chapter);
|
||||
|
||||
|
||||
// 닫기 이벤트 먼저 설정
|
||||
this._setupCloseEvents(modal, chapter, chapterIndex, modalState);
|
||||
|
||||
@@ -2329,10 +2329,10 @@ class PuzzleModalManager {
|
||||
if (this.videoModalBase && this.videoModalBase.setupCommentBox) {
|
||||
this.videoModalBase.setupCommentBox(modal);
|
||||
}
|
||||
|
||||
|
||||
// 학습 목차 생성
|
||||
this._createLearningList(modal, chapter, chapterIndex, modalState);
|
||||
|
||||
|
||||
// ✅ 높이 조정 후 모달 표시
|
||||
this._initializeHeightAdjustment(modal, modalState, () => {
|
||||
// 높이 조정 완료 후 모달을 보이게 함
|
||||
@@ -2341,7 +2341,7 @@ class PuzzleModalManager {
|
||||
modal.style.transition = "opacity 0.3s ease";
|
||||
modalState.isVisible = true;
|
||||
modalState.isInitialLoadComplete = true;
|
||||
|
||||
|
||||
// 현재 학습으로 스크롤
|
||||
setTimeout(() => {
|
||||
this._scrollToCurrentLesson(modal);
|
||||
@@ -2363,7 +2363,7 @@ class PuzzleModalManager {
|
||||
static _initializeHeightAdjustment(modal, modalState, onComplete) {
|
||||
// ✅ 최적화: 높이 조정을 3단계로 축소 (리플로우 최소화)
|
||||
let pendingAdjust = null;
|
||||
|
||||
|
||||
const scheduleAdjust = () => {
|
||||
if (pendingAdjust) {
|
||||
cancelAnimationFrame(pendingAdjust);
|
||||
@@ -2392,7 +2392,7 @@ class PuzzleModalManager {
|
||||
onComplete();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Observer 설정 (초기 로딩 후에만 작동)
|
||||
this._setupResizeObserver(modal, modalState);
|
||||
this._setupMutationObserver(modal, modalState);
|
||||
@@ -2513,10 +2513,10 @@ class PuzzleModalManager {
|
||||
|
||||
// learning-list에 사용 가능한 최대 높이
|
||||
// comment-list-wrap 높이도 고려 (comment-wrap과 별도로 계산)
|
||||
const availableHeight = totalHeight - headerHeight - commentWrapHeight -
|
||||
(commentListWrapHeight > 0 ? commentListWrapHeight : 0) -
|
||||
titleHeight - paddingTop - paddingBottom -
|
||||
commentInfoOffset - 20;
|
||||
const availableHeight = totalHeight - headerHeight - commentWrapHeight -
|
||||
(commentListWrapHeight > 0 ? commentListWrapHeight : 0) -
|
||||
titleHeight - paddingTop - paddingBottom -
|
||||
commentInfoOffset - 20;
|
||||
|
||||
// 사용 가능한 높이가 음수이거나 너무 작으면 경고
|
||||
if (availableHeight < 50) {
|
||||
@@ -2530,24 +2530,24 @@ class PuzzleModalManager {
|
||||
// ✅ learning-list의 실제 컨텐츠 높이 측정 (스타일 제거 후)
|
||||
const originalHeight = learningList.style.height;
|
||||
const originalOverflow = learningList.style.overflowY;
|
||||
|
||||
|
||||
learningList.style.height = 'auto';
|
||||
learningList.style.overflowY = 'visible';
|
||||
|
||||
|
||||
const listContentHeight = learningList.scrollHeight;
|
||||
|
||||
|
||||
learningList.style.height = originalHeight;
|
||||
learningList.style.overflowY = originalOverflow;
|
||||
|
||||
// ✅ video-list의 실제 컨텐츠 높이 측정 (comment-list-wrap 높이 고려)
|
||||
const videoListOriginalHeight = videoList.style.height;
|
||||
const videoListOriginalOverflow = videoList.style.overflowY;
|
||||
|
||||
|
||||
videoList.style.height = 'auto';
|
||||
videoList.style.overflowY = 'visible';
|
||||
|
||||
|
||||
const videoListContentHeight = videoList.scrollHeight;
|
||||
|
||||
|
||||
videoList.style.height = videoListOriginalHeight;
|
||||
videoList.style.overflowY = videoListOriginalOverflow;
|
||||
|
||||
@@ -2568,7 +2568,7 @@ class PuzzleModalManager {
|
||||
const currentHeight = learningList.style.height
|
||||
? parseInt(learningList.style.height)
|
||||
: learningList.offsetHeight;
|
||||
|
||||
|
||||
const videoListCurrentHeight = videoList.style.height
|
||||
? parseInt(videoList.style.height)
|
||||
: videoList.offsetHeight;
|
||||
@@ -2626,7 +2626,7 @@ class PuzzleModalManager {
|
||||
// 높이 조정 완료 후 플래그 해제
|
||||
modalState.isAdjustingHeight = false;
|
||||
});
|
||||
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -2638,16 +2638,16 @@ class PuzzleModalManager {
|
||||
const videoSide = modal.querySelector(".video-side");
|
||||
const commentWrap = modal.querySelector(".comment-wrap");
|
||||
const modalContent = modal.querySelector(".modal-content");
|
||||
|
||||
|
||||
if (!videoSide) return;
|
||||
|
||||
|
||||
if (!modal._resizeObserver) {
|
||||
// ✅ throttle 적용 (리플로우 최소화)
|
||||
const throttledAdjust = Utils.throttle(() => {
|
||||
if (!modalState.isInitialLoadComplete) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
let pendingAdjust = null;
|
||||
if (pendingAdjust) {
|
||||
cancelAnimationFrame(pendingAdjust);
|
||||
@@ -2666,7 +2666,7 @@ class PuzzleModalManager {
|
||||
}
|
||||
throttledAdjust();
|
||||
});
|
||||
|
||||
|
||||
modal._resizeObserver.observe(videoSide);
|
||||
if (commentWrap) {
|
||||
modal._resizeObserver.observe(commentWrap);
|
||||
@@ -2675,14 +2675,14 @@ class PuzzleModalManager {
|
||||
modal._resizeObserver.observe(modalContent);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Window resize 이벤트 (throttle 적용)
|
||||
if (!modal._windowResizeHandler) {
|
||||
const throttledResize = Utils.throttle(() => {
|
||||
if (!modalState.isInitialLoadComplete) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
let pendingAdjust = null;
|
||||
if (pendingAdjust) {
|
||||
cancelAnimationFrame(pendingAdjust);
|
||||
@@ -2705,9 +2705,9 @@ class PuzzleModalManager {
|
||||
*/
|
||||
static _setupMutationObserver(modal, modalState) {
|
||||
const learningList = modal.querySelector(".learning-list");
|
||||
|
||||
|
||||
if (!learningList) return;
|
||||
|
||||
|
||||
if (!modal._mutationObserver) {
|
||||
modal._mutationObserver = new MutationObserver((mutations) => {
|
||||
// ✅ 초기 로딩 중에는 무시
|
||||
@@ -2715,12 +2715,12 @@ class PuzzleModalManager {
|
||||
console.log("[ModalManager] 초기 로딩 중 - MutationObserver 무시");
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// ✅ 높이 조정 중이면 무시
|
||||
if (modalState.isAdjustingHeight) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const hasRelevantChange = mutations.some((mutation) => {
|
||||
if (
|
||||
mutation.type === "attributes" &&
|
||||
@@ -2729,14 +2729,14 @@ class PuzzleModalManager {
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return mutation.type === "childList" ||
|
||||
(mutation.type === "attributes" && mutation.target !== learningList);
|
||||
return mutation.type === "childList" ||
|
||||
(mutation.type === "attributes" && mutation.target !== learningList);
|
||||
});
|
||||
|
||||
|
||||
if (!hasRelevantChange) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// ✅ throttle 적용 (리플로우 최소화)
|
||||
if (!modal._mutationThrottle) {
|
||||
modal._mutationThrottle = Utils.throttle(() => {
|
||||
@@ -2753,7 +2753,7 @@ class PuzzleModalManager {
|
||||
}
|
||||
modal._mutationThrottle();
|
||||
});
|
||||
|
||||
|
||||
modal._mutationObserver.observe(learningList, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
@@ -2879,7 +2879,7 @@ class PuzzleModalManager {
|
||||
static _loadLesson(modal, chapter, lessonIndex) {
|
||||
const lesson = chapter.lessons[lessonIndex];
|
||||
const videoModalBase = this._initVideoModalBase();
|
||||
|
||||
|
||||
// VideoModalBase의 setupVideo 메서드 활용
|
||||
if (chapter.type === "youtube" && lesson.url) {
|
||||
const videoData = { url: lesson.url, id: lesson.url };
|
||||
@@ -2948,7 +2948,7 @@ class PuzzleModalManager {
|
||||
chapter.lessons.forEach((lesson, index) => {
|
||||
try {
|
||||
const li = domUtils?.createElement('li') || document.createElement("li");
|
||||
|
||||
|
||||
// 상태 클래스
|
||||
if (index === modalState.currentLessonIndex) {
|
||||
domUtils?.addClasses(li, 'active') || li.classList.add("active");
|
||||
@@ -2973,7 +2973,7 @@ class PuzzleModalManager {
|
||||
<span class="seq">${index + 1}차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img src="./assets/images/video/img_learning_thumb_0${imageNum}.png" alt="${lesson.label}" loading="lazy" />
|
||||
<img src="/img/video/img_learning_thumb_0${imageNum}.png" alt="${lesson.label}" loading="lazy" />
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">${lesson.label}</div>
|
||||
@@ -2989,7 +2989,7 @@ class PuzzleModalManager {
|
||||
const clickHandler = (e) => {
|
||||
try {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
const clickedIndex = parseInt(e.currentTarget.dataset.lessonIndex);
|
||||
if (isNaN(clickedIndex)) {
|
||||
console.error('[ModalManager] 유효하지 않은 lesson index:', e.currentTarget.dataset.lessonIndex);
|
||||
@@ -2997,7 +2997,7 @@ class PuzzleModalManager {
|
||||
}
|
||||
|
||||
console.log(`[ModalManager] 학습 클릭: ${clickedIndex}, 이전: ${modalState.currentLessonIndex}`);
|
||||
|
||||
|
||||
// 이전 학습 완료 처리
|
||||
if (modalState.currentLessonIndex !== clickedIndex) {
|
||||
const prevLesson = chapter.lessons[modalState.currentLessonIndex];
|
||||
@@ -3014,11 +3014,11 @@ class PuzzleModalManager {
|
||||
// 새 학습 로드
|
||||
modalState.currentLessonIndex = clickedIndex;
|
||||
console.log(`[ModalManager] currentLessonIndex 업데이트: ${modalState.currentLessonIndex}`);
|
||||
|
||||
|
||||
this._loadLesson(modal, chapter, modalState.currentLessonIndex);
|
||||
this._updateProgress(modal, chapter);
|
||||
this._createLearningList(modal, chapter, chapterIndex, modalState);
|
||||
|
||||
|
||||
// ✅ 목록 재생성 후 높이 재조정 및 스크롤
|
||||
setTimeout(() => {
|
||||
this._adjustModalContentHeight(modal, modalState);
|
||||
@@ -3085,7 +3085,7 @@ class PuzzleModalManager {
|
||||
static _setupCloseEvents(modal, chapter, chapterIndex, modalState) {
|
||||
const closeModal = () => {
|
||||
console.log(`[ModalManager] closeModal 호출 - currentLessonIndex: ${modalState.currentLessonIndex}`);
|
||||
|
||||
|
||||
// 현재 학습 완료 처리
|
||||
const currentLesson = chapter.lessons[modalState.currentLessonIndex];
|
||||
console.log(`[ModalManager] 현재 학습 정보:`, {
|
||||
@@ -3094,7 +3094,7 @@ class PuzzleModalManager {
|
||||
lesson: currentLesson,
|
||||
completed: currentLesson?.completed
|
||||
});
|
||||
|
||||
|
||||
if (currentLesson && !currentLesson.completed) {
|
||||
console.log(`[ModalManager] 모달 닫기 - 학습 완료 처리: [${chapterIndex}-${modalState.currentLessonIndex}] ${currentLesson.label}`);
|
||||
PuzzleManager.instance.chapterManager.completeLesson(
|
||||
@@ -3133,7 +3133,7 @@ class PuzzleModalManager {
|
||||
*/
|
||||
static _openFallbackModal(chapterIndex, chapter) {
|
||||
console.log("[ModalManager] 폴백 모달 사용");
|
||||
|
||||
|
||||
const modalHTML = `
|
||||
<div class="modal video" style="display: block;">
|
||||
<div class="modal-content">
|
||||
@@ -3179,7 +3179,7 @@ class PuzzleModalManager {
|
||||
|
||||
document.body.insertAdjacentHTML("beforeend", modalHTML);
|
||||
const modal = document.querySelector(".modal.video");
|
||||
|
||||
|
||||
const modalState = {
|
||||
currentLessonIndex: 0,
|
||||
retryCount: 0,
|
||||
@@ -3187,7 +3187,7 @@ class PuzzleModalManager {
|
||||
isAdjustingHeight: false,
|
||||
isInitialLoadComplete: false,
|
||||
};
|
||||
|
||||
|
||||
this._setupModal(modal, chapter, chapterIndex);
|
||||
}
|
||||
}
|
||||
@@ -3266,7 +3266,7 @@ class PuzzleManager {
|
||||
_initializeVideoModal() {
|
||||
if (window.VideoModal) {
|
||||
console.log('[PuzzleManager] VideoModal 감지 - 통합 모드');
|
||||
|
||||
|
||||
// VideoModal에 필요한 config와 markerManager 어댑터 생성
|
||||
const puzzleConfig = {
|
||||
modalPath: "./_modal/video-onboarding.html",
|
||||
@@ -3282,13 +3282,13 @@ class PuzzleManager {
|
||||
this.videoModal = {
|
||||
openPuzzleChapter: async (chapter, chapterIndex, videoData) => {
|
||||
console.log(`[PuzzleManager] VideoModal로 챕터 열기: ${chapter.name}`);
|
||||
|
||||
|
||||
// 실제 VideoModal 인스턴스가 필요한 경우
|
||||
// 여기서는 간단한 모달을 사용
|
||||
await PuzzleModalManager._openSimpleModal(chapterIndex, chapter);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
console.log('[PuzzleManager] VideoModal 어댑터 생성 완료');
|
||||
} catch (error) {
|
||||
console.error('[PuzzleManager] VideoModal 초기화 실패:', error);
|
||||
@@ -3304,18 +3304,18 @@ class PuzzleManager {
|
||||
this._setupDefs();
|
||||
this._createBoardBackground();
|
||||
this._createPuzzlePieces();
|
||||
|
||||
|
||||
// ✅ 경계선 추가 (타이틀과 버튼 전에 추가하여 아래에 배치)
|
||||
UIElementFactory.createBoundaryLines(this.svg);
|
||||
|
||||
|
||||
UIElementFactory.createTitles(this.svg);
|
||||
this._createPlayButtonsAndGauges();
|
||||
|
||||
|
||||
this.boardElement.appendChild(this.svg);
|
||||
|
||||
|
||||
// 챕터 데이터로 타이틀 업데이트
|
||||
this._updateTitlesFromChapters();
|
||||
|
||||
|
||||
this._initializeCompletedPieces();
|
||||
}
|
||||
|
||||
@@ -3339,7 +3339,7 @@ class PuzzleManager {
|
||||
|
||||
if (Math.abs(x - titlePos.x) < 1 && Math.abs(y - titlePos.y) < 1) {
|
||||
const tspans = text.querySelectorAll("tspan");
|
||||
|
||||
|
||||
// 한 줄 또는 두 줄로 나누기
|
||||
const words = chapter.name.split(" ");
|
||||
if (tspans.length >= 2 && words.length >= 3) {
|
||||
@@ -3381,7 +3381,7 @@ class PuzzleManager {
|
||||
defs.appendChild(FilterFactory.createBoardFilter()); // 보드
|
||||
// 3D 효과 필터
|
||||
defs.appendChild(FilterFactory.createPieceEmbossingFilter());
|
||||
|
||||
|
||||
FilterFactory.createPlayButtonFilters().forEach((filter) => {
|
||||
defs.appendChild(filter);
|
||||
});
|
||||
@@ -3517,16 +3517,16 @@ class PuzzleManager {
|
||||
const progress = this.chapterManager.getChapterProgress(
|
||||
chapterInfo.chapterIndex
|
||||
);
|
||||
|
||||
|
||||
// 완료 상태 확인
|
||||
const isCompleted = this.chapterManager.isChapterCompleted(
|
||||
chapterInfo.chapterIndex
|
||||
);
|
||||
|
||||
|
||||
console.log(
|
||||
`[PuzzleManager] 게이지 업데이트: piece=${pieceId}, progress=${progress}%, completed=${isCompleted}`
|
||||
);
|
||||
|
||||
|
||||
GaugeManager.updateGauge(pieceId, progress, isCompleted);
|
||||
|
||||
// 챕터가 완료되면 퍼즐 조각 완료 표시
|
||||
@@ -3567,14 +3567,14 @@ class PuzzleManager {
|
||||
|
||||
_handleAllComplete() {
|
||||
this._showCompletionAnimation();
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
this._showRibbonAnimation();
|
||||
}, 500);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
this.boardElement.classList.add("all-completed");
|
||||
|
||||
|
||||
// ✅ 경계선 숨기기
|
||||
const boundaries = this.svg.querySelector("#puzzleBoundaries");
|
||||
if (boundaries) {
|
||||
@@ -3606,7 +3606,7 @@ class PuzzleManager {
|
||||
const ribbonHeightInSVG = ribbonWidthInSVG / ribbonAspectRatio;
|
||||
|
||||
try {
|
||||
const response = await fetch("./assets/images/onboarding/img_ribbon.svg");
|
||||
const response = await fetch("/img/onboarding/img_ribbon.svg");
|
||||
const svgText = await response.text();
|
||||
|
||||
const ribbonContainer = document.createElement("div");
|
||||
@@ -3801,7 +3801,7 @@ class PuzzleManager {
|
||||
// 페이드 아웃 애니메이션
|
||||
setTimeout(() => {
|
||||
animationContainer.style.animation = 'completionFadeOut 0.5s ease forwards';
|
||||
|
||||
|
||||
// 페이드 아웃 애니메이션 스타일 추가
|
||||
if (!document.getElementById('completion-fadeout-styles')) {
|
||||
const fadeOutStyle = document.createElement('style');
|
||||
@@ -3824,14 +3824,14 @@ class PuzzleManager {
|
||||
|
||||
setTimeout(() => {
|
||||
animationContainer.remove();
|
||||
|
||||
|
||||
// ✅ 애니메이션 후 Finish Image 표시
|
||||
console.log('[PuzzleManager] 애니메이션 종료 - showFinish 호출 시작');
|
||||
this.pieces.forEach((piece) => {
|
||||
piece.showFinish();
|
||||
});
|
||||
console.log('[PuzzleManager] 애니메이션 종료 - showFinish 호출 완료');
|
||||
|
||||
|
||||
// ✅ 애니메이션 종료 시 문구 변경
|
||||
this._showCelebrationEnd();
|
||||
}, 3500);
|
||||
@@ -3873,7 +3873,7 @@ class PuzzleManager {
|
||||
|
||||
_initializeCompletedPieces() {
|
||||
console.log('[PuzzleManager] 완료 상태 초기화 시작');
|
||||
|
||||
|
||||
// 각 챕터의 완료 상태 확인
|
||||
this.chapterManager.chapters.forEach((chapter, chapterIndex) => {
|
||||
if (!chapter.pieceId) {
|
||||
@@ -3978,13 +3978,13 @@ function initializePuzzleOnboarding() {
|
||||
};
|
||||
|
||||
const puzzleManager = new PuzzleManager("puzzleBoard", chapterData, dependencies);
|
||||
|
||||
|
||||
if (puzzleManager && puzzleManager.initialize) {
|
||||
puzzleManager.initialize();
|
||||
} else {
|
||||
console.error('[PuzzleOnboarding] PuzzleManager 초기화 실패');
|
||||
}
|
||||
|
||||
|
||||
initializeOverlay();
|
||||
} catch (error) {
|
||||
const errorHandler = typeof ErrorHandler !== 'undefined' ? ErrorHandler : null;
|
||||
|
||||
@@ -11,6 +11,9 @@
|
||||
type="image/svg+xml"
|
||||
href="/img/_favicon.svg"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/css/lib/swiper11.min.css" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user