k1ngsterr1/landing
1
0
Fork 0
forked from Rosetta/landing
Code Pull Requests Activity

Обновить страницы поддержки и документов

Browse Source
This commit is contained in:
k1ngsterr1
2026-07-13 22:56:40 +05:00
parent 8c3418488c
commit f4bfc996df
4 changed files with 509 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
public/support/index.html
View File

@@ -11,6 +11,9 @@
<link rel="canonical" href="https://rosetta.im/support/" />
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#0a67ff" />
<script>
document.documentElement.classList.add("js");
</script>
<style>
:root {
color-scheme: light dark;
@@ -33,6 +36,10 @@
background: #f6f8fc;
}
a {
text-decoration: none;
}
a {
color: #075ed3;
}
@@ -48,6 +55,33 @@
padding: 24px 0 64px;
}
.js .page > * {
opacity: 0;
transform: translateY(14px);
transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js .page.is-ready > * {
opacity: 1;
transform: translateY(0);
}
.js .page.is-ready > :nth-child(1) {
transition-delay: 0ms;
}
.js .page.is-ready > :nth-child(2) {
transition-delay: 45ms;
}
.js .page.is-ready > :nth-child(3) {
transition-delay: 90ms;
}
.js .page.is-ready > :nth-child(n + 4) {
transition-delay: 130ms;
}
.topbar {
display: flex;
align-items: center;
@@ -209,28 +243,30 @@
}
details {
display: grid;
grid-template-rows: auto 0fr;
display: block;
box-sizing: border-box;
padding: 19px 20px;
border: 1px solid #dbe2ee;
border-radius: 8px;
background: #ffffff;
overflow: hidden;
transition: grid-template-rows 280ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease,
background-color 180ms ease;
transition: border-color 180ms ease, background-color 180ms ease;
}
details[open] {
grid-template-rows: auto 1fr;
border-color: #b8cce8;
background: #f9fbff;
}
details.is-animating {
will-change: height;
}
summary {
display: grid;
grid-template-columns: minmax(0, 1fr) 28px;
gap: 12px;
grid-template-columns: minmax(0, 1fr) 36px;
align-items: center;
gap: 16px;
min-height: 28px;
cursor: pointer;
color: #1d293d;
@@ -247,47 +283,85 @@
content: "";
}
summary::after {
.faq-toggle {
display: grid;
width: 28px;
height: 28px;
width: 36px;
height: 36px;
place-items: center;
justify-self: end;
border: 1px solid #c3d5ed;
border-radius: 50%;
background: #f3f8ff;
color: #075ed3;
content: "+";
font-size: 26px;
font-weight: 500;
line-height: 1;
transform: rotate(0deg);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
transition: background-color 180ms ease, border-color 180ms ease;
}
details[open] summary::after {
transform: rotate(45deg);
.faq-toggle svg {
display: block;
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
transform: translateZ(0) rotate(0deg);
will-change: transform;
transition: transform 240ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
details[open] .faq-toggle {
border-color: #78a8df;
background: #deedff;
}
details[open] .faq-toggle svg {
transform: translateZ(0) rotate(180deg);
}
summary:focus-visible {
outline: none;
}
summary:focus-visible .faq-toggle {
box-shadow: 0 0 0 3px #8cbeff;
}
details > p {
display: block;
min-height: 0;
margin: 0 40px 0 0;
overflow: hidden;
color: #526176;
font-size: 15px;
opacity: 0;
transform: translateY(-4px);
transition: opacity 160ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
margin 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
transform: translateY(-3px);
transition: opacity 160ms ease, transform 220ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
details:not([open]) > p {
display: none;
}
details[open] > p {
margin: 14px 40px 0 0;
opacity: 1;
transform: translateY(0);
transition-delay: 70ms;
}
details.is-closing > p {
margin: 0 40px 0 0;
opacity: 0;
transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
.js .page > * {
opacity: 1;
transform: none;
transition: none;
}
details,
summary::after,
.faq-toggle,
.faq-toggle svg,
details > p {
transition: none;
}
@@ -350,6 +424,7 @@
.legal-links a {
color: #526176;
font-size: 15px;
text-decoration: none;
}
@media (max-width: 720px) {
@@ -404,6 +479,17 @@
color: #eef4ff;
}
.faq-toggle {
color: #ffffff;
border-color: #354c6d;
background: #1d2b3f;
}
details[open] .faq-toggle {
border-color: #5e92ca;
background: #29466c;
}
.intro,
.section-copy,
.quick-link span,
@@ -489,28 +575,28 @@
</div>
<div class="faq">
<details>
<summary>How do I access my account on a new device?</summary>
<summary><span>How do I access my account on a new device?</span><span class="faq-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" /></svg></span></summary>
<p>
Install Rosetta and enter your recovery phrase in the exact order it was created.
Rosetta may ask you to confirm a new device to protect your account.
</p>
</details>
<details>
<summary>I lost my recovery phrase. Can it be restored?</summary>
<summary><span>I lost my recovery phrase. Can it be restored?</span><span class="faq-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" /></svg></span></summary>
<p>
No. Your recovery phrase is the key to your account. Rosetta cannot recover it
for you, so keep it private and backed up before you need it.
</p>
</details>
<details>
<summary>Why am I asked to confirm a new device?</summary>
<summary><span>Why am I asked to confirm a new device?</span><span class="faq-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" /></svg></span></summary>
<p>
New-device confirmation helps prevent someone who has obtained a recovery phrase
from silently accessing your account on another device.
</p>
</details>
<details>
<summary>How do I report an account-access problem?</summary>
<summary><span>How do I report an account-access problem?</span><span class="faq-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" /></svg></span></summary>
<p>
Email us with the device model, Rosetta version, and a short description of what
happened. Do not include your recovery phrase or private keys.
@@ -529,28 +615,28 @@
</div>
<div class="faq">
<details>
<summary>How do I send a photo, video, or file?</summary>
<summary><span>How do I send a photo, video, or file?</span><span class="faq-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" /></svg></span></summary>
<p>
Open a chat, tap the attachment button next to the message field, choose the item
you want to share, then send it. Allow Photos or Files access when iOS asks for it.
</p>
</details>
<details>
<summary>Why is an attachment still sending?</summary>
<summary><span>Why is an attachment still sending?</span><span class="faq-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" /></svg></span></summary>
<p>
Media uploads depend on the file size and your connection. Keep Rosetta open and
connected until the send indicator completes. You can retry a message that failed.
</p>
</details>
<details>
<summary>How do I send a voice message?</summary>
<summary><span>How do I send a voice message?</span><span class="faq-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" /></svg></span></summary>
<p>
In a chat, press and hold the microphone control to record, then release it to send.
Microphone permission is required the first time you record.
</p>
</details>
<details>
<summary>How do I get help with a group?</summary>
<summary><span>How do I get help with a group?</span><span class="faq-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" /></svg></span></summary>
<p>
Contact us with the group name and a description of the issue. Do not send private
recovery phrases, message contents, or encryption keys.
@@ -569,14 +655,14 @@
</div>
<div class="faq">
<details>
<summary>How is message content protected?</summary>
<summary><span>How is message content protected?</span><span class="faq-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" /></svg></span></summary>
<p>
Rosetta is designed to encrypt message content before it is sent. For details about
how we handle data, read the Rosetta Privacy Policy.
</p>
</details>
<details>
<summary>How do I report abuse or a security issue?</summary>
<summary><span>How do I report abuse or a security issue?</span><span class="faq-toggle" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" /></svg></span></summary>
<p>
Email <a href="mailto:admin@rosetta.im?subject=Rosetta%20Security%20Report">admin@rosetta.im</a>
with a description of the concern. Do not include recovery phrases or private keys.
@@ -605,5 +691,88 @@
<a href="/terms/">Terms of Use</a>
</footer>
</main>
<script>
window.addEventListener("DOMContentLoaded", () => {
requestAnimationFrame(() => {
document.querySelector(".page")?.classList.add("is-ready");
});
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const animationOptions = {
duration: 240,
easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
fill: "forwards",
};
document.querySelectorAll(".faq details").forEach((details) => {
const summary = details.querySelector("summary");
if (!summary) return;
let animation = null;
const setExpanded = (expanded) => summary.setAttribute("aria-expanded", String(expanded));
setExpanded(details.open);
summary.addEventListener("click", (event) => {
event.preventDefault();
if (animation) return;
if (prefersReducedMotion) {
details.open = !details.open;
setExpanded(details.open);
return;
}
const isOpening = !details.open;
const startHeight = details.getBoundingClientRect().height;
if (isOpening) {
details.open = true;
setExpanded(true);
const endHeight = details.scrollHeight;
details.classList.add("is-animating");
details.style.height = `${startHeight}px`;
animation = details.animate(
[{ height: `${startHeight}px` }, { height: `${endHeight}px` }],
animationOptions,
);
} else {
details.open = false;
const endHeight = details.getBoundingClientRect().height;
details.open = true;
details.classList.add("is-animating", "is-closing");
details.style.height = `${startHeight}px`;
animation = details.animate(
[{ height: `${startHeight}px` }, { height: `${endHeight}px` }],
animationOptions,
);
}
animation.onfinish = () => {
const completedAnimation = animation;
if (!isOpening) {
details.open = false;
setExpanded(false);
}
details.style.height = "";
details.classList.remove("is-animating", "is-closing");
completedAnimation.oncancel = null;
completedAnimation.cancel();
animation = null;
};
animation.oncancel = () => {
details.style.height = "";
details.classList.remove("is-animating", "is-closing");
animation = null;
};
});
});
});
</script>
</body>
</html>