Repository: Ovilia/biangua
Branch: master
Commit: 225c280f7ac1
Files: 6
Total size: 32.6 KB

Directory structure:
gitextract_e_4nhn62/

├── README.md
├── css/
│   ├── styles.css
│   └── styles.less
├── gua.json
├── index.html
└── js/
    └── index.js

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
变卦·易经64卦
=======

http://zhangwenli.com/biangua


================================================
FILE: css/styles.css
================================================
*{box-sizing:border-box;margin:0;padding:0}html{width:100%;height:100%}body{background-color:#468e8d;width:100%;height:100%;overflow:hidden;font-family:'微软雅黑';font-size:18px;padding:16px}p{margin:8px 0}#back-title{position:absolute;bottom:-72px;right:0;font-size:600px;color:#66a09f;cursor:default;transition-duration:1s}#back-title.unhover{opacity:.25}#page-title{color:#66a09f;cursor:default;transition-duration:.5s;display:inline-block;z-index:10;position:relative}#page-title a{color:#66a09f;transition-duration:1s}#page-title:hover{color:#efefef}#page-title:hover a{color:#efefef}#page-title:hover a:hover{color:#105150}#page-title:hover .social{opacity:1}#page-title:hover #page-title-more{display:block}.social{background:url('../../blog/img/social.png');background-color:#66a09f;width:40px;height:40px;transition:1s;display:inline-block;margin-right:3px;border-bottom:none;border-radius:20px;opacity:.25}.social:hover{background-color:#105150;border-radius:0}.social-twitter{background-position:0 0}.social-facebook{background-position:-40px 0}.social-google{background-position:-80px 0}.social-linkedin{background-position:-120px 0}.social-weibo{background-position:-160px 0}.social-digg{background-position:0 40px}.social-douban{background-position:-40px 40px}.social-reddit{background-position:-80px 40px}.social-stumble{background-position:-120px 40px}.social-github{background-position:-160px 40px}#page-title-more{display:none;font-size:12px}#gua-title{position:absolute;left:16px;bottom:16px;font-size:60px;color:#105150;cursor:default;transition-duration:.5s}#gua-title #gua-detail{color:#105150;font-size:18px;transition-duration:.5s}#gua-title:hover{color:#efefef}#gua-title:hover #gua-detail{color:#efefef}#gua{width:300px;height:360px;position:absolute;top:50%;left:50%;margin-top:-180px;margin-left:-150px}#gua .yao-split{margin-bottom:40px}#gua .yao{height:40px;background-color:#efefef;cursor:pointer;transition-duration:1s}#gua .yao.yao-mg{margin:20px 0}#gua .yao.unhover{background:#66a09f}#gua .yao.unhover .yang{background:#66a09f}#gua .yao .yinyang{transition-duration:1s;position:relative;left:50%;margin-left:-6px;width:12px;height:40px}#gua .yao .yang{background-color:#efefef}#gua .yao .yin{background-color:#468e8d}#yao-detail{display:none;position:absolute;left:50%;right:16px;margin-left:170px;min-height:40px;color:#efefef;padding:4px 0}

================================================
FILE: css/styles.less
================================================
@clr-primary: #468e8d;
@clr-light: #66a09f;
@clr-lightest: #efefef;
@clr-dark: #105150;

@body-pd: 16px;
@font-sz: 18px;
@yao-w: 300px;
@yao-h: 40px;
@yao-mg: 20px;
@gua-half-h: @yao-h * 3 + @yao-mg * 2;
@gua-half-mg: 40px;
@gua-h: @gua-half-h * 2 + @gua-half-mg;
@yin-w: 12px;
@gua-detail-mg: 20px;

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    background-color: @clr-primary;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: '微软雅黑';
    font-size: @font-sz;
    padding: @body-pd;
}

p {
    margin: 8px 0;
}

#back-title {
    position: absolute;
    bottom: -72px;
    right: 0;
    font-size: 600px;
    color: @clr-light;
    cursor: default;
    transition-duration: 1s;
    
    &.unhover {
        opacity: 0.25;
    }
}

#page-title {
    color: @clr-light;
    cursor: default;
    transition-duration: 0.5s;
    display: inline-block;
    z-index: 10;
    position: relative;
    
    a {
        color: @clr-light;
        transition-duration: 1s;
    }
    
    &:hover {
        color: @clr-lightest;
        
        a {
            color: @clr-lightest;
            
            &:hover {
                color: @clr-dark;
            }
        }
        
        .social {
            opacity: 1;
        }
        
        #page-title-more {
            display: block;
        }
    }
}

.social {
    background: url('../../blog/img/social.png');
    background-color: @clr-light;
    width: 40px;
    height: 40px;
    transition: 1s;
    display: inline-block;
    margin-right: 3px;
    border-bottom: none;
    border-radius: 20px;
    opacity: 0.25;
    
    &:hover {
        background-color: @clr-dark;
        border-radius: 0;
    }
}

.social-twitter {
    background-position: 0 0;
}

.social-facebook {
    background-position: -40px 0;
}

.social-google {
    background-position: -80px 0;
}

.social-linkedin {
    background-position: -120px 0;
}

.social-weibo {
    background-position: -160px 0;
}

.social-digg {
    background-position: 0 40px;
}

.social-douban {
    background-position: -40px 40px;
}

.social-reddit {
    background-position: -80px 40px;
}

.social-stumble {
    background-position: -120px 40px;
}

.social-github {
    background-position: -160px 40px;
}

#page-title-more {
    display: none;
    font-size: 12px;
}

