Site Title

了解更多内容。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GlobalGestures.com</title>
  <style>
    :root {
      --cream: #fff7e6;
      --cream-dark: #f4dfb5;
      --brown: #3d2a16;
      --soft-brown: #725436;
      --red: #d8342a;
      --red-dark: #9d1f18;
      --white: #ffffff;
      --shadow: 0 18px 40px rgba(61, 42, 22, 0.18);
      --radius: 24px;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: Arial, Helvetica, sans-serif;
      background: var(--cream);
      color: var(--brown);
      line-height: 1.6;
    }
    header {
      padding: 24px 7%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      position: sticky;
      top: 0;
      background: rgba(255, 247, 230, 0.92);
      backdrop-filter: blur(10px);
      z-index: 20;
      border-bottom: 1px solid rgba(61, 42, 22, 0.08);
    }
    .logo {
      font-size: 1.4rem;
      font-weight: 800;
      letter-spacing: 0.5px;
    }
    .logo span {
      color: var(--red);
    }
    nav {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
    }
    nav a {
      color: var(--brown);
      text-decoration: none;
      font-weight: 600;
      font-size: 0.95rem;
    }
    nav a:hover {
      color: var(--red);
    }
    .hero {
      min-height: 86vh;
      padding: 72px 7% 50px;
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 48px;
      align-items: center;
    }
    .hero-text h1 {
      font-size: clamp(2.4rem, 6vw, 5.3rem);
      line-height: 0.95;
      margin-bottom: 24px;
      letter-spacing: -2px;
    }
    .hero-text h1 span {
      color: var(--red);
    }
    .hero-text p {
      font-size: 1.1rem;
      max-width: 560px;
      color: var(--soft-brown);
      margin-bottom: 28px;
    }
    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }
    .button {
      border: none;
      border-radius: 999px;
      padding: 13px 22px;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(61, 42, 22, 0.18);
    }
    .primary {
      background: var(--red);
      color: white;
    }
    .secondary {
      background: white;
      color: var(--brown);
      border: 1px solid rgba(61, 42, 22, 0.12);
    }
    .map-card {
      background: linear-gradient(135deg, #fff9ee, #f5ddaa);
      border-radius: var(--radius);
      padding: 28px;
      box-shadow: var(--shadow);
      border: 1px solid rgba(61, 42, 22, 0.08);
    }
    .map-card h2 {
      margin-bottom: 6px;
      font-size: 1.35rem;
    }
    .map-card p {
      color: var(--soft-brown);
      margin-bottom: 18px;
      font-size: 0.98rem;
    }
    .world-map {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 20px;
      overflow: hidden;
      background:
        radial-gradient(circle at 19% 40%, #c6dca9 0 10%, transparent 11%),
        radial-gradient(circle at 33% 35%, #c6dca9 0 8%, transparent 9%),
        radial-gradient(circle at 53% 42%, #c6dca9 0 15%, transparent 16%),
        radial-gradient(circle at 69% 34%, #c6dca9 0 12%, transparent 13%),
        radial-gradient(circle at 78% 62%, #c6dca9 0 7%, transparent 8%),
        linear-gradient(180deg, #bfe5ff, #dff4ff);
      border: 3px solid white;
    }
    .world-map::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.25) 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.7;
    }
    .pin {
      position: absolute;
      width: 22px;
      height: 22px;
      background: var(--red);
      border: 3px solid white;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      cursor: pointer;
      z-index: 3;
      box-shadow: 0 8px 16px rgba(80, 0, 0, 0.25);
      animation: pulse 2.4s infinite;
    }
    .pin span {
      position: absolute;
      transform: rotate(45deg) translateY(-34px);
      background: white;
      color: var(--brown);
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      box-shadow: 0 6px 14px rgba(61, 42, 22, 0.15);
    }
    .pin:hover span {
      opacity: 1;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(216, 52, 42, 0.35); }
      50% { box-shadow: 0 0 0 12px rgba(216, 52, 42, 0); }
    }
    .section {
      padding: 82px 7%;
    }
    .section-title {
      max-width: 720px;
      margin-bottom: 34px;
    }
    .section-title h2 {
      font-size: clamp(2rem, 4vw, 3.5rem);
      line-height: 1;
      margin-bottom: 12px;
    }
    .section-title p {
      color: var(--soft-brown);
      font-size: 1.05rem;
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .feature-card {
      background: white;
      border-radius: 22px;
      padding: 24px;
      box-shadow: 0 12px 28px rgba(61, 42, 22, 0.08);
      border: 1px solid rgba(61, 42, 22, 0.08);
    }
    .feature-card .icon {
      font-size: 2rem;
      margin-bottom: 12px;
    }
    .feature-card h3 {
      margin-bottom: 8px;
      font-size: 1.15rem;
    }
    .feature-card p {
      color: var(--soft-brown);
      font-size: 0.95rem;
    }
    .culture-area {
      background: #fff0cf;
    }
    .flashcard-preview {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 28px;
      align-items: stretch;
    }
    .culture-list {
      display: grid;
      gap: 12px;
    }
    .culture-button {
      width: 100%;
      border: 1px solid rgba(61, 42, 22, 0.1);
      background: white;
      border-radius: 18px;
      padding: 18px;
      text-align: left;
      cursor: pointer;
      color: var(--brown);
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .culture-button:hover,
    .culture-button.active {
      background: var(--brown);
      color: white;
      transform: translateX(4px);
    }
    .flashcard {
      background: white;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      min-height: 520px;
      border: 1px solid rgba(61, 42, 22, 0.08);
    }
    .flashcard-hero {
      min-height: 210px;
      padding: 24px;
      color: white;
      display: flex;
      align-items: flex-end;
      position: relative;
      overflow: hidden;
    }
    .flashcard-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--pattern);
      opacity: 0.38;
    }
    .flashcard-hero h3 {
      position: relative;
      font-size: 2.2rem;
      line-height: 1;
      text-shadow: 0 4px 14px rgba(0,0,0,0.3);
    }
    .flashcard-content {
      padding: 26px;
    }
    .tag-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
    .tag {
      background: #fff2d2;
      color: var(--brown);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 700;
    }
    .info-block {
      margin-bottom: 18px;
    }
    .info-block h4 {
      font-size: 0.98rem;
      margin-bottom: 6px;
      color: var(--red-dark);
    }
    .info-block p {
      color: var(--soft-brown);
      font-size: 0.96rem;
    }
    .edit-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding-top: 10px;
      border-top: 1px solid rgba(61, 42, 22, 0.1);
    }
    .small-note {
      font-size: 0.82rem;
      color: var(--soft-brown);
    }
    .edit-panel {
      display: none;
      margin-top: 16px;
      padding: 16px;
      background: #fff7e6;
      border-radius: 16px;
      border: 1px dashed rgba(61, 42, 22, 0.25);
    }
    .edit-panel.show {
      display: block;
    }
    .edit-panel label {
      display: block;
      margin-bottom: 6px;
      font-weight: 700;
      font-size: 0.88rem;
    }
    .edit-panel textarea,
    .edit-panel input {
      width: 100%;
      border: 1px solid rgba(61, 42, 22, 0.18);
      border-radius: 12px;
      padding: 10px;
      margin-bottom: 10px;
      font-family: inherit;
      background: white;
    }
    .instagram-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: center;
    }
    .insta-card {
      background: white;
      border-radius: 28px;
      box-shadow: var(--shadow);
      overflow: hidden;
      max-width: 430px;
      justify-self: center;
      border: 1px solid rgba(61, 42, 22, 0.08);
    }
    .insta-header {
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(61, 42, 22, 0.08);
    }
    .avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--red);
      color: white;
      display: grid;
      place-items: center;
      font-weight: 800;
    }
    .insta-image {
      aspect-ratio: 1 / 1;
      background:
        radial-gradient(circle at 70% 20%, rgba(216, 52, 42, 0.22), transparent 24%),
        radial-gradient(circle at 22% 72%, rgba(61, 42, 22, 0.18), transparent 25%),
        linear-gradient(135deg, #fff7e6, #f4dfb5);
      display: grid;
      place-items: center;
      text-align: center;
      padding: 38px;
    }
    .insta-image h3 {
      font-size: 2.4rem;
      line-height: 1;
      margin-bottom: 12px;
    }
    .insta-caption {
      padding: 16px;
      color: var(--soft-brown);
    }
    .footer {
      padding: 42px 7%;
      background: var(--brown);
      color: #fff7e6;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.48);
      display: none;
      place-items: center;
      padding: 20px;
      z-index: 50;
    }
    .modal.show {
      display: grid;
    }
    .modal-card {
      background: white;
      border-radius: 24px;
      padding: 26px;
      width: min(520px, 100%);
      box-shadow: var(--shadow);
    }
    .modal-card h3 {
      margin-bottom: 8px;
    }
    .modal-card p {
      color: var(--soft-brown);
      margin-bottom: 18px;
    }
    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }
    @media (max-width: 900px) {
      header {
        align-items: flex-start;
        flex-direction: column;
      }
      .hero,
      .flashcard-preview,
      .instagram-section {
        grid-template-columns: 1fr;
      }
      .features-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 620px) {
      .hero {
        padding-top: 42px;
      }
      .features-grid {
        grid-template-columns: 1fr;
      }
      .world-map {
        aspect-ratio: 1 / 0.82;
      }
      nav {
        gap: 12px;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">Global<span>Gestures</span>.com</div>
    <nav aria-label="Main navigation">
      <a href="#map">Map</a>
      <a href="#features">Features</a>
      <a href="#cultures">Cultures</a>
      <a href="#share">Instagram</a>
    </nav>
  </header>
  <main>
    <section class="hero" id="map">
      <div class="hero-text">
        <h1>Learn culture through <span>small gestures</span>.</h1>
        <p>
          GlobalGestures.com helps people in Australia understand cultural gestures,
          meanings, and social habits through a simple interactive map and easy flashcards.
        </p>
        <div class="hero-actions">
          <a class="button primary" href="#cultures">Explore cultures</a>
          <a class="button secondary" href="#features">See features</a>
        </div>
      </div>
      <div class="map-card">
        <h2>Interactive world map</h2>
        <p>Click a red pin to open a culture flashcard.</p>
        <div class="world-map" aria-label="Interactive world map with country pins">
          <button class="pin" style="left: 72%; top: 42%;" data-country="Japan" aria-label="Open Japan flashcard"><span>Japan</span></button>
          <button class="pin" style="left: 65%; top: 45%;" data-country="China" aria-label="Open China flashcard"><span>China</span></button>
          <button class="pin" style="left: 60%; top: 54%;" data-country="India" aria-label="Open India flashcard"><span>India</span></button>
          <button class="pin" style="left: 50%; top: 38%;" data-country="Italy" aria-label="Open Italy flashcard"><span>Italy</span></button>
          <button class="pin" style="left: 48%; top: 42%;" data-country="Greece" aria-label="Open Greece flashcard"><span>Greece</span></button>
          <button class="pin" style="left: 78%; top: 67%;" data-country="Australia" aria-label="Open Australia flashcard"><span>Australia</span></button>
        </div>
      </div>
    </section>
    <section class="section" id="features">
      <div class="section-title">
        <h2>Key website features</h2>
        <p>The site is designed to be simple, visual, interactive, and easy for different users to understand.</p>
      </div>
      <div class="features-grid">
        <article class="feature-card">
          <div class="icon">🗺️</div>
          <h3>Clickable world map</h3>
          <p>Users select a country by clicking a red map pin, making the site feel visual and easy to use.</p>
        </article>
        <article class="feature-card">
          <div class="icon">🎴</div>
          <h3>Culture flashcards</h3>
          <p>Each country has a flashcard showing gestures, meaning, cultural tips, and related news.</p>
        </article>
        <article class="feature-card">
          <div class="icon">🎨</div>
          <h3>Culture-based aesthetics</h3>
          <p>Each flashcard uses colours, patterns, and images that match the culture it introduces.</p>
        </article>
        <article class="feature-card">
          <div class="icon">✍️</div>
          <h3>Verified edit system</h3>
          <p>A mock edit button allows approved users to suggest updates, keeping the information fresh.</p>
        </article>
        <article class="feature-card">
          <div class="icon">📱</div>
          <h3>Instagram promotion</h3>
          <p>The visual style can continue on Instagram so users recognise the brand across platforms.</p>
        </article>
        <article class="feature-card">
          <div class="icon">🧠</div>
          <h3>Low cognitive load</h3>
          <p>The layout avoids too much text at once, so users only see the information they choose.</p>
        </article>
      </div>
    </section>
    <section class="section culture-area" id="cultures">
      <div class="section-title">
        <h2>Culture flashcards</h2>
        <p>Choose a culture below. The flashcard changes based on the country selected.</p>
      </div>
      <div class="flashcard-preview">
        <div class="culture-list" id="cultureList"></div>
        <article class="flashcard" aria-live="polite">
          <div class="flashcard-hero" id="cardHero">
            <h3 id="cardTitle">Japan</h3>
          </div>
          <div class="flashcard-content">
            <div class="tag-row" id="tagRow"></div>
            <div class="info-block">
              <h4>Common gesture</h4>
              <p id="gestureText"></p>
            </div>
            <div class="info-block">
              <h4>What it can mean</h4>
              <p id="meaningText"></p>
            </div>
            <div class="info-block">
              <h4>Social tip</h4>
              <p id="tipText"></p>
            </div>
            <div class="edit-bar">
              <span class="small-note">Verified contributors can suggest new information.</span>
              <button class="button primary" id="editButton">Edit</button>
            </div>
            <div class="edit-panel" id="editPanel">
              <label for="editName">Contributor name</label>
              <input id="editName" type="text" placeholder="Enter your name" />
              <label for="editSuggestion">Suggested update</label>
              <textarea id="editSuggestion" rows="4" placeholder="Add a new gesture, cultural tip, or news update..."></textarea>
              <button class="button secondary" id="submitSuggestion">Submit suggestion</button>
            </div>
          </div>
        </article>
      </div>
    </section>
    <section class="section" id="share">
      <div class="instagram-section">
        <div class="section-title">
          <h2>Cross-platform promotion</h2>
          <p>
            The same warm background, flashcard layout, and cultural theme can be used on Instagram posts.
            This makes the website and social media page feel connected.
          </p>
          <a class="button primary" href="#map">Back to map</a>
        </div>
        <div class="insta-card" aria-label="Instagram post example">
          <div class="insta-header">
            <div class="avatar">G</div>
            <strong>@globalgestures</strong>
          </div>
          <div class="insta-image">
            <div>
              <h3>Do gestures mean the same thing everywhere?</h3>
              <p>Tap the map. Learn the culture. Avoid awkward mistakes.</p>
            </div>
          </div>
          <div class="insta-caption">
            <strong>GlobalGestures</strong> A quick guide to cultural gestures in Australia’s multicultural community.
          </div>
        </div>
      </div>
    </section>
  </main>
  <footer class="footer">
    <p><strong>GlobalGestures.com</strong> — promoting inclusion through cultural understanding.</p>
    <p>Designed for people living, studying, and working in Australia.</p>
  </footer>
  <div class="modal" id="modal">
    <div class="modal-card">
      <h3 id="modalTitle">Suggestion submitted</h3>
      <p id="modalText">Thank you. Your update would be reviewed by a verified moderator before being published.</p>
      <div class="modal-actions">
        <button class="button primary" id="closeModal">Close</button>
      </div>
    </div>
  </div>
  <script>
    const cultures = {
      Japan: {
        tags: ["Respect", "Bowing", "East Asia"],
        gesture: "Bowing is often used when greeting, thanking, apologising, or showing respect.",
        meaning: "The depth and length of the bow can show different levels of politeness and formality.",
        tip: "A small bow or polite nod can be a respectful response, especially in formal situations.",
        background: "linear-gradient(135deg, rgba(160, 0, 20, 0.9), rgba(239, 147, 147, 0.8)), radial-gradient(circle at 22% 42%, white 0 13%, transparent 14%)",
        pattern: "repeating-linear-gradient(45deg, rgba(255,255,255,0.35) 0 8px, transparent 8px 18px)"
      },
      China: {
        tags: ["Greeting", "Respect", "Family"],
        gesture: "A light handshake or nod is common in many modern social and professional settings.",
        meaning: "Respect can be shown through polite distance, careful wording, and attention to seniority.",
        tip: "Avoid being too loud or too physically familiar when meeting someone for the first time.",
        background: "linear-gradient(135deg, rgba(171, 22, 22, 0.95), rgba(245, 184, 65, 0.86))",
        pattern: "radial-gradient(circle, rgba(255,255,255,0.35) 0 2px, transparent 3px) 0 0 / 24px 24px"
      },
      India: {
        tags: ["Namaste", "Respect", "South Asia"],
        gesture: "The namaste gesture is made by placing both palms together near the chest.",
        meaning: "It can mean hello, goodbye, thank you, or respect, depending on the situation.",
        tip: "This gesture is useful because it is polite and does not require physical contact.",
        background: "linear-gradient(135deg, rgba(255, 135, 35, 0.95), rgba(31, 122, 70, 0.82))",
        pattern: "repeating-radial-gradient(circle at center, rgba(255,255,255,0.38) 0 3px, transparent 4px 18px)"
      },
      Italy: {
        tags: ["Expression", "Conversation", "Europe"],
        gesture: "Hand gestures are often used while speaking to add emotion, emphasis, or humour.",
        meaning: "The same gesture can change meaning depending on facial expression and tone.",
        tip: "Watch the full context instead of copying a gesture without understanding it first.",
        background: "linear-gradient(135deg, rgba(33, 135, 84, 0.92), rgba(220, 50, 47, 0.86))",
        pattern: "linear-gradient(90deg, rgba(255,255,255,0.35) 0 33%, transparent 33% 66%, rgba(255,255,255,0.22) 66%)"
      },
      Greece: {
        tags: ["Body language", "History", "Europe"],
        gesture: "Open-palm gestures can be sensitive in some contexts and should be used carefully.",
        meaning: "Some gestures that seem normal in one culture may feel rude in another.",
        tip: "When unsure, choose simple spoken language and friendly facial expression instead.",
        background: "linear-gradient(135deg, rgba(33, 105, 176, 0.95), rgba(130, 190, 235, 0.86))",
        pattern: "repeating-linear-gradient(0deg, rgba(255,255,255,0.36) 0 8px, transparent 8px 18px)"
      },
      Australia: {
        tags: ["Multicultural", "Community", "Inclusion"],
        gesture: "A friendly wave, smile, or casual greeting is common in many everyday spaces.",
        meaning: "Australia includes many cultures, so meanings can change depending on background and context.",
        tip: "Ask politely if you are not sure. Curiosity with respect is better than guessing.",
        background: "linear-gradient(135deg, rgba(46, 111, 164, 0.92), rgba(238, 184, 92, 0.86))",
        pattern: "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35) 0 4px, transparent 5px), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.28) 0 5px, transparent 6px)"
      }
    };
    const cultureList = document.getElementById("cultureList");
    const cardTitle = document.getElementById("cardTitle");
    const cardHero = document.getElementById("cardHero");
    const tagRow = document.getElementById("tagRow");
    const gestureText = document.getElementById("gestureText");
    const meaningText = document.getElementById("meaningText");
    const tipText = document.getElementById("tipText");
    const editButton = document.getElementById("editButton");
    const editPanel = document.getElementById("editPanel");
    const submitSuggestion = document.getElementById("submitSuggestion");
    const modal = document.getElementById("modal");
    const closeModal = document.getElementById("closeModal");
    function renderCulture(country) {
      const data = cultures[country];
      cardTitle.textContent = country;
      cardHero.style.background = data.background;
      cardHero.style.setProperty("--pattern", data.pattern);
      gestureText.textContent = data.gesture;
      meaningText.textContent = data.meaning;
      tipText.textContent = data.tip;
      tagRow.innerHTML = data.tags.map(tag => `<span class="tag">${tag}</span>`).join("");
      editPanel.classList.remove("show");
      document.querySelectorAll(".culture-button").forEach(button => {
        button.classList.toggle("active", button.dataset.country === country);
      });
      document.getElementById("cultures").scrollIntoView({ behavior: "smooth", block: "start" });
    }
    Object.keys(cultures).forEach(country => {
      const button = document.createElement("button");
      button.className = "culture-button";
      button.dataset.country = country;
      button.innerHTML = `<span>${country}</span><span>→</span>`;
      button.addEventListener("click", () => renderCulture(country));
      cultureList.appendChild(button);
    });
    document.querySelectorAll(".pin").forEach(pin => {
      pin.addEventListener("click", () => renderCulture(pin.dataset.country));
    });
    editButton.addEventListener("click", () => {
      editPanel.classList.toggle("show");
    });
    submitSuggestion.addEventListener("click", () => {
      modal.classList.add("show");
      document.getElementById("editName").value = "";
      document.getElementById("editSuggestion").value = "";
      editPanel.classList.remove("show");
    });
    closeModal.addEventListener("click", () => modal.classList.remove("show"));
    modal.addEventListener("click", event => {
      if (event.target === modal) modal.classList.remove("show");
    });
    renderCulture("Japan");
  </script>
</body>
</html>