https://www.deyouwang.com/

1<!doctype html>
2<html lang="zh-CN">
3<head>
4  <meta charset="utf-8" />
5  <meta name="viewport" content="width=device-width,initial-scale=1" />
6  <title>德游网社区论坛 - 德国留学移民工作信息</title>
7  <meta name="description" content="德游网 DeYouWang.com 是以在德国留学，移民为主的社区网站及论坛，频道有：新闻，黄页，买卖，租房，工作，交友，留学，移民，汽车，旅游，美食，教育等多方面的资讯" />
8  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
9  <style>
10    /* Reset (轻量) */
11    * {box-sizing: border-box;margin:0;padding:0}
12    html,body {height:100%;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial; color:#222;}
13    a {color:inherit; text-decoration:none}
14
15    /* Layout */
16    header {background-color:#FF641E; color:white; position:sticky; top:0; z-index:50; box-shadow:0 2px 8px rgba(0,0,0,0.08);}
17    .container {max-width:1200px;margin:0 auto;padding:24px;}
18    .nav {display:flex;align-items:center;justify-content:space-between;padding:14px 24px;}
19    .brand {display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.15rem;}
20    nav ul {display:flex;gap:18px;align-items:center;list-style:none;font-size:0.95rem;}
21    .btn-ghost {padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.25);background:transparent;color:white;cursor:pointer;}
22    .btn-primary {background:#FF641E;color:white;padding:8px 14px;border-radius:10px;font-weight:700;border:none;box-shadow:0 6px 18px rgba(255,100,30,0.12);}
23
24    /* Hero */
25    .hero {padding:40px 24px;display:grid;grid-template-columns:1fr 460px;gap:28px;align-items:center;}
26    .hero-left {text-align:center;}
27    .hero-logo {width: clamp(150px, 50%, 370px);height: auto; object-fit: contain; margin: 0 auto 15px;}
28    /*text 3 lines */
29    .hero-left p {color:rgba(0,0,0,0.7);margin-bottom:18px;font-size:2rem;margin-inline-start: 0px;margin-inline-end: 0px; text-align: justify;text-align-last: center; font-size: clamp(19px, 2.5vw, 2rem);}
30    .download-group {display:flex;gap:12px;align-items:center;justify-content:center; flex-wrap:wrap;}
31    .app-btn {display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:#111;color:white;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
32    .qr {width:140px;padding:8px;border-radius:12px;background:white;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 6px 20px rgba(10,120,140,0.08)}
33    .qr img{width:120px;height:120px;object-fit:cover}
34
35    /* Phone mockup */
36    .hero-right {display:flex;align-items:center;justify-content:center;}
37    .phone {width:320px;height:640px;border-radius:36px;background:linear-gradient(180deg,#fff 0%,#f6fbfb 100%);box-shadow:0 30px 60px rgba(10,120,140,0.12);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
38    .phone-screen {width:95%;height:95%;border-radius:28px;background-image:url('dl_src/0001.png');background-size:cover;background-position:center;box-shadow:inset 0 0 0 12px rgba(255,255,255,0.02)}
39    .badge {position:absolute;top:18px;right:16px;background:linear-gradient(90deg,#FF641E 0%,#FF8C4B 100%);color:white;padding:6px 10px;border-radius:999px;font-weight:700;font-size:0.85rem;box-shadow:0 6px 20px rgba(0,0,0,0.08)}
40
41    /* Features */
42    .features {padding:48px 24px;background:#fbffff;}
43    .features-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px;}
44    .feature {background:white;padding:18px;border-radius:12px;box-shadow:0 10px 24px rgba(10,120,140,0.04);min-height:120px;display:flex;gap:12px;align-items:flex-start}
45    .feature .icon {width:52px;height:52px;border-radius:10px;background:linear-gradient(180deg,#fbf1ec,#fff2ec);display:flex;align-items:center;justify-content:center;font-weight:700}
46    .feature h3 {margin-bottom:6px;font-size:1rem}
47    .feature p {font-size:0.95rem;color:#444}
48    
49    /* New Download Section */
50    .download-section {background-color:#ffffff; padding:60px 24px; text-align: center;}
51    .download-section .logo {width:100px; height:100px; margin: 0 auto 20px; background-color: #FF641E; border-radius: 25%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white;}
52    .download-section .title {font-size:1.8rem; font-weight:700; color:#ff5733; margin-bottom: 30px;}
53    .download-buttons {display:flex; gap:20px; justify-content:center; flex-wrap:nowrap;}
54    .download-buttons .app-btn {padding:16px 24px; font-size:1rem;}
55
56    /* footer */
57    .footer {background:#f2f2f2;color:black;padding:28px 24px;margin-top:20px;border-top-left-radius:12px;border-top-right-radius:12px}
58    .footer .grid {display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
59    .small {font-size:0.9rem;color:rgba(13, 2, 2, 0.963)}
60
61    /* Responsive */
62    @media (min-width: 981px) {
63        .hero-logo {
64            width: 370px;
65            height: 120px;
66        }
67    }
68    @media (max-width:980px){
69      .hero {grid-template-columns:1fr; text-align:center}
70      .hero-right {order:-1;margin-bottom:0px; margin-top: -30px;}
71      .features-grid {grid-template-columns:repeat(2,1fr)}
72      .phone {transform:scale(0.9)}

72
73      .download-section .title {font-size:1.5rem;}
74      .download-buttons .app-btn {padding:12px 20px; font-size:0.9rem;}
75    }
76    @media (max-width:600px){
77      .features-grid {grid-template-columns:1fr}
78      .nav ul {display:none}
79      .nav {padding:12px}
80      .hero-left h1 {font-size:1.6rem}
81      .phone {width:260px;height:540px}
82      .qr {display: none;}
83      .download-section {padding: 40px 16px;}
84      .download-section .title {font-size:1.2rem;}
85      .download-buttons {flex-direction: row; align-items: center; justify-content:center; flex-wrap:nowrap;}
86      .download-buttons .app-btn {width: auto;}
87    }
88
89    /* small tasteful animations */
90    .feature, .phone, .screenshot {transition:transform .36s ease, box-shadow .36s ease}
91    .feature:hover {transform:translateY(-6px)}
92    .screenshot:hover {transform:translateY(-8px)}
93  </style>
94</head>
95<body>
96  <header>
97    <div class="container nav">
98      <div class="brand" aria-label="德游网">
99        <a href="https://bbs.deyouwang.com" style="color: inherit; text-decoration: none;">德遊網</a>
100      </div>
101
102      <nav>
103        <ul>
104          <li><a id="lang-toggle" class="btn-ghost">繁体版</a></li>
105          <li><a href="#faq" class="btn-ghost">常见问题</a></li>
106          <li><a href="#footer" class="btn-ghost">联系我们</a></li>
107        </ul>
108      </nav>
109    </div>
110  </header>
111
112  <main>
113    <section class="container hero" id="hero">
114      <div class="hero-left">
115        <img src="dl_src/deyouwang_logo_370X120.svg" alt="德游网 Logo" class="hero-logo">
116        <p>德遊網 — 随时发现德国生活好去处。专为德国华人设计的本地活动平台。浏览留学、移民、餐饮、工作、租房与独家优惠 — 一键保存、分享、使用。</p>
117
118        <div class="download-group" id="download">
119          <a class="app-btn" href="https://apps.apple.com/de/app/%E5%BE%B7%E6%B8%B8%E7%BD%91/id6474119119" aria-label="Download on App Store">
120            <!-- 简单图标 -->
121            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="opacity:0.9" xmlns="http://www.w3.org/2000/svg"><path d="M5 18.5V5.5C5 4.67 5.67 4 6.5 4h7c.83 0 1.5.67 1.5 1.5v13c0 .83-.67 1.5-1.5 1.5h-7C5.67 20 5 19.33 5 18.5z" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
122            <span>App Store</span>
123          </a>
124
125          <a class="app-btn" href="https://play.google.com/store/apps/details?id=net.deyouwang&pcampaignid=web_share" aria-label="Get it on Google Play">
126            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="opacity:0.9" xmlns="http://www.w3.org/2000/svg"><path d="M3 3l18 9-18 9V3z" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
127            <span>Google Play</span>
128          </a>
129
130          <div class="qr" aria-hidden="false" title="扫码下载">

131            <img src="dl_src/appproxy.png" alt="二维码示例">
132            <div style="font-weight:700;font-size:0.92rem;">立即扫码</div>
133           <!-- <div style="font-size:0.8rem;color:#444">支持 iOS / Android</div> -->
134          </div>
135        </div>
136        <p style="margin-top:14px;font-size:1rem;color:rgba(0,0,0,0.6)">免费注册，立即领取新人属优惠券。</p>
137      </div>
138
139      <div class="hero-right">
140        <div class="phone" role="img" aria-label="App 预览">
141          <div class="badge">全新上线</div>
142          <div class="phone-screen" aria-hidden="true"></div>
143        </div>
144      </div>
145    </section>
146
147    <section class="features container" id="features" aria-labelledby="features-title">
148      <h2 id="features-title" style="font-size:1.25rem">主要功能</h2>
149      <p style="color:rgba(0,0,0,0.6);margin-top:8px">为你挑选优质商家与超值优惠，一站式预订与领取电子券。</p>
150
151      <div class="features-grid" style="margin-top:18px">
152        <div class="feature">
153          <div class="icon">★</div>
154          <div>
155            <h3>本地资讯</h3>
156            <p>本地热点，实时掌握最新动态。</p>
157          </div>
158        </div>
159
160        <div class="feature">
161          <div class="icon">💳</div>
162          <div>
163            <h3>社区论坛</h3>
164            <p>话题互动，结识志趣相投好友。</p>
165          </div>
166        </div>
167
168        <div class="feature">
169          <div class="icon">🗺️</div>
170          <div>
171            <h3>商务服务</h3>
172            <p>企业需求，一站式专业对接平台。</p>
173          </div>
174        </div>
175
176        <div class="feature">
177          <div class="icon">📝</div>
178          <div>
179            <h3>本地社群</h3>
180            <p>兴趣圈子，打造专属本地人网络。</p>
181          </div>
182        </div>
183
184        <div class="feature">
185          <div class="icon">🎁</div>
186          <div>
187            <h3>找房租房</h3>
188            <p>真实房源，轻松匹配满意租赁。</p>
189          </div>
190        </div>
191
192        <div class="feature">
193          <div class="icon">🔔</div>
194          <div>
195            <h3>求职招工</h3>
196            <p>海量岗位，快速找到理想工作。</p>
197          </div>
198        </div>
199      </div>
200    </section>
201  </main>
202  
203  <div class="download-section">
204      <img src="dl_src/app_icon.jpg" alt="App Logo" class="logo">
205      <h2 class="title">现在立即下载德游网APP</h2>
206      <div class="download-buttons">
207          <a class="app-btn" href="https://apps.apple.com/de/app/%E5%BE%B7%E6%B8%B8%E7%BD%91/id6474119119" aria-label="Download on App Store">
208            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="opacity:0.9" xmlns="http://www.w3.org/2000/svg"><path d="M5 18.5V5.5C5 4.67 5.67 4 6.5 4h7c.83 0 1.5.67 1.5 1.5v13c0 .83-.67 1.5-1.5 1.5h-7C5.67 20 5 19.33 5 18.5z" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
209            <span>App Store</span>
210          </a>
211
212          <a class="app-btn" href="https://play.google.com/store/apps/details?id=net.deyouwang&pcampaignid=web_share" aria-label="Get it on Google Play">
213            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style="opacity:0.9" xmlns="http://www.w3.org/2000/svg"><path d="M3 3l18 9-18 9V3z" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
214            <span>Google Play</span>
215          </a>
216      </div>
217  </div>
218
219  <!--
220  <div class="footer" style="background-color: #ff641e; text-align: center; padding: 24px;",id="footer">
221    <div style="font-size:0.9rem;color:rgba(255,255,255,0.85)">© 2025 德游网</div>
222  </div>
223  -->
224
225   <footer class="footer" id="footer">
226    <div class="container">
227      <div class="grid">
228        <div style="flex:1;min-width:220px">
229          <div style="font-weight:800;font-size:1.05rem"; color:#FF641E;>德游网</div>
230          <div class="small" style="margin-top:8px">发现德国好去处 · 交流 · 信息 · 服务</div>
231          <div style="margin-top:12px" class="small">© <span id="year"></span> 德游网保留所有权利</div>
232        </div>
233

234         <div style="min-width:200px" class="small">
235          <div style="font-weight:700;margin-bottom:8px">联系我们</div>
236          <div>邮箱：[email protected]</div>
237          <!-- <div>电话：+86 400-123-4567</div> -->
238        </div>
239
240        <div style="min-width:200px" class="small">
241          <div style="font-weight:700;margin-bottom:8px">服务条款</div>
242          <div>
243              <a href="https://bbs.deyouwang.com/portal.php?mod=view&aid=5" target="_blank">AGB</a> /
244              <a href="https://bbs.deyouwang.com/portal.php?mod=view&aid=3" target="_blank">Impressum</a> /
245              <a href="https://bbs.deyouwang.com/portal.php?mod=view&aid=1" target="_blank">隐私协议</a>
246              </div>
247        </div>
248
249        <div style="min-width:160px" class="small">
250          <div style="font-weight:700;margin-bottom:8px">关注我们</div>
251          <div>微信公众号 / 小红书 / 微博</div>
252        </div>
253      </div>
254    </div>
255  </footer>
256
257  <!-- 引入 opencc-js -->
258  

258<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/full.min.js"></script>

258
259  

259<script>
260    const toggleBtn = document.getElementById('lang-toggle');
261    let isTrad = false;
262
263    // 简体 -> 繁体
264    const s2t = OpenCC.Converter({ from: 'cn', to: 'tw' });
265    // 繁体 -> 简体
266    const t2s = OpenCC.Converter({ from: 'tw', to: 'cn' });
267
268    function traverse(node, toTrad){
269      if(node.nodeType===3){ // 文本节点
270        node.nodeValue = toTrad ? s2t(node.nodeValue) : t2s(node.nodeValue);
271      } else {
272        node.childNodes.forEach(n=>traverse(n,toTrad));
273      }
274    }
275
276    // 切换逻辑
277    toggleBtn.addEventListener('click', ()=>{
278      traverse(document.body, !isTrad);
279      isTrad = !isTrad;
280      toggleBtn.textContent = isTrad ? "简体版" : "繁体版";
281    });
282
283    // 默认语言检测
284    const lang = navigator.language || navigator.userLanguage;
285    if(lang.startsWith("zh-TW") || lang.startsWith("zh-HK") || lang.startsWith("zh-MO")){
286      traverse(document.body, true);
287      isTrad = true;
288      toggleBtn.textContent = "简体版";
289    }
290  </script>

290
291</body>
292</html>