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");
|
this.cardsContainer = this.domUtils?.$(".chapter-list", gaugeElement) || gaugeElement.querySelector(".chapter-list");
|
||||||
|
|
||||||
if (!this.cardsContainer) {
|
if (!this.cardsContainer) {
|
||||||
this.cardsContainer = this.domUtils?.createElement('ul', { class: 'chapter-list' }) || document.createElement("ul");
|
this.cardsContainer = this.domUtils?.createElement('ul', { class: 'chapter-list' }) || document.createElement("ul");
|
||||||
this.cardsContainer.className = "chapter-list";
|
this.cardsContainer.className = "chapter-list";
|
||||||
@@ -166,18 +166,18 @@ class ChapterCardManager {
|
|||||||
|
|
||||||
const thumbnail = this.domUtils?.createElement('img', {
|
const thumbnail = this.domUtils?.createElement('img', {
|
||||||
class: 'card-thumbnail',
|
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,
|
alt: chapter.name,
|
||||||
loading: 'lazy'
|
loading: 'lazy'
|
||||||
}) || document.createElement("img");
|
}) || document.createElement("img");
|
||||||
|
|
||||||
if (!this.domUtils) {
|
if (!this.domUtils) {
|
||||||
thumbnail.className = "card-thumbnail";
|
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.alt = chapter.name;
|
||||||
thumbnail.loading = "lazy";
|
thumbnail.loading = "lazy";
|
||||||
}
|
}
|
||||||
|
|
||||||
thumbnailContainer.appendChild(thumbnail);
|
thumbnailContainer.appendChild(thumbnail);
|
||||||
|
|
||||||
// 플레이 버튼
|
// 플레이 버튼
|
||||||
@@ -187,14 +187,14 @@ class ChapterCardManager {
|
|||||||
alt: '재생',
|
alt: '재생',
|
||||||
loading: 'lazy'
|
loading: 'lazy'
|
||||||
}) || document.createElement("img");
|
}) || document.createElement("img");
|
||||||
|
|
||||||
if (!this.domUtils) {
|
if (!this.domUtils) {
|
||||||
playButton.className = "card-play-button";
|
playButton.className = "card-play-button";
|
||||||
playButton.src = this._getPlayButtonImagePath(state);
|
playButton.src = this._getPlayButtonImagePath(state);
|
||||||
playButton.alt = "재생";
|
playButton.alt = "재생";
|
||||||
playButton.loading = "lazy";
|
playButton.loading = "lazy";
|
||||||
}
|
}
|
||||||
|
|
||||||
thumbnailContainer.appendChild(playButton);
|
thumbnailContainer.appendChild(playButton);
|
||||||
|
|
||||||
// 스탬프 아이콘 추가 (completed 상태일 때만 표시)
|
// 스탬프 아이콘 추가 (completed 상태일 때만 표시)
|
||||||
@@ -207,7 +207,7 @@ class ChapterCardManager {
|
|||||||
// 게이지바 추가
|
// 게이지바 추가
|
||||||
const gaugeBar = this.domUtils?.createElement('div', { class: 'card-gauge-bar' }) || document.createElement("div");
|
const gaugeBar = this.domUtils?.createElement('div', { class: 'card-gauge-bar' }) || document.createElement("div");
|
||||||
gaugeBar.className = "card-gauge-bar";
|
gaugeBar.className = "card-gauge-bar";
|
||||||
|
|
||||||
const gaugeFill = this.domUtils?.createElement('div', { class: 'card-gauge-fill' }) || document.createElement("div");
|
const gaugeFill = this.domUtils?.createElement('div', { class: 'card-gauge-fill' }) || document.createElement("div");
|
||||||
gaugeFill.className = "card-gauge-fill";
|
gaugeFill.className = "card-gauge-fill";
|
||||||
|
|
||||||
@@ -235,7 +235,7 @@ class ChapterCardManager {
|
|||||||
const shadow = this.domUtils?.createElement('div', { class: 'shadow-effect' }) || document.createElement("div");
|
const shadow = this.domUtils?.createElement('div', { class: 'shadow-effect' }) || document.createElement("div");
|
||||||
shadow.className = "shadow-effect";
|
shadow.className = "shadow-effect";
|
||||||
inner.appendChild(shadow);
|
inner.appendChild(shadow);
|
||||||
|
|
||||||
return inner;
|
return inner;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this._handleError(error, 'ChapterCardManager._createCardContent', { chapter, state, chapterIndex });
|
this._handleError(error, 'ChapterCardManager._createCardContent', { chapter, state, chapterIndex });
|
||||||
@@ -341,11 +341,11 @@ class ChapterCardManager {
|
|||||||
_getPlayButtonImagePath(state) {
|
_getPlayButtonImagePath(state) {
|
||||||
switch (state) {
|
switch (state) {
|
||||||
case "completed":
|
case "completed":
|
||||||
return "./assets/images/learning/btn_play_completed.png";
|
return "/img/learning/btn_play_completed.png";
|
||||||
case "current":
|
case "current":
|
||||||
return "./assets/images/learning/btn_play_current.png";
|
return "/img/learning/btn_play_current.png";
|
||||||
default:
|
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,
|
pathPercent: 0.585,
|
||||||
gaugePercent: 0.582, // 게이지 라인 위치 (없으면 pathPercent 사용)
|
gaugePercent: 0.582, // 게이지 라인 위치 (없으면 pathPercent 사용)
|
||||||
type: "normal",
|
type: "normal",
|
||||||
label: "성희롱 예방 교육 1",
|
label: "성희롱 예방 교육 1",
|
||||||
url: "OXTYn3JkkCQ",
|
url: "OXTYn3JkkCQ",
|
||||||
completed: false,
|
completed: false,
|
||||||
},
|
},
|
||||||
@@ -225,27 +225,27 @@ const LEARNING_CONFIG = {
|
|||||||
// 평균 학습량 설정 (전체 학습 항목 대비 %)
|
// 평균 학습량 설정 (전체 학습 항목 대비 %)
|
||||||
averageProgress: {
|
averageProgress: {
|
||||||
threshold: 60, // 평균 학습량: 전체의 60%
|
threshold: 60, // 평균 학습량: 전체의 60%
|
||||||
},
|
},
|
||||||
|
|
||||||
// 마커 이미지 경로
|
// 마커 이미지 경로
|
||||||
markerImages: {
|
markerImages: {
|
||||||
normal: {
|
normal: {
|
||||||
base: "./assets/images/learning/mark_base.png",
|
base: "/img/learning/mark_base.png",
|
||||||
current: "./assets/images/learning/mark_current.png",
|
current: "/img/learning/mark_current.png",
|
||||||
completed: "./assets/images/learning/mark_completed.png",
|
completed: "/img/learning/mark_completed.png",
|
||||||
},
|
},
|
||||||
chapter: {
|
chapter: {
|
||||||
base: "./assets/images/learning/mark_chapter_base.png",
|
base: "/img/learning/mark_chapter_base.png",
|
||||||
current: "./assets/images/learning/mark_chapter_current.png",
|
current: "/img/learning/mark_chapter_current.png",
|
||||||
completed: "./assets/images/learning/mark_chapter_completed.png",
|
completed: "/img/learning/mark_chapter_completed.png",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
// 상태 이미지 경로
|
// 상태 이미지 경로
|
||||||
stateImages: {
|
stateImages: {
|
||||||
below: "./assets/images/learning/img_state_01.svg", // 평균 이하
|
below: "/img/learning/img_state_01.svg", // 평균 이하
|
||||||
average: "./assets/images/learning/img_state_02.svg", // 평균
|
average: "/img/learning/img_state_02.svg", // 평균
|
||||||
above: "./assets/images/learning/img_state_03.svg", // 평균 이상
|
above: "/img/learning/img_state_03.svg", // 평균 이상
|
||||||
},
|
},
|
||||||
|
|
||||||
// 모달 경로
|
// 모달 경로
|
||||||
@@ -376,7 +376,7 @@ const LEARNING_CONFIG = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const allMarkers = this.getAllMarkers();
|
const allMarkers = this.getAllMarkers();
|
||||||
|
|
||||||
if (!Array.isArray(allMarkers) || globalIndex >= allMarkers.length) {
|
if (!Array.isArray(allMarkers) || globalIndex >= allMarkers.length) {
|
||||||
console.warn(`[LEARNING_CONFIG] globalIndex ${globalIndex}가 범위를 벗어났습니다. (총 ${allMarkers.length}개)`);
|
console.warn(`[LEARNING_CONFIG] globalIndex ${globalIndex}가 범위를 벗어났습니다. (총 ${allMarkers.length}개)`);
|
||||||
return null;
|
return null;
|
||||||
@@ -480,7 +480,7 @@ const LEARNING_CONFIG = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
globalIndex += 1; // 챕터 마커
|
globalIndex += 1; // 챕터 마커
|
||||||
|
|
||||||
if (chapter.lessons && Array.isArray(chapter.lessons)) {
|
if (chapter.lessons && Array.isArray(chapter.lessons)) {
|
||||||
globalIndex += chapter.lessons.length; // 하위 lessons
|
globalIndex += chapter.lessons.length; // 하위 lessons
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,10 +18,10 @@ class MarkerManager {
|
|||||||
this.gaugeManager = gaugeManager;
|
this.gaugeManager = gaugeManager;
|
||||||
this.config = config;
|
this.config = config;
|
||||||
this.markers = [];
|
this.markers = [];
|
||||||
|
|
||||||
this.gaugeSvg = this.domUtils?.$("#gauge-svg") || document.getElementById("gauge-svg");
|
this.gaugeSvg = this.domUtils?.$("#gauge-svg") || document.getElementById("gauge-svg");
|
||||||
this.markersContainer = this.domUtils?.$("#markers-container") || document.getElementById("markers-container");
|
this.markersContainer = this.domUtils?.$("#markers-container") || document.getElementById("markers-container");
|
||||||
|
|
||||||
if (!this.gaugeSvg) {
|
if (!this.gaugeSvg) {
|
||||||
this._handleError(new Error('gauge-svg 요소를 찾을 수 없습니다.'), 'constructor');
|
this._handleError(new Error('gauge-svg 요소를 찾을 수 없습니다.'), 'constructor');
|
||||||
}
|
}
|
||||||
@@ -84,10 +84,10 @@ class MarkerManager {
|
|||||||
// 완료된 학습이 없거나, 모든 학습이 완료되었으면 off
|
// 완료된 학습이 없거나, 모든 학습이 완료되었으면 off
|
||||||
const hasCompletedLessons = completedCount > 0;
|
const hasCompletedLessons = completedCount > 0;
|
||||||
const shouldShowOn = hasCompletedLessons && !allCompleted;
|
const shouldShowOn = hasCompletedLessons && !allCompleted;
|
||||||
|
|
||||||
const imagePath = shouldShowOn
|
const imagePath = shouldShowOn
|
||||||
? "./assets/images/learning/img_start_on.svg"
|
? "/img/learning/img_start_on.svg"
|
||||||
: "./assets/images/learning/img_start_off.svg";
|
: "/img/learning/img_start_off.svg";
|
||||||
|
|
||||||
startLineImg.src = imagePath;
|
startLineImg.src = imagePath;
|
||||||
|
|
||||||
@@ -172,7 +172,7 @@ class MarkerManager {
|
|||||||
// Utils.throttle 사용 (있는 경우)
|
// Utils.throttle 사용 (있는 경우)
|
||||||
if (this.utils && this.utils.throttle) {
|
if (this.utils && this.utils.throttle) {
|
||||||
const throttledResize = this.utils.throttle(resizeHandler, 100);
|
const throttledResize = this.utils.throttle(resizeHandler, 100);
|
||||||
|
|
||||||
if (this.eventManager) {
|
if (this.eventManager) {
|
||||||
const listenerId = this.eventManager.on(window, "resize", throttledResize);
|
const listenerId = this.eventManager.on(window, "resize", throttledResize);
|
||||||
this.listenerIds.push({ element: window, id: listenerId, type: 'resize' });
|
this.listenerIds.push({ element: window, id: listenerId, type: 'resize' });
|
||||||
@@ -294,12 +294,12 @@ class MarkerManager {
|
|||||||
style: { height: 'auto' },
|
style: { height: 'auto' },
|
||||||
loading: 'lazy'
|
loading: 'lazy'
|
||||||
}) || document.createElement("img");
|
}) || document.createElement("img");
|
||||||
|
|
||||||
if (!this.domUtils) {
|
if (!this.domUtils) {
|
||||||
img.style.height = "auto";
|
img.style.height = "auto";
|
||||||
img.loading = "lazy";
|
img.loading = "lazy";
|
||||||
}
|
}
|
||||||
|
|
||||||
marker.appendChild(img);
|
marker.appendChild(img);
|
||||||
this.markersContainer.appendChild(marker);
|
this.markersContainer.appendChild(marker);
|
||||||
|
|
||||||
@@ -539,165 +539,165 @@ class MarkerManager {
|
|||||||
// 1. allMarkers 업데이트
|
// 1. allMarkers 업데이트
|
||||||
this.allMarkers[index].completed = true;
|
this.allMarkers[index].completed = true;
|
||||||
|
|
||||||
// 2. 원본 config의 lessons도 업데이트
|
// 2. 원본 config의 lessons도 업데이트
|
||||||
const markerData = this.allMarkers[index];
|
const markerData = this.allMarkers[index];
|
||||||
const chapterId = markerData.chapterId;
|
const chapterId = markerData.chapterId;
|
||||||
const chapter = this.config.chapters.find((ch) => ch.id === chapterId);
|
const chapter = this.config.chapters.find((ch) => ch.id === chapterId);
|
||||||
|
|
||||||
if (chapter && !markerData.isChapterMarker) {
|
if (chapter && !markerData.isChapterMarker) {
|
||||||
// 실제 강의인 경우 원본 lessons 배열에서 찾아서 업데이트
|
// 실제 강의인 경우 원본 lessons 배열에서 찾아서 업데이트
|
||||||
const lesson = chapter.lessons.find(
|
const lesson = chapter.lessons.find(
|
||||||
(l) =>
|
(l) =>
|
||||||
l.pathPercent === markerData.pathPercent &&
|
l.pathPercent === markerData.pathPercent &&
|
||||||
l.label === markerData.label
|
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) {
|
const completedLearningCount = learningMarkers.filter(
|
||||||
lesson.completed = true;
|
(m) => m.completed
|
||||||
console.log(
|
).length;
|
||||||
`[MarkerManager] 원본 config 업데이트: ${lesson.label} completed = true`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. 챕터 완료 상태 업데이트
|
let targetPathPercent = 0;
|
||||||
this.config.updateChapterCompletionStatus();
|
let targetConfig = null;
|
||||||
|
|
||||||
// 4. allMarkers 재로드 (챕터 completed 상태 반영)
|
if (settings.allowDisabledClick) {
|
||||||
this.allMarkers = this.config.getAllMarkers();
|
// 비활성 마커 클릭 허용 모드: 다음 학습 마커까지
|
||||||
|
if (completedLearningCount === 0) {
|
||||||
const settings = this.config.settings || {};
|
// 첫 번째 챕터 마커까지
|
||||||
let progressPercent;
|
const firstChapterMarker = this.allMarkers.find(
|
||||||
|
(m) => m.isChapterMarker === true
|
||||||
// 실제 강의만 카운트 (챕터 제외)
|
);
|
||||||
const learningMarkers = this.allMarkers.filter(
|
targetConfig = firstChapterMarker;
|
||||||
(m) => m.isLearningContent !== false
|
} else if (completedLearningCount >= learningMarkers.length) {
|
||||||
);
|
// 전체 완료: 마지막 마커 위치
|
||||||
const completedLearningCount = learningMarkers.filter(
|
targetConfig = this.allMarkers[this.allMarkers.length - 1];
|
||||||
(m) => m.completed
|
} else {
|
||||||
).length;
|
// 다음 학습할 강의 마커 위치
|
||||||
|
const nextLearningMarker = learningMarkers[completedLearningCount];
|
||||||
let targetPathPercent = 0;
|
const nextMarkerIndex = this.allMarkers.findIndex(
|
||||||
let targetConfig = null;
|
(m) =>
|
||||||
|
m.pathPercent === nextLearningMarker.pathPercent &&
|
||||||
if (settings.allowDisabledClick) {
|
m.label === nextLearningMarker.label
|
||||||
// 비활성 마커 클릭 허용 모드: 다음 학습 마커까지
|
);
|
||||||
if (completedLearningCount === 0) {
|
targetConfig = this.allMarkers[nextMarkerIndex];
|
||||||
// 첫 번째 챕터 마커까지
|
}
|
||||||
const firstChapterMarker = this.allMarkers.find(
|
|
||||||
(m) => m.isChapterMarker === true
|
|
||||||
);
|
|
||||||
targetConfig = firstChapterMarker;
|
|
||||||
} else if (completedLearningCount >= learningMarkers.length) {
|
|
||||||
// 전체 완료: 마지막 마커 위치
|
|
||||||
targetConfig = this.allMarkers[this.allMarkers.length - 1];
|
|
||||||
} else {
|
} else {
|
||||||
// 다음 학습할 강의 마커 위치
|
// 순차 학습 모드: 다음 학습 마커까지
|
||||||
const nextLearningMarker = learningMarkers[completedLearningCount];
|
if (completedLearningCount === 0) {
|
||||||
const nextMarkerIndex = this.allMarkers.findIndex(
|
// 첫 번째 챕터 마커까지
|
||||||
(m) =>
|
const firstChapterMarker = this.allMarkers.find(
|
||||||
m.pathPercent === nextLearningMarker.pathPercent &&
|
(m) => m.isChapterMarker === true
|
||||||
m.label === nextLearningMarker.label
|
);
|
||||||
);
|
targetConfig = firstChapterMarker;
|
||||||
targetConfig = this.allMarkers[nextMarkerIndex];
|
} 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로 비교)
|
// 타겟 마커 찾기 (pathPercent로 비교)
|
||||||
const targetMarker = targetConfig
|
const targetMarker = targetConfig
|
||||||
? this.markers.find(
|
? this.markers.find(
|
||||||
(m) =>
|
(m) =>
|
||||||
m.config &&
|
m.config &&
|
||||||
m.config.pathPercent === targetConfig.pathPercent &&
|
m.config.pathPercent === targetConfig.pathPercent &&
|
||||||
m.config.label === targetConfig.label
|
m.config.label === targetConfig.label
|
||||||
)
|
)
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
// 100% 완료 시 게이지바를 100%로 채움
|
// 100% 완료 시 게이지바를 100%로 채움
|
||||||
if (completedLearningCount >= learningMarkers.length) {
|
if (completedLearningCount >= learningMarkers.length) {
|
||||||
targetPathPercent = 1.0; // 100% 완료
|
targetPathPercent = 1.0; // 100% 완료
|
||||||
progressPercent = 100;
|
progressPercent = 100;
|
||||||
console.log(
|
console.log(
|
||||||
`[MarkerManager] 모든 학습 완료: 게이지바 100%로 설정`
|
`[MarkerManager] 모든 학습 완료: 게이지바 100%로 설정`
|
||||||
);
|
);
|
||||||
} else if (targetMarker && targetMarker.element) {
|
} else if (targetMarker && targetMarker.element) {
|
||||||
// gaugePercent가 있으면 우선 사용, 없으면 마커의 실제 DOM 위치 기반으로 계산
|
// gaugePercent가 있으면 우선 사용, 없으면 마커의 실제 DOM 위치 기반으로 계산
|
||||||
if (targetConfig.gaugePercent !== undefined) {
|
if (targetConfig.gaugePercent !== undefined) {
|
||||||
targetPathPercent = targetConfig.gaugePercent;
|
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;
|
progressPercent = targetPathPercent * 100;
|
||||||
console.log(
|
console.log(
|
||||||
`[MarkerManager] gaugePercent 사용: ${progressPercent.toFixed(1)}%`
|
`[MarkerManager] 마커를 찾을 수 없음, ${targetConfig.gaugePercent !== undefined ? 'gaugePercent' : 'pathPercent'} 직접 사용: ${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] 마커를 찾을 수 없음, ${targetConfig.gaugePercent !== undefined ? 'gaugePercent' : 'pathPercent'} 직접 사용: ${progressPercent.toFixed(1)}%`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 마커 실제 위치에 가장 가까운 pathPercent를 사용하여 채움
|
// 마커 실제 위치에 가장 가까운 pathPercent를 사용하여 채움
|
||||||
this.gaugeManager.setProgress(targetPathPercent, true);
|
this.gaugeManager.setProgress(targetPathPercent, true);
|
||||||
this.updateMarkers(progressPercent);
|
this.updateMarkers(progressPercent);
|
||||||
this.updateMarkerClickability();
|
this.updateMarkerClickability();
|
||||||
|
|
||||||
// Start-line 상태 업데이트 (첫 학습 완료 시 OFF → ON 전환)
|
// Start-line 상태 업데이트 (첫 학습 완료 시 OFF → ON 전환)
|
||||||
this._updateStartLine();
|
this._updateStartLine();
|
||||||
|
|
||||||
// 100% 완료 시 폭죽 애니메이션 표시 (실제 강의 기준)
|
// 100% 완료 시 폭죽 애니메이션 표시 (실제 강의 기준)
|
||||||
const allLearningCompleted = learningMarkers.every((m) => m.completed);
|
const allLearningCompleted = learningMarkers.every((m) => m.completed);
|
||||||
if (allLearningCompleted && !this.completionAnimationShown) {
|
if (allLearningCompleted && !this.completionAnimationShown) {
|
||||||
// 기존 정적 배경이 있으면 제거
|
// 기존 정적 배경이 있으면 제거
|
||||||
const existingStaticBg = document.querySelector(".completion-background");
|
const existingStaticBg = document.querySelector(".completion-background");
|
||||||
if (existingStaticBg) {
|
if (existingStaticBg) {
|
||||||
existingStaticBg.remove();
|
existingStaticBg.remove();
|
||||||
|
}
|
||||||
|
this._showCompletionAnimation();
|
||||||
|
this.completionAnimationShown = true;
|
||||||
}
|
}
|
||||||
this._showCompletionAnimation();
|
|
||||||
this.completionAnimationShown = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 챕터 카드 상태 업데이트
|
// 챕터 카드 상태 업데이트
|
||||||
if (window.learningApp && window.learningApp.updateChapterCards) {
|
if (window.learningApp && window.learningApp.updateChapterCards) {
|
||||||
window.learningApp.updateChapterCards();
|
window.learningApp.updateChapterCards();
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
`[MarkerManager] 학습 ${index + 1} 완료! (${completedLearningCount}/${learningMarkers.length} 강의) ` +
|
`[MarkerManager] 학습 ${index + 1} 완료! (${completedLearningCount}/${learningMarkers.length} 강의) ` +
|
||||||
`진행률: ${progressPercent ? progressPercent.toFixed(1) : 0}%`
|
`진행률: ${progressPercent ? progressPercent.toFixed(1) : 0}%`
|
||||||
);
|
);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this._handleError(error, 'completeLesson', { index });
|
this._handleError(error, 'completeLesson', { index });
|
||||||
@@ -720,7 +720,7 @@ class MarkerManager {
|
|||||||
const h3 = this.domUtils?.$("h3", pageTitle) || pageTitle.querySelector("h3");
|
const h3 = this.domUtils?.$("h3", pageTitle) || pageTitle.querySelector("h3");
|
||||||
const em = h3 ? (this.domUtils?.$("em", h3) || h3.querySelector("em")) : null;
|
const em = h3 ? (this.domUtils?.$("em", h3) || h3.querySelector("em")) : null;
|
||||||
let userName = "";
|
let userName = "";
|
||||||
|
|
||||||
if (em) {
|
if (em) {
|
||||||
// "님" 제거하여 이름만 추출
|
// "님" 제거하여 이름만 추출
|
||||||
userName = em.textContent.replace(/님$/, "").trim();
|
userName = em.textContent.replace(/님$/, "").trim();
|
||||||
@@ -779,7 +779,7 @@ class MarkerManager {
|
|||||||
zIndex: '1'
|
zIndex: '1'
|
||||||
}
|
}
|
||||||
}) || document.createElement("div");
|
}) || document.createElement("div");
|
||||||
|
|
||||||
if (!this.domUtils) {
|
if (!this.domUtils) {
|
||||||
backgroundContainer.className = "completion-background";
|
backgroundContainer.className = "completion-background";
|
||||||
backgroundContainer.style.cssText = `
|
backgroundContainer.style.cssText = `
|
||||||
@@ -806,7 +806,7 @@ class MarkerManager {
|
|||||||
animation: 'fadeIn 1.5s ease-in-out forwards'
|
animation: 'fadeIn 1.5s ease-in-out forwards'
|
||||||
}
|
}
|
||||||
}) || document.createElement("div");
|
}) || document.createElement("div");
|
||||||
|
|
||||||
if (!this.domUtils) {
|
if (!this.domUtils) {
|
||||||
svgWrapper.style.cssText = `
|
svgWrapper.style.cssText = `
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -821,7 +821,7 @@ class MarkerManager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// SVG 로드 및 추가
|
// SVG 로드 및 추가
|
||||||
fetch("./assets/images/learning/completion-bg.svg")
|
fetch("/img/learning/completion-bg.svg")
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(`SVG 로드 실패: ${response.status}`);
|
throw new Error(`SVG 로드 실패: ${response.status}`);
|
||||||
@@ -1002,7 +1002,7 @@ class MarkerManager {
|
|||||||
zIndex: '1'
|
zIndex: '1'
|
||||||
}
|
}
|
||||||
}) || document.createElement("div");
|
}) || document.createElement("div");
|
||||||
|
|
||||||
if (!this.domUtils) {
|
if (!this.domUtils) {
|
||||||
backgroundContainer.className = "completion-background";
|
backgroundContainer.className = "completion-background";
|
||||||
backgroundContainer.style.cssText = `
|
backgroundContainer.style.cssText = `
|
||||||
@@ -1028,7 +1028,7 @@ class MarkerManager {
|
|||||||
translate: '-50% -50%'
|
translate: '-50% -50%'
|
||||||
}
|
}
|
||||||
}) || document.createElement("div");
|
}) || document.createElement("div");
|
||||||
|
|
||||||
if (!this.domUtils) {
|
if (!this.domUtils) {
|
||||||
svgWrapper.style.cssText = `
|
svgWrapper.style.cssText = `
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -1042,7 +1042,7 @@ class MarkerManager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// SVG 로드 및 추가
|
// SVG 로드 및 추가
|
||||||
fetch("./assets/images/learning/completion-bg.svg")
|
fetch("/img/learning/completion-bg.svg")
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(`SVG 로드 실패: ${response.status}`);
|
throw new Error(`SVG 로드 실패: ${response.status}`);
|
||||||
@@ -1054,97 +1054,97 @@ class MarkerManager {
|
|||||||
svgWrapper.innerHTML = svgContent;
|
svgWrapper.innerHTML = svgContent;
|
||||||
const svg = svgWrapper.querySelector("svg");
|
const svg = svgWrapper.querySelector("svg");
|
||||||
if (svg) {
|
if (svg) {
|
||||||
// 패턴 ID 중복 방지: 고유한 ID로 변경
|
// 패턴 ID 중복 방지: 고유한 ID로 변경
|
||||||
const uniqueId = `completion-bg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
const uniqueId = `completion-bg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||||
const patterns = svg.querySelectorAll(
|
const patterns = svg.querySelectorAll(
|
||||||
"pattern[id], filter[id], mask[id], linearGradient[id], radialGradient[id]"
|
"pattern[id], filter[id], mask[id], linearGradient[id], radialGradient[id]"
|
||||||
);
|
);
|
||||||
const idMap = new Map();
|
const idMap = new Map();
|
||||||
|
|
||||||
patterns.forEach((pattern) => {
|
patterns.forEach((pattern) => {
|
||||||
const oldId = pattern.getAttribute("id");
|
const oldId = pattern.getAttribute("id");
|
||||||
if (oldId) {
|
if (oldId) {
|
||||||
const newId = `${oldId}-${uniqueId}`;
|
const newId = `${oldId}-${uniqueId}`;
|
||||||
idMap.set(oldId, newId);
|
idMap.set(oldId, newId);
|
||||||
pattern.setAttribute("id", 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)})`);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 패턴을 참조하는 모든 요소의 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}`);
|
svg.setAttribute("viewBox", newViewBox);
|
||||||
|
svg.removeAttribute("width");
|
||||||
// 흰색 배경 rect/path 요소 제거 (x="-34" y="-19" 또는 fill="white"인 요소)
|
svg.removeAttribute("height");
|
||||||
const whiteBgElements = svg.querySelectorAll(
|
svg.setAttribute("preserveAspectRatio", "xMidYMid slice");
|
||||||
'rect[fill="white"], path[fill="#fff"], path[fill="white"]'
|
svg.style.cssText = `
|
||||||
);
|
|
||||||
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 = `
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
`;
|
`;
|
||||||
|
|||||||
@@ -248,38 +248,38 @@ class VideoModal extends VideoModalBase {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 모달 HTML 가져오기 (VideoModalBase 활용)
|
* 모달 HTML 가져오기 (VideoModalBase 활용)
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
async _fetchModal() {
|
async _fetchModal() {
|
||||||
// VideoModalBase의 loadModalHTML 메서드 활용
|
// VideoModalBase의 loadModalHTML 메서드 활용
|
||||||
return await this.loadModalHTML("learning");
|
return await this.loadModalHTML("learning");
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 모달 HTML 파싱 (VideoModalBase 활용)
|
* 모달 HTML 파싱 (VideoModalBase 활용)
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_parseModal(modalHTML, modalType = "learning") {
|
_parseModal(modalHTML, modalType = "learning") {
|
||||||
// VideoModalBase의 createModalFromHTML 메서드 활용
|
// VideoModalBase의 createModalFromHTML 메서드 활용
|
||||||
return this.createModalFromHTML(modalHTML, modalType);
|
return this.createModalFromHTML(modalHTML, modalType);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 비디오 설정 (VideoModalBase 활용)
|
* 비디오 설정 (VideoModalBase 활용)
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_setupVideo(modalElement, videoUrl) {
|
_setupVideo(modalElement, videoUrl) {
|
||||||
// VideoModalBase의 setupVideo 메서드 활용
|
// VideoModalBase의 setupVideo 메서드 활용
|
||||||
const videoData = { url: videoUrl, id: videoUrl };
|
const videoData = { url: videoUrl, id: videoUrl };
|
||||||
this.setupVideo(modalElement, videoData);
|
this.setupVideo(modalElement, videoData);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 모달 컨텐츠 업데이트
|
* 모달 컨텐츠 업데이트
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_updateContent(modalElement, videoData, currentIndex, recreateList = true) {
|
_updateContent(modalElement, videoData, currentIndex, recreateList = true) {
|
||||||
this._updateTitle(modalElement, videoData.label);
|
this._updateTitle(modalElement, videoData.label);
|
||||||
this._updateProgress(modalElement, currentIndex);
|
this._updateProgress(modalElement, currentIndex);
|
||||||
@@ -392,10 +392,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 학습 목차 생성 (현재 챕터만)
|
* 학습 목차 생성 (현재 챕터만)
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_createLearningList(modalElement, currentGlobalIndex) {
|
_createLearningList(modalElement, currentGlobalIndex) {
|
||||||
const list = modalElement.querySelector(".learning-list");
|
const list = modalElement.querySelector(".learning-list");
|
||||||
if (!list) return;
|
if (!list) return;
|
||||||
@@ -451,10 +451,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 학습 목차 상태만 업데이트 (목록 재생성 없이)
|
* 학습 목차 상태만 업데이트 (목록 재생성 없이)
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_updateLearningListState(modalElement, currentGlobalIndex) {
|
_updateLearningListState(modalElement, currentGlobalIndex) {
|
||||||
const list = modalElement.querySelector(".learning-list");
|
const list = modalElement.querySelector(".learning-list");
|
||||||
if (!list) return;
|
if (!list) return;
|
||||||
@@ -518,10 +518,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 목차 항목 생성
|
* 목차 항목 생성
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_createListItem(lesson, globalIndex, localIndex, currentGlobalIndex) {
|
_createListItem(lesson, globalIndex, localIndex, currentGlobalIndex) {
|
||||||
const li = document.createElement("li");
|
const li = document.createElement("li");
|
||||||
|
|
||||||
@@ -567,7 +567,7 @@ class VideoModal extends VideoModalBase {
|
|||||||
<span class="seq">${localIndex + 1}차시</span>
|
<span class="seq">${localIndex + 1}차시</span>
|
||||||
<div class="learning-box">
|
<div class="learning-box">
|
||||||
<div class="thumb">
|
<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>
|
||||||
<div class="txt-box">
|
<div class="txt-box">
|
||||||
<div class="title">${lesson.label}</div>
|
<div class="title">${lesson.label}</div>
|
||||||
@@ -583,10 +583,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
return li;
|
return li;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 상태 텍스트 반환
|
* 상태 텍스트 반환
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_getStateText(lesson, isCurrentLesson, isRelearning) {
|
_getStateText(lesson, isCurrentLesson, isRelearning) {
|
||||||
if (isRelearning) return "학습중";
|
if (isRelearning) return "학습중";
|
||||||
if (lesson.completed) return "학습완료";
|
if (lesson.completed) return "학습완료";
|
||||||
@@ -594,10 +594,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
return "미진행";
|
return "미진행";
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 목차 항목 이벤트 설정
|
* 목차 항목 이벤트 설정
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_setupListItemEvent(li, globalIndex) {
|
_setupListItemEvent(li, globalIndex) {
|
||||||
const link = li.querySelector(".list");
|
const link = li.querySelector(".list");
|
||||||
|
|
||||||
@@ -611,16 +611,16 @@ class VideoModal extends VideoModalBase {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 모달 표시
|
* 모달 표시
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_show(modalElement) {
|
_show(modalElement) {
|
||||||
// 모달을 먼저 숨긴 상태로 표시 (높이 조정이 보이지 않도록)
|
// 모달을 먼저 숨긴 상태로 표시 (높이 조정이 보이지 않도록)
|
||||||
modalElement.style.display = "block";
|
modalElement.style.display = "block";
|
||||||
modalElement.style.visibility = "hidden";
|
modalElement.style.visibility = "hidden";
|
||||||
modalElement.style.opacity = "0";
|
modalElement.style.opacity = "0";
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this._setupCloseEvents(modalElement);
|
this._setupCloseEvents(modalElement);
|
||||||
// 높이 조정 완료 후 모달 표시
|
// 높이 조정 완료 후 모달 표시
|
||||||
@@ -638,10 +638,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
// 스크롤 관리
|
// 스크롤 관리
|
||||||
// ============================================
|
// ============================================
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 현재 학습 중인 항목으로 스크롤
|
* 현재 학습 중인 항목으로 스크롤
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_scrollToCurrentLesson() {
|
_scrollToCurrentLesson() {
|
||||||
const learningList = this.currentModal?.querySelector(".learning-list");
|
const learningList = this.currentModal?.querySelector(".learning-list");
|
||||||
if (!learningList) {
|
if (!learningList) {
|
||||||
@@ -679,10 +679,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
this._highlightCurrentLesson(currentItem);
|
this._highlightCurrentLesson(currentItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 현재 학습 항목 시각적 강조
|
* 현재 학습 항목 시각적 강조
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_highlightCurrentLesson(currentItem) {
|
_highlightCurrentLesson(currentItem) {
|
||||||
// 이미 active 클래스가 있으므로 추가 효과는 선택사항
|
// 이미 active 클래스가 있으므로 추가 효과는 선택사항
|
||||||
// 예: 깜빡임 효과, 테두리 강조 등
|
// 예: 깜빡임 효과, 테두리 강조 등
|
||||||
@@ -698,11 +698,11 @@ class VideoModal extends VideoModalBase {
|
|||||||
// 높이 조정
|
// 높이 조정
|
||||||
// ============================================
|
// ============================================
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 높이 조정 초기화
|
* 높이 조정 초기화
|
||||||
* @private
|
* @private
|
||||||
* @param {Function} onComplete - 높이 조정 완료 후 실행할 콜백
|
* @param {Function} onComplete - 높이 조정 완료 후 실행할 콜백
|
||||||
*/
|
*/
|
||||||
_initializeHeightAdjustment(onComplete) {
|
_initializeHeightAdjustment(onComplete) {
|
||||||
// 1단계: 즉시 시도
|
// 1단계: 즉시 시도
|
||||||
this._adjustModalContentHeight();
|
this._adjustModalContentHeight();
|
||||||
@@ -730,7 +730,7 @@ class VideoModal extends VideoModalBase {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this._adjustModalContentHeight();
|
this._adjustModalContentHeight();
|
||||||
this._adjustLearningListHeight();
|
this._adjustLearningListHeight();
|
||||||
|
|
||||||
// 높이 조정 완료 콜백 실행
|
// 높이 조정 완료 콜백 실행
|
||||||
if (onComplete && typeof onComplete === 'function') {
|
if (onComplete && typeof onComplete === 'function') {
|
||||||
onComplete();
|
onComplete();
|
||||||
@@ -747,11 +747,11 @@ class VideoModal extends VideoModalBase {
|
|||||||
this._waitForImagesAndAdjust();
|
this._waitForImagesAndAdjust();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 모달 컨텐츠 높이 조정
|
* 모달 컨텐츠 높이 조정
|
||||||
* 높이가 화면 높이의 80% 이상일 때만 조절하고, 아닐 경우 80%로 유지
|
* 높이가 화면 높이의 80% 이상일 때만 조절하고, 아닐 경우 80%로 유지
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_adjustModalContentHeight() {
|
_adjustModalContentHeight() {
|
||||||
const modalContent = this.currentModal?.querySelector(".modal-content");
|
const modalContent = this.currentModal?.querySelector(".modal-content");
|
||||||
if (!modalContent) {
|
if (!modalContent) {
|
||||||
@@ -789,10 +789,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 학습 목록 높이 조정
|
* 학습 목록 높이 조정
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_adjustLearningListHeight() {
|
_adjustLearningListHeight() {
|
||||||
const videoSide = this.currentModal?.querySelector(".video-side");
|
const videoSide = this.currentModal?.querySelector(".video-side");
|
||||||
const videoHeader = this.currentModal?.querySelector(".video-header");
|
const videoHeader = this.currentModal?.querySelector(".video-header");
|
||||||
@@ -846,7 +846,7 @@ class VideoModal extends VideoModalBase {
|
|||||||
let titleHeight = 0;
|
let titleHeight = 0;
|
||||||
let paddingTop = 0;
|
let paddingTop = 0;
|
||||||
let paddingBottom = 0;
|
let paddingBottom = 0;
|
||||||
|
|
||||||
if (videoList) {
|
if (videoList) {
|
||||||
// video-list의 제목 높이
|
// video-list의 제목 높이
|
||||||
const videoListTitle = videoList.querySelector("h5.tit");
|
const videoListTitle = videoList.querySelector("h5.tit");
|
||||||
@@ -906,47 +906,47 @@ class VideoModal extends VideoModalBase {
|
|||||||
// video-list의 제목 높이
|
// video-list의 제목 높이
|
||||||
const videoListTitle = videoList.querySelector("h5.tit");
|
const videoListTitle = videoList.querySelector("h5.tit");
|
||||||
const videoListTitleHeight = videoListTitle ? videoListTitle.offsetHeight : 0;
|
const videoListTitleHeight = videoListTitle ? videoListTitle.offsetHeight : 0;
|
||||||
|
|
||||||
// video-list의 padding 값 계산
|
// video-list의 padding 값 계산
|
||||||
const videoListStyle = window.getComputedStyle(videoList);
|
const videoListStyle = window.getComputedStyle(videoList);
|
||||||
const videoListPaddingTop = parseInt(videoListStyle.paddingTop) || 0;
|
const videoListPaddingTop = parseInt(videoListStyle.paddingTop) || 0;
|
||||||
const videoListPaddingBottom = parseInt(videoListStyle.paddingBottom) || 0;
|
const videoListPaddingBottom = parseInt(videoListStyle.paddingBottom) || 0;
|
||||||
|
|
||||||
// video-list에 사용 가능한 높이 계산
|
// video-list에 사용 가능한 높이 계산
|
||||||
// video-list는 learning-list를 포함하므로, 전체 높이에서 헤더, 댓글, 제목, padding을 제외
|
// video-list는 learning-list를 포함하므로, 전체 높이에서 헤더, 댓글, 제목, padding을 제외
|
||||||
// gaugeHeight는 headerHeight에 이미 포함되어 있으므로 별도로 빼지 않음
|
// gaugeHeight는 headerHeight에 이미 포함되어 있으므로 별도로 빼지 않음
|
||||||
const commentWrapHeight = commentWrap && commentWrap.offsetHeight > 0 ? commentWrap.offsetHeight : 0;
|
const commentWrapHeight = commentWrap && commentWrap.offsetHeight > 0 ? commentWrap.offsetHeight : 0;
|
||||||
const videoListAvailableHeight =
|
const videoListAvailableHeight =
|
||||||
totalHeight -
|
totalHeight -
|
||||||
headerHeight -
|
headerHeight -
|
||||||
commentWrapHeight -
|
commentWrapHeight -
|
||||||
|
|
||||||
10;
|
10;
|
||||||
|
|
||||||
// video-list의 실제 컨텐츠 높이 측정 (learning-list 포함)
|
// video-list의 실제 컨텐츠 높이 측정 (learning-list 포함)
|
||||||
const videoListOriginalHeight = videoList.style.height;
|
const videoListOriginalHeight = videoList.style.height;
|
||||||
const videoListOriginalOverflow = videoList.style.overflowY;
|
const videoListOriginalOverflow = videoList.style.overflowY;
|
||||||
|
|
||||||
videoList.style.height = "auto";
|
videoList.style.height = "auto";
|
||||||
videoList.style.overflowY = "visible";
|
videoList.style.overflowY = "visible";
|
||||||
|
|
||||||
const videoListContentHeight = videoList.scrollHeight;
|
const videoListContentHeight = videoList.scrollHeight;
|
||||||
|
|
||||||
videoList.style.height = videoListOriginalHeight;
|
videoList.style.height = videoListOriginalHeight;
|
||||||
videoList.style.overflowY = videoListOriginalOverflow;
|
videoList.style.overflowY = videoListOriginalOverflow;
|
||||||
|
|
||||||
// video-list의 높이 계산
|
// video-list의 높이 계산
|
||||||
const videoListHeight = Math.min(videoListContentHeight, videoListAvailableHeight);
|
const videoListHeight = Math.min(videoListContentHeight, videoListAvailableHeight);
|
||||||
const videoListFinalHeight = Math.max(videoListHeight, 100);
|
const videoListFinalHeight = Math.max(videoListHeight, 100);
|
||||||
|
|
||||||
// video-list의 현재 높이 확인
|
// video-list의 현재 높이 확인
|
||||||
const videoListCurrentHeight = videoList.style.height
|
const videoListCurrentHeight = videoList.style.height
|
||||||
? parseInt(videoList.style.height)
|
? parseInt(videoList.style.height)
|
||||||
: videoList.offsetHeight;
|
: videoList.offsetHeight;
|
||||||
|
|
||||||
const videoListHeightChanged = Math.abs(videoListCurrentHeight - videoListFinalHeight) > 1;
|
const videoListHeightChanged = Math.abs(videoListCurrentHeight - videoListFinalHeight) > 1;
|
||||||
const videoListNeedsScroll = videoListContentHeight > videoListFinalHeight;
|
const videoListNeedsScroll = videoListContentHeight > videoListFinalHeight;
|
||||||
|
|
||||||
// video-list 높이 및 스크롤 설정
|
// video-list 높이 및 스크롤 설정
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
if (videoListHeightChanged) {
|
if (videoListHeightChanged) {
|
||||||
@@ -979,10 +979,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ResizeObserver 설정
|
* ResizeObserver 설정
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_setupResizeObserver() {
|
_setupResizeObserver() {
|
||||||
const videoSide = this.currentModal?.querySelector(".video-side");
|
const videoSide = this.currentModal?.querySelector(".video-side");
|
||||||
const gaugeWrap = this.currentModal?.querySelector(".gauge-wrap");
|
const gaugeWrap = this.currentModal?.querySelector(".gauge-wrap");
|
||||||
@@ -1017,7 +1017,7 @@ class VideoModal extends VideoModalBase {
|
|||||||
this._windowResizeHandler = () => {
|
this._windowResizeHandler = () => {
|
||||||
try {
|
try {
|
||||||
clearTimeout(this.heightAdjustTimer);
|
clearTimeout(this.heightAdjustTimer);
|
||||||
|
|
||||||
// Utils.throttle 사용 (있는 경우)
|
// Utils.throttle 사용 (있는 경우)
|
||||||
const adjustHeight = () => {
|
const adjustHeight = () => {
|
||||||
console.log("Window resize 감지: 높이 재조정");
|
console.log("Window resize 감지: 높이 재조정");
|
||||||
@@ -1044,10 +1044,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* MutationObserver 설정
|
* MutationObserver 설정
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_setupMutationObserver() {
|
_setupMutationObserver() {
|
||||||
const learningList = this.currentModal?.querySelector(".learning-list");
|
const learningList = this.currentModal?.querySelector(".learning-list");
|
||||||
|
|
||||||
@@ -1075,8 +1075,8 @@ class VideoModal extends VideoModalBase {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
// childList 변경이나 다른 요소의 변경만 감지
|
// childList 변경이나 다른 요소의 변경만 감지
|
||||||
return mutation.type === "childList" ||
|
return mutation.type === "childList" ||
|
||||||
(mutation.type === "attributes" && mutation.target !== learningList);
|
(mutation.type === "attributes" && mutation.target !== learningList);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!hasRelevantChange) {
|
if (!hasRelevantChange) {
|
||||||
@@ -1100,10 +1100,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 이미지 로딩 대기 후 높이 조정
|
* 이미지 로딩 대기 후 높이 조정
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
async _waitForImagesAndAdjust() {
|
async _waitForImagesAndAdjust() {
|
||||||
const learningList = this.currentModal?.querySelector(".learning-list");
|
const learningList = this.currentModal?.querySelector(".learning-list");
|
||||||
if (!learningList) return;
|
if (!learningList) return;
|
||||||
@@ -1151,10 +1151,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
// 이벤트 핸들러
|
// 이벤트 핸들러
|
||||||
// ============================================
|
// ============================================
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 닫기 이벤트 설정 (ModalUtils 활용)
|
* 닫기 이벤트 설정 (ModalUtils 활용)
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_setupCloseEvents(modalElement) {
|
_setupCloseEvents(modalElement) {
|
||||||
// ModalUtils를 사용하여 공통 닫기 이벤트 설정
|
// ModalUtils를 사용하여 공통 닫기 이벤트 설정
|
||||||
this._closeEventHandlers = ModalUtils.setupCloseEvents(modalElement, {
|
this._closeEventHandlers = ModalUtils.setupCloseEvents(modalElement, {
|
||||||
@@ -1194,10 +1194,10 @@ class VideoModal extends VideoModalBase {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 모달 닫기 (ModalUtils 활용)
|
* 모달 닫기 (ModalUtils 활용)
|
||||||
*/
|
*/
|
||||||
close() {
|
close() {
|
||||||
if (!this.currentModal) return;
|
if (!this.currentModal) return;
|
||||||
|
|
||||||
// ModalUtils를 사용하여 비디오 정지
|
// ModalUtils를 사용하여 비디오 정지
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ class ProgressIndicator {
|
|||||||
this.markerManager = markerManager; // 마커 매니저 참조 추가
|
this.markerManager = markerManager; // 마커 매니저 참조 추가
|
||||||
this.indicator = null;
|
this.indicator = null;
|
||||||
this.stateIndicator = null; // 평균 상태 표시 요소
|
this.stateIndicator = null; // 평균 상태 표시 요소
|
||||||
|
|
||||||
this.gaugeSvg = this.domUtils?.$("#gauge-svg") || document.getElementById("gauge-svg");
|
this.gaugeSvg = this.domUtils?.$("#gauge-svg") || document.getElementById("gauge-svg");
|
||||||
if (!this.gaugeSvg) {
|
if (!this.gaugeSvg) {
|
||||||
this._handleError(new Error('gauge-svg 요소를 찾을 수 없습니다.'), 'constructor');
|
this._handleError(new Error('gauge-svg 요소를 찾을 수 없습니다.'), 'constructor');
|
||||||
@@ -100,7 +100,7 @@ class ProgressIndicator {
|
|||||||
class: 'progress-indicator',
|
class: 'progress-indicator',
|
||||||
id: 'progress-indicator'
|
id: 'progress-indicator'
|
||||||
}) || document.createElement("div");
|
}) || document.createElement("div");
|
||||||
|
|
||||||
if (!this.domUtils) {
|
if (!this.domUtils) {
|
||||||
this.indicator.className = "progress-indicator";
|
this.indicator.className = "progress-indicator";
|
||||||
this.indicator.id = "progress-indicator";
|
this.indicator.id = "progress-indicator";
|
||||||
@@ -109,8 +109,8 @@ class ProgressIndicator {
|
|||||||
// 곡선 경로 가져오기
|
// 곡선 경로 가져오기
|
||||||
const curvePath = this._getCurvePath();
|
const curvePath = this._getCurvePath();
|
||||||
|
|
||||||
// SVG 이미지 추가
|
// SVG 이미지 추가
|
||||||
this.indicator.innerHTML = `
|
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;">
|
<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)">
|
<g filter="url(#filter0_d_2000_114823)">
|
||||||
@@ -229,7 +229,7 @@ class ProgressIndicator {
|
|||||||
class: 'state-indicator',
|
class: 'state-indicator',
|
||||||
id: 'state-indicator'
|
id: 'state-indicator'
|
||||||
}) || document.createElement("div");
|
}) || document.createElement("div");
|
||||||
|
|
||||||
if (!this.domUtils) {
|
if (!this.domUtils) {
|
||||||
this.stateIndicator.className = "state-indicator";
|
this.stateIndicator.className = "state-indicator";
|
||||||
this.stateIndicator.id = "state-indicator";
|
this.stateIndicator.id = "state-indicator";
|
||||||
@@ -482,7 +482,7 @@ class ProgressIndicator {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// state-indicator 표시
|
// state-indicator 표시
|
||||||
if (this.stateIndicator.style.display === "none") {
|
if (this.stateIndicator.style.display === "none") {
|
||||||
this.stateIndicator.style.display = "";
|
this.stateIndicator.style.display = "";
|
||||||
@@ -575,7 +575,7 @@ class ProgressIndicator {
|
|||||||
const markerPathPercent = targetLearningMarker.pathPercent || 0;
|
const markerPathPercent = targetLearningMarker.pathPercent || 0;
|
||||||
const point = this.gaugeManager.getPointAtPercent(markerPathPercent);
|
const point = this.gaugeManager.getPointAtPercent(markerPathPercent);
|
||||||
const viewBox = this.gaugeSvg.viewBox.baseVal;
|
const viewBox = this.gaugeSvg.viewBox.baseVal;
|
||||||
|
|
||||||
const percentX = (point.x / viewBox.width) * 100;
|
const percentX = (point.x / viewBox.width) * 100;
|
||||||
const percentY = (point.y / viewBox.height) * 100;
|
const percentY = (point.y / viewBox.height) * 100;
|
||||||
|
|
||||||
@@ -866,7 +866,7 @@ class ProgressIndicator {
|
|||||||
// Utils.throttle 사용 (있는 경우)
|
// Utils.throttle 사용 (있는 경우)
|
||||||
if (this.utils && this.utils.throttle) {
|
if (this.utils && this.utils.throttle) {
|
||||||
const throttledResize = this.utils.throttle(resizeHandler, 100);
|
const throttledResize = this.utils.throttle(resizeHandler, 100);
|
||||||
|
|
||||||
if (this.eventManager) {
|
if (this.eventManager) {
|
||||||
const listenerId = this.eventManager.on(window, "resize", throttledResize);
|
const listenerId = this.eventManager.on(window, "resize", throttledResize);
|
||||||
this.listenerIds.push({ element: window, id: listenerId, type: 'resize' });
|
this.listenerIds.push({ element: window, id: listenerId, type: 'resize' });
|
||||||
@@ -953,7 +953,7 @@ class ProgressIndicator {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 외부 SVG 파일 경로
|
// 외부 SVG 파일 경로
|
||||||
const svgPath = "./assets/images/learning/img_trophy_completed.svg";
|
const svgPath = "/img/learning/img_trophy_completed.svg";
|
||||||
|
|
||||||
// SVG 파일 로드
|
// SVG 파일 로드
|
||||||
const response = await fetch(svgPath);
|
const response = await fetch(svgPath);
|
||||||
|
|||||||
@@ -50,9 +50,9 @@ class GaugeChart {
|
|||||||
dotRadius: config.dotRadius || 7,
|
dotRadius: config.dotRadius || 7,
|
||||||
// 아이콘 이미지 경로 설정
|
// 아이콘 이미지 경로 설정
|
||||||
rocketIconPath:
|
rocketIconPath:
|
||||||
config.rocketIconPath || "./assets/images/ico/icon-rocket.svg",
|
config.rocketIconPath || "/img/ico/icon-rocket.svg",
|
||||||
snailIconPath:
|
snailIconPath:
|
||||||
config.snailIconPath || "./assets/images/ico/icon-snail.svg",
|
config.snailIconPath || "/img/ico/icon-snail.svg",
|
||||||
};
|
};
|
||||||
|
|
||||||
this.svg = null;
|
this.svg = null;
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ const DEFAULT_CONFIG = {
|
|||||||
SVG: {
|
SVG: {
|
||||||
NAMESPACE: "http://www.w3.org/2000/svg",
|
NAMESPACE: "http://www.w3.org/2000/svg",
|
||||||
XLINK_NAMESPACE: "http://www.w3.org/1999/xlink",
|
XLINK_NAMESPACE: "http://www.w3.org/1999/xlink",
|
||||||
VIEWBOX: "0 0 1870 801",
|
VIEWBOX: "0 0 1870 801",
|
||||||
DIMENSIONS: { width: 1870, height: 801 },
|
DIMENSIONS: { width: 1870, height: 801 },
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -23,7 +23,7 @@ const DEFAULT_CONFIG = {
|
|||||||
FILTER_IDS: {
|
FILTER_IDS: {
|
||||||
INNER_SHADOW: "inner-shadow-effect",
|
INNER_SHADOW: "inner-shadow-effect",
|
||||||
HOVER_SHADOW: "hover-shadow-effect",
|
HOVER_SHADOW: "hover-shadow-effect",
|
||||||
PIECE_EMBOSSING: "piece-embossing-effect",
|
PIECE_EMBOSSING: "piece-embossing-effect",
|
||||||
},
|
},
|
||||||
|
|
||||||
GRADIENT_IDS: {
|
GRADIENT_IDS: {
|
||||||
@@ -34,16 +34,16 @@ const DEFAULT_CONFIG = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
IMAGE_PATHS: {
|
IMAGE_PATHS: {
|
||||||
BASE: "./assets/images/onboarding/bg_piece.jpg",
|
BASE: "/img/onboarding/bg_piece.jpg",
|
||||||
COMPLETED: {
|
COMPLETED: {
|
||||||
ACTIVE: "./assets/images/onboarding/bg_piece_completed.png",
|
ACTIVE: "/img/onboarding/bg_piece_completed.png",
|
||||||
COMPLETED: "./assets/images/onboarding/bg_piece_finish.png",
|
COMPLETED: "/img/onboarding/bg_piece_finish.png",
|
||||||
ALL_COMPLETED: "./assets/images/onboarding/bg_piece_all_completed.png",
|
ALL_COMPLETED: "/img/onboarding/bg_piece_all_completed.png",
|
||||||
},
|
},
|
||||||
FINISH: {
|
FINISH: {
|
||||||
ACTIVE: "./assets/images/onboarding/bg_piece_all_completed.png",
|
ACTIVE: "/img/onboarding/bg_piece_all_completed.png",
|
||||||
COMPLETED: "./assets/images/onboarding/bg_piece_finish.png",
|
COMPLETED: "/img/onboarding/bg_piece_finish.png",
|
||||||
ALL_COMPLETED: "./assets/images/onboarding/bg_piece_all_completed.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: 1615, y1: 268, x2: 1615, y2: 617, label: "vertical-1615" },
|
||||||
{ x1: 330, y1: 267, x2: 330, y2: 523, label: "vertical-330" },
|
{ x1: 330, y1: 267, x2: 330, y2: 523, label: "vertical-330" },
|
||||||
{ x1: 256, y1: 11, x2: 256, y2: 267, label: "vertical-256-top" },
|
{ x1: 256, y1: 11, x2: 256, y2: 267, label: "vertical-256-top" },
|
||||||
|
|
||||||
// 수평 경계선들 (가로)
|
// 수평 경계선들 (가로)
|
||||||
{ x1: 709, y1: 268, x2: 1615, y2: 268, label: "horizontal-268" },
|
{ x1: 709, y1: 268, x2: 1615, y2: 268, label: "horizontal-268" },
|
||||||
{ x1: 22, y1: 523, x2: 1615, y2: 523, label: "horizontal-523" },
|
{ x1: 22, y1: 523, x2: 1615, y2: 523, label: "horizontal-523" },
|
||||||
@@ -312,13 +312,13 @@ const GAUGE_CONFIG = {
|
|||||||
class ChapterManager {
|
class ChapterManager {
|
||||||
constructor(chapterData, dependencies = {}) {
|
constructor(chapterData, dependencies = {}) {
|
||||||
this.chapters = chapterData || [];
|
this.chapters = chapterData || [];
|
||||||
|
|
||||||
// 의존성 주입 (폴백 포함)
|
// 의존성 주입 (폴백 포함)
|
||||||
this.errorHandler = dependencies.errorHandler || (typeof ErrorHandler !== 'undefined' ? ErrorHandler : null);
|
this.errorHandler = dependencies.errorHandler || (typeof ErrorHandler !== 'undefined' ? ErrorHandler : null);
|
||||||
this.utils = dependencies.utils || (typeof Utils !== 'undefined' ? Utils : null);
|
this.utils = dependencies.utils || (typeof Utils !== 'undefined' ? Utils : null);
|
||||||
|
|
||||||
console.log('[ChapterManager] 초기화:', this.chapters);
|
console.log('[ChapterManager] 초기화:', this.chapters);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
this._validateAndInitialize();
|
this._validateAndInitialize();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -332,18 +332,18 @@ class ChapterManager {
|
|||||||
if (!chapter.lessons || !Array.isArray(chapter.lessons)) {
|
if (!chapter.lessons || !Array.isArray(chapter.lessons)) {
|
||||||
chapter.lessons = [];
|
chapter.lessons = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
// completed 속성 초기화
|
// completed 속성 초기화
|
||||||
if (chapter.completed === undefined) {
|
if (chapter.completed === undefined) {
|
||||||
chapter.completed = false;
|
chapter.completed = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
chapter.lessons.forEach((lesson) => {
|
chapter.lessons.forEach((lesson) => {
|
||||||
if (lesson.completed === undefined) {
|
if (lesson.completed === undefined) {
|
||||||
lesson.completed = false;
|
lesson.completed = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(`[ChapterManager] 챕터 ${index}: ${chapter.name}, pieceId: ${chapter.pieceId}, lessons: ${chapter.lessons.length}`);
|
console.log(`[ChapterManager] 챕터 ${index}: ${chapter.name}, pieceId: ${chapter.pieceId}, lessons: ${chapter.lessons.length}`);
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -439,7 +439,7 @@ class ChapterManager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const lesson = chapter.lessons[lessonIndex];
|
const lesson = chapter.lessons[lessonIndex];
|
||||||
|
|
||||||
// 이미 완료된 학습이면 처리하지 않음
|
// 이미 완료된 학습이면 처리하지 않음
|
||||||
if (lesson.completed) {
|
if (lesson.completed) {
|
||||||
console.log(
|
console.log(
|
||||||
@@ -771,7 +771,7 @@ class FilterFactory {
|
|||||||
"color-interpolation-filters": "sRGB",
|
"color-interpolation-filters": "sRGB",
|
||||||
});
|
});
|
||||||
|
|
||||||
// 배경 이미지 고정
|
// 배경 이미지 고정
|
||||||
filter.appendChild(
|
filter.appendChild(
|
||||||
SVGHelper.createElement("feFlood", {
|
SVGHelper.createElement("feFlood", {
|
||||||
"flood-opacity": "0",
|
"flood-opacity": "0",
|
||||||
@@ -779,7 +779,7 @@ class FilterFactory {
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
// 원본 모양 유지
|
// 원본 모양 유지
|
||||||
filter.appendChild(
|
filter.appendChild(
|
||||||
SVGHelper.createElement("feBlend", {
|
SVGHelper.createElement("feBlend", {
|
||||||
mode: "normal",
|
mode: "normal",
|
||||||
@@ -1170,7 +1170,7 @@ class FilterFactory {
|
|||||||
// Inner Shadow 1: 우하단 밝은 그림자
|
// Inner Shadow 1: 우하단 밝은 그림자
|
||||||
// 13px 12px 6px rgba(254, 227, 179, 0.80)
|
// 13px 12px 6px rgba(254, 227, 179, 0.80)
|
||||||
// ========================================
|
// ========================================
|
||||||
|
|
||||||
// Alpha 채널 추출
|
// Alpha 채널 추출
|
||||||
filter.appendChild(
|
filter.appendChild(
|
||||||
SVGHelper.createElement("feColorMatrix", {
|
SVGHelper.createElement("feColorMatrix", {
|
||||||
@@ -1227,7 +1227,7 @@ class FilterFactory {
|
|||||||
// Inner Shadow 2: 좌상단 어두운 그림자
|
// Inner Shadow 2: 좌상단 어두운 그림자
|
||||||
// -11px -11px 5px rgba(0, 0, 0, 0.40)
|
// -11px -11px 5px rgba(0, 0, 0, 0.40)
|
||||||
// ========================================
|
// ========================================
|
||||||
|
|
||||||
// Alpha 채널 추출
|
// Alpha 채널 추출
|
||||||
filter.appendChild(
|
filter.appendChild(
|
||||||
SVGHelper.createElement("feColorMatrix", {
|
SVGHelper.createElement("feColorMatrix", {
|
||||||
@@ -1283,7 +1283,7 @@ class FilterFactory {
|
|||||||
// Drop Shadow: 외부 그림자
|
// Drop Shadow: 외부 그림자
|
||||||
// 1px 1px 2px rgba(0, 0, 0, 0.80)
|
// 1px 1px 2px rgba(0, 0, 0, 0.80)
|
||||||
// ========================================
|
// ========================================
|
||||||
|
|
||||||
// 외부 그림자용 Alpha
|
// 외부 그림자용 Alpha
|
||||||
filter.appendChild(
|
filter.appendChild(
|
||||||
SVGHelper.createElement("feColorMatrix", {
|
SVGHelper.createElement("feColorMatrix", {
|
||||||
@@ -1371,8 +1371,8 @@ class ContentManager {
|
|||||||
*/
|
*/
|
||||||
getThumbnailUrl(pieceId) {
|
getThumbnailUrl(pieceId) {
|
||||||
const chapterInfo = this.getChapterByPieceId(pieceId);
|
const chapterInfo = this.getChapterByPieceId(pieceId);
|
||||||
if (!chapterInfo || !chapterInfo.chapter.lessons ||
|
if (!chapterInfo || !chapterInfo.chapter.lessons ||
|
||||||
chapterInfo.chapter.lessons.length === 0) {
|
chapterInfo.chapter.lessons.length === 0) {
|
||||||
return CONFIG.IMAGE_PATHS.BASE;
|
return CONFIG.IMAGE_PATHS.BASE;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1401,7 +1401,7 @@ class ContentManager {
|
|||||||
getType(pieceId) {
|
getType(pieceId) {
|
||||||
const chapterInfo = this.getChapterByPieceId(pieceId);
|
const chapterInfo = this.getChapterByPieceId(pieceId);
|
||||||
if (!chapterInfo) return "youtube";
|
if (!chapterInfo) return "youtube";
|
||||||
|
|
||||||
return chapterInfo.chapter.type || "youtube";
|
return chapterInfo.chapter.type || "youtube";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1442,7 +1442,7 @@ class PuzzlePiece {
|
|||||||
`bg-image-${this.data.id}`,
|
`bg-image-${this.data.id}`,
|
||||||
currentUrl
|
currentUrl
|
||||||
);
|
);
|
||||||
|
|
||||||
// Hover 이미지 - stroke: 2, 엠보싱: 적용
|
// Hover 이미지 - stroke: 2, 엠보싱: 적용
|
||||||
this._createImageLayer(
|
this._createImageLayer(
|
||||||
"piece-hover-image",
|
"piece-hover-image",
|
||||||
@@ -1450,7 +1450,7 @@ class PuzzlePiece {
|
|||||||
currentUrl,
|
currentUrl,
|
||||||
"0"
|
"0"
|
||||||
);
|
);
|
||||||
|
|
||||||
// Completed 이미지 - stroke: 2, 엠보싱: 적용
|
// Completed 이미지 - stroke: 2, 엠보싱: 적용
|
||||||
this._createImageLayer(
|
this._createImageLayer(
|
||||||
"piece-completed-image",
|
"piece-completed-image",
|
||||||
@@ -1459,7 +1459,7 @@ class PuzzlePiece {
|
|||||||
"1.0",
|
"1.0",
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
|
||||||
// All Completed 이미지 - stroke: 0, 엠보싱: 없음 (하나의 이미지처럼)
|
// All Completed 이미지 - stroke: 0, 엠보싱: 없음 (하나의 이미지처럼)
|
||||||
this._createImageLayer(
|
this._createImageLayer(
|
||||||
"piece-all-completed-image",
|
"piece-all-completed-image",
|
||||||
@@ -1468,7 +1468,7 @@ class PuzzlePiece {
|
|||||||
"1.0",
|
"1.0",
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
|
|
||||||
// Finish 이미지 - stroke: 2, 엠보싱: 적용
|
// Finish 이미지 - stroke: 2, 엠보싱: 적용
|
||||||
this._createImageLayer(
|
this._createImageLayer(
|
||||||
"piece-finish-image",
|
"piece-finish-image",
|
||||||
@@ -1497,18 +1497,18 @@ class PuzzlePiece {
|
|||||||
opacity = "1.0",
|
opacity = "1.0",
|
||||||
hidden = false
|
hidden = false
|
||||||
) {
|
) {
|
||||||
const strokeWidth =
|
const strokeWidth =
|
||||||
className === "piece-base-image" ? "2" :
|
className === "piece-base-image" ? "2" :
|
||||||
className === "piece-all-completed-image" ? "0" :
|
className === "piece-all-completed-image" ? "0" :
|
||||||
className === "piece-completed-image" ? "2" :
|
className === "piece-completed-image" ? "2" :
|
||||||
className === "piece-finish-image" ? "2" : "2";
|
className === "piece-finish-image" ? "2" : "2";
|
||||||
|
|
||||||
// ✅ 모든 레이어에서 stroke 색상을 #333 (검은색)으로 통일
|
// ✅ 모든 레이어에서 stroke 색상을 #333 (검은색)으로 통일
|
||||||
const strokeColor = "#000";
|
const strokeColor = "#000";
|
||||||
|
|
||||||
const flatLayers = ["piece-base-image", "piece-all-completed-image", "piece-hover-image"];
|
const flatLayers = ["piece-base-image", "piece-all-completed-image", "piece-hover-image"];
|
||||||
const shouldApplyEmbossing = !flatLayers.includes(className);
|
const shouldApplyEmbossing = !flatLayers.includes(className);
|
||||||
|
|
||||||
const attributes = {
|
const attributes = {
|
||||||
d: this.data.path,
|
d: this.data.path,
|
||||||
class: className,
|
class: className,
|
||||||
@@ -1519,23 +1519,23 @@ class PuzzlePiece {
|
|||||||
"stroke-linejoin": "round",
|
"stroke-linejoin": "round",
|
||||||
"stroke-linecap": "round",
|
"stroke-linecap": "round",
|
||||||
};
|
};
|
||||||
|
|
||||||
if (shouldApplyEmbossing) {
|
if (shouldApplyEmbossing) {
|
||||||
// PIECE_EMBOSSING만 적용 (completed-effect 제거)
|
// PIECE_EMBOSSING만 적용 (completed-effect 제거)
|
||||||
attributes.filter = `url(#${CONFIG.FILTER_IDS.PIECE_EMBOSSING})`;
|
attributes.filter = `url(#${CONFIG.FILTER_IDS.PIECE_EMBOSSING})`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (className === "piece-completed-image") {
|
if (className === "piece-completed-image") {
|
||||||
attributes["clip-path"] = `url(#clip-piece-${this.data.id})`;
|
attributes["clip-path"] = `url(#clip-piece-${this.data.id})`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const path = SVGHelper.createElement("path", attributes);
|
const path = SVGHelper.createElement("path", attributes);
|
||||||
|
|
||||||
if (hidden) path.style.display = "none";
|
if (hidden) path.style.display = "none";
|
||||||
if (className === "piece-hover-image") {
|
if (className === "piece-hover-image") {
|
||||||
path.style.transition = CONFIG.ANIMATION.HOVER_TRANSITION;
|
path.style.transition = CONFIG.ANIMATION.HOVER_TRANSITION;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.group.appendChild(path);
|
this.group.appendChild(path);
|
||||||
}
|
}
|
||||||
_createOverlay(className) {
|
_createOverlay(className) {
|
||||||
@@ -1581,7 +1581,7 @@ class PuzzlePiece {
|
|||||||
const enterId = this.eventManager.on(this.group, "mouseenter", mouseEnterHandler);
|
const enterId = this.eventManager.on(this.group, "mouseenter", mouseEnterHandler);
|
||||||
const leaveId = this.eventManager.on(this.group, "mouseleave", mouseLeaveHandler);
|
const leaveId = this.eventManager.on(this.group, "mouseleave", mouseLeaveHandler);
|
||||||
const clickId = this.eventManager.on(this.group, "click", clickHandler);
|
const clickId = this.eventManager.on(this.group, "click", clickHandler);
|
||||||
|
|
||||||
this.listenerIds.push(
|
this.listenerIds.push(
|
||||||
{ element: this.group, id: enterId, type: 'mouseenter' },
|
{ element: this.group, id: enterId, type: 'mouseenter' },
|
||||||
{ element: this.group, id: leaveId, type: 'mouseleave' },
|
{ element: this.group, id: leaveId, type: 'mouseleave' },
|
||||||
@@ -1745,18 +1745,18 @@ class PuzzlePiece {
|
|||||||
|
|
||||||
markComplete() {
|
markComplete() {
|
||||||
if (this.isCompleted) return;
|
if (this.isCompleted) return;
|
||||||
|
|
||||||
this.isCompleted = true;
|
this.isCompleted = true;
|
||||||
this.group.classList.add("completed");
|
this.group.classList.add("completed");
|
||||||
|
|
||||||
const baseImage = this.group.querySelector(".piece-base-image");
|
const baseImage = this.group.querySelector(".piece-base-image");
|
||||||
const completedImage = this.group.querySelector(".piece-completed-image");
|
const completedImage = this.group.querySelector(".piece-completed-image");
|
||||||
|
|
||||||
// ✅ base 이미지를 완전히 숨기고 completed 이미지만 표시
|
// ✅ base 이미지를 완전히 숨기고 completed 이미지만 표시
|
||||||
if (baseImage) {
|
if (baseImage) {
|
||||||
baseImage.style.display = "none";
|
baseImage.style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (completedImage) {
|
if (completedImage) {
|
||||||
completedImage.style.display = "block";
|
completedImage.style.display = "block";
|
||||||
// completed-effect 필터 완전히 제거하고 PIECE_EMBOSSING만 적용
|
// completed-effect 필터 완전히 제거하고 PIECE_EMBOSSING만 적용
|
||||||
@@ -1767,24 +1767,24 @@ class PuzzlePiece {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ✅ 새로운 메서드: Finish Image 표시 (최종 표시)
|
// ✅ 새로운 메서드: Finish Image 표시 (최종 표시)
|
||||||
showFinish() {
|
showFinish() {
|
||||||
const baseImg = this.group.querySelector(".piece-base-image");
|
const baseImg = this.group.querySelector(".piece-base-image");
|
||||||
const completedImg = this.group.querySelector(".piece-completed-image");
|
const completedImg = this.group.querySelector(".piece-completed-image");
|
||||||
const allCompletedImg = this.group.querySelector(".piece-all-completed-image");
|
const allCompletedImg = this.group.querySelector(".piece-all-completed-image");
|
||||||
const finishImg = this.group.querySelector(".piece-finish-image");
|
const finishImg = this.group.querySelector(".piece-finish-image");
|
||||||
|
|
||||||
// 모든 이미지 숨기기
|
// 모든 이미지 숨기기
|
||||||
if (baseImg) baseImg.style.display = "none";
|
if (baseImg) baseImg.style.display = "none";
|
||||||
if (completedImg) completedImg.style.display = "none";
|
if (completedImg) completedImg.style.display = "none";
|
||||||
if (allCompletedImg) allCompletedImg.style.display = "none";
|
if (allCompletedImg) allCompletedImg.style.display = "none";
|
||||||
|
|
||||||
// ✅ FINISH 이미지 표시 (bg_piece_finish.png - COMPLETED 이미지)
|
// ✅ FINISH 이미지 표시 (bg_piece_finish.png - COMPLETED 이미지)
|
||||||
if (finishImg) {
|
if (finishImg) {
|
||||||
finishImg.style.display = "block";
|
finishImg.style.display = "block";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
// ❌ showAllCompleted는 이제 사용 안 함 (showFinish로 대체)
|
// ❌ showAllCompleted는 이제 사용 안 함 (showFinish로 대체)
|
||||||
showAllCompleted() {
|
showAllCompleted() {
|
||||||
// 더 이상 사용하지 않음 - showFinish로 대체
|
// 더 이상 사용하지 않음 - showFinish로 대체
|
||||||
@@ -1831,14 +1831,14 @@ class GaugeManager {
|
|||||||
// 다른 피스는 전체 xRange의 중앙
|
// 다른 피스는 전체 xRange의 중앙
|
||||||
centerX = (xRange.left + xRange.right) / 2;
|
centerX = (xRange.left + xRange.right) / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 중앙 정렬: centerX에서 bgWidth의 절반을 빼서 시작점 계산
|
// 중앙 정렬: centerX에서 bgWidth의 절반을 빼서 시작점 계산
|
||||||
let gaugeX = centerX - (bgWidth / 2);
|
let gaugeX = centerX - (bgWidth / 2);
|
||||||
|
|
||||||
// strokeRadius 고려하여 최소 여백 확보
|
// strokeRadius 고려하여 최소 여백 확보
|
||||||
const strokeRadius = CONFIG.GAUGE.HEIGHT / 2;
|
const strokeRadius = CONFIG.GAUGE.HEIGHT / 2;
|
||||||
const minMargin = strokeRadius;
|
const minMargin = strokeRadius;
|
||||||
|
|
||||||
// 왼쪽 경계 확인 및 조정
|
// 왼쪽 경계 확인 및 조정
|
||||||
if (gaugeX < xRange.left + minMargin) {
|
if (gaugeX < xRange.left + minMargin) {
|
||||||
gaugeX = xRange.left + minMargin;
|
gaugeX = xRange.left + minMargin;
|
||||||
@@ -1846,7 +1846,7 @@ class GaugeManager {
|
|||||||
const maxEndX = xRange.right - minMargin;
|
const maxEndX = xRange.right - minMargin;
|
||||||
bgWidth = Math.min(bgWidth, maxEndX - gaugeX);
|
bgWidth = Math.min(bgWidth, maxEndX - gaugeX);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 오른쪽 경계 확인 및 조정
|
// 오른쪽 경계 확인 및 조정
|
||||||
const calculatedEndX = gaugeX + bgWidth;
|
const calculatedEndX = gaugeX + bgWidth;
|
||||||
const maxEndX = xRange.right - minMargin;
|
const maxEndX = xRange.right - minMargin;
|
||||||
@@ -1942,7 +1942,7 @@ class GaugeManager {
|
|||||||
if (bgLine) {
|
if (bgLine) {
|
||||||
let originalX1 = parseFloat(bgLine.getAttribute("data-original-x1"));
|
let originalX1 = parseFloat(bgLine.getAttribute("data-original-x1"));
|
||||||
let originalX2 = parseFloat(bgLine.getAttribute("data-original-x2"));
|
let originalX2 = parseFloat(bgLine.getAttribute("data-original-x2"));
|
||||||
|
|
||||||
// 원본 좌표가 없으면 현재 좌표를 원본으로 저장
|
// 원본 좌표가 없으면 현재 좌표를 원본으로 저장
|
||||||
if (!originalX1 || isNaN(originalX1)) {
|
if (!originalX1 || isNaN(originalX1)) {
|
||||||
originalX1 = parseFloat(bgLine.getAttribute("x1"));
|
originalX1 = parseFloat(bgLine.getAttribute("x1"));
|
||||||
@@ -1950,28 +1950,28 @@ class GaugeManager {
|
|||||||
bgLine.setAttribute("data-original-x1", originalX1);
|
bgLine.setAttribute("data-original-x1", originalX1);
|
||||||
bgLine.setAttribute("data-original-x2", originalX2);
|
bgLine.setAttribute("data-original-x2", originalX2);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 원본 opacity 가져오기
|
// 원본 opacity 가져오기
|
||||||
let originalOpacity = parseFloat(bgLine.getAttribute("data-original-opacity"));
|
let originalOpacity = parseFloat(bgLine.getAttribute("data-original-opacity"));
|
||||||
if (!originalOpacity || isNaN(originalOpacity)) {
|
if (!originalOpacity || isNaN(originalOpacity)) {
|
||||||
originalOpacity = CONFIG.GAUGE.BG_OPACITY;
|
originalOpacity = CONFIG.GAUGE.BG_OPACITY;
|
||||||
bgLine.setAttribute("data-original-opacity", originalOpacity);
|
bgLine.setAttribute("data-original-opacity", originalOpacity);
|
||||||
}
|
}
|
||||||
|
|
||||||
// progress에 따라 opacity 설정: 학습 내용이 없으면(progress === 0) opacity 0, 있으면 원본 opacity
|
// progress에 따라 opacity 설정: 학습 내용이 없으면(progress === 0) opacity 0, 있으면 원본 opacity
|
||||||
if (progress > 0) {
|
if (progress > 0) {
|
||||||
bgLine.setAttribute("opacity", originalOpacity);
|
bgLine.setAttribute("opacity", originalOpacity);
|
||||||
} else {
|
} else {
|
||||||
bgLine.setAttribute("opacity", 0);
|
bgLine.setAttribute("opacity", 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isCompleted) {
|
if (isCompleted) {
|
||||||
// 중앙 정렬 유지: 원본 중앙에서 조정된 너비의 절반씩 빼고 더함
|
// 중앙 정렬 유지: 원본 중앙에서 조정된 너비의 절반씩 빼고 더함
|
||||||
const originalCenterX = (originalX1 + originalX2) / 2;
|
const originalCenterX = (originalX1 + originalX2) / 2;
|
||||||
const adjustedBgWidth = (originalX2 - originalX1) - (EMBOSSING_INSET * 2);
|
const adjustedBgWidth = (originalX2 - originalX1) - (EMBOSSING_INSET * 2);
|
||||||
const newX1 = originalCenterX - (adjustedBgWidth / 2);
|
const newX1 = originalCenterX - (adjustedBgWidth / 2);
|
||||||
const newX2 = originalCenterX + (adjustedBgWidth / 2);
|
const newX2 = originalCenterX + (adjustedBgWidth / 2);
|
||||||
|
|
||||||
bgLine.setAttribute("x1", newX1);
|
bgLine.setAttribute("x1", newX1);
|
||||||
bgLine.setAttribute("x2", newX2);
|
bgLine.setAttribute("x2", newX2);
|
||||||
} else {
|
} else {
|
||||||
@@ -2174,32 +2174,32 @@ class UIElementFactory {
|
|||||||
/**
|
/**
|
||||||
* 퍼즐 조각 경계선 생성
|
* 퍼즐 조각 경계선 생성
|
||||||
*/
|
*/
|
||||||
static createBoundaryLines(svg) {
|
static createBoundaryLines(svg) {
|
||||||
const boundaryGroup = SVGHelper.createElement("g", {
|
const boundaryGroup = SVGHelper.createElement("g", {
|
||||||
class: "puzzle-boundaries",
|
class: "puzzle-boundaries",
|
||||||
id: "puzzleBoundaries",
|
id: "puzzleBoundaries",
|
||||||
style: "pointer-events: none;", // 클릭 이벤트 차단
|
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,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
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 활용) - 퍼즐 온보딩 전용
|
// 모달 관리 클래스 (VideoModalBase 활용) - 퍼즐 온보딩 전용
|
||||||
@@ -2239,19 +2239,19 @@ class PuzzleModalManager {
|
|||||||
try {
|
try {
|
||||||
// VideoModalBase 초기화
|
// VideoModalBase 초기화
|
||||||
const videoModalBase = this._initVideoModalBase();
|
const videoModalBase = this._initVideoModalBase();
|
||||||
|
|
||||||
// 기존 모달 제거
|
// 기존 모달 제거
|
||||||
this._removeExistingModal();
|
this._removeExistingModal();
|
||||||
|
|
||||||
// VideoModalBase를 사용하여 모달 HTML 로드
|
// VideoModalBase를 사용하여 모달 HTML 로드
|
||||||
const modalHTML = await videoModalBase.loadModalHTML("onboarding");
|
const modalHTML = await videoModalBase.loadModalHTML("onboarding");
|
||||||
|
|
||||||
// VideoModalBase를 사용하여 모달 요소 생성
|
// VideoModalBase를 사용하여 모달 요소 생성
|
||||||
const modal = videoModalBase.createModalFromHTML(modalHTML, "onboarding");
|
const modal = videoModalBase.createModalFromHTML(modalHTML, "onboarding");
|
||||||
|
|
||||||
// DOM에 추가
|
// DOM에 추가
|
||||||
document.body.appendChild(modal);
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
// ✅ 모달을 먼저 숨긴 상태로 표시 (높이 조정이 보이지 않도록)
|
// ✅ 모달을 먼저 숨긴 상태로 표시 (높이 조정이 보이지 않도록)
|
||||||
modal.style.display = "block";
|
modal.style.display = "block";
|
||||||
modal.style.visibility = "hidden";
|
modal.style.visibility = "hidden";
|
||||||
@@ -2315,13 +2315,13 @@ class PuzzleModalManager {
|
|||||||
isAdjustingHeight: false,
|
isAdjustingHeight: false,
|
||||||
isInitialLoadComplete: false,
|
isInitialLoadComplete: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
// 첫 번째 학습 로드
|
// 첫 번째 학습 로드
|
||||||
this._loadLesson(modal, chapter, modalState.currentLessonIndex);
|
this._loadLesson(modal, chapter, modalState.currentLessonIndex);
|
||||||
|
|
||||||
// 진행률 업데이트
|
// 진행률 업데이트
|
||||||
this._updateProgress(modal, chapter);
|
this._updateProgress(modal, chapter);
|
||||||
|
|
||||||
// 닫기 이벤트 먼저 설정
|
// 닫기 이벤트 먼저 설정
|
||||||
this._setupCloseEvents(modal, chapter, chapterIndex, modalState);
|
this._setupCloseEvents(modal, chapter, chapterIndex, modalState);
|
||||||
|
|
||||||
@@ -2329,10 +2329,10 @@ class PuzzleModalManager {
|
|||||||
if (this.videoModalBase && this.videoModalBase.setupCommentBox) {
|
if (this.videoModalBase && this.videoModalBase.setupCommentBox) {
|
||||||
this.videoModalBase.setupCommentBox(modal);
|
this.videoModalBase.setupCommentBox(modal);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 학습 목차 생성
|
// 학습 목차 생성
|
||||||
this._createLearningList(modal, chapter, chapterIndex, modalState);
|
this._createLearningList(modal, chapter, chapterIndex, modalState);
|
||||||
|
|
||||||
// ✅ 높이 조정 후 모달 표시
|
// ✅ 높이 조정 후 모달 표시
|
||||||
this._initializeHeightAdjustment(modal, modalState, () => {
|
this._initializeHeightAdjustment(modal, modalState, () => {
|
||||||
// 높이 조정 완료 후 모달을 보이게 함
|
// 높이 조정 완료 후 모달을 보이게 함
|
||||||
@@ -2341,7 +2341,7 @@ class PuzzleModalManager {
|
|||||||
modal.style.transition = "opacity 0.3s ease";
|
modal.style.transition = "opacity 0.3s ease";
|
||||||
modalState.isVisible = true;
|
modalState.isVisible = true;
|
||||||
modalState.isInitialLoadComplete = true;
|
modalState.isInitialLoadComplete = true;
|
||||||
|
|
||||||
// 현재 학습으로 스크롤
|
// 현재 학습으로 스크롤
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this._scrollToCurrentLesson(modal);
|
this._scrollToCurrentLesson(modal);
|
||||||
@@ -2363,7 +2363,7 @@ class PuzzleModalManager {
|
|||||||
static _initializeHeightAdjustment(modal, modalState, onComplete) {
|
static _initializeHeightAdjustment(modal, modalState, onComplete) {
|
||||||
// ✅ 최적화: 높이 조정을 3단계로 축소 (리플로우 최소화)
|
// ✅ 최적화: 높이 조정을 3단계로 축소 (리플로우 최소화)
|
||||||
let pendingAdjust = null;
|
let pendingAdjust = null;
|
||||||
|
|
||||||
const scheduleAdjust = () => {
|
const scheduleAdjust = () => {
|
||||||
if (pendingAdjust) {
|
if (pendingAdjust) {
|
||||||
cancelAnimationFrame(pendingAdjust);
|
cancelAnimationFrame(pendingAdjust);
|
||||||
@@ -2392,7 +2392,7 @@ class PuzzleModalManager {
|
|||||||
onComplete();
|
onComplete();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Observer 설정 (초기 로딩 후에만 작동)
|
// Observer 설정 (초기 로딩 후에만 작동)
|
||||||
this._setupResizeObserver(modal, modalState);
|
this._setupResizeObserver(modal, modalState);
|
||||||
this._setupMutationObserver(modal, modalState);
|
this._setupMutationObserver(modal, modalState);
|
||||||
@@ -2513,10 +2513,10 @@ class PuzzleModalManager {
|
|||||||
|
|
||||||
// learning-list에 사용 가능한 최대 높이
|
// learning-list에 사용 가능한 최대 높이
|
||||||
// comment-list-wrap 높이도 고려 (comment-wrap과 별도로 계산)
|
// comment-list-wrap 높이도 고려 (comment-wrap과 별도로 계산)
|
||||||
const availableHeight = totalHeight - headerHeight - commentWrapHeight -
|
const availableHeight = totalHeight - headerHeight - commentWrapHeight -
|
||||||
(commentListWrapHeight > 0 ? commentListWrapHeight : 0) -
|
(commentListWrapHeight > 0 ? commentListWrapHeight : 0) -
|
||||||
titleHeight - paddingTop - paddingBottom -
|
titleHeight - paddingTop - paddingBottom -
|
||||||
commentInfoOffset - 20;
|
commentInfoOffset - 20;
|
||||||
|
|
||||||
// 사용 가능한 높이가 음수이거나 너무 작으면 경고
|
// 사용 가능한 높이가 음수이거나 너무 작으면 경고
|
||||||
if (availableHeight < 50) {
|
if (availableHeight < 50) {
|
||||||
@@ -2530,24 +2530,24 @@ class PuzzleModalManager {
|
|||||||
// ✅ learning-list의 실제 컨텐츠 높이 측정 (스타일 제거 후)
|
// ✅ learning-list의 실제 컨텐츠 높이 측정 (스타일 제거 후)
|
||||||
const originalHeight = learningList.style.height;
|
const originalHeight = learningList.style.height;
|
||||||
const originalOverflow = learningList.style.overflowY;
|
const originalOverflow = learningList.style.overflowY;
|
||||||
|
|
||||||
learningList.style.height = 'auto';
|
learningList.style.height = 'auto';
|
||||||
learningList.style.overflowY = 'visible';
|
learningList.style.overflowY = 'visible';
|
||||||
|
|
||||||
const listContentHeight = learningList.scrollHeight;
|
const listContentHeight = learningList.scrollHeight;
|
||||||
|
|
||||||
learningList.style.height = originalHeight;
|
learningList.style.height = originalHeight;
|
||||||
learningList.style.overflowY = originalOverflow;
|
learningList.style.overflowY = originalOverflow;
|
||||||
|
|
||||||
// ✅ video-list의 실제 컨텐츠 높이 측정 (comment-list-wrap 높이 고려)
|
// ✅ video-list의 실제 컨텐츠 높이 측정 (comment-list-wrap 높이 고려)
|
||||||
const videoListOriginalHeight = videoList.style.height;
|
const videoListOriginalHeight = videoList.style.height;
|
||||||
const videoListOriginalOverflow = videoList.style.overflowY;
|
const videoListOriginalOverflow = videoList.style.overflowY;
|
||||||
|
|
||||||
videoList.style.height = 'auto';
|
videoList.style.height = 'auto';
|
||||||
videoList.style.overflowY = 'visible';
|
videoList.style.overflowY = 'visible';
|
||||||
|
|
||||||
const videoListContentHeight = videoList.scrollHeight;
|
const videoListContentHeight = videoList.scrollHeight;
|
||||||
|
|
||||||
videoList.style.height = videoListOriginalHeight;
|
videoList.style.height = videoListOriginalHeight;
|
||||||
videoList.style.overflowY = videoListOriginalOverflow;
|
videoList.style.overflowY = videoListOriginalOverflow;
|
||||||
|
|
||||||
@@ -2568,7 +2568,7 @@ class PuzzleModalManager {
|
|||||||
const currentHeight = learningList.style.height
|
const currentHeight = learningList.style.height
|
||||||
? parseInt(learningList.style.height)
|
? parseInt(learningList.style.height)
|
||||||
: learningList.offsetHeight;
|
: learningList.offsetHeight;
|
||||||
|
|
||||||
const videoListCurrentHeight = videoList.style.height
|
const videoListCurrentHeight = videoList.style.height
|
||||||
? parseInt(videoList.style.height)
|
? parseInt(videoList.style.height)
|
||||||
: videoList.offsetHeight;
|
: videoList.offsetHeight;
|
||||||
@@ -2626,7 +2626,7 @@ class PuzzleModalManager {
|
|||||||
// 높이 조정 완료 후 플래그 해제
|
// 높이 조정 완료 후 플래그 해제
|
||||||
modalState.isAdjustingHeight = false;
|
modalState.isAdjustingHeight = false;
|
||||||
});
|
});
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2638,16 +2638,16 @@ class PuzzleModalManager {
|
|||||||
const videoSide = modal.querySelector(".video-side");
|
const videoSide = modal.querySelector(".video-side");
|
||||||
const commentWrap = modal.querySelector(".comment-wrap");
|
const commentWrap = modal.querySelector(".comment-wrap");
|
||||||
const modalContent = modal.querySelector(".modal-content");
|
const modalContent = modal.querySelector(".modal-content");
|
||||||
|
|
||||||
if (!videoSide) return;
|
if (!videoSide) return;
|
||||||
|
|
||||||
if (!modal._resizeObserver) {
|
if (!modal._resizeObserver) {
|
||||||
// ✅ throttle 적용 (리플로우 최소화)
|
// ✅ throttle 적용 (리플로우 최소화)
|
||||||
const throttledAdjust = Utils.throttle(() => {
|
const throttledAdjust = Utils.throttle(() => {
|
||||||
if (!modalState.isInitialLoadComplete) {
|
if (!modalState.isInitialLoadComplete) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let pendingAdjust = null;
|
let pendingAdjust = null;
|
||||||
if (pendingAdjust) {
|
if (pendingAdjust) {
|
||||||
cancelAnimationFrame(pendingAdjust);
|
cancelAnimationFrame(pendingAdjust);
|
||||||
@@ -2666,7 +2666,7 @@ class PuzzleModalManager {
|
|||||||
}
|
}
|
||||||
throttledAdjust();
|
throttledAdjust();
|
||||||
});
|
});
|
||||||
|
|
||||||
modal._resizeObserver.observe(videoSide);
|
modal._resizeObserver.observe(videoSide);
|
||||||
if (commentWrap) {
|
if (commentWrap) {
|
||||||
modal._resizeObserver.observe(commentWrap);
|
modal._resizeObserver.observe(commentWrap);
|
||||||
@@ -2675,14 +2675,14 @@ class PuzzleModalManager {
|
|||||||
modal._resizeObserver.observe(modalContent);
|
modal._resizeObserver.observe(modalContent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Window resize 이벤트 (throttle 적용)
|
// Window resize 이벤트 (throttle 적용)
|
||||||
if (!modal._windowResizeHandler) {
|
if (!modal._windowResizeHandler) {
|
||||||
const throttledResize = Utils.throttle(() => {
|
const throttledResize = Utils.throttle(() => {
|
||||||
if (!modalState.isInitialLoadComplete) {
|
if (!modalState.isInitialLoadComplete) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let pendingAdjust = null;
|
let pendingAdjust = null;
|
||||||
if (pendingAdjust) {
|
if (pendingAdjust) {
|
||||||
cancelAnimationFrame(pendingAdjust);
|
cancelAnimationFrame(pendingAdjust);
|
||||||
@@ -2705,9 +2705,9 @@ class PuzzleModalManager {
|
|||||||
*/
|
*/
|
||||||
static _setupMutationObserver(modal, modalState) {
|
static _setupMutationObserver(modal, modalState) {
|
||||||
const learningList = modal.querySelector(".learning-list");
|
const learningList = modal.querySelector(".learning-list");
|
||||||
|
|
||||||
if (!learningList) return;
|
if (!learningList) return;
|
||||||
|
|
||||||
if (!modal._mutationObserver) {
|
if (!modal._mutationObserver) {
|
||||||
modal._mutationObserver = new MutationObserver((mutations) => {
|
modal._mutationObserver = new MutationObserver((mutations) => {
|
||||||
// ✅ 초기 로딩 중에는 무시
|
// ✅ 초기 로딩 중에는 무시
|
||||||
@@ -2715,12 +2715,12 @@ class PuzzleModalManager {
|
|||||||
console.log("[ModalManager] 초기 로딩 중 - MutationObserver 무시");
|
console.log("[ModalManager] 초기 로딩 중 - MutationObserver 무시");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ✅ 높이 조정 중이면 무시
|
// ✅ 높이 조정 중이면 무시
|
||||||
if (modalState.isAdjustingHeight) {
|
if (modalState.isAdjustingHeight) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const hasRelevantChange = mutations.some((mutation) => {
|
const hasRelevantChange = mutations.some((mutation) => {
|
||||||
if (
|
if (
|
||||||
mutation.type === "attributes" &&
|
mutation.type === "attributes" &&
|
||||||
@@ -2729,14 +2729,14 @@ class PuzzleModalManager {
|
|||||||
) {
|
) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return mutation.type === "childList" ||
|
return mutation.type === "childList" ||
|
||||||
(mutation.type === "attributes" && mutation.target !== learningList);
|
(mutation.type === "attributes" && mutation.target !== learningList);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!hasRelevantChange) {
|
if (!hasRelevantChange) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// ✅ throttle 적용 (리플로우 최소화)
|
// ✅ throttle 적용 (리플로우 최소화)
|
||||||
if (!modal._mutationThrottle) {
|
if (!modal._mutationThrottle) {
|
||||||
modal._mutationThrottle = Utils.throttle(() => {
|
modal._mutationThrottle = Utils.throttle(() => {
|
||||||
@@ -2753,7 +2753,7 @@ class PuzzleModalManager {
|
|||||||
}
|
}
|
||||||
modal._mutationThrottle();
|
modal._mutationThrottle();
|
||||||
});
|
});
|
||||||
|
|
||||||
modal._mutationObserver.observe(learningList, {
|
modal._mutationObserver.observe(learningList, {
|
||||||
childList: true,
|
childList: true,
|
||||||
subtree: true,
|
subtree: true,
|
||||||
@@ -2879,7 +2879,7 @@ class PuzzleModalManager {
|
|||||||
static _loadLesson(modal, chapter, lessonIndex) {
|
static _loadLesson(modal, chapter, lessonIndex) {
|
||||||
const lesson = chapter.lessons[lessonIndex];
|
const lesson = chapter.lessons[lessonIndex];
|
||||||
const videoModalBase = this._initVideoModalBase();
|
const videoModalBase = this._initVideoModalBase();
|
||||||
|
|
||||||
// VideoModalBase의 setupVideo 메서드 활용
|
// VideoModalBase의 setupVideo 메서드 활용
|
||||||
if (chapter.type === "youtube" && lesson.url) {
|
if (chapter.type === "youtube" && lesson.url) {
|
||||||
const videoData = { url: lesson.url, id: lesson.url };
|
const videoData = { url: lesson.url, id: lesson.url };
|
||||||
@@ -2948,7 +2948,7 @@ class PuzzleModalManager {
|
|||||||
chapter.lessons.forEach((lesson, index) => {
|
chapter.lessons.forEach((lesson, index) => {
|
||||||
try {
|
try {
|
||||||
const li = domUtils?.createElement('li') || document.createElement("li");
|
const li = domUtils?.createElement('li') || document.createElement("li");
|
||||||
|
|
||||||
// 상태 클래스
|
// 상태 클래스
|
||||||
if (index === modalState.currentLessonIndex) {
|
if (index === modalState.currentLessonIndex) {
|
||||||
domUtils?.addClasses(li, 'active') || li.classList.add("active");
|
domUtils?.addClasses(li, 'active') || li.classList.add("active");
|
||||||
@@ -2973,7 +2973,7 @@ class PuzzleModalManager {
|
|||||||
<span class="seq">${index + 1}차시</span>
|
<span class="seq">${index + 1}차시</span>
|
||||||
<div class="learning-box">
|
<div class="learning-box">
|
||||||
<div class="thumb">
|
<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>
|
||||||
<div class="txt-box">
|
<div class="txt-box">
|
||||||
<div class="title">${lesson.label}</div>
|
<div class="title">${lesson.label}</div>
|
||||||
@@ -2989,7 +2989,7 @@ class PuzzleModalManager {
|
|||||||
const clickHandler = (e) => {
|
const clickHandler = (e) => {
|
||||||
try {
|
try {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const clickedIndex = parseInt(e.currentTarget.dataset.lessonIndex);
|
const clickedIndex = parseInt(e.currentTarget.dataset.lessonIndex);
|
||||||
if (isNaN(clickedIndex)) {
|
if (isNaN(clickedIndex)) {
|
||||||
console.error('[ModalManager] 유효하지 않은 lesson index:', e.currentTarget.dataset.lessonIndex);
|
console.error('[ModalManager] 유효하지 않은 lesson index:', e.currentTarget.dataset.lessonIndex);
|
||||||
@@ -2997,7 +2997,7 @@ class PuzzleModalManager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
console.log(`[ModalManager] 학습 클릭: ${clickedIndex}, 이전: ${modalState.currentLessonIndex}`);
|
console.log(`[ModalManager] 학습 클릭: ${clickedIndex}, 이전: ${modalState.currentLessonIndex}`);
|
||||||
|
|
||||||
// 이전 학습 완료 처리
|
// 이전 학습 완료 처리
|
||||||
if (modalState.currentLessonIndex !== clickedIndex) {
|
if (modalState.currentLessonIndex !== clickedIndex) {
|
||||||
const prevLesson = chapter.lessons[modalState.currentLessonIndex];
|
const prevLesson = chapter.lessons[modalState.currentLessonIndex];
|
||||||
@@ -3014,11 +3014,11 @@ class PuzzleModalManager {
|
|||||||
// 새 학습 로드
|
// 새 학습 로드
|
||||||
modalState.currentLessonIndex = clickedIndex;
|
modalState.currentLessonIndex = clickedIndex;
|
||||||
console.log(`[ModalManager] currentLessonIndex 업데이트: ${modalState.currentLessonIndex}`);
|
console.log(`[ModalManager] currentLessonIndex 업데이트: ${modalState.currentLessonIndex}`);
|
||||||
|
|
||||||
this._loadLesson(modal, chapter, modalState.currentLessonIndex);
|
this._loadLesson(modal, chapter, modalState.currentLessonIndex);
|
||||||
this._updateProgress(modal, chapter);
|
this._updateProgress(modal, chapter);
|
||||||
this._createLearningList(modal, chapter, chapterIndex, modalState);
|
this._createLearningList(modal, chapter, chapterIndex, modalState);
|
||||||
|
|
||||||
// ✅ 목록 재생성 후 높이 재조정 및 스크롤
|
// ✅ 목록 재생성 후 높이 재조정 및 스크롤
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this._adjustModalContentHeight(modal, modalState);
|
this._adjustModalContentHeight(modal, modalState);
|
||||||
@@ -3085,7 +3085,7 @@ class PuzzleModalManager {
|
|||||||
static _setupCloseEvents(modal, chapter, chapterIndex, modalState) {
|
static _setupCloseEvents(modal, chapter, chapterIndex, modalState) {
|
||||||
const closeModal = () => {
|
const closeModal = () => {
|
||||||
console.log(`[ModalManager] closeModal 호출 - currentLessonIndex: ${modalState.currentLessonIndex}`);
|
console.log(`[ModalManager] closeModal 호출 - currentLessonIndex: ${modalState.currentLessonIndex}`);
|
||||||
|
|
||||||
// 현재 학습 완료 처리
|
// 현재 학습 완료 처리
|
||||||
const currentLesson = chapter.lessons[modalState.currentLessonIndex];
|
const currentLesson = chapter.lessons[modalState.currentLessonIndex];
|
||||||
console.log(`[ModalManager] 현재 학습 정보:`, {
|
console.log(`[ModalManager] 현재 학습 정보:`, {
|
||||||
@@ -3094,7 +3094,7 @@ class PuzzleModalManager {
|
|||||||
lesson: currentLesson,
|
lesson: currentLesson,
|
||||||
completed: currentLesson?.completed
|
completed: currentLesson?.completed
|
||||||
});
|
});
|
||||||
|
|
||||||
if (currentLesson && !currentLesson.completed) {
|
if (currentLesson && !currentLesson.completed) {
|
||||||
console.log(`[ModalManager] 모달 닫기 - 학습 완료 처리: [${chapterIndex}-${modalState.currentLessonIndex}] ${currentLesson.label}`);
|
console.log(`[ModalManager] 모달 닫기 - 학습 완료 처리: [${chapterIndex}-${modalState.currentLessonIndex}] ${currentLesson.label}`);
|
||||||
PuzzleManager.instance.chapterManager.completeLesson(
|
PuzzleManager.instance.chapterManager.completeLesson(
|
||||||
@@ -3133,7 +3133,7 @@ class PuzzleModalManager {
|
|||||||
*/
|
*/
|
||||||
static _openFallbackModal(chapterIndex, chapter) {
|
static _openFallbackModal(chapterIndex, chapter) {
|
||||||
console.log("[ModalManager] 폴백 모달 사용");
|
console.log("[ModalManager] 폴백 모달 사용");
|
||||||
|
|
||||||
const modalHTML = `
|
const modalHTML = `
|
||||||
<div class="modal video" style="display: block;">
|
<div class="modal video" style="display: block;">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
@@ -3179,7 +3179,7 @@ class PuzzleModalManager {
|
|||||||
|
|
||||||
document.body.insertAdjacentHTML("beforeend", modalHTML);
|
document.body.insertAdjacentHTML("beforeend", modalHTML);
|
||||||
const modal = document.querySelector(".modal.video");
|
const modal = document.querySelector(".modal.video");
|
||||||
|
|
||||||
const modalState = {
|
const modalState = {
|
||||||
currentLessonIndex: 0,
|
currentLessonIndex: 0,
|
||||||
retryCount: 0,
|
retryCount: 0,
|
||||||
@@ -3187,7 +3187,7 @@ class PuzzleModalManager {
|
|||||||
isAdjustingHeight: false,
|
isAdjustingHeight: false,
|
||||||
isInitialLoadComplete: false,
|
isInitialLoadComplete: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
this._setupModal(modal, chapter, chapterIndex);
|
this._setupModal(modal, chapter, chapterIndex);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -3266,7 +3266,7 @@ class PuzzleManager {
|
|||||||
_initializeVideoModal() {
|
_initializeVideoModal() {
|
||||||
if (window.VideoModal) {
|
if (window.VideoModal) {
|
||||||
console.log('[PuzzleManager] VideoModal 감지 - 통합 모드');
|
console.log('[PuzzleManager] VideoModal 감지 - 통합 모드');
|
||||||
|
|
||||||
// VideoModal에 필요한 config와 markerManager 어댑터 생성
|
// VideoModal에 필요한 config와 markerManager 어댑터 생성
|
||||||
const puzzleConfig = {
|
const puzzleConfig = {
|
||||||
modalPath: "./_modal/video-onboarding.html",
|
modalPath: "./_modal/video-onboarding.html",
|
||||||
@@ -3282,13 +3282,13 @@ class PuzzleManager {
|
|||||||
this.videoModal = {
|
this.videoModal = {
|
||||||
openPuzzleChapter: async (chapter, chapterIndex, videoData) => {
|
openPuzzleChapter: async (chapter, chapterIndex, videoData) => {
|
||||||
console.log(`[PuzzleManager] VideoModal로 챕터 열기: ${chapter.name}`);
|
console.log(`[PuzzleManager] VideoModal로 챕터 열기: ${chapter.name}`);
|
||||||
|
|
||||||
// 실제 VideoModal 인스턴스가 필요한 경우
|
// 실제 VideoModal 인스턴스가 필요한 경우
|
||||||
// 여기서는 간단한 모달을 사용
|
// 여기서는 간단한 모달을 사용
|
||||||
await PuzzleModalManager._openSimpleModal(chapterIndex, chapter);
|
await PuzzleModalManager._openSimpleModal(chapterIndex, chapter);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log('[PuzzleManager] VideoModal 어댑터 생성 완료');
|
console.log('[PuzzleManager] VideoModal 어댑터 생성 완료');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('[PuzzleManager] VideoModal 초기화 실패:', error);
|
console.error('[PuzzleManager] VideoModal 초기화 실패:', error);
|
||||||
@@ -3304,18 +3304,18 @@ class PuzzleManager {
|
|||||||
this._setupDefs();
|
this._setupDefs();
|
||||||
this._createBoardBackground();
|
this._createBoardBackground();
|
||||||
this._createPuzzlePieces();
|
this._createPuzzlePieces();
|
||||||
|
|
||||||
// ✅ 경계선 추가 (타이틀과 버튼 전에 추가하여 아래에 배치)
|
// ✅ 경계선 추가 (타이틀과 버튼 전에 추가하여 아래에 배치)
|
||||||
UIElementFactory.createBoundaryLines(this.svg);
|
UIElementFactory.createBoundaryLines(this.svg);
|
||||||
|
|
||||||
UIElementFactory.createTitles(this.svg);
|
UIElementFactory.createTitles(this.svg);
|
||||||
this._createPlayButtonsAndGauges();
|
this._createPlayButtonsAndGauges();
|
||||||
|
|
||||||
this.boardElement.appendChild(this.svg);
|
this.boardElement.appendChild(this.svg);
|
||||||
|
|
||||||
// 챕터 데이터로 타이틀 업데이트
|
// 챕터 데이터로 타이틀 업데이트
|
||||||
this._updateTitlesFromChapters();
|
this._updateTitlesFromChapters();
|
||||||
|
|
||||||
this._initializeCompletedPieces();
|
this._initializeCompletedPieces();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3339,7 +3339,7 @@ class PuzzleManager {
|
|||||||
|
|
||||||
if (Math.abs(x - titlePos.x) < 1 && Math.abs(y - titlePos.y) < 1) {
|
if (Math.abs(x - titlePos.x) < 1 && Math.abs(y - titlePos.y) < 1) {
|
||||||
const tspans = text.querySelectorAll("tspan");
|
const tspans = text.querySelectorAll("tspan");
|
||||||
|
|
||||||
// 한 줄 또는 두 줄로 나누기
|
// 한 줄 또는 두 줄로 나누기
|
||||||
const words = chapter.name.split(" ");
|
const words = chapter.name.split(" ");
|
||||||
if (tspans.length >= 2 && words.length >= 3) {
|
if (tspans.length >= 2 && words.length >= 3) {
|
||||||
@@ -3381,7 +3381,7 @@ class PuzzleManager {
|
|||||||
defs.appendChild(FilterFactory.createBoardFilter()); // 보드
|
defs.appendChild(FilterFactory.createBoardFilter()); // 보드
|
||||||
// 3D 효과 필터
|
// 3D 효과 필터
|
||||||
defs.appendChild(FilterFactory.createPieceEmbossingFilter());
|
defs.appendChild(FilterFactory.createPieceEmbossingFilter());
|
||||||
|
|
||||||
FilterFactory.createPlayButtonFilters().forEach((filter) => {
|
FilterFactory.createPlayButtonFilters().forEach((filter) => {
|
||||||
defs.appendChild(filter);
|
defs.appendChild(filter);
|
||||||
});
|
});
|
||||||
@@ -3517,16 +3517,16 @@ class PuzzleManager {
|
|||||||
const progress = this.chapterManager.getChapterProgress(
|
const progress = this.chapterManager.getChapterProgress(
|
||||||
chapterInfo.chapterIndex
|
chapterInfo.chapterIndex
|
||||||
);
|
);
|
||||||
|
|
||||||
// 완료 상태 확인
|
// 완료 상태 확인
|
||||||
const isCompleted = this.chapterManager.isChapterCompleted(
|
const isCompleted = this.chapterManager.isChapterCompleted(
|
||||||
chapterInfo.chapterIndex
|
chapterInfo.chapterIndex
|
||||||
);
|
);
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
`[PuzzleManager] 게이지 업데이트: piece=${pieceId}, progress=${progress}%, completed=${isCompleted}`
|
`[PuzzleManager] 게이지 업데이트: piece=${pieceId}, progress=${progress}%, completed=${isCompleted}`
|
||||||
);
|
);
|
||||||
|
|
||||||
GaugeManager.updateGauge(pieceId, progress, isCompleted);
|
GaugeManager.updateGauge(pieceId, progress, isCompleted);
|
||||||
|
|
||||||
// 챕터가 완료되면 퍼즐 조각 완료 표시
|
// 챕터가 완료되면 퍼즐 조각 완료 표시
|
||||||
@@ -3567,14 +3567,14 @@ class PuzzleManager {
|
|||||||
|
|
||||||
_handleAllComplete() {
|
_handleAllComplete() {
|
||||||
this._showCompletionAnimation();
|
this._showCompletionAnimation();
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this._showRibbonAnimation();
|
this._showRibbonAnimation();
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.boardElement.classList.add("all-completed");
|
this.boardElement.classList.add("all-completed");
|
||||||
|
|
||||||
// ✅ 경계선 숨기기
|
// ✅ 경계선 숨기기
|
||||||
const boundaries = this.svg.querySelector("#puzzleBoundaries");
|
const boundaries = this.svg.querySelector("#puzzleBoundaries");
|
||||||
if (boundaries) {
|
if (boundaries) {
|
||||||
@@ -3606,7 +3606,7 @@ class PuzzleManager {
|
|||||||
const ribbonHeightInSVG = ribbonWidthInSVG / ribbonAspectRatio;
|
const ribbonHeightInSVG = ribbonWidthInSVG / ribbonAspectRatio;
|
||||||
|
|
||||||
try {
|
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 svgText = await response.text();
|
||||||
|
|
||||||
const ribbonContainer = document.createElement("div");
|
const ribbonContainer = document.createElement("div");
|
||||||
@@ -3801,7 +3801,7 @@ class PuzzleManager {
|
|||||||
// 페이드 아웃 애니메이션
|
// 페이드 아웃 애니메이션
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
animationContainer.style.animation = 'completionFadeOut 0.5s ease forwards';
|
animationContainer.style.animation = 'completionFadeOut 0.5s ease forwards';
|
||||||
|
|
||||||
// 페이드 아웃 애니메이션 스타일 추가
|
// 페이드 아웃 애니메이션 스타일 추가
|
||||||
if (!document.getElementById('completion-fadeout-styles')) {
|
if (!document.getElementById('completion-fadeout-styles')) {
|
||||||
const fadeOutStyle = document.createElement('style');
|
const fadeOutStyle = document.createElement('style');
|
||||||
@@ -3824,14 +3824,14 @@ class PuzzleManager {
|
|||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
animationContainer.remove();
|
animationContainer.remove();
|
||||||
|
|
||||||
// ✅ 애니메이션 후 Finish Image 표시
|
// ✅ 애니메이션 후 Finish Image 표시
|
||||||
console.log('[PuzzleManager] 애니메이션 종료 - showFinish 호출 시작');
|
console.log('[PuzzleManager] 애니메이션 종료 - showFinish 호출 시작');
|
||||||
this.pieces.forEach((piece) => {
|
this.pieces.forEach((piece) => {
|
||||||
piece.showFinish();
|
piece.showFinish();
|
||||||
});
|
});
|
||||||
console.log('[PuzzleManager] 애니메이션 종료 - showFinish 호출 완료');
|
console.log('[PuzzleManager] 애니메이션 종료 - showFinish 호출 완료');
|
||||||
|
|
||||||
// ✅ 애니메이션 종료 시 문구 변경
|
// ✅ 애니메이션 종료 시 문구 변경
|
||||||
this._showCelebrationEnd();
|
this._showCelebrationEnd();
|
||||||
}, 3500);
|
}, 3500);
|
||||||
@@ -3873,7 +3873,7 @@ class PuzzleManager {
|
|||||||
|
|
||||||
_initializeCompletedPieces() {
|
_initializeCompletedPieces() {
|
||||||
console.log('[PuzzleManager] 완료 상태 초기화 시작');
|
console.log('[PuzzleManager] 완료 상태 초기화 시작');
|
||||||
|
|
||||||
// 각 챕터의 완료 상태 확인
|
// 각 챕터의 완료 상태 확인
|
||||||
this.chapterManager.chapters.forEach((chapter, chapterIndex) => {
|
this.chapterManager.chapters.forEach((chapter, chapterIndex) => {
|
||||||
if (!chapter.pieceId) {
|
if (!chapter.pieceId) {
|
||||||
@@ -3978,13 +3978,13 @@ function initializePuzzleOnboarding() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const puzzleManager = new PuzzleManager("puzzleBoard", chapterData, dependencies);
|
const puzzleManager = new PuzzleManager("puzzleBoard", chapterData, dependencies);
|
||||||
|
|
||||||
if (puzzleManager && puzzleManager.initialize) {
|
if (puzzleManager && puzzleManager.initialize) {
|
||||||
puzzleManager.initialize();
|
puzzleManager.initialize();
|
||||||
} else {
|
} else {
|
||||||
console.error('[PuzzleOnboarding] PuzzleManager 초기화 실패');
|
console.error('[PuzzleOnboarding] PuzzleManager 초기화 실패');
|
||||||
}
|
}
|
||||||
|
|
||||||
initializeOverlay();
|
initializeOverlay();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
const errorHandler = typeof ErrorHandler !== 'undefined' ? ErrorHandler : null;
|
const errorHandler = typeof ErrorHandler !== 'undefined' ? ErrorHandler : null;
|
||||||
|
|||||||
@@ -11,6 +11,9 @@
|
|||||||
type="image/svg+xml"
|
type="image/svg+xml"
|
||||||
href="/img/_favicon.svg"
|
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" />
|
<link rel="stylesheet" type="text/css" href="/css/lib/swiper11.min.css" />
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user