BJSubwayPen
/
index.html

<!DOCTYPE HTML>

<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>北京地铁路线图绘制</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.5.0/dist/svg-pan-zoom.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <script type="text/javascript" src="final_data.js"></script>
    <script type="text/javascript" src="saveSvgAsPng.js"></script>
    <script type="text/javascript" src="header.js"></script>
    <style>
        .wangge {
            background-image: linear-gradient(90deg, rgba(235, 235, 235, 0.38) 10%, rgba(0, 0, 0, 0) 10%),
            linear-gradient(rgba(235, 235, 235, 0.38) 10%, rgba(0, 0, 0, 0) 10%);
            background-size: 17px 17px;
            width: 600px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="app">
    <section class="section is-black" style="background-color: black;">
        <div class="container">
            <p class="title" style="color: #CDCDCD">
                北京地铁路线图绘制
            </p>
            <p class="subtitle" style="color: #CDCDCD">
                by : gojuukaze
            </p>
        </div>
    </section>
    <div style="height: 100%"></div>
    <a href="https://github.com/gojuukaze/BJSubwayPen.git">
        <img style="position: absolute; top: 0; right: 0; border: 0;"
             src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
    </a>
    <section class="section" style="padding: 0 ;">
        <div class="columns is-gapless">
            <div id="left" class="column is-narrow ">
                <div id="select_data" style="padding: 5px"></div>
                <div class="columns is-mobile" style="padding: 10px">
                    <div class="column is-half">
                        <div style="padding: 0 15px 0 0;margin: 0">
                            <button class="button is-dark" style="width: 100%;margin: 10px;" id="add_line" type="button"
                                    value="click">添加线路
                            </button>
                        </div>
                    </div>
                    <div class="column is-half">
                        <div class="field has-addons">
                            <div class="control " style="width: 70%">

                                <button id="download" data-target="modal" class="button is-dark"
                                        style="margin:10px 0 10px 0px;width: 100%">
                                    <span style="padding-left: 10px">下载图片</span>
                                </button>
                            </div>
                            <div class="control" style="width: 30%">
                                <div class="dropdown is-right is-hoverable">
                                    <div class="dropdown-trigger">
                                        <button id="change" class="button is-dark"
                                                style="margin:10px 0px 10px 0px;width: 100%">
                                        <span class="icon is-small" style="margin-right: 1px;"><i
                                                class="fas fa-exchange-alt"></i></span>
                                        </button>
                                    </div>
                                    <div class="dropdown-menu" id="dropdown-menu4" role="menu">
                                        <div class="dropdown-content">
                                            <div class="dropdown-item">
                                                <p>若无法正常下载图片点击此按钮切换为<strong>生成图片模式</strong>，生成后会在网页下方出现图片</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="right" class="column" style="border:1px solid black; background-color: white">
                <div class="wangge" id="container" style="width: 100%; height: 100%; ">
                    <svg id="map" xmlns="http://www.w3.org/2000/svg"
                         version="1.1" viewBox="0 0 3486 1821" xlink="http://www.w3.org/1999/xlink">
                    </svg>
                </div>
            </div>
        </div>
    </section>
    <div id="modal" class="modal">
        <div class="modal-background"></div>
        <div class="modal-content">
            <div class="box">
                <article class="media">
                    <div class="media-content">
                        <div class="content">
                            <p>
                                <strong>正在生成图片中...</strong>
                                <br>
                                不要重复点击，往下滑动看看
                            </p>
                        </div>
                    </div>
                </article>
            </div>
        </div>
        <button class="modal-close is-large"></button>
    </div>
</div>
</body>
<script src="footer.js"></script>
</html>