Languages

View Demo

Source


<!doctype html>

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">

  <title>Muut language versions</title>

  <!-- optimize for mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- force latest IE rendering engine -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- Muut styling -->
  <link rel="stylesheet" href="https://cdn.muut.com/1/moot.css">

  <!-- page CSS -->
  <style>
   body {
    font-family: "myriad pro", tahoma, verdana, arial, sans-serif;
    font-size: 18px; margin: 0; padding: 0;
   }
   header { text-align: center; background-color: #262626; padding: .4em }
   #language { font-size: 18px }
  </style>

</head>

<body>
  <header>
    <select id="language">
      <option value="ar">Arabic</option>
      <option value="pt-br">Brazil Portuguese</option>
      <option value="bg">Bulgarian</option>
      <option value="zh">Chinese</option>
      <option value="tw">Chinese / Taiwan</option>
      <option value="da">Danish</option>
      <option value="nl">Dutch</option>
      <option value="en">English</option>
      <option value="fa">Farsi / Persian</option>
      <option value="fi">Finnish</option>
      <option value="fr">French</option>
      <option value="de">German</option>
      <option value="hu">Hungarian</option>
      <option value="he">Hebrew</option>
      <option value="id">Indonesian</option>
      <option value="it">Italian</option>
      <option value="ja">Japanese</option>
      <option value="ko">Korean</option>
      <option value="no">Norwegian</option>
      <option value="pl">Polish</option>
      <option value="pt">Portugese</option>
      <option value="ru">Russian</option>
      <option value="es">Spanish</option>
      <option value="se">Swedish</option>
      <option value="ta">Tamil</option>
      <option value="tr">Turkish</option>
      <option value="uk">Ukrainian</option>
    </select>
  </header>

  <!-- Muut client -->
  <a class="muut" href="https://muut.com/i/goma">Muut forums</a>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

  <script>

    // given language in URL hash
    var lang = location.search.slice(1) || 'zh'
    document.write('<script src="https://cdn.muut.com/1/moot.' + lang +'.min.js"><\/script>')

    // language selector
    $('#language').val(lang).change(function() {
      location.href = '?' + $(this).val()
    })

    // right to left (RTL) ?
    if (/ar|fa|he/.test(lang)) {
      document.write('<link rel="stylesheet" type="text/css" href="https://cdn.muut.com/1/rtl.css">')
      $(function() {
        $('html').attr('dir', 'rtl')
        $('body').addClass('rtl')
      })
    }

  </script>

</body>

</html>

View Demo