talk.html

---
layout: default
title: Everbody Talks
javascript: talk
---

<div class="talk-container main-container" data-controller="talk" data-talk-qr-value="false"
  data-talk-pend-template-value="正在接收：#{TEMPLATE}。"
  data-talk-room-template-value="已切换到房间#{TEMPLATE}。"
  data-talk-clip-template-value="已经同步剪贴板。"
  data-talk-file-in-template-value="<span class='icon-attch-outline'></span> 收到文件：#{TEMPLATE}。"
  data-talk-file-out-template-value="<span class='icon-attch-outline'></span> 正在发送文件：#{TEMPLATE}。"
  data-talk-peer-template-value="#{TEMPLATE}已经加入房间。"
  data-talk-pout-template-value="#{TEMPLATE}已经离开房间。"
  data-talk-locale-value="cn">

  <div class="labelgroup" id="talk-labelgroup"
    data-action="click->talk#config click@document->talk#closeConfig">
    <!-- Page label and config button -->
    <div class="posts-label">
      <h1 class="posts-label__title">talk<span class="talk__config-icon icon-cog"></span></h1>
    </div>
    <!-- Floating config panel -->
    <div class="talk__config">
      <!-- QRCode -->
      <div class="talk__qrcode-group" data-action="click->talk#shareRoomLink">
        <div class="talk__qrcode">
          <canvas data-talk-target="qrcode" width="180" height="180"></canvas>
        </div>
        <span class="talk__qrcode-desc muted-text">点击二维码分享连接。</span>
      </div>
      <!-- Inputs -->
      <div class="talk__config-form wanna__form">
        <div class="form-group talk__config-server">
          <input type="text" name="server" id="talk__server" class="talk__server talk__text-field text-field"
          data-talk-target="server" required>
          <label for="talk__server" class="icon-swap_vert">频道</label>
          <select id="talk__server-selector" class="talk__server-selector talk__select select"
            data-talk-target="serverSelect" data-action="change->talk#fillServer">
            <option value="wss://orange.wannaexpresso.com:5614">橘子</option>
            <option value="wss://romery.wannaexpresso.com:5614">穆兰</option>
            <option value="ws://127.0.0.1:5613">本地</option>
            {% if jekyll.environment == 'development' %}
            <option value="wss://192.168.28.179:5614">调试</option>
            {% endif %}
          </select>
        </div>
        <div class="form-group">
          <input type="text" name="room" id="talk__room" class="talk__text-field text-field"
            data-talk-target="room" required>
          <label for="talk__room" class="icon-location">房间</label>
          <span class="muted-text">如果留空，服务器将自动分配房间。</span>
        </div>
      </div>
      <div class="talk__config-actions">
        <button class="talk__config-submit button" type="submit"
          data-action="talk#join">连接</button>
        <span class="talk__config-close-btn button"
          data-action="click->talk#closeConfig">关闭</span>
      </div>
    </div>
  </div>

  <div class="talk__info">
    <div class="talk__description muted-text">
      你来我往，为你解决没有数据线的烦恼。不论是你的手机与电脑，你和你的伙伴，还是你和你的家人，只要连接到同一个伺服器，进入同一个房间，就能畅快联络。互通有无，就这么简单。
    </div>
  </div>

  <div class="talk__message-box progress">
    <textarea class="talk__message-textarea" rows="4" data-talk-target="message"
      placeholder="输入你的信息..."></textarea>
  </div>

  <div class="talk__message-actions">
    <div class="talk__file-name icon-attach-outline" data-talk-target="filename"></div>
    <button for="talk__file" class="talk__file-label talk__action"
      data-talk-target="connectedAction" data-action="talk#chooseFile" data-label="文件" disabled>
      {% include icon-stack.html icon="icon-folder-add" %}
      <input type="file" id="talk__file" class="talk__file"
        data-talk-target="file connectedAction" data-action="change->talk#updateFileName"
        aria-label="choose file" disabled>
    </button>
    <button class="talk__clipboard talk__action"
      data-action="talk#syncClipboard visibilitychange@document->talk#applyClipboard"
      data-label="剪贴板" aria-label="sync clipboard" data-talk-target="connectedAction" disabled>
      {% include icon-stack.html icon="icon-clipboard" %}
    </button>
    <button class="talk__submit-message talk__action" data-action="talk#send" data-label="发送"
      aria-label="send message" data-talk-target="connectedAction" disabled>
      {% include icon-stack.html icon="icon-forward-outline" %}
    </button>
  </div>

  <div class="talk__log-panel">
    <h3 class="talk__log-peer" data-talk-target="peer" data-connected-template="已连接" data-disconnected-template="未连接">未连接</h3>
    <div class="talk__log-area" data-talk-target="logArea" data-placeholder=". . ."></div>
  </div>
</div>