#gua-title {
    position: absolute;
    left: @body-pd;
    bottom: @body-pd;
    
    font-size: 60px;
    color: @clr-dark;
    cursor: default;
    transition-duration: 0.5s;
    
    #gua-detail {
        color: @clr-dark;
        font-size: @font-sz;
        transition-duration: 0.5s;
    }
    
    &:hover {
        color: @clr-lightest;
        
        #gua-detail {
            color: @clr-lightest;
        }
    }
}

#gua {
    width: @yao-w;
    height: @gua-h;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -@gua-h / 2;
    margin-left: -@yao-w / 2;
    
    .yao-split {
        margin-bottom: @gua-half-mg;
    }
    
    .yao {
        height: @yao-h;
        background-color: @clr-lightest;
        cursor: pointer;
        transition-duration: 1s;
        
        &.yao-mg {
            margin: @yao-mg 0;
        }
        
        &.unhover {
            background: @clr-light;
            
            .yang {
                background: @clr-light;
            }
        }
        
        .yinyang {
            transition-duration: 1s;
            position: relative;
            left: 50%;
            margin-left: -@yin-w / 2;
            width: @yin-w;
            height: @yao-h;
        }
        
        .yang {
            background-color: @clr-lightest;
        }
        
        .yin {
            background-color: @clr-primary;
        }
    }
}

#yao-detail {
    display: none;
    position: absolute;
    left: 50%;
    right: @body-pd;
    margin-left: @yao-w / 2 + @gua-detail-mg;
    min-height: @yao-h;
    color: @clr-lightest;
    padding: 4px 0;
}


