dongguan-map/index.html at main · eddiehe99/dongguan-map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <title>东莞市政区地图 | An Interactive Dongguan Map</title>
    <meta name="robots" content="noodp, noydir" />
    <meta name="author" content="Eddie He" />
    <meta name="description"
        content="Introduce every town of the famous city: Dongguan 可交互的东莞市地图（政区版），展示了众多镇街的介绍。" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
    <meta name="format-detection" content="telephone=no">

    <meta property="og:url" content="https://dongguan-map.eddiehe.top">
    <meta property="og:type" content="website">
    <meta property="og:title" content="东莞市政区地图">
    <meta property="og:description" content="可交互的东莞市地图（政区版），展示了众多镇街的介绍。">
    <meta property="og:image"
        content="https://mediabluk.cnr.cn/img/cnr/CNRCDP/2023/0329/93b209062fcb7168004450043444138810.jpg">

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="东莞市政区地图" />
    <meta name="twitter:description" content="可交互的东莞市地图（政区版），展示了众多镇街的介绍。" />
    <meta name="twitter:site" content="@eddiehe99" />
    <meta name="twitter:image"
        content="https://mediabluk.cnr.cn/img/cnr/CNRCDP/2023/0329/93b209062fcb7168004450043444138810.jpg" />

    <link rel="stylesheet" href="main.css" />
    <link rel="stylesheet" href="https://s.anyway.red/nurburgring/sm/result.css" />
    <link rel="icon" href="https://www.dg.gov.cn/images/dglogo.png">
</head>

