1 2 3<!DOCTYPE html> 4 5<html lang="en-us"> 6<head> 7 <meta charset="UTF-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 10 <meta name="theme-color" content="#667eea"> 11 12 <!-- hreflang for international SEO --> 13 <link rel="alternate" hreflang="x-default" href="https://tuguoba.com/contact"> 14 <link rel="alternate" hreflang="en" href="https://tuguoba.com/contact"> 15 <link rel="alternate" hreflang="zh-CN" href="https://tuguoba.com/contact"> 16 <link rel="alternate" hreflang="zh-TW" href="https://tuguoba.com/contact"> 17 <link rel="alternate" hreflang="ja" href="https://tuguoba.com/contact"> 18 <link rel="alternate" hreflang="ko" href="https://tuguoba.com/contact"> 19 <link rel="alternate" hreflang="de" href="https://tuguoba.com/contact"> 20 <link rel="alternate" hreflang="ar" href="https://tuguoba.com/contact"> 21 <link rel="alternate" hreflang="fr" href="https://tuguoba.com/contact"> 22 <link rel="alternate" hreflang="es" href="https://tuguoba.com/contact"> 23 <link rel="alternate" hreflang="it" href="https://tuguoba.com/contact"> 24 <link rel="alternate" hreflang="pt" href="https://tuguoba.com/contact"> 25 <link rel="alternate" hreflang="ru" href="https://tuguoba.com/contact"> 26 <link rel="alternate" hreflang="th" href="https://tuguoba.com/contact"> 27 28 <title>Contact Us - Get in Touch with Tuguoba | Tuguoba</title> 29 <meta name="description" content="Contact Tuguoba for support, questions, or feedback about our AI-powered image editing tools including face swap, barcode generation, and image filters."> 30 <meta name="keywords" content="contact tuguoba, customer support, AI image editing support, face swap help, technical support"> 31 <meta name="robots" content="index, follow, max-image-preview:large, max-video-preview:-1"> 32 <link rel="canonical" href="https://tuguoba.com/contact"> 33 34 <!-- Twitter Cards --> 35 <meta property="twitter:card" content="summary"> 36 <meta property="twitter:title" content="Contact Us - Get in Touch with Tuguoba"> 37 <meta property="twitter:description" content="Contact Tuguoba for support, questions, or feedback about our AI-powered image editing tools."> 38 <meta name="twitter:site" content="@tuguoba"> 39 40 <!-- Open Graph / Facebook --> 41 <meta property="og:type" content="website"> 42 <meta property="og:locale" content="en_US"> 43 <meta property="og:locale:alternate" content="zh_CN"> 44 <meta property="og:locale:alternate" content="zh_TW"> 45 <meta property="og:locale:alternate" content="ja_JP"> 46 <meta property="og:locale:alternate" content="ko_KR"> 47 <meta property="og:locale:alternate" content="de_DE"> 48 <meta property="og:locale:alternate" content="ar_SA"> 49 <meta property="og:locale:alternate" content="fr_FR"> 50 <meta property="og:locale:alternate" content="es_ES"> 51 <meta property="og:locale:alternate" content="it_IT"> 52 <meta property="og:locale:alternate" content="pt_PT"> 53 <meta property="og:locale:alternate" content="ru_RU"> 54 <meta property="og:locale:alternate" content="th_TH"> 55 <meta property="og:title" content="Contact Us - Get in Touch with Tuguoba"> 56 <meta property="og:description" content="Contact Tuguoba for support, questions, or feedback about our AI-powered image editing tools."> 57 <meta property="og:url" content="https://tuguoba.com/contact"> 58 <meta property="og:site_name" content="Tuguoba"> 59 60 <!-- Structured Data - WebApplication --> 61
61<script type="application/ld+json"> 62 { 63 "@context": "https://schema.org", 64 "@type": "WebApplication", 65 "name": "Contact Tuguoba", 66 "description": "Get in touch with Tuguoba for support, questions, or feedback about our AI-powered image editing tools.", 67 "url": "https://tuguoba.com/contact", 68 "applicationCategory": "UtilityApplication", 69 "operatingSystem": "Web Browser", 70 "offers": { 71 "@type": "Offer", 72 "price": "0", 73 "priceCurrency": "USD", 74 "priceValidUntil": "2099-12-31" 75 }, 76 "publisher": { 77 "@type": "Organization", 78 "name": "Tuguoba", 79 "url": "https://tuguoba.com" 80 } 81 } 82 </script>
82 83 84 <!-- Structured Data - FAQPage --> 85
85<script type="application/ld+json"> 86 { 87 "@context": "https://schema.org", 88 "@type": "FAQPage", 89 "mainEntity": [ 90 { 91 "@type": "Question", 92 "name": "How can I contact Tuguoba for support?", 93 "acceptedAnswer": { 94 "@type": "Answer", 95 "text": "You can contact us via email at [email protected]. We typically respond within 24-48 hours on business days." 96 } 97 }, 98 { 99 "@type": "Question", 100 "name": "What tools does Tuguoba offer?", 101 "acceptedAnswer": { 102 "@type": "Answer", 103 "text": "Tuguoba provides free online AI-powered image processing tools including face swap, face average, barcode generation, image enhancement, sketch to image, cartoon effects, and more." 104 } 105 }, 106 { 107 "@type": "Question", 108 "name": "Are Tuguoba tools free to use?", 109 "acceptedAnswer": { 110 "@type": "Answer", 111 "text": "Yes, most of our basic tools are completely free to use without registration. We also offer premium desktop applications with advanced features for professional use." 112 } 113 }, 114 { 115 "@type": "Question", 116 "name": "How can I report a bug or suggest a feature?", 117 "acceptedAnswer": { 118 "@type": "Answer", 119 "text": "Please email us at [email protected] with details about the issue or feature request. Include the tool name, steps to reproduce, and any error messages if applicable." 120 } 121 }, 122 { 123 "@type": "Question", 124 "name": "What languages does customer support offer?", 125 "acceptedAnswer": { 126 "@type": "Answer", 127 "text": "We provide customer support in English and Chinese. Our team is happy to assist with any questions about our image processing tools." 128 } 129 }, 130 { 131 "@type": "Question", 132 "name": "How quickly can I expect a response from support?", 133 "acceptedAnswer": { 134 "@type": "Answer", 135 "text": "We typically respond within 24-48 hours on business days. For urgent technical issues, please include as much detail as possible in your initial email." 136 } 137 }, 138 { 139 "@type": "Question", 140 "name": "Does Tuguoba offer technical documentation?", 141 "acceptedAnswer": { 142 "@type": "Answer", 143 "text": "Yes, each tool on Tuguoba has an integrated how-to-use guide. Additionally, our blog provides tutorials and tips for getting the most out of our image processing tools." 144 } 145 }, 146 { 147 "@type": "Question", 148 "name": "Can I request a new feature or tool?", 149 "acceptedAnswer": { 150 "@type": "Answer", 151 "text": "Absolutely! We welcome feature requests and tool suggestions. Email us at [email protected] with your ideas, and our team reviews all suggestions for future development." 152 } 153 } 154 ] 155 } 156 </script>
156 157 158 <!-- Structured Data - Organization --> 159
159<script type="application/ld+json"> 160 { 161 "@context": "https://schema.org", 162 "@type": "Organization", 163 "name": "Tuguoba", 164 "url": "https://tuguoba.com", 165 "logo": { 166 "@type": "ImageObject", 167 "url": "https://tuguoba.com/static/image/site_logo.png" 168 }, 169 "description": "Tuguoba provides free online AI-powered image processing tools including face swap, barcode generation, image enhancement, and more.", 170 "email": "[email protected]", 171 "contactPoint": { 172 "@type": "ContactPoint", 173 "contactType": "customer service", 174 "availableLanguage": ["English", "Chinese"] 175 } 176 } 177 </script>
177 178 179 <!-- Structured Data - BreadcrumbList --> 180
180<script type="application/ld+json"> 181 { 182 "@context": "https://schema.org", 183 "@type": "BreadcrumbList", 184 "itemListElement": [{ 185 "@type": "ListItem", 186 "position": 1, 187 "name": "Home", 188 "item": "https://tuguoba.com" 189 },{ 190 "@type": "ListItem", 191 "position": 2, 192 "name": "Contact", 193 "item": "https://tuguoba.com/contact" 194 }] 195 } 196 </script>
196 197 198 <meta name="author" content="Tuguoba"> 199 <meta name="format-detection" content="telephone=no"> 200 201 202 203 <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 203-204
203 204 <script async src="https://www.googletagmanager.com/gtag/js?id=
204G-EHBKTXXZV7
vendor: 16 bytes, lines 204-205
204"></script> 205
205<script> 206
vendor: 146 bytes, lines 206-210
206window.dataLayer = window.dataLayer || []; 207 function gtag(){dataLayer.push(arguments);} 208 gtag('js', new Date()); 209 210 gtag('config', '
210G-EHBKTXXZV7
vendor: 8 bytes, lines 210-211
210'); 211
211</script>
211 212 213
213<script src="/static/js/jquery/jquery-3.7.1.min.js"></script>
213 214
214<script src="/static/js/form-submit.js"></script>
214 215
215<script src="/static/js/toast.js"></script>
215 216 217 <!-- Set language for RTL detection --> 218
218<script> 219 // Get language from <html> tag's lang attribute (set by Django template) 220 var htmlLang = document.documentElement && document.documentElement.getAttribute('lang'); 221 window.appLanguage = htmlLang || 'en-us'; 222 </script>
222 223
223<script src="/static/js/rtl.js"></script>
223 224
224<script> 225 // Global fallback for inline onclick handlers 226 window.toggleDirection = function() { 227 if (window.RTL) { 228 return window.RTL.toggleDirection(); 229 } 230 }; 231 </script>
231 232 233 <!-- File Upload Translations --> 234
234<script> 235 window.fileUploadMessages = { 236 'file_too_large': 'File size exceeds the limit of {size}MB. Please choose a smaller file.', 237 'file_too_large_title': 'File Too Large', 238 'upload_failed': 'Upload failed: {error}', 239 'upload_failed_title': 'Upload Failed', 240 'upload_http_error': 'Upload failed with status: {status}', 241 'network_error': 'Network error. Please check your connection.', 242 'network_error_title': 'Network Error', 243 'no_valid_files': 'No valid files selected', 244 'upload_server_error': 'Server error. Please try again later.', 245 'invalid_file_type': 'Invalid file type. Please select an image file.', 246 'file_type_error_title': 'Invalid File Type', 247 'server_busy': 'The server is busy, please try again later', 248 'server_error': 'Server error. Please try again later.', 249 'request_timeout': 'Request timeout. The server is taking too long, please try again.', 250 }; 251 252 window.formSubmitMessages = { 253 'processing': 'Processing', 254 'submit': 'Submit', 255 'please_upload_first': 'Please upload an image first', 256 'error_parsing_response': 'Error parsing response', 257 'request_failed': 'Request failed', 258 'network_error': 'Network error', 259 'server_busy': 'The server is busy, please try again later', 260 'server_error': 'Server error', 261 'request_timeout': 'Request timeout', 262 'processing_failed': 'Processing failed' 263 }; 264 </script>
264 265 266 <!-- New Design System CSS --> 267 <link rel="stylesheet" type="text/css" href="/static/css/design-system.css" /> 268 <!-- Page-specific Styles --> 269 <link rel="stylesheet" type="text/css" href="/static/css/page-styles.css" /> 270 <!-- Tool Page Styles --> 271 <link rel="stylesheet" type="text/css" href="/static/css/tool-pages.css" /> 272 <!-- Toast Notification Styles --> 273 <link rel="stylesheet" type="text/css" href="/static/css/toast.css" /> 274 <!-- RTL Support CSS --> 275 <link rel="stylesheet" type="text/css" href="/static/css/rtl.css" /> 276 277 <!-- Favicon --> 278 <link rel="icon" href="/static/image/site_logo.png"/> 279 <link rel="apple-touch-icon" href="/static/image/site_logo.png"> 280 <meta name="theme-color" content="#FFFFFF"> 281 <meta name="author" content="Tuguoba"> 282 <meta name="generator" content="Django"> 283 <link rel="preconnect" href="https://fonts.googleapis.com"> 284 <link rel="dns-prefetch" href="//www.google-analytics.com"> 285 286 <!-- Custom Page Styles --> 287 <style> 288 /* Override dark theme with clean modern design */ 289 body { 290 background: var(--color-slate-50); 291 background-image: none; 292 293 display: flex; 294 295 flex-direction: column; 296 min-height: 100vh; 297 } 298 299 body > .footer, 300 body .footer { 301 flex-shrink: 0; 302 } 303 304 /* Ensure footer stays at bottom */ 305 .tm_footer { 306 position: relative; 307 z-index: 100; 308 left: 0; 309 bottom: 0; 310 width: 100%; 311 background-color: var(--color-slate-900); 312 text-align: center; 313 margin-top: var(--space-16); 314 } 315 316 /* Page content wrapper with proper centering */ 317 .page-content { 318 min-height: calc(100vh - 200px); 319 padding-bottom: var(--space-8); 320 } 321 322 /* Centered container with responsive margins */ 323 .container { 324 width: 100%; 325 max-width: 1200px; 326 margin: 0 auto; 327 padding: 0 var(--space-6); 328 } 329 330 /* Responsive breakpoint adjustments */ 331 @media (min-width: 640px) { 332 .container { 333 padding: 0 var(--space-8); 334 } 335 } 336 337 @media (min-width: 1024px) { 338 .container { 339 padding: 0 var(--space-10); 340 } 341 } 342 343 @media (min-width: 1280px) { 344 .container { 345 padding: 0 var(--space-12); 346 } 347 } 348 349 /* Page wrapper for proper spacing */ 350 .page-wrapper { 351 width: 100%; 352 max-width: 1400px; 353 margin: 0 auto; 354 padding: 0 var(--space-4); 355 } 356 357 @media (min-width: 768px) { 358 .page-wrapper { 359 padding: 0 var(--space-6); 360 } 361 } 362 363 @media (min-width: 1024px) { 364 .page-wrapper { 365 padding: 0 var(--space-8); 366 } 367 } 368 369 /* Section containers */ 370 .section { 371 padding: var(--space-8) 0; 372 } 373 374 @media (min-width: 768px) { 375 .section { 376 padding: var(--space-12) 0; 377 } 378 } 379 380 /* Section containers with background */ 381 .section-bg { 382 background: var(--bg-secondary); 383 padding: var(--space-8) var(--space-6); 384 margin: 0 calc(var(--space-4) * -1); 385 } 386 387 @media (min-width: 768px) { 388 .section-bg { 389 padding: var(--space-12) var(--space-8); 390 margin: 0 calc(var(--space-6) * -1); 391 border-radius: var(--radius-xl); 392 } 393 } 394 395 @media (min-width: 1024px) { 396 .section-bg { 397 padding: var(--space-16) var(--space-12); 398 margin: 0 calc(var(--space-8) * -1); 399 } 400 } 401 402 /* Hide UIKit-specific classes that aren't in our design system */ 403 [class*="uk-"] { 404 /* These will be progressively replaced */ 405 } 406 407 /* Utility classes for centered content */ 408 .mx-auto { 409 margin-left: auto; 410 margin-right: auto; 411 } 412 413 .max-w-screen-sm { max-width: 640px; } 414 .max-w-screen-md { max-width: 768px; } 415 .max-w-screen-lg { max-width: 1024px; } 416 .max-w-screen-xl { max-width: 1280px; } 417 .max-w-screen-2xl { max-width: 1400px; } 418 419 /* Centered text utility */ 420 .text-center { 421 text-align: center; 422 } 423 424 /* Flex center utilities */ 425 .flex-center { 426 display: flex; 427 justify-content: center; 428 align-items: center; 429 } 430 431 .flex-col-center { 432 display: flex; 433 flex-direction: column; 434 align-items: center; 435 } 436 437 /* Grid center utilities */ 438 .grid-center { 439 display: grid; 440 place-items: center; 441 } 442 443 /* Card container with centered content */ 444 .card-container { 445 max-width: 1000px; 446 margin: 0 auto; 447 padding: 0 var(--space-4); 448 } 449 450 @media (min-width: 768px) { 451 .card-container { 452 padding: 0 var(--space-6); 453 } 454 } 455 456 /* Tool page container */ 457 .tool-container { 458 max-width: 1100px; 459 margin: 0 auto; 460 padding: 0 var(--space-4); 461 } 462 463 @media (min-width: 768px) { 464 .tool-container { 465 padding: 0 var(--space-6); 466 } 467 } 468 469 @media (min-width: 1024px) { 470 .tool-container { 471 padding: 0 var(--space-8); 472 } 473 } 474 475 /* Page container */ 476 .page-container { 477 flex: 1; 478 display: flex; 479 flex-direction: column; 480 } 481 482 /* Page main */ 483 .page-main { 484 flex: 1; 485 display: flex; 486 flex-direction: column; 487 } 488 489 /* Contact Page Styles */ 490 .contact-content { 491 max-width: 600px; 492 margin: 0 auto; 493 padding: var(--space-8) 0; 494 } 495 496 .contact-title { 497 font-size: var(--text-2xl); 498 font-weight: 700; 499 color: var(--text-primary); 500 margin-bottom: var(--space-6); 501 display: flex; 502 align-items: center; 503 gap: var(--space-2); 504 } 505 506 .contact-info { 507 background: var(--bg-secondary); 508 border-radius: var(--radius-lg); 509 padding: var(--space-6); 510 } 511 512 .contact-label { 513 font-size: var(--text-sm); 514 font-weight: 600; 515 color: var(--text-secondary); 516 margin-bottom: var(--space-2); 517 text-transform: uppercase; 518 letter-spacing: var(--tracking-wide); 519 } 520 521 .contact-value { 522 font-size: var(--text-lg); 523 font-weight: 600; 524 color: var(--color-primary-600); 525 margin: 0; 526 } 527 528 /* How It Works Section */ 529 .how-it-works-title { 530 font-size: var(--text-2xl, 1.5rem); 531 font-weight: 700; 532 color: var(--color-text-primary, #1a1a1a); 533 margin: 0 0 var(--space-4, 1rem); 534 } 535 </style> 536 537</head> 538 539<body> 540 541<div class="page-container"> 542 <!-- Language Selector --> 543 <div class="bg-primary py-2"> 544 <div class="container"> 545 546 547 548 549<div class="language-selector"> 550 <div class="language-current" id="languageCurrent" onclick="toggleLanguageDropdown()"> 551 552 553
554 <span class="language-flag">EN</span> 555 <span class="language-name">English</span> 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 <svg class="language-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 584 <polyline points="6 9 12 15 18 9"></polyline> 585 </svg> 586 </div> 587 <div class="language-dropdown" id="languageDropdown"> 588 <div class="language-dropdown-header"> 589 <svg class="language-dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 590 <circle cx="12" cy="12" r="10"/> 591 <line x1="2" y1="12" x2="22" y2="12"/> 592 <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/> 593 </svg> 594 Select Language 595 </div> 596 <form action="/i18n/setlang/" method="post" class="language-form"> 597 <input type="hidden" name="csrfmiddlewaretoken" value="eBuxlB9Fqh0xLzCwxdVT2F7mkBjNqXHt2Tzv5YYJmPPT2vTdhD2aEk9YB7yUviDJ"> 598 599 600 <button class="language-option" type="submit" name="language" value="en"> 601 <span class="language-option-flag">EN</span> 602 <span class="language-option-name">English</span> 603 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 604 <polyline points="20 6 9 17 4 12"></polyline> 605 </svg> 606 </button> 607 608 609 610 <button class="language-option" type="submit" name="language" value="zh-hans"> 611 <span class="language-option-flag">ZH</span> 612 <span class="language-option-name">ç®ä½ä¸æ</span> 613 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 614 <polyline points="20 6 9 17 4 12"></polyline> 615 </svg> 616 </button> 617 618 619 620 <button class="language-option" type="submit" name="language" value="zh-hant"> 621 <span class="language-option-flag">ZH</span> 622 <span class="language-option-name">ç¹é«ä¸æ</span> 623 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 624 <polyline points="20 6 9 17 4 12"></polyline> 625 </svg> 626 </button> 627 628 629 630 <button class="language-option" type="submit" name="language" value="ja"> 631 <span class="language-option-flag">JA</span> 632 <span class="language-option-name">æ¥æ¬èª</span> 633 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 634 <polyline points="20 6 9 17 4 12"></polyline> 635 </svg> 636 </button> 637 638 639 640 <button class="language-option" type="submit" name="language" value="ko"> 641 <span class="language-option-flag">KO</span> 642 <span class="language-option-name">íêµì´</span> 643 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 644 <polyline points="20 6 9 17 4 12"></polyline> 645 </svg> 646 </button> 647 648 649 650 <button class="language-option" type="submit" name="language" value="es"> 651 <span class="language-option-flag">ES</span> 652 <span class="language-option-name">español</span> 653 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 654 <polyline points="20 6 9 17 4 12"></polyline> 655 </svg> 656 </button> 657 658 659 660 <button class="language-option" type="submit" name="language" value="pt"> 661 <span class="language-option-flag">PT</span> 662 <span class="language-option-name">Português</span> 663 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 664 <polyline points="20 6 9 17 4 12"></polyline> 665 </svg> 666 </button> 667 668 669 670 <button class="language-option" type="submit" name="language" value="it">
671 <span class="language-option-flag">IT</span> 672 <span class="language-option-name">italiano</span> 673 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 674 <polyline points="20 6 9 17 4 12"></polyline> 675 </svg> 676 </button> 677 678 679 680 <button class="language-option" type="submit" name="language" value="ru"> 681 <span class="language-option-flag">RU</span> 682 <span class="language-option-name">Ð ÑÑÑкий</span> 683 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 684 <polyline points="20 6 9 17 4 12"></polyline> 685 </svg> 686 </button> 687 688 689 690 <button class="language-option" type="submit" name="language" value="de"> 691 <span class="language-option-flag">DE</span> 692 <span class="language-option-name">Deutsch</span> 693 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 694 <polyline points="20 6 9 17 4 12"></polyline> 695 </svg> 696 </button> 697 698 699 700 <button class="language-option" type="submit" name="language" value="fr"> 701 <span class="language-option-flag">FR</span> 702 <span class="language-option-name">français</span> 703 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 704 <polyline points="20 6 9 17 4 12"></polyline> 705 </svg> 706 </button> 707 708 709 710 <button class="language-option" type="submit" name="language" value="ar"> 711 <span class="language-option-flag">AR</span> 712 <span class="language-option-name">اÙعربÙÙØ©</span> 713 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 714 <polyline points="20 6 9 17 4 12"></polyline> 715 </svg> 716 </button> 717 718 719 720 <button class="language-option" type="submit" name="language" value="th"> 721 <span class="language-option-flag">TH</span> 722 <span class="language-option-name">ภาษาà¹à¸à¸¢</span> 723 <svg class="language-option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 724 <polyline points="20 6 9 17 4 12"></polyline> 725 </svg> 726 </button> 727 728 729 </form> 730 </div> 731 732</div> 733
734<script> 735 function toggleLanguageDropdown() { 736 const dropdown = document.getElementById('languageDropdown'); 737 const current = document.getElementById('languageCurrent'); 738 dropdown.classList.toggle('open'); 739 current.classList.toggle('open'); 740 } 741 742 // Close dropdown when clicking outside 743 document.addEventListener('click', function(event) { 744 const selector = document.querySelector('.language-selector'); 745 const dropdown = document.getElementById('languageDropdown'); 746 const current = document.getElementById('languageCurrent'); 747 if (selector && !selector.contains(event.target)) { 748 dropdown.classList.remove('open'); 749 current.classList.remove('open'); 750 } 751 }); 752 753 // Keyboard navigation 754 document.addEventListener('keydown', function(event) { 755 if (event.key === 'Escape') { 756 const dropdown = document.getElementById('languageDropdown'); 757 const current = document.getElementById('languageCurrent'); 758 dropdown.classList.remove('open'); 759 current.classList.remove('open'); 760 } 761 }); 762</script>
762 763 764<style> 765 .language-selector { 766 position: relative; 767 z-index: var(--z-dropdown); 768 } 769 770 .language-current { 771 display: flex; 772 align-items: center; 773 gap: var(--space-2); 774 padding: var(--space-2) var(--space-3); 775 background: var(--bg-secondary); 776 border: 1px solid var(--border-light); 777 border-radius: var(--radius-lg); 778 cursor: pointer; 779 transition: all var(--transition-fast); 780 font-size: var(--text-sm); 781 color: var(--text-primary); 782 } 783 784 .language-current:hover { 785 background: var(--color-primary-50); 786 border-color: var(--color-primary-300); 787 } 788 789 .language-current.open { 790 background: var(--color-primary-50); 791 border-color: var(--color-primary-400); 792 border-bottom-left-radius: 0; 793 border-bottom-right-radius: 0; 794 } 795 796 .language-flag { 797 font-size: var(--text-base); 798 line-height: 1; 799 } 800 801 .language-name { 802 font-weight: 500; 803 } 804 805 .language-chevron { 806 width: 14px; 807 height: 14px; 808 color: var(--text-muted); 809 transition: transform var(--transition-fast); 810 } 811 812 .language-current.open .language-chevron { 813 transform: rotate(180deg); 814 } 815 816 .language-dropdown { 817 position: absolute; 818 top: 100%; 819 right: 0; 820 min-width: 220px; 821 background: var(--bg-secondary); 822 border: 1px solid var(--color-primary-400); 823 border-top: none; 824 border-radius: var(--radius-lg); 825 border-top-left-radius: 0; 826 border-top-right-radius: 0; 827 box-shadow: var(--shadow-lg); 828 opacity: 0; 829 visibility: hidden; 830 transform: translateY(-10px); 831 transition: all var(--transition-fast); 832 } 833 834 .language-dropdown.open { 835 opacity: 1; 836 visibility: visible; 837 transform: translateY(0); 838 } 839 840 .language-dropdown-header { 841 display: flex; 842 align-items: center; 843 gap: var(--space-2); 844 padding: var(--space-3) var(--space-4); 845 background: var(--color-primary-50); 846 border-bottom: 1px solid var(--color-primary-100); 847 font-size: var(--text-xs); 848 font-weight: 600; 849 color: var(--color-primary-700); 850 text-transform: uppercase; 851 letter-spacing: var(--tracking-wide); 852 } 853 854 .language-dropdown-icon { 855 width: 14px; 856 height: 14px; 857 } 858 859 .language-form { 860 padding: var(--space-2); 861 max-height: 300px; 862 overflow-y: auto; 863 } 864 865 .language-option { 866 display: flex; 867 align-items: center; 868 gap: var(--space-3); 869 width: 100%; 870 padding: var(--space-3) var(--space-4); 871 background: transparent; 872 border: none; 873 border-radius: var(--radius-md); 874 cursor: pointer; 875 transition: all var(--transition-fast); 876 font-size: var(--text-sm); 877 color: var(--text-primary); 878 text-align: left; 879 } 880 881 .language-option:hover { 882 background: var(--color-primary-50); 883 } 884 885 .language-option:focus { 886 outline: none; 887 background: var(--color-primary-100); 888 } 889 890 .language-option-flag { 891 font-size: var(--text-base); 892 line-height: 1; 893 width: 24px; 894 text-align: center; 895 } 896 897 .language-option-name { 898 flex: 1; 899 } 900 901 .language-option-check { 902 width: 16px; 903 height: 16px; 904 color: var(--color-primary-500); 905 opacity: 0; 906 transition: opacity var(--transition-fast); 907 } 908 909 .language-option:hover .language-option-check { 910 opacity: 1; 911 } 912 913 /* Scrollbar styling for dropdown */ 914 .language-form::-webkit-scrollbar {
915 width: 6px; 916 } 917 918 .language-form::-webkit-scrollbar-track { 919 background: var(--bg-tertiary); 920 border-radius: 3px; 921 } 922 923 .language-form::-webkit-scrollbar-thumb { 924 background: var(--color-slate-300); 925 border-radius: 3px; 926 } 927 928 .language-form::-webkit-scrollbar-thumb:hover { 929 background: var(--color-slate-400); 930 } 931 932 /* RTL Toggle Button */ 933 .rtl-toggle-btn { 934 display: flex; 935 align-items: center; 936 gap: var(--space-1); 937 padding: var(--space-2) var(--space-3); 938 background: var(--bg-secondary); 939 border: 1px solid var(--border-light); 940 border-radius: var(--radius-lg); 941 cursor: pointer; 942 font-size: var(--text-xs); 943 color: var(--text-secondary); 944 transition: all var(--transition-fast); 945 margin-left: var(--space-2); 946 } 947 948 .rtl-toggle-btn:hover { 949 background: var(--color-primary-50); 950 border-color: var(--color-primary-300); 951 color: var(--color-primary-600); 952 } 953 954 .rtl-toggle-btn svg { 955 width: 14px; 956 height: 14px; 957 } 958 959 .rtl-toggle-text { 960 font-weight: 500; 961 } 962 963 /* RTL mode adjustments for language selector */ 964 [dir="rtl"] .rtl-toggle-btn { 965 margin-left: 0; 966 margin-right: var(--space-2); 967 } 968</style> 969 970 </div> 971 </div> 972 973 <!-- Menu Bar --> 974 975 976<nav class="navbar"> 977 <div class="navbar-container"> 978 <!-- Brand with Logo --> 979 <a class="navbar-brand" href="#"> 980 <img src="/static/image/site_logo.png" alt="Tuguoba" class="navbar-logo" width="32" height="32" /> 981 <span>Tuguoba</span> 982 </a> 983 984 <!-- Desktop Navigation --> 985 <div class="navbar-menu"> 986 <ul class="navbar-nav"> 987 <!-- Document Scan --> 988 <li class="nav-item"> 989 <a class="nav-link " href="scanner"> 990 Document Scan 991 </a> 992 </li> 993 994 <!-- Face Dropdown --> 995 <li class="nav-item dropdown" onclick="toggleDropdown(this)"> 996 <a class="nav-link " href="#"> 997 998 Face 999 1000 <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 1001 <polyline points="6 9 12 15 18 9"></polyline> 1002 </svg> 1003 </a> 1004 <div class="dropdown-menu"> 1005 <a class="dropdown-item active" href="faceswap">Face Swap</a> 1006 <a class="dropdown-item active" href="faceswaponeimage">Face Swap in one image</a> 1007 <a class="dropdown-item active" href="faceaverage">Face Fusion</a> 1008 <a class="dropdown-item active" href="faceavatar">Face Avatar</a> 1009 </div> 1010 </li> 1011 1012 <!-- Image Effect Dropdown --> 1013 <li class="nav-item dropdown" onclick="toggleDropdown(this)"> 1014 <a class="nav-link " href="#" onclick="return false;"> 1015 1016 Image Effect 1017 1018 <svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 1019 <polyline points="6 9 12 15 18 9"></polyline> 1020 </svg> 1021 </a> 1022 <div class="dropdown-menu"> 1023 <a class="dropdown-item active" href="sketch">Sketch</a> 1024 <a class="dropdown-item active" href="sytle">Watercolor</a> 1025 <a class="dropdown-item active" href="oilpaint">Oilpaint</a> 1026 <a class="dropdown-item active" href="cartoon">Cartoon</a> 1027 <a class="dropdown-item active" href="enhance">Detail Enhance</a> 1028 <a class="dropdown-item active" href="image_enhance">Image Enhance</a> 1029 <a class="dropdown-item active" href="inpaint">Image Inpaint</a> 1030 <a class="dropdown-item active" href="bgeffect">Image Transform</a> 1031 <a class="dropdown-item active" href="imagefilter">Image Filter</a> 1032 <a class="dropdown-item active" href="deblur">Deblur</a> 1033 </div> 1034 </li> 1035 1036 <!-- Single Links --> 1037 <li class="nav-item"> 1038 <a class="nav-link " href="editor"> 1039 Image Editor 1040 </a> 1041 </li> 1042 <li class="nav-item"> 1043 <a class="nav-link " href="text_editor"> 1044 Text Editor 1045 </a> 1046 </li> 1047 </ul> 1048 1049 <!-- Right Side: Language Selector & Links --> 1050 <ul class="navbar-nav navbar-right"> 1051 1052 <!-- Language Selector in Navbar --> 1053 <li class="nav-item"> 1054 1055 1056 1057 <div class="nav-language-selector" id="navLanguageSelector"> 1058 <button class="nav-language-current" onclick="toggleNavLanguageDropdown()"> 1059 1060 1061
1062 <span class="nav-lang-name">English</span> 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 <svg class="nav-lang-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 1091 <polyline points="6 9 12 15 18 9"></polyline> 1092 </svg> 1093 </button> 1094 <div class="nav-language-dropdown" id="navLanguageDropdown"> 1095 <form action="/i18n/setlang/" method="post"> 1096 <input type="hidden" name="csrfmiddlewaretoken" value="eBuxlB9Fqh0xLzCwxdVT2F7mkBjNqXHt2Tzv5YYJmPPT2vTdhD2aEk9YB7yUviDJ"> 1097 1098 1099 1100 <button class="nav-language-option nav-language-current-selected" type="submit" name="language" value="en"> 1101 <span class="nav-lang-option-name">English</span> 1102 <svg style="width: 16px; height: 16px; margin-left: auto;" viewBox="0 0 24 24" fill="none" stroke-width="2"> 1103 <polyline points="20 6 9 17 4 12" stroke="currentColor"></polyline> 1104 </svg> 1105 </button> 1106 1107 1108 1109 1110 1111 <button class="nav-language-option" type="submit" name="language" value="zh-hans"> 1112 <span class="nav-lang-option-name">ç®ä½ä¸æ</span> 1113 </button> 1114 1115 1116 1117 1118 1119 <button class="nav-language-option" type="submit" name="language" value="zh-hant"> 1120 <span class="nav-lang-option-name">ç¹é«ä¸æ</span> 1121 </button> 1122 1123 1124 1125 1126 1127 <button class="nav-language-option" type="submit" name="language" value="ja"> 1128 <span class="nav-lang-option-name">æ¥æ¬èª</span> 1129 </button> 1130 1131 1132 1133 1134 1135 <button class="nav-language-option" type="submit" name="language" value="ko"> 1136 <span class="nav-lang-option-name">íêµì´</span> 1137 </button> 1138 1139 1140 1141 1142 1143 <button class="nav-language-option" type="submit" name="language" value="es"> 1144 <span class="nav-lang-option-name">español</span> 1145 </button> 1146 1147 1148 1149 1150 1151 <button class="nav-language-option" type="submit" name="language" value="pt"> 1152 <span class="nav-lang-option-name">Português</span> 1153 </button> 1154 1155 1156 1157 1158 1159 <button class="nav-language-option" type="submit" name="language" value="it"> 1160 <span class="nav-lang-option-name">italiano</span> 1161 </button> 1162 1163 1164 1165 1166 1167 <button class="nav-language-option" type="submit" name="language" value="ru"> 1168 <span class="nav-lang-option-name">Ð ÑÑÑкий</span> 1169 </button> 1170 1171 1172 1173 1174 1175 <button class="nav-language-option" type="submit" name="language" value="de">
1176 <span class="nav-lang-option-name">Deutsch</span> 1177 </button> 1178 1179 1180 1181 1182 1183 <button class="nav-language-option" type="submit" name="language" value="fr"> 1184 <span class="nav-lang-option-name">français</span> 1185 </button> 1186 1187 1188 1189 1190 1191 <button class="nav-language-option" type="submit" name="language" value="ar"> 1192 <span class="nav-lang-option-name">اÙعربÙÙØ©</span> 1193 </button> 1194 1195 1196 1197 1198 1199 <button class="nav-language-option" type="submit" name="language" value="th"> 1200 <span class="nav-lang-option-name">ภาษาà¹à¸à¸¢</span> 1201 </button> 1202 1203 1204 1205 </form> 1206 </div> 1207 </div> 1208 </li> 1209 1210 <li class="nav-item"> 1211 <a class="nav-link active" href="contact"> 1212 <strong>Contact</strong> 1213 </a> 1214 </li> 1215 1216 <!-- RTL Toggle --> 1217 1218 1219 </ul> 1220 </div> 1221 1222 <!-- Mobile Menu Toggle --> 1223 <button class="navbar-toggle" onclick="toggleMobileMenu()" aria-label="Toggle menu"> 1224 <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 1225 <line x1="3" y1="6" x2="21" y2="6"></line> 1226 <line x1="3" y1="12" x2="21" y2="12"></line> 1227 <line x1="3" y1="18" x2="21" y2="18"></line> 1228 </svg> 1229 </button> 1230 </div> 1231</nav> 1232 1233<!-- Mobile Menu --> 1234<div class="mobile-menu" id="mobileMenu"> 1235 <div class="flex justify-between items-center mb-6"> 1236 <a class="navbar-brand" href="#"> 1237 <img src="/static/image/site_logo.png" alt="Tuguoba" class="navbar-logo" width="32" height="32" /> 1238 <span>Tuguoba</span> 1239 </a> 1240 <button class="btn-icon" onclick="closeMobileMenu()" aria-label="Close menu"> 1241 <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 1242 <line x1="18" y1="6" x2="6" y2="18"></line> 1243 <line x1="6" y1="6" x2="18" y2="18"></line> 1244 </svg> 1245 </button> 1246 </div> 1247 1248 <!-- Mobile Language Selector - Dropdown Style --> 1249 <div class="mobile-language-section"> 1250 1251 1252 1253 <div class="mobile-language-selector" id="mobileLanguageSelector"> 1254 <button class="mobile-language-current" onclick="toggleMobileLanguageDropdown()"> 1255 1256 1257 1258 <span class="mobile-lang-name">English</span> 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 <svg class="mobile-lang-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 1287 <polyline points="6 9 12 15 18 9"></polyline> 1288 </svg> 1289 </button> 1290 <div class="mobile-language-dropdown" id="mobileLanguageDropdown"> 1291 <form action="/i18n/setlang/" method="post"> 1292 <input type="hidden" name="csrfmiddlewaretoken" value="eBuxlB9Fqh0xLzCwxdVT2F7mkBjNqXHt2Tzv5YYJmPPT2vTdhD2aEk9YB7yUviDJ"> 1293 1294 1295 1296 <button class="mobile-language-option mobile-language-current-selected" type="submit" name="language" value="en"> 1297 <span class="mobile-lang-option-name">English</span> 1298 <svg style="width: 16px; height: 16px; margin-left: auto;" viewBox="0 0 24 24" fill="none" stroke-width="2"> 1299 <polyline points="20 6 9 17 4 12" stroke="currentColor"></polyline> 1300 </svg> 1301 </button> 1302 1303 1304 1305 1306 1307 <button class="mobile-language-option" type="submit" name="language" value="zh-hans">
1308 <span class="mobile-lang-option-name">ç®ä½ä¸æ</span> 1309 </button> 1310 1311 1312 1313 1314 1315 <button class="mobile-language-option" type="submit" name="language" value="zh-hant"> 1316 <span class="mobile-lang-option-name">ç¹é«ä¸æ</span> 1317 </button> 1318 1319 1320 1321 1322 1323 <button class="mobile-language-option" type="submit" name="language" value="ja"> 1324 <span class="mobile-lang-option-name">æ¥æ¬èª</span> 1325 </button> 1326 1327 1328 1329 1330 1331 <button class="mobile-language-option" type="submit" name="language" value="ko"> 1332 <span class="mobile-lang-option-name">íêµì´</span> 1333 </button> 1334 1335 1336 1337 1338 1339 <button class="mobile-language-option" type="submit" name="language" value="es"> 1340 <span class="mobile-lang-option-name">español</span> 1341 </button> 1342 1343 1344 1345 1346 1347 <button class="mobile-language-option" type="submit" name="language" value="pt"> 1348 <span class="mobile-lang-option-name">Português</span> 1349 </button> 1350 1351 1352 1353 1354 1355 <button class="mobile-language-option" type="submit" name="language" value="it"> 1356 <span class="mobile-lang-option-name">italiano</span> 1357 </button> 1358 1359 1360 1361 1362 1363 <button class="mobile-language-option" type="submit" name="language" value="ru"> 1364 <span class="mobile-lang-option-name">Ð ÑÑÑкий</span> 1365 </button> 1366 1367 1368 1369 1370 1371 <button class="mobile-language-option" type="submit" name="language" value="de"> 1372 <span class="mobile-lang-option-name">Deutsch</span> 1373 </button> 1374 1375 1376 1377 1378 1379 <button class="mobile-language-option" type="submit" name="language" value="fr"> 1380 <span class="mobile-lang-option-name">français</span> 1381 </button> 1382 1383 1384 1385 1386 1387 <button class="mobile-language-option" type="submit" name="language" value="ar"> 1388 <span class="mobile-lang-option-name">اÙعربÙÙØ©</span> 1389 </button> 1390 1391 1392 1393 1394 1395 <button class="mobile-language-option" type="submit" name="language" value="th"> 1396 <span class="mobile-lang-option-name">ภาษาà¹à¸à¸¢</span> 1397 </button> 1398 1399 1400 1401 </form> 1402 </div> 1403 </div> 1404 </div> 1405 1406 <ul class="mobile-nav"> 1407 <li class="mobile-nav-item"><a class="mobile-nav-link" href="scanner">Document Scan</a></li> 1408 <li class="mobile-nav-item"><a class="mobile-nav-link" href="faceswap">Face Swap</a></li> 1409 <li class="mobile-nav-item"><a class="mobile-nav-link" href="faceswaponeimage">Face Swap in one image</a></li> 1410 <li class="mobile-nav-item"><a class="mobile-nav-link" href="faceaverage">Face Fusion</a></li> 1411 <li class="mobile-nav-item"><a class="mobile-nav-link" href="faceavatar">Face Avatar</a></li> 1412 <li class="mobile-nav-item"><a class="mobile-nav-link" href="sketch">Sketch</a></li> 1413 <li class="mobile-nav-item"><a class="mobile-nav-link" href="sytle">Watercolor</a></li> 1414 <li class="mobile-nav-item"><a class="mobile-nav-link" href="cartoon">Cartoon</a></li> 1415 <li class="mobile-nav-item"><a class="mobile-nav-link" href="enhance">Detail Enhance</a></li> 1416 <li class="mobile-nav-item"><a class="mobile-nav-link" href="image_enhance">Image Enhance</a></li> 1417 <li class="mobile-nav-item"><a class="mobile-nav-link" href="inpaint">Image Inpaint</a></li> 1418 <li class="mobile-nav-item"><a class="mobile-nav-link" href="bgeffect">Image Transform</a></li> 1419 <li class="mobile-nav-item"><a class="mobile-nav-link" href="imagefilter">Image Filter</a></li> 1420 <li class="mobile-nav-item"><a class="mobile-nav-link" href="deblur">Deblur</a></li> 1421 <li class="mobile-nav-item"><a class="mobile-nav-link" href="editor">Image Editor</a></li> 1422 <li class="mobile-nav-item"><a class="mobile-nav-link" href="text_editor">Text Editor</a></li> 1423 <li class="mobile-nav-item"><a class="mobile-nav-link" href="contact">Contact</a></li> 1424 </ul> 1425</div> 1426 1427<style> 1428 /* Dropdown base */ 1429 .nav-item.dropdown { 1430 position: relative; 1431 } 1432 1433 .dropdown-menu { 1434 position: absolute; 1435 top: 100%; 1436 left: 0; 1437 min-width: 200px; 1438 padding: 8px; 1439 margin-top: 4px; 1440 background: var(--bg-secondary); 1441 border: 1px solid var(--border-light); 1442 border-radius: 8px; 1443 box-shadow: 0 4px 12px rgba(0,0,0,0.1); 1444 opacity: 0; 1445 visibility: hidden; 1446 transform: translateY(-8px); 1447 transition: all 0.2s; 1448 z-index: 100; 1449 } 1450 1451 .nav-item.dropdown:hover .dropdown-menu, 1452 .nav-item.dropdown.open .dropdown-menu { 1453 opacity: 1; 1454 visibility: visible; 1455 transform: translateY(0); 1456 } 1457 1458 .dropdown-item { 1459 display: block; 1460 padding: 8px 12px; 1461 font-size: 13px; 1462 color: var(--text-primary); 1463 text-decoration: none; 1464 border-radius: 6px; 1465 transition: background 0.15s; 1466 } 1467 1468 .dropdown-item:hover { 1469 background: var(--color-primary-50); 1470 } 1471 1472 /* Navbar Logo */ 1473 .navbar-logo { 1474 height: 32px; 1475 width: auto; 1476 object-fit: contain; 1477 } 1478 1479 /* RTL mode adjustments */ 1480 [dir="rtl"] .navbar-right { 1481 margin-left: 0; 1482 margin-right: auto; 1483 } 1484 1485 [dir="rtl"] .nav-language-dropdown { 1486 right: auto; 1487 left: 0; 1488 } 1489</style> 1490 1491<!-- Navbar Scripts -->
1492<script> 1493 // Toggle dropdown menu 1494 function toggleDropdown(element) { 1495 element.classList.toggle('open'); 1496 } 1497 1498 // Close dropdowns when clicking outside 1499 document.addEventListener('click', function(event) { 1500 const dropdowns = document.querySelectorAll('.nav-item.dropdown'); 1501 dropdowns.forEach(function(dropdown) { 1502 if (!dropdown.contains(event.target)) { 1503 dropdown.classList.remove('open'); 1504 } 1505 }); 1506 }); 1507 1508 // Navbar language dropdown 1509 function toggleNavLanguageDropdown() { 1510 const dropdown = document.getElementById('navLanguageDropdown'); 1511 dropdown.classList.toggle('open'); 1512 } 1513 1514 // Close navbar language dropdown when clicking outside 1515 document.addEventListener('click', function(event) { 1516 const selector = document.getElementById('navLanguageSelector'); 1517 const dropdown = document.getElementById('navLanguageDropdown'); 1518 if (selector && !selector.contains(event.target)) { 1519 dropdown.classList.remove('open'); 1520 } 1521 }); 1522 1523 // Mobile language dropdown 1524 function toggleMobileLanguageDropdown() { 1525 const button = document.querySelector('.mobile-language-current'); 1526 const dropdown = document.getElementById('mobileLanguageDropdown'); 1527 1528 if (button && dropdown) { 1529 button.classList.toggle('open'); 1530 dropdown.classList.toggle('open'); 1531 } 1532 } 1533 1534 // Close mobile language dropdown when clicking outside 1535 document.addEventListener('click', function(event) { 1536 const selector = document.getElementById('mobileLanguageSelector'); 1537 const button = document.querySelector('.mobile-language-current'); 1538 const dropdown = document.getElementById('mobileLanguageDropdown'); 1539 1540 if (selector && !selector.contains(event.target)) { 1541 if (button) button.classList.remove('open'); 1542 if (dropdown) dropdown.classList.remove('open'); 1543 } 1544 }); 1545 1546 // Mobile menu toggle 1547 function toggleMobileMenu() { 1548 const menu = document.getElementById('mobileMenu'); 1549 menu.classList.toggle('open'); 1550 document.body.style.overflow = menu.classList.contains('open') ? 'hidden' : ''; 1551 } 1552 1553 function closeMobileMenu() { 1554 const menu = document.getElementById('mobileMenu'); 1555 menu.classList.remove('open'); 1556 document.body.style.overflow = ''; 1557 } 1558 1559 // Close mobile menu when clicking outside 1560 document.addEventListener('click', function(event) { 1561 const menu = document.getElementById('mobileMenu'); 1562 const toggle = document.querySelector('.navbar-toggle'); 1563 if (menu.classList.contains('open') && 1564 !menu.contains(event.target) && 1565 !toggle.contains(event.target)) { 1566 closeMobileMenu(); 1567 } 1568 }); 1569 1570 // Update RTL toggle button text based on current direction 1571 document.addEventListener('DOMContentLoaded', function() { 1572 var navToggleText = document.querySelector('.nav-rtl-text'); 1573 if (navToggleText && window.RTL) { 1574 var updateNavToggleText = function() { 1575 navToggleText.textContent = window.RTL.getDirection() === 'rtl' ? 'LTR' : 'RTL'; 1576 }; 1577 updateNavToggleText(); 1578 window.addEventListener('directionChanged', updateNavToggleText); 1579 } 1580}); 1581</script>
1581 1582 1583 1584 <!-- Main Content --> 1585 <main class="page-main"> 1586 <div class="container"> 1587 <div class="contact-content"> 1588 <h1 class="contact-title"> 1589 <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline-block; vertical-align: middle; margin-right: var(--space-2);"> 1590 <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> 1591 <circle cx="12" cy="7" r="4"></circle> 1592 </svg> 1593 Contact Details 1594 </h1> 1595 <div class="contact-info"> 1596 <p class="contact-label">Email</p> 1597 <p class="contact-value">[email protected]</p> 1598 </div> 1599 </div> 1600 </div> 1601 </main> 1602 1603</div> 1604 1605 1606 1607<link rel="stylesheet" type="text/css" href="/static/css/footer.css" /> 1608<footer class="footer"> 1609 <div class="footer-content"> 1610 <!-- Footer Main Content --> 1611 <div class="footer-main"> 1612 <!-- Brand Section --> 1613 <div class="footer-brand"> 1614 <a href="#" class="footer-brand-link"> 1615 <img src="/static/image/site_logo.png" alt="Tuguoba" class="footer-brand-logo" width="32" height="32" /> 1616 <span class="footer-brand-name">Tuguoba</span> 1617 </a> 1618 <p class="footer-brand-tagline">AI-Powered Image Processing Tools</p> 1619 </div> 1620 1621 <!-- Navigation Section --> 1622 <div class="footer-nav"> 1623 <!-- Legal Links --> 1624 <div class="footer-nav-group"> 1625 <h4 class="footer-nav-title">Policy</h4> 1626 <div class="footer-nav-list"> 1627 <a href="PrivacyPolicy" class="footer-nav-link" target="_blank">Privacy Policy</a> 1628 <a href="TermOfService" class="footer-nav-link" target="_blank">Terms of Service</a> 1629 </div> 1630 </div> 1631 1632 <!-- Windows Apps --> 1633 <div class="footer-nav-group"> 1634 <h4 class="footer-nav-title">Related</h4> 1635 <div class="footer-nav-list"> 1636 <a href="https://apps.microsoft.com/detail/9PJ71PK3G2FD" class="footer-nav-link" target="_blank" rel="noopener noreferrer">TryFit - Virtual Try-On</a> 1637 <a href="https://apps.microsoft.com/detail/9N5SQ4KZRZ8L" class="footer-nav-link" target="_blank" rel="noopener noreferrer">DreamForge - Image Creator and Editor</a> 1638 <a href="https://apps.microsoft.com/detail/9ND1FC1CWK25" class="footer-nav-link" target="_blank" rel="noopener noreferrer">PixelForge - Image Upscaler and Background Remover</a> 1639 </div> 1640 </div> 1641 1642 <!-- Related (only for scanner) --> 1643 1644 </div> 1645 </div> 1646 1647 <!-- Footer Bottom --> 1648 <div class="footer-bottom"> 1649 <p class="footer-copyright">© 2026 Tuguoba. All rights reserved.</p> 1650 <p class="footer-tagline">Transform your images with AI</p> 1651 </div> 1652 </div> 1653</footer> 1654 1655<!-- Share Buttons - placed outside footer --> 1656<!-- AddToAny BEGIN --> 1657<!--<a class="a2a_dd" href="https://www.addtoany.com/share"><img src="https://static.addtoany.com/buttons/share_save_171_16.png" width="171" height="16" border="0" alt="Share"></a>--> 1658<!--<a class="a2a_dd uk-icon-hover uk-icon-small uk-icon-share-alt" href="https://www.addtoany.com/share"></a>--> 1659<!--
1659<script>--> 1660<!--var a2a_config = a2a_config || {};--> 1661<!--a2a_config.num_services = 4;--> 1662<!--</script>
1662--> 1663<!--
1663<script async src="https://static.addtoany.com/menu/page.js"></script>
1663--> 1664<!-- AddToAny END --> 1665 1666 1667<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" data-a2a-scroll-show="0,40" style="bottom:0px; right:0px;"> 1668 <a class="a2a_button_whatsapp"></a> 1669 <a class="a2a_button_x"></a> 1670 <a class="a2a_button_wechat"></a> 1671 <a class="a2a_button_line"></a> 1672<!-- <a class="a2a_button_sina_weibo"></a>--> 1673 <a class="a2a_dd" href="https://www.addtoany.com/share"></a> 1674</div> 1675
1676<script async src="https://static.addtoany.com/menu/page.js"></script>
1676 1677 1678</body> 1679</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.