================================================
FILE: gua.json
================================================
{
    "gua": [{
        "gua-name": "乾",
        "gua-xiang": "111111",
        "gua-detail": "元亨，利贞。",
        "yao-detail": [
            "潜龙，勿用。",
            "见龙在田，利见大人。",
            "君子终日乾乾，夕惕若，厉，无咎。",
            "或跃在渊，无咎。",
            "飞龙在天，利见大人。",
            "亢龙有悔。"
        ]
    }, {
        "gua-name": "坤",
        "gua-xiang": "000000",
        "gua-detail": "元亨，利牝马之贞。君子有攸往，先迷后得主，利西南得朋，东北丧朋。安贞，吉。",
        "yao-detail": [
            "履霜，坚冰至。",
            "直，方，大，不习无不利。",
            "含章可贞。或从王事，无成有终。",
            "括囊；无咎，无誉。",
            "黄裳，元吉。",
            "龙战于野，其血玄黄。"
        ]
    }, {
        "gua-name": "屯",
        "gua-xiang": "100010",
        "gua-detail": "元亨，利贞，勿用有攸往，利建侯。",
        "yao-detail": [
            "磐桓；利居贞，利建侯。",
            "屯如邅如，乘马班如。匪寇婚媾，女子贞不字，十年乃字。",
            "即鹿无虞，惟入于林中，君子几不如舍，往吝。",
            "乘马班如，求婚媾，往吉，无不利。",
            "屯其膏，小贞吉，大贞凶。",
            "乘马班如，泣血涟如。"
        ]
    }, {
        "gua-name": "蒙",
        "gua-xiang": "010001",
        "gua-detail": "亨。匪我求童蒙，童蒙求我。初筮告，再三渎，渎则不告。利贞。",
        "yao-detail": [
            "发蒙，利用刑人，用说桎梏，以往吝。",
            "包蒙吉；纳妇吉；子克家。",
            "勿用取女；见金夫，不有躬，无攸利。",
            "困蒙，吝。",
            "童蒙，吉。",
            "击蒙；不利为寇，利御寇。"
        ]
    }, {
        "gua-name": "需",
        "gua-xiang": "111010",
        "gua-detail": "有孚，光亨，贞吉。利涉大川。",
        "yao-detail": [
            "需于郊。利用恒，无咎。",
            "需于沙。小有言，终吉。",
            "需于泥，致寇至。",
            "需于血，出自穴。",
            "需于酒食，贞吉。",
            "入于穴，有不速之客三人来，敬之终吉。"
        ]
    }, {
        "gua-name": "讼",
        "gua-xiang": "010111",
        "gua-detail": "有孚，窒。惕中吉。终凶。利见大人，不利涉大川。",
        "yao-detail": [
            "不永所事，小有言，终吉。",
            "不克讼，归而逋，其邑人三百户，无眚。",
            "食旧德，贞厉，终吉，或从王事，无成。",
            "不克讼，复即命渝，安贞吉。",
            "讼元吉。",
            "或锡之鞶带，终朝三褫之。"
        ]
    }, {
        "gua-name": "师",
        "gua-xiang": "010000",
        "gua-detail": "贞，丈人，吉无咎。",
        "yao-detail": [
            "师出以律，否臧凶。",
            "在师中吉，无咎，王三锡命。",
            "师或舆尸，凶。",
            "师左次，无咎。",
            "田有禽，利执言，无咎。长子帅师，弟子舆尸，贞凶。",
            "大君有命，开国承家，小人勿用。"
        ]
    }, {
        "gua-name": "比",
        "gua-xiang": "000010",
        "gua-detail": "吉。原筮元永贞，无咎。不宁方来，后夫凶。",
        "yao-detail": [
            "有孚，比之，无咎。有孚盈缶，终来有它吉。",
            "比之自内，贞吉。",
            "比之匪人。",
            "外比之，贞吉。",
            "显比，王用三驱，失前禽。邑人不诫，吉。",
            "比之无首，凶。"
        ]
    }, {
        "gua-name": "小畜",
        "gua-xiang": "111011",
        "gua-detail": "亨。密云不雨，自我西郊。",
        "yao-detail": [
            "复自道，何其咎，吉。",
            "牵复，吉。",
            "舆说辐，夫妻反目。",
            "有孚，血去惕出，无咎。",
            "有孚挛如，富以其邻。",
            "既雨既处，尚德载，妇贞厉。月几望，君子征凶。"
        ]
    }, {
        "gua-name": "履",
        "gua-xiang": "110111",
        "gua-detail": "履虎尾，不咥人，亨。",
        "yao-detail": [
            "素履，往无咎。",
            "履道坦坦，幽人贞吉。",
            "眇能视，跛能履，履虎尾，咥人，凶。武人为于大君。",
            "履虎尾，诉诉，终吉。",
            "夬履，贞厉。",
            "视履考祥，其旋元吉。"
        ]
    }, {
        "gua-name": "泰",
        "gua-xiang": "111000",
        "gua-detail": "小往大来，吉亨。",
        "yao-detail": [
            "拔茅茹，以其汇，征吉。",
            "包荒，用冯河，不遐遗，朋亡，得尚于中行。",
            "无平不陂，无往不复，艰贞无咎。勿恤其孚，于食有福。",
            "翩翩，不富，以其邻，不戒以孚。",
            "帝乙归妹，以祉元吉。",
            "城复于隍，勿用师。自邑告命，贞吝。"
        ]
    }, {
        "gua-name": "否",
        "gua-xiang": "000111",
        "gua-detail": "否之匪人，不利君子贞，大往小来。",
        "yao-detail": [
            "拔茅茹，以其汇，贞吉亨。",
            "包承。小人吉，大人否，亨。",
            "包羞。",
            "有命，无咎，畴离祉。",
            "休否，大人吉。其亡其亡，系于苞桑。",
            "倾否，先否后喜。"
        ]
    }, {
        "gua-name": "同人",
        "gua-xiang": "101111",
        "gua-detail": "同人于野，亨。利涉大川，利君子贞。",
        "yao-detail": [
            "同人于门，无咎。",
            "同人于宗，吝。",
            "伏戎于莽，升其高陵，三岁不兴。",
            "乘其墉，弗克攻，吉。",
            "同人，先号啕而后笑。大师克相遇。",
            "同人于郊，无悔。"
        ]
    }, {
        "gua-name": "大有",
        "gua-xiang": "111101",
        "gua-detail": "元亨。",
        "yao-detail": [
            "无交害，匪咎，艰则无咎。",
            "大车以载，有攸往，无咎。",
            "公用亨于天子，小人弗克。",
            "匪其彭，无咎。",
            "厥孚交如，威如；吉。",
            "自天佑之，吉无不利。"
        ]
    }, {
        "gua-name": "谦",
        "gua-xiang": "001000",
        "gua-detail": "亨，君子有终。",
        "yao-detail": [
            "谦谦君子，用涉大川，吉。",
            "鸣谦，贞吉。",
            "劳谦，君子有终，吉。",
            "无不利，撝谦。",
            "不富，以其邻，利用侵伐，无不利。",
            "鸣谦，利用行师，征邑国。"
        ]
    }, {
        "gua-name": "豫",
        "gua-xiang": "000100",
        "gua-detail": "利建侯，行师。",
        "yao-detail": [
            "鸣豫，凶。",
            "介于石，不终日，贞吉。",
            "盱豫，悔。迟有悔。",
            "由豫，大有得。勿疑。朋盍簪。",
            "贞疾，恒不死。",
            "冥豫，成有渝，无咎。"
        ]
    }, {
        "gua-name": "随",
        "gua-xiang": "100110",
        "gua-detail": "元亨利贞，无咎。",
        "yao-detail": [
            "官有渝，贞吉。出门交有功。",
            "系小子，失丈夫。",
            "系丈夫，失小子。随有求得，利居贞。",
            "随有获，贞凶。有孚在道，以明，何咎。",
            "孚于嘉，吉。",
            "拘系之，乃从维之。王用亨于西山。"
        ]
    }, {
        "gua-name": "蛊",
        "gua-xiang": "011001",
        "gua-detail": "元亨，利涉大川。先甲三日，后甲三日。",
        "yao-detail": [
            "干父之蛊，有子，考无咎，厉终吉。",
            "干母之蛊，不可贞。",
            "干父之蛊，小有悔，无大咎。",
            "裕父之蛊，往见吝。",
            "干父之蛊，用誉。",
            "不事王侯，高尚其事。"
        ]
    }, {
        "gua-name": "临",
        "gua-xiang": "110000",
        "gua-detail": "元，亨，利，贞。至于八月有凶。",
        "yao-detail": [
            "咸临，贞吉。",
            "咸临，吉无不利。",
            "甘临，无攸利。既忧之，无咎。",
            "至临，无咎。",
            "知临，大君之宜，吉。",
            "敦临，吉无咎。"
        ]
    }, {
        "gua-name": "观",
        "gua-xiang": "000011",
        "gua-detail": "盥而不荐，有孚顒若。",
        "yao-detail": [
            "童观，小人无咎，君子吝。",
            "闚观，利女贞。",
            "观我生，进退。",
            "观国之光，利用宾于王。",
            "观我生，君子无咎。",
            "观其生，君子无咎。"
        ]
    }, {
        "gua-name": "噬嗑",
        "gua-xiang": "100101",
        "gua-detail": "亨。利用狱。",
        "yao-detail": [
            "屦校灭趾，无咎。",
            "噬肤灭鼻，无咎。",
            "噬腊肉，遇毒；小吝，无咎。",
            "噬乾胏，得金矢，利艰贞，吉。",
            "噬乾肉，得黄金，贞厉，无咎。",
            "何校灭耳，凶。"
        ]
    }, {
        "gua-name": "贲",
        "gua-xiang": "101001",
        "gua-detail": "亨。小利有攸往。",
        "yao-detail": [
            "贲其趾，舍车而徒。",
            "贲其须。",
            "贲如濡如，永贞吉。",
            "贲如皤如，白马翰如，匪寇婚媾。",
            "贲于丘园，束帛戋戋，吝，终吉。",
            "白贲，无咎。"
        ]
    }, {
        "gua-name": "剥",
        "gua-xiang": "000001",
        "gua-detail": "不利有攸往。",
        "yao-detail": [
            "剥床以足，蔑贞凶。",
            "剥床以辨，蔑贞凶。",
            "剥之，无咎。",
            "剥床以肤，凶。",
            "贯鱼，以宫人宠，无不利。",
            "硕果不食，君子得舆，小人剥庐。"
        ]
    }, {
        "gua-name": "复",
        "gua-xiang": "100000",
        "gua-detail": "亨。出入无疾，朋来无咎。反复其道，七日来复，利有攸往。",
        "yao-detail": [
            "不远复，无祗悔，元吉。",
            "休复，吉。",
            "频复，厉无咎。",
            "中行独复。",
            "敦复，无悔。",
            "迷复，凶，有灾眚。用行师，终有大败，以其国君，凶；至于十年，不克征。"
        ]
    }, {
        "gua-name": "无妄",
        "gua-xiang": "100111",
        "gua-detail": "元亨，利贞。其匪正有眚，不利有攸往。",
        "yao-detail": [
            "无妄，往吉。",
            "不耕获，不灾畲，则利有攸往。",
            "无妄之灾，或系之牛，行人之得，邑人之灾。",
            "可贞，无咎。",
            "无妄之疾，勿药有喜。",
            "无妄，行有眚，无攸利。"
        ]
    }, {
        "gua-name": "大畜",
        "gua-xiang": "111001",
        "gua-detail": "利贞，不家食吉，利涉大川。",
        "yao-detail": [
            "有厉利已。",
            "舆说輹。",
            "良马逐，利艰贞。曰闲舆卫，利有攸往。",
            "童牛之牿，元吉。",
            "豶豕之牙，吉。",
            "何天之衢，亨。"
        ]
    }, {
        "gua-name": "颐",
        "gua-xiang": "100001",
        "gua-detail": "贞吉。观颐，自求口实。",
        "yao-detail": [
            "舍尔灵龟，观我朵颐，凶。",
            "颠颐，拂经，于丘颐，征凶。",
            "拂颐，贞凶，十年勿用，无攸利。",
            "颠颐，吉，虎视眈眈，其欲逐逐，无咎。",
            "拂经，居贞吉，不可涉大川。",
            "由颐，厉吉，利涉大川。"
        ]
    }, {
        "gua-name": "大过",
        "gua-xiang": "011110",
        "gua-detail": "栋桡，利有攸往，亨。",
        "yao-detail": [
            "藉用白茅，无咎。",
            "枯杨生稊，老夫得其女妻，无不利。",
            "栋桡，凶。",
            "栋隆，吉；有它吝。",
            "枯杨生华，老妇得士夫，无咎无誉。",
            "过涉灭顶，凶，无咎。"
        ]
    }, {
        "gua-name": "坎",
        "gua-xiang": "010010",
        "gua-detail": "习坎，有孚，维心亨，行有尚。",
        "yao-detail": [
            "习坎，入于坎窞，凶。",
            "坎有险，求小得。",
            "来之坎坎，险且枕，入于坎窞，勿用。",
            "樽酒簋贰，用缶，纳约自牖，终无咎。",
            "坎不盈，祗既平，无咎。",
            "系用徽纆，置于丛棘，三岁不得，凶。"
        ]
    }, {
        "gua-name": "离",
        "gua-xiang": "101101",
        "gua-detail": "利贞，亨。畜牝牛，吉。",
        "yao-detail": [
            "履错然，敬之无咎。",
            "黄离，元吉。",
            "日昃之离，不鼓缶而歌，则大耋之嗟，凶。",
            "突如其来如，焚如，死如，弃如。",
            "出涕沱若，戚嗟若，吉。",
            "王用出征，有嘉折首，获匪其丑，无咎。"
        ]
    }, {
        "gua-name": "咸",
        "gua-xiang": "001110",
        "gua-detail": "咸，亨，利贞，取女吉。",
        "yao-detail": [
            "咸其拇。",
            "咸其腓，凶，居吉。",
            "咸其股，执其随，往吝。",
            "贞吉，悔亡，憧憧往来，朋从尔思。",
            "咸其脢，无悔。",
            "咸其辅颊舌。"
        ]
    }, {
        "gua-name": "恒",
        "gua-xiang": "011100",
        "gua-detail": "亨，无咎，利贞，利有攸往。",
        "yao-detail": [
            "浚恒，贞凶，无攸利。",
            "悔亡。",
            "不恒其德，或承之羞，贞吝。",
            "田无禽。",
            "恒其德，贞，妇人吉，夫子凶。",
            "振恒，凶。"
        ]
    }, {
        "gua-name": "遁",
        "gua-xiang": "001111",
        "gua-detail": "亨，小利贞。",
        "yao-detail": [
            "遯尾，厉，勿用有攸往。",
            "执之用黄牛之革，莫之胜说。",
            "系遯，有疾厉，畜臣妾吉。",
            "好遯，君子吉，小人否。",
            "嘉遯，贞吉。",
            "肥遯，无不利。"
        ]
    }, {
        "gua-name": "大壮",
        "gua-xiang": "111100",
        "gua-detail": "利贞。",
        "yao-detail": [
            "壮于趾，征凶，有孚。",
            "贞吉。",
            "小人用壮，君子用罔，贞厉。羝羊触藩，羸其角。",
            "贞吉悔亡，藩决不羸，壮于大舆之輹。",
            "丧羊于易，无悔。",
            "羝羊触藩，不能退，不能遂，无攸利，艰则吉。"
        ]
    }, {
        "gua-name": "晋",
        "gua-xiang": "000101",
        "gua-detail": "康侯用锡马蕃庶，昼日三接。",
        "yao-detail": [
            "晋如，摧如，贞吉。罔孚，裕无咎。",
            "晋如，愁如，贞吉。受兹介福，于其王母。",
            "众允，悔亡。",
            "晋如硕鼠，贞厉。",
            "悔亡，失得勿恤，往吉，无不利。",
            "晋其角，维用伐邑，厉吉无咎，贞吝。"
        ]
    }, {
        "gua-name": "明夷",
        "gua-xiang": "101000",
        "gua-detail": "利艰贞。",
        "yao-detail": [
            "明夷于飞，垂其翼。君子于行，三日不食，有攸往，主人有言。",
            "明夷，夷于左股，用拯马壮，吉。",
            "明夷于南狩，得其大首，不可疾贞。",
            "入于左腹，获明夷之心，出于门庭。",
            "箕子之明夷，利贞。",
            "不明晦，初登于天，后入于地。"
        ]
    }, {
        "gua-name": "家人",
        "gua-xiang": "101011",
        "gua-detail": "利女贞。",
        "yao-detail": [
            "闲有家，悔亡。",
            "无攸遂，在中馈，贞吉。",
            "家人嗃嗃，悔厉吉；妇子嘻嘻，终吝。",
            "富家，大吉。",
            "王假有家，勿恤，往吉。",
            "有孚威如，终吉。"
        ]
    }, {
        "gua-name": "睽",
        "gua-xiang": "110101",
        "gua-detail": "小事吉。",
        "yao-detail": [
            "悔亡，丧马勿逐，自复；见恶人无咎。",
            "遇主于巷，无咎。",
            "见舆曳，其牛掣，其人天且劓，无初有终。",
            "睽孤，遇元夫，交孚，厉无咎。",
            "悔亡，厥宗噬肤，往何咎。",
            "睽孤，见豕负涂，载鬼一车，先张之弧，后说之弧，匪寇婚媾，往遇雨则吉。"
        ]
    }, {
        "gua-name": "蹇",
        "gua-xiang": "001010",
        "gua-detail": "利西南，不利东北；利见大人，贞吉。",
        "yao-detail": [
            "往蹇，来誉。",
            "王臣蹇蹇，匪躬之故。",
            "往蹇来反。",
            "往蹇来连。",
            "大蹇朋来。",
            "往蹇来硕，吉；利见大人。"
        ]
    }, {
        "gua-name": "解",
        "gua-xiang": "010100",
        "gua-detail": "利西南，无所往，其来复吉。有攸往，夙吉。",
        "yao-detail": [
            "无咎。",
            "田获三狐，得黄矢，贞吉。",
            "负且乘，致寇至，贞吝。",
            "解而拇，朋至斯孚。",
            "君子维有解，吉；有孚于小人。",
            "公用射隼于高墉之上，获之，无不利。"
        ]
    }, {
        "gua-name": "损",
        "gua-xiang": "110001",
        "gua-detail": "损：有孚，元吉，无咎，可贞，利有攸往。曷之用，二簋可用享。",
        "yao-detail": [
            "巳事遄往，无咎，酌损之。",
            "利贞，征凶，弗损，益之。",
            "三人行，则损一人；一人行，则得其友。",
            "损其疾，使遄有喜，无咎。",
            "或益之，十朋之龟弗克违，元吉。",
            "弗损益之，无咎，贞吉，有攸往，得臣无家。"
        ]
    }, {
        "gua-name": "益",
        "gua-xiang": "100011",
        "gua-detail": "利有攸往，利涉大川。",
        "yao-detail": [
            "利用为大作，元吉，无咎。",
            "或益之，十朋之龟弗克违，永贞吉。王用享于帝，吉。",
            "益之用凶事，无咎。有孚中行，告公用圭。",
            "中行，告公从。利用为依迁国。",
            "有孚惠心，勿问元吉。有孚惠我德。",
            "莫益之，或击之，立心勿恒，凶。"
        ]
    }, {
        "gua-name": "夬",
        "gua-xiang": "111110",
        "gua-detail": "扬于王庭，孚号，有厉，告自邑，不利即戎，利有攸往。",
        "yao-detail": [
            "壮于前趾，往不胜为咎。",
            "惕号，莫夜有戎，勿恤。",
            "壮于頄，有凶。君子夬夬，独行，遇雨，若濡，有愠，无咎。",
            "臀无肤，其行次且。牵羊悔亡，闻言不信。",
            "苋陆夬夬，中行无咎。",
            "无号，终有凶。"
        ]
    }, {
        "gua-name": "姤",
        "gua-xiang": "011111",
        "gua-detail": "女壮，勿用取女。",
        "yao-detail": [
            "系于金柅，贞吉，有攸往，见凶，羸豕孚蹢躅。",
            "包有鱼，无咎，不利宾。",
            "臀无肤，其行次且，厉，无大咎。",
            "包无鱼，起凶。",
            "以杞包瓜，含章，有陨自天。",
            "姤其角，吝，无咎。"
        ]
    }, {
        "gua-name": "萃",
        "gua-xiang": "000110",
        "gua-detail": "亨。王假有庙，利见大人，亨，利贞。用大牲吉，利有攸往。",
        "yao-detail": [
            "有孚不终，乃乱乃萃，若号一握为笑，勿恤，往无咎。",
            "引吉，无咎，孚乃利用禴。",
            "萃如，嗟如，无攸利，往无咎，小吝。",
            "大吉，无咎。",
            "萃有位，无咎。匪孚，元永贞，悔亡。",
            "赍咨涕洟，无咎。"
        ]
    }, {
        "gua-name": "升",
        "gua-xiang": "011000",
        "gua-detail": "元亨，用见大人，勿恤，南征吉。",
        "yao-detail": [
            "允升，大吉。",
            "孚乃利用禴，无咎。",
            "升虚邑。",
            "王用亨于岐山，吉无咎。",
            "贞吉，升阶。",
            "冥升，利于不息之贞。"
        ]
    }, {
        "gua-name": "困",
        "gua-xiang": "010110",
        "gua-detail": "亨，贞，大人吉，无咎，有言不信。",
        "yao-detail": [
            "臀困于株木，入于幽谷，三岁不觌。",
            "困于酒食，朱绂方来，利用享祀，征凶，无咎。",
            "困于石，据于蒺蔾，入于其宫，不见其妻，凶。",
            "来徐徐，困于金车，吝，有终。",
            "劓刖，困于赤绂，乃徐有说，利用祭祀。",
            "困于葛藟，于臲卼，曰动悔。有悔，征吉。"
        ]
    }, {
        "gua-name": "井",
        "gua-xiang": "011010",
        "gua-detail": "改邑不改井，无丧无得，往来井井。汔至，亦未繘井，羸其瓶，凶。",
        "yao-detail": [
            "井泥不食，旧井无禽。",
            "井谷射鲋，瓮敝漏。",
            "井渫不食，为我心恻，可用汲，王明，并受其福。",
            "井甃，无咎。",
            "井冽，寒泉食。",
            "井收勿幕，有孚元吉。"
        ]
    }, {
        "gua-name": "革",
        "gua-xiang": "101110",
        "gua-detail": "巳日乃孚，元亨利贞，悔亡。",
        "yao-detail": [
            "巩用黄牛之革。",
            "巳日乃革之，征吉，无咎。",
            "征凶，贞厉，革言三就，有孚。",
            "悔亡，有孚改命，吉。",
            "大人虎变，未占有孚。",
            "君子豹变，小人革面，征凶，居贞吉。"
        ]
    }, {
        "gua-name": "鼎",
        "gua-xiang": "011101",
        "gua-detail": "元吉，亨。",
        "yao-detail": [
            "鼎颠趾，利出否，得妾以其子，无咎。",
            "鼎有实，我仇有疾，不我能即，吉。",
            "鼎耳革，其行塞，雉膏不食，方雨亏悔，终吉。",
            "鼎折足，覆公餗，其形渥，凶。",
            "鼎黄耳，金铉，利贞。",
            "鼎玉铉，大吉，无不利。"
        ]
    }, {
        "gua-name": "震",
        "gua-xiang": "100100",
        "gua-detail": "亨。震来虩虩，笑言哑哑。震惊百里，不丧匕鬯。",
        "yao-detail": [
            "震来虩虩，后笑言哑哑，吉",
            "震来厉，亿丧贝，跻于九陵，勿逐，七日得。",
            "震苏苏，震行无眚。",
            "震遂泥。",
            "震往来厉，亿无丧，有事。",
            "震索索，视矍矍，征凶。震不于其躬，于其邻，无咎。婚媾有言。"
        ]
    }, {
        "gua-name": "艮",
        "gua-xiang": "001001",
        "gua-detail": "艮其背，不获其身，行其庭，不见其人，无咎。",
        "yao-detail": [
            "艮其趾，无咎，利永贞。",
            "艮其腓，不拯其随，其心不快。",
            "艮其限，列其夤，厉薰心。",
            "艮其身，无咎。",
            "艮其辅，言有序，悔亡。",
            "敦艮，吉。"
        ]
    }, {
        "gua-name": "渐",
        "gua-xiang": "001011",
        "gua-detail": "女归吉，利贞。",
        "yao-detail": [
            "鸿渐于干，小子厉，有言，无咎。",
            "鸿渐于磐，饮食衎衎，吉。",
            "鸿渐于陆，夫征不复，妇孕不育，凶；利御寇。",
            "鸿渐于木，或得其桷，无咎。",
            "鸿渐于陵，妇三岁不孕，终莫之胜，吉。",
            "鸿渐于陆，其羽可用为仪，吉。"
        ]
    }, {
        "gua-name": "归妹",
        "gua-xiang": "110100",
        "gua-detail": "征凶，无攸利。",
        "yao-detail": [
            "归妹以娣，跛能履，征吉。",
            "眇能视，利幽人之贞。",
            "归妹以须，反归以娣。",
            "归妹愆期，迟归有时。",
            "帝乙归妹，其君之袂，不如其娣之袂良，月几望，吉。",
            "女承筐无实，士刲羊无血，无攸利。"
        ]
    }, {
        "gua-name": "丰",
        "gua-xiang": "101100",
        "gua-detail": "亨，王假之，勿忧，宜日中。",
        "yao-detail": [
            "遇其配主，虽旬无咎，往有尚。",
            "丰其蔀，日中见斗，往得疑疾，有孚发若，吉。",
            "丰其沛，日中见沬，折其右肱，无咎。",
            "丰其蔀，日中见斗，遇其夷主，吉。",
            "来章，有庆誉，吉。",
            "丰其屋，蔀其家，闚其户，阒其无人，三岁不觌，凶。"
        ]
    }, {
        "gua-name": "旅",
        "gua-xiang": "001101",
        "gua-detail": "小亨，旅贞吉。",
        "yao-detail": [
            "旅琐琐，斯其所取灾。",
            "旅即次，怀其资，得童仆贞。",
            "旅焚其次，丧其童仆，贞厉。",
            "旅于处，得其资斧，我心不快。",
            "射雉一矢亡，终以誉命。",
            "鸟焚其巢，旅人先笑后号啕。丧牛于易，凶。"
        ]
    }, {
        "gua-name": "巽",
        "gua-xiang": "011011",
        "gua-detail": "小亨，利攸往，利见大人。",
        "yao-detail": [
            "进退，利武人之贞。",
            "巽在床下，用史巫纷若，吉，无咎。",
            "频巽，吝。",
            "悔亡，田获三品。",
            "贞吉悔亡，无不利。无初有终，先庚三日，后庚三日，吉。",
            "巽在床下，丧其资斧，贞凶。"
        ]
    }, {
        "gua-name": "兑",
        "gua-xiang": "110110",
        "gua-detail": "亨，利贞。",
        "yao-detail": [
            "和兑，吉。",
            "孚兑，吉，悔亡。",
            "来兑，凶。",
            "商兑，未宁，介疾有喜。",
            "孚于剥，有厉。",
            "引兑。"
        ]
    }, {
        "gua-name": "涣",
        "gua-xiang": "010011",
        "gua-detail": "亨。王假有庙，利涉大川，利贞。",
        "yao-detail": [
            "用拯马壮，吉。",
            "涣奔其机，悔亡。",
            "涣其躬，无悔。",
            "涣其群，元吉。涣有丘，匪夷所思。",
            "涣汗其大号，涣王居，无咎。",
            "涣其血，去逖出，无咎。"
        ]
    }, {
        "gua-name": "节",
        "gua-xiang": "110010",
        "gua-detail": "亨。苦节，不可贞。",
        "yao-detail": [
            "不出户庭，无咎。",
            "不出门庭，凶。",
            "不节若，则嗟若，无咎。",
            "安节，亨。",
            "甘节，吉；往有尚。",
            "苦节，贞凶，悔亡。"
        ]
    }, {
        "gua-name": "中孚",
        "gua-xiang": "110011",
        "gua-detail": "豚鱼吉，利涉大川，利贞。",
        "yao-detail": [
            "虞吉，有它不燕。",
            "鸣鹤在阴，其子和之，我有好爵，吾与尔靡之。",
            "得敌，或鼓或罢，或泣或歌。",
            "月几望，马匹亡，无咎。",
            "有孚挛如，无咎。",
            "翰音登于天，贞凶。"
        ]
    }, {
        "gua-name": "小过",
        "gua-xiang": "001100",
        "gua-detail": "亨，利贞，可小事，不可大事。飞鸟遗之音，不宜上，宜下，大吉。",
        "yao-detail": [
            "飞鸟以凶。",
            "过其祖，遇其妣；不及其君，遇其臣；无咎。",
            "弗过防之，从或戕之，凶。",
            "无咎，弗过遇之。往厉必戒，勿用永贞。",
            "密云不雨，自我西郊，公弋取彼在穴。",
            "弗遇过之，飞鸟离之，凶，是谓灾眚。"
        ]
    }, {
        "gua-name": "既济",
        "gua-xiang": "101010",
        "gua-detail": "亨，小利贞，初吉终乱。",
        "yao-detail": [
            "曳其轮，濡其尾，无咎。",
            "妇丧其茀，勿逐，七日得。",
            "高宗伐鬼方，三年克之，小人勿用。",
            "繻有衣袽，终日戒。",
            "东邻杀牛，不如西邻之禴祭，实受其福。",
            "濡其首，厉。"
        ]
    }, {
        "gua-name": "未济",
        "gua-xiang": "010101",
        "gua-detail": "亨，小狐汔济，濡其尾，无攸利。",
        "yao-detail": [
            "濡其尾，吝。",
            "曳其轮，贞吉。",
            "未济，征凶，利涉大川。",
            "贞吉，悔亡，震用伐鬼方，三年有赏于大国。",
            "贞吉，无悔，君子之光，有孚，吉。",
            "有孚于饮酒，无咎，濡其首，有孚失是。"
        ]
    }]
}


================================================
FILE: index.html
================================================
<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-38205696-1']);
            _gaq.push(['_trackPageview']);
            
            (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>
        
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="../blog/img/me.ico" />
        <title>变卦·易经64卦</title>
        
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        
        <script src="../blog/js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="js/index.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="page-title">
            <h2>变卦·易经64卦</h2>
            <p>By <a href="http://zhangwenli.com" target="_blank">Wenli Zhang</a> Twitter: <a href="https://twitter.com/OviliaZhang" target="_blank">@Ovilia</a></p>
            <p>
                <a href="https://twitter.com/intent/tweet?text=Fancy Website with CSS and JavaScript for Chinese 8 Gua&url=http://goo.gl/3S8z8t&original_referer=http://zhangwenli.com/biangua&via=OviliaZhang&hashtags=CSS,JavaScript,webdesign,八卦,易经" class="social social-twitter" target="_blank"></a>
                <a href="https://www.facebook.com/sharer/sharer.php?t=Fancy Website with CSS and JavaScript for Chinese 8 Gua&u=http://zhangwenli.com/biangua/" class="social social-facebook" target="_blank"></a>
                <a href="https://plus.google.com/share?url=http://zhangwenli.com/biangua" class="social social-google" target="_blank"></a>
                <a href="http://www.linkedin.com/shareArticle?mini=true&title=CSS JavaScript酷炫案例：变卦，易经64卦&url=http://zhangwenli.com/biangua&source=http%3a%2f%2fzhangwenli.com" class="social social-linkedin" target="_blank"></a>
                <a href="http://v.t.sina.com.cn/share/share.php?title=%40Ovilia允执厥中+的CSS JavaScript 酷炫案例：变卦，易经64卦&url=http://zhangwenli.com/biangua&pic=http://zhangwenli.com/biangua/screen-capture.png" class="social social-weibo" target="_blank"></a>
                <a href="http://shuo.douban.com/!service/share?href=http://zhangwenli.com/biangua&name=http://zhangwenli.com/biangua&image=http://zhangwenli.com/biangua/screen-capture.png" class="social social-douban" target="_blank"></a>
            </p>
            <div id="page-title-more">
                <p>了解更多：<a href="http://zhangwenli.com/blog/2014/08/11/how-i-made-biangua" target="_blank">关于本网页的博客</a></p>
                <p>有Bug？<a href="https://github.com/Ovilia/biangua/issues" target="_blank">前往GitHub</a>告诉我</p>
            </div>
        </div>
        <div id="back-title"></div>
        <div id="gua-title">
            <span id="gua-number"></span>.<span id="gua-name"></span>
            <span id="gua-detail"></span>
        </div>
        <div id="gua">
            <div id="yao6" class="yao"><div class="yinyang yang"></div></div>
            <div id="yao5" class="yao yao-mg"><div class="yinyang yang"></div></div>
            <div id="yao4" class="yao yao-split"><div class="yinyang yang"></div></div>
            
            <div id="yao3" class="yao"><div class="yinyang yang"></div></div>
            <div id="yao2" class="yao yao-mg"><div class="yinyang yang"></div></div>
            <div id="yao1" class="yao"><div class="yinyang yang"></div></div>
        </div>
        <div id="yao-detail"></div>
    </body>
</html>

================================================
FILE: js/index.js
================================================
var gb = {
    gua: null,
    selectedGua: null
};

function loadGua(guaXiang) {
    if (gb.gua !== null) {
        var len = gb.gua.length;
        for (var i = 0; i < len; ++i) {
            if (gb.gua[i]['gua-xiang'] === guaXiang) {
                gb.selectedGua = gb.gua[i];
                
                // update yao
                for (var y = 1; y <= 6; ++y) {
                    var yao = $('#yao' + y + ' .yinyang');
                    if (yao.hasClass('yin') && guaXiang[y - 1] === '1') {
                        yao.removeClass('yin', 1000).addClass('yang');
                    } else if (yao.hasClass('yang') && guaXiang[y - 1] === '0') {
                        yao.addClass('yin', 1000).removeClass('yang');
                    }
                }
                
                var name = gb.gua[i]['gua-name'];
                $('#back-title').text(name);
                $('#gua-number').text(i + 1);
                $('#gua-name').text(getGuaName(guaXiang, name));
                $('#gua-detail').text(gb.gua[i]['gua-detail']);
                return true;
            }
        }
    }
    console.error('no gua:', guaXiang);
    _gaq.push(['_trackEvent', 'BianGua', 'No Gua', guaXiang]);
    return false;
}

function getGuaName(guaXiang, guaName) {
    var name = ['地', '雷', '水', '泽', '山', '火', '风', '天'];
    var last = parseInt(guaXiang[0]) + parseInt(guaXiang[1]) * 2
            + parseInt(guaXiang[2]) * 4;
    var first = parseInt(guaXiang[3]) + parseInt(guaXiang[4]) * 2
            + parseInt(guaXiang[5]) * 4;
    if (first === last) {
        return guaName + '为' + name[first];
    } else {
        return name[first] + name[last] + guaName;
    }
}

$(document).ready(function () {
    $('.yao').hover(function() {
        if (gb.selectedGua === null) {
            return;
        }
        $('.yao, #back-title').addClass('unhover');
        $(this).removeClass('unhover');
        
        var id = 5 - $(this).index();
        var idStrList = ['初', '二', '三', '四', '五', '上'];
        var yinYang = gb.selectedGua['gua-xiang'][id] === '1' ? '九' : '六';
        if (id === 0 || id === 5) {
            var yaoDetail = idStrList[id] + yinYang;
        } else {
            var yaoDetail = yinYang + idStrList[id];
        }
        yaoDetail += '：' + gb.selectedGua['yao-detail'][id];
        $('#yao-detail').css('top', $(this).offset().top).text(yaoDetail)
                .show();
    }, function() {
        $('.yao, #back-title').removeClass('unhover');
        $('#yao-detail').hide();
        
    }).click(function() {
        if (gb.selectedGua === null) {
            return;
        }
        var id = 5 - $(this).index();
        var guaXiang = gb.selectedGua['gua-xiang'];
        var changeBit = guaXiang[id];
        changeBit = changeBit === '1' ? '0' : '1';
        guaXiang = guaXiang.substr(0, id) + changeBit + guaXiang.substr(id + 1);
        loadGua(guaXiang);
        
        location.hash = guaXiang;
        $('.yao, #back-title').removeClass('unhover');
        $('#yao-detail').hide();
    });
    
    $.ajax({
        url: 'gua.json',
        dataType: 'json',
        success: function(data) {
            gb.gua = data.gua;
            var hash = location.hash.replace('#', '');
            if (hash === '') {
                loadGua('111111');
            } else {
                if (!loadGua(hash)) {
                    location.hash = '';
                    loadGua('111111');
                }
            }
        },
        error: function(e) {
            alert('数据获取失败，请刷新重试！');
            _gaq.push(['_trackEvent', 'BianGua', 'No JSON', e.toString()]);
        }
    });
});