<body>
    <div id="app">

        <!-- GeoJson track -->
        <div class="track-map">
            <div class="inner">
                <svg id="svg-track" viewBox="0 0 660 530" class="main-svg" width="6600px" height="5300px">
                    <!-- GeoJSON 路径将在这里被添加 -->
                    <!-- <use href="#track" class="base base2" /> -->
                    <use href="#track" class="base" />
                    <!-- <use href="#track" class="progress" /> -->
                    <!-- <g id="cornerGroup" class="corner hidden">
                        <use id="highlighted-segment" href="#track" class="path"></use>
                    </g> -->
                </svg>
                <div id="town-names-container">
                    <!-- 由 D3.js 动态添加 -->
                </div>

                <!-- introMessage -->
                <div class="mid" id="midDiv">
                    <div class="msg" id="msgDiv">
                        <div class="inner" id="innerDiv">
                            <p class="title-font msg-title" data-lang="cn">东莞市地图</p>
                            <p class="title-font msg-title" data-lang="en" style="display: none;">Dongguan Map</p>
                            <p data-lang="cn"><a href="https://www.dg.gov.cn/zjdz/index.html" target="_blank">东莞市</a>
                                因在广州之东，境内盛产莞草而得名。1988 年 1 月，东莞市升格为地级市，直属广东省管辖，下属有 4 个街道、28 个镇、2 个园区。1978
                                年中国内地第一家“三来一补”企业太平手袋厂在此诞生，改革开放以来以制造产业立市，迅速发展为国际制造名城。
                            </p>
                            <p data-lang="en" style="display: none;">Since 1978, <a
                                    href="https://www.dongguantoday.com/about/districts/" target="_blank">Dongguan</a>
                                has
                                quickly transformed itself from a bucolic farmland to “the world’s factory” featuring
                                its
                                prosperous manufacturing industry and coordinated urban-rural development.</p>
                            <div class="indicator">
                                <div data-lang="cn">向下滚动或点击镇街名查看地图</div>
                                <div data-lang="en" style="display: none;">Scroll or click the district to start</div>
                                <svg viewBox="0 0 100 100" class="scroll-arrow">
                                    <path d="M10 20l40 30l40 -30" />
                                    <path d="M10 60l40 30l40 -30" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <!-- end of "mid" -->
                </div>

                <!-- end of "inner" -->
            </div>
            <!-- end of "track-map" -->
        </div>

        <div class="desc skew-p">
            <div class="logo">
                <div class="inner skew-n">
                    <span id="logoTitle" class="title-font"><span>东莞市地图（政区版）</span>
                        <!-- <img src="https://s.anyway.red/nurburgring/logo.svg  " alt="纽北赛道地图" /> -->
                </div>
            </div>

            <!-- I don't want to modify the `.css` file written by JJ Ying. -->
            <div class="corner-info">
                <div id="currentTownInfoContainer" class="inner"> <!-- 初始隐藏，由 JS 控制 -->
                    <!-- 显示当前镇街名称  -->
                    <div id="currentTownName" class="primary skew-n title-font"></div>
                    <!-- 显示镇街介绍 -->
                    <div id="currentTownAbout" class="more skew-n"></div>
                </div>

                <div id="endingMessageContainer" class="inner desc-msg" style="display: none;"> <!-- 初始隐藏 -->
                    <div id="endingMessage" class="ending skew-n">
                        The End
                        <div id="startOverBtn" class='btn skew-p'>
                            <!-- 为不同语言准备按钮文本元素 -->
                            <div id="startOverBtnTextCn" class='skew-n title-font' data-lang="cn">回到起点</div>
                            <div id="startOverBtnTextEn" class='skew-n' data-lang="en" style="display: none;">Start Over
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 缩略图容器 - 替换 Vue 代码 -->
                <div id="thumbsContainer" class="thumbs hidden-area"> <!-- 初始隐藏，由 JS 控制 -->
                    <!-- 缩略图将由 JS 动态插入 -->
                </div>

                <!-- end of corner-info -->
            </div>

            <!-- footer -->
            <div class="controls">
                <div class="inner skew-n">
                    <!-- <div @click="openModal('text')" role="button" class="link">
                        <template v-if="lang == 'cn'">关于本站</template>
                        <template v-if="lang == 'en'">About</template>
                    </div> -->
                    <div id="aboutLinkText" role="button" class="link">
                        <span id="aboutTextCn" class="lang-text" data-lang="cn">关于本站</span>
                        <span id="aboutTextEn" class="lang-text" data-lang="en" style="display: none;">About</span>
                    </div>
                    <div class="toggle-group off" id="darkModeToggleGroup"> <!-- 移除 :class 和 @click -->
                        <span id="darkModeToggleText">深色模式</span> <!-- 移除 v-if，添加 id 用于 JS 操作 -->
                        <div class="toggle"></div>
                    </div>
                    <div class="toggle-group off" id="langToggleGroup"> <!-- 移除 :class 和 @click -->
                        <span id="langToggleText">中文</span> <!-- 移除 v-if，添加 id 用于 JS 操作 -->
                        <div class="toggle"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框容器 -->
        <!-- id 用于 JS 选择和控制显示/隐藏 -->
        <!-- class 包含 modal 基础样式和 text 类型标识 -->
        <!-- onclick="closeModal()" 绑定点击背景关闭事件 -->
        <div id="text-modal" class="modal text" onclick="DongguanMapApp.closeModal(this)">
            <!-- 模态框内容区域 -->
            <!-- class 包含 inner 基础样式 -->
            <!-- onclick="innerModal(event)" 阻止点击内容区域时事件冒泡到背景，防止关闭 -->
            <div class="inner" onclick="DongguanMapApp.innerModal(event)">
                <!-- 模态框内容体 -->
                <!-- id 用于 JS 动态插入内容 -->
                <!-- class 包含 modal-content 基础样式和 skew-n 变形样式 -->
                <!-- onclick="closeModal()" (可选) 如果希望点击内容区域也关闭模态框，可以加上 -->
                <div id="text-modal-body" class="modal-content skew-n"></div>
                <!-- 模态框关闭按钮 -->
                <!-- class 包含 modal-close 基础样式和 skew-n 变形样式 -->
                <!-- onclick="closeModal()" 绑定点击关闭事件 -->
                <div class="modal-close skew-n" onclick="DongguanMapApp.closeModal(this)">
                    <!-- 关闭按钮 SVG 图标 -->
                    <svg viewBox="0 0 30 30">
                        <circle cx="15" cy="15" r="12" />
                        <path d="M10 10L20 20M20 10L10 20" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- 图片模态框 -->
        <div id="image-modal" class="modal image" onclick="DongguanMapApp.closeModal(this)">
            <div class="inner" onclick="DongguanMapApp.innerModal(event)">
                <div id="image-modal-body" class="modal-content skew-n"></div>
                <div class="modal-close skew-n" onclick="DongguanMapApp.closeModal(this)">
                    <svg viewBox="0 0 30 30">
                        <circle cx="15" cy="15" r="12" />
                        <path d="M10 10L20 20M20 10L10 20" />
                    </svg>
                </div>
            </div>
        </div>

        <!-- end of app div -->
    </div>

    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://unpkg.com/topojson@3"></script>
    <script src="main.js"></script>
    <!-- <svg id="map-svg"></svg> -->
</body>

</html>