99 lines
3.6 KiB
Plaintext
99 lines
3.6 KiB
Plaintext
<%= render HeaderComponent.new(title: "Chat") %>
|
|
|
|
<%= render MainSimpleComponent.new do %>
|
|
<section>
|
|
<p class="mb-6">
|
|
Chat with anyone on the open Jabber network. Message people directly, or
|
|
join public channels or private rooms.
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<h3>Your Chat Address</h3>
|
|
<p class="mb-6">
|
|
When you exchange contacts with people, give them your
|
|
address, or add them using their address:
|
|
</p>
|
|
<p data-controller="clipboard" class="flex gap-1 sm:w-2/5">
|
|
<input type="text" id="user_address" class="grow"
|
|
value=<%= current_user.address %> disabled="disabled"
|
|
data-clipboard-target="source" />
|
|
<button id="copy-user-address" class="btn-md btn-icon btn-outline shrink-0"
|
|
data-clipboard-target="trigger" data-action="clipboard#copy"
|
|
title="Copy to clipboard">
|
|
<span class="content-initial">
|
|
<%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
|
</span>
|
|
<span class="content-active hidden">
|
|
<%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
|
</span>
|
|
</button>
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<h3>Chat Apps</h3>
|
|
<p>
|
|
Use your Kosmos account with many different apps, and on any devices
|
|
you wish! When opening an app for the first time, just enter your
|
|
user address and password to log in.
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<h3>Recommended Apps</h3>
|
|
<div data-controller="tabs"
|
|
data-tabs-active-tab="-mb-px border-gray-200 border-l border-t border-r rounded-t text-indigo-600 hover:text-indigo-600"
|
|
data-tabs-inactive-tab="text-gray-500 hover:text-gray-700">
|
|
<ul class="list-reset flex border-gray-200 border-b">
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
|
|
Web
|
|
</a>
|
|
</li>
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
|
|
Android
|
|
</a>
|
|
</li>
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
|
|
iOS
|
|
</a>
|
|
</li>
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
|
|
Linux
|
|
</a>
|
|
</li>
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
|
|
Windows
|
|
</a>
|
|
</li>
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
|
|
macOS
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="hidden" data-tabs-target="panel">
|
|
Web
|
|
</div>
|
|
<div class="hidden" data-tabs-target="panel">
|
|
Android
|
|
</div>
|
|
<div class="hidden" data-tabs-target="panel">
|
|
iOS
|
|
</div>
|
|
<div class="hidden" data-tabs-target="panel">
|
|
Linux
|
|
</div>
|
|
<div class="hidden" data-tabs-target="panel">
|
|
Windows
|
|
</div>
|
|
<div class="hidden" data-tabs-target="panel">
|
|
macOS
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<% end %>
|