Главная страница>Связанные с программированием>Другой исходный код
Скачать
фанпи

Фанпи

Минималистичный и самоуверенный веб-клиент Mastodon.

Необычный скриншот

?️ Произношение : /fænpi/ ( FAN-pee ) ? Слушать

Это альтернативный веб-клиент для Mastodon.

  • ? Производство : https://phanpy.social
    • production отрасль
    • реже ломайся
    • более медленные исправления, кроме критических
  • ?️ Разработка : https://dev.phanpy.social
    • main филиал
    • возможно, раньше увидим новые крутые вещи
    • может ломаться чаще
    • тоже можно исправить гораздо быстрее

? Следите за обновлениями @phanpy на Mastodon ✨

Все спроектировано и спроектировано в соответствии с моим вкусом и видением. Это мой личный побочный проект, позволяющий узнать о Mastodon и поэкспериментировать с новыми идеями UI/UX.

Функции

  • ? Несколько учетных записей
  • ? Всплывающее окно создания сообщения
  • ? Светлая/темная/автоматическая тема
  • ? Сгруппированные уведомления
  • ? Вложенная цепочка комментариев
  • ? Неотправленный черновик восстановления
  • ? Карусель повышения™️
  • ⚡ Ярлыки™️ с такими режимами просмотра, как несколько столбцов или панель вкладок.
  • #️⃣ Лента с несколькими хэштегами

Дизайнерские решения

  • Действия со статусом (ответить, повысить, добавить в избранное, добавить в закладки и т. д.) по умолчанию скрыты .
    Они появляются только на отдельной странице статуса. Это делается для того, чтобы уменьшить беспорядок и отвлечение внимания. Это может привести к снижению вовлеченности, но мы здесь не гонимся за цифрами.
  • Повышение представлено значком ракеты .
    Зелёная иконка с двойной стрелкой (ретвит для Твиттера) не подходит для термина «повышение». Зеленая ракета выглядит странно, поэтому я использую фиолетовый.
  • Короткие имена пользователей ( @username ) отображаются на временных шкалах вместо полного имени пользователя учетной записи ( @username@instance ) .
    Несмотря на то, что в руководстве упоминается, что «Децентрализация должна быть прозрачной для пользователя», я не думаю, что нам следует каждый раз бросать это в глаза. Существуют также некоторые проблемы с доступностью полного имени пользователя, связанные с программой чтения с экрана, хотя это веб-приложение, к сожалению, пока недоступно.
  • Нет автозапуска видео/GIF/чего угодно на временной шкале .
    Хронология уже представляет собой огромный беспорядок: множество людей, брендов, новостей и средств массовой информации пытаются привлечь ваше внимание. Давайте не будем делать хуже. (Текущим исключением теперь будут анимированные смайлы.)
  • URL-адреса на основе хеша .
    Это веб-приложение не предназначено для полноценной замены существующего интерфейса Mastodon. Здесь нет SEO, баз данных, бессерверных или долго работающих серверов. Однажды я могу ошибаться.

Тонкие реализации пользовательского интерфейса

Отображение имени пользователя

Отображение имени пользователя

  • На временной шкале имя пользователя отображается как [NAME] @[username] .
  • Для @[username] всегда исключайте доменное имя экземпляра.
  • Если [NAME] выглядит так же, как @[username] , то @[username] также исключается.

Ускоряет Карусель

Ускоряет Карусель

  • Из полученных сообщений (например, 20 сообщений за одно получение), если количество повышений превышает четверть от общего числа сообщений или более 3 последовательных повышений, будет активирован пользовательский интерфейс карусели повышения.
  • Если количество рекламных сообщений превышает 3 четверти от общего числа сообщений, пользовательский интерфейс карусели повышения будет размещен в конце общего количества полученных сообщений (на «страницу»).
  • В противном случае пользовательский интерфейс карусели Boosts будет располагаться между публикациями.

Значок номера резьбы (например, резьба 1/X)

Значок номера резьбы

  • Проверяйте каждое сообщение на наличие inReplyToId из кеша или дополнительных запросов API, пока не будет найдено корневое сообщение.
  • Если корневое сообщение найдено, на значке будет показан порядковый номер сообщения в теме.
  • Ограничьте до трех запросов API, так как корневое сообщение может быть очень старым или поток очень длинный.
  • Если индексный номер не найден, значок вернется к отображению Thread без номера.

Набивка хэштегов сворачивается

Набивка хэштегов сворачивается

  • Первый абзац публикации с более чем 3 хэштегами будет свернут до 3 строк.
  • Последующие абзацы после первого абзаца с более чем 3 хештегами будут свернуты до 1 строки.
  • Соседние абзацы с более чем 1 хэштегом после свернутых абзацев будут свернуты до 1 строки.
  • Если вокруг или между хэштегами есть текст, они не будут свернуты.
  • Свернутые хэштеги будут дополнены ... в конце.
  • Они также слегка затемнены, чтобы уменьшить визуальный шум.
  • Открытие просмотра публикации покажет хэштеги в развернутом виде.

Отфильтрованные сообщения

  • Сообщения с фильтром «Скрыть полностью» будут скрыты без пользовательского интерфейса, который мог бы их показать.
  • Сообщения, отфильтрованные по принципу «Скрыть с предупреждением», будут частично скрыты, показывая имя фильтра и имя автора.
    • Содержимое можно частично раскрыть, наведя курсор на публикацию, при этом всплывающая подсказка покажет текст публикации.
    • Нажав на нее, вы откроете страницу публикации.
    • Длительное нажатие или щелчок правой кнопкой мыши «просмотрит» публикацию с пользовательским интерфейсом нижнего листа.
    • На карусели бустов они сортируются до конца карусели.

Разработка

Предварительные требования: Node.js 18+.

  • npm install — установка зависимостей
  • npm run dev — параллельно запустить сервер разработки и messages:extract ( clean + ``watch`)
  • npm run build — сборка для производства
  • npm run preview — предварительный просмотр производственной сборки.
  • npm run fetch-instances — получить список экземпляров с сайта joinmastodon.org/servers, сохранить его в src/data/instances.json
  • npm run sourcemap — запустить source-map-explorer в производственной сборке.
  • npm run messages:extract — извлекает сообщения из исходных файлов и обновляет каталоги сообщений локали.

Технический стек

  • Vite — инструмент для сборки
  • Preact — библиотека пользовательского интерфейса
  • Валтио - Управление государством
  • React Router — Маршрутизация
  • masto.js — API-клиент Mastodon
  • Iconify — библиотека иконок
    • МинМилые иконки
  • Лингви — Интернационализация
  • Ванильный CSS. Да, я олдскульный.

Некоторые из них могут измениться в будущем. Мир фронтенда постоянно меняется.

Интернационализация

Все переводы доступны в виде файлов gettext .po в папке src/locales . Язык по умолчанию — английский ( en ). Правила множественного числа CLDR используются для множественного числа. Языки RTL (с письмом справа налево) также поддерживаются с правильным направлением текста, отображением значков и макетом.

При загрузке страницы язык по умолчанию определяется с помощью следующих методов (используется первое совпадение):

  1. lang параметра URL, например /?lang=zh-Hant
  2. lang ключа localStorage
  3. navigator.language браузера

Пользователи могут изменить язык в настройках, который задает ключ localStorage lang .

Руководство для переводчиков

*На основе руководства по Translate WordPress:

  • Не переводите буквально, переводите органично.
  • Постарайтесь сохранить тот же уровень формальности (или неформальности).
  • Не используйте сленг или термины, относящиеся к конкретной аудитории.
  • Будьте внимательны к заполнителям для переменных. Многие строки имеют заполнители, например {account} (переменная), <0>{name} (тег с переменной) и # (заполнитель числа).
  • Многоточие (…) введено намеренно. Не удаляйте его.
    • Nielsen Norman Group: «Включите многоточие в текст команды, чтобы указать, когда требуется дополнительная информация»
    • Рекомендации Apple по пользовательскому интерфейсу: «Добавьте многоточие к метке пункта меню, если для выполнения действия требуется дополнительная информация. Символ многоточия (…) сигнализирует о том, что людям необходимо ввести информацию или сделать дополнительный выбор, обычно в другом представлении».
    • Разработка приложений для Windows: «Многоточие означает незавершенность».
  • Метки времени, диапазоны дат, числа, названия языков и сегментация текста обрабатываются API интернационализации ECMAScript.
    • Intl.DateTimeFormat — например, «8 августа», «08.08.2024».
    • Intl.RelativeTimeFormat — например, «2 дня назад», «через 2 дня».
    • Intl.NumberFormat — например, «1000», «10K».
    • Intl.DisplayNames — например, «Английский» ( en ) в традиционном китайском ( zh-Hant ) — это «英文».
    • Intl.Locale (с полифиллом для старых браузеров)
    • Intl.Segmenter (с полифиллом для старых браузеров)

Технические примечания

  • Идентификаторы строк генерируются автоматически, а не определяются явно. Некоторые из преимуществ заключаются в том, чтобы избежать проблемы «именования вещей» и дублирования.
    • Явные идентификаторы могут быть введены в будущем, когда изменятся требования и приоритеты. Библиотека (Lingui) позволяет и то, и другое.
    • Сообщайте о проблемах, если определенные строки переводятся по-разному в зависимости от контекста, культуры или региона.
  • Для push-уведомлений нет строк. Язык устанавливается на сервере экземпляра.
  • Собственные средства выбора даты в HTML, например всегда будут следовать языковому стандарту системы, а не языковому стандарту, установленному пользователем.
  • «ALT» в значке ALT не переводится. Он служит узнаваемым стандартом на всех языках.
  • Пользовательские имена смайлов не локализуются, поэтому поиск не работает для языков, отличных от английского.
  • GIPHY API поддерживает список языков для поиска.
  • Знак справа налево в Юникоде (RLM) ( U+200F , ‏ ), возможно, потребуется использовать для смешанного текста RTL/LTR, особенно для элемента </code> ( <code>document.title</code> ).</li><li> В разработке имеется дополнительная локаль <code>pseudo-LOCALE</code> , используемая для псевдолокализации. Это для тестирования и не появится в производстве.</li><li> При сборке для производства сообщения каталога на английском языке ( <code>en</code> ) не группируются отдельно. Другие локали упакованы в отдельные файлы и загружаются по требованию. Это гарантирует, что <code>en</code> всегда будет доступен в качестве резервного варианта.</li></ul><div class="markdown-heading" dir="auto"><h3> Волонтерские переводы</h3></div><p dir="auto"> Переводы управляются на Crowdin. Вы можете помочь, добровольно предоставив переводы.</p><p dir="auto"> Чтобы начать, прочтите вступительную документацию.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Самостоятельный хостинг</h2></div><p dir="auto"> Это <strong>чисто статическое веб-приложение</strong> . Вы можете разместить его где угодно.</p><p dir="auto"> Два способа (выберите один):</p><div class="markdown-heading" dir="auto"><h3> Простой способ</h3></div><p dir="auto"> Перейдите в раздел «Релизы» и загрузите последнюю версию <code>phanpy-dist.zip</code> или <code>phanpy-dist.tar.gz</code> . Он предварительно создан, поэтому не нужно запускать какие-либо команды установки/сборки. Извлеките его. Служите папке с извлеченными файлами.</p><div class="markdown-heading" dir="auto"><h3> Индивидуальный способ сборки</h3></div><p dir="auto"> Требуется Node.js.</p><p dir="auto"> Загрузите или <code>git clone</code> . Используйте <code>production</code> ветку для <em>стабильных</em> выпусков, <code>main</code> — для <em>последних версий</em> . Соберите его, запустив <code>npm run build</code> (после <code>npm install</code> ). Обслужить папку <code>dist</code> .</p><p dir="auto"> Настройка может быть выполнена путем передачи переменных среды команде сборки. Примеры: </p><div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PHANPY_CLIENT_NAME="Phanpy Dev" PHANPY_WEBSITE="https://dev.phanpy.social" npm run build"><pre>PHANPY_CLIENT_NAME= <span class="pl-s"><span class="pl-pds">"</span> Phanpy Dev <span class="pl-pds">"</span></span> PHANPY_WEBSITE= <span class="pl-s"><span class="pl-pds">"</span> https://dev.phanpy.social <span class="pl-pds">"</span></span> npm run build</pre></div><div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PHANPY_DEFAULT_INSTANCE=hachyderm.io PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy npm run build"><pre>PHANPY_DEFAULT_INSTANCE=hachyderm.io PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL=https://hachyderm.io/auth/sign_up PHANPY_PRIVACY_POLICY_URL=https://hachyderm.io/privacy-policy npm run build</pre></div><p dir="auto"> Их также можно установить в файле <code>.env</code> .</p><p dir="auto"> Доступные переменные:</p><ul dir="auto"><li> <code>PHANPY_CLIENT_NAME</code> (необязательно, по умолчанию: <code>Phanpy</code> ) влияет на:<ul dir="auto"><li> Заголовок веб-страницы, отображаемый в окне браузера или заголовке вкладки</li><li> Название приложения, если оно установлено как PWA, отображается на главном экране, в доке macOS, на панели задач Windows и т. д.</li><li> Название карты OpenGraph при публикации в социальных сетях</li><li> Имя клиента при регистрации приложения для аутентификации и отображается как клиент, используемый в сообщениях в некоторых приложениях/клиентах.</li></ul></li><li> <code>PHANPY_WEBSITE</code> (необязательно, но рекомендуется, по умолчанию: <code>https://phanpy.social</code> ) влияет на:<ul dir="auto"><li> Канонический URL-адрес веб-сайта</li><li> URL-адрес карты OpenGraph при публикации в социальных сетях</li><li> Корневой путь для образа карты OpenGraph</li><li> URL-адрес клиента при регистрации приложения для аутентификации и отображается как клиент, используемый в сообщениях в некоторых приложениях/клиентах.</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE</code> (необязательно, без значений по умолчанию):<ul dir="auto"><li> например, «mastodon.social», без <code>https://</code></li><li> Экземпляр по умолчанию для входа в систему</li><li> При входе в систему пользователь будет мгновенно перенаправлен на страницу аутентификации экземпляра вместо того, чтобы вручную вводить URL-адрес экземпляра и отправлять</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL</code> (необязательно, без значений по умолчанию):<ul dir="auto"><li> URL страницы регистрации экземпляра</li><li> Например, <code>https://mastodon.social/auth/sign_up</code></li></ul></li><li> <code>PHANPY_PRIVACY_POLICY_URL</code> (необязательно, по умолчанию используется политика конфиденциальности официального экземпляра):<ul dir="auto"><li> URL страницы политики конфиденциальности</li><li> Может указывать собственную политику конфиденциальности экземпляра.</li></ul></li><li> <code>PHANPY_DEFAULT_LANG</code> (необязательно):<ul dir="auto"><li> Язык по умолчанию — английский ( <code>en</code> ), если не указан.</li><li> Резервный язык после нескольких методов обнаружения (параметр запроса <code>lang</code> , ключ <code>lang</code> в <code>localStorage</code> и <code>navigator.language</code> ).</li></ul></li><li> <code>PHANPY_LINGVA_INSTANCES</code> (необязательный, список через пробел, по умолчанию: <code>lingva.phanpy.social [...hard-coded list of fallback instances]</code> ):<ul dir="auto"><li> Укажите список экземпляров, разделенный пробелами. Сначала будет использоваться по умолчанию, прежде чем вернуться к последующим экземплярам. Если есть только 1 экземпляр, это означает отсутствие резервного варианта.</li><li> Можно указать самостоятельный экземпляр Lingva, работающий на базе lingva-translate или lingva-api.</li><li> Список резервных экземпляров, жестко закодированных в <code>/.env</code></li><li><g-emoji class="g-emoji" alias="arrow_upper_right"> ↗️</g-emoji> Список экземпляров lingva-translate</li></ul></li><li> <code>PHANPY_IMG_ALT_API_URL</code> (необязательно, без значений по умолчанию):<ul dir="auto"><li> Конечная точка API для локального экземпляра img-alt-api.</li><li> Если это предусмотрено, для пользователей появится настройка, позволяющая включить генератор описания изображений в композиторе. По умолчанию отключено.</li></ul></li><li> <code>PHANPY_GIPHY_API_KEY</code> (необязательно, без значений по умолчанию):<ul dir="auto"><li> API-ключ для GIPHY. См. документацию по API.</li><li> Если это предусмотрено, появится настройка, позволяющая пользователям включить средство выбора GIF в композиторе. По умолчанию отключено.</li><li> Это не самостоятельный хостинг.</li></ul></li></ul><div class="markdown-heading" dir="auto"><h3> Хостинг статического сайта</h3></div><p dir="auto"> Попробуйте поискать в Интернете запрос «как самостоятельно размещать статические сайты», поскольку существует множество способов сделать это.</p><div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto"> Хостинг Lingva-translate или lingva-api</h4></div><p dir="auto"> См. документацию по lingva-translate или lingva-api.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Развертывания сообщества</h2></div><p dir="auto"> Они организованы другими замечательными людьми.</p><ul dir="auto"><li> Ferengi.one от @david@weaknotes.com</li><li> halo.mookiesplace.com от @mookie@mookiesplace.com</li><li> phanpy.bauxite.tech от @b4ux1t3@hachyderm.io</li><li> phanpy.blaede.family от @cassidy@blaede.family</li><li> phanpy.crmbl.uk от @snail@crmbl.uk</li><li> phanpy.cz от @zdendys@mamutovo.cz</li><li> phanpy.fulda.social от @Ganneff@fulda.social</li><li> phanpy.gotosocial.social от @admin@gotosocial.social</li><li> phanpy.hear-me.social от @admin@hear-me.social</li><li> phanpy.mastodon.world от @ruud@mastodon.world</li><li> phanpy.mstdn.mx от @maop@mstdn.mx</li><li> phanpy.social.tchncs.de от @milan@social.tchncs.de</li><li> phanpy.tilde.zone от @ben@tilde.zone</li><li> phanpy.vmst.io от @vmstan@vmst.io</li><li> Social.qrk.one от @kev@fosstodon.org</li></ul><blockquote><p dir="auto"> Примечание. Добавьте свой, создав запрос на включение. </p></blockquote><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Затраты</h2></div><p dir="auto"> Затраты на запуск и разработку этого веб-приложения:</p><ul dir="auto"><li> Доменное имя (.social): <strong>23,18 долларов США в год</strong> (6,87 долларов США в первый год)</li><li> Хостинг: Бесплатно</li><li> Разработка, дизайн, сопровождение: "Бесплатно" (Мое драгоценное время) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Талисман</h2></div><p dir="auto"> Фанпи — покемон Земляного типа.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Мейнтейнеры + участники</h2></div><ul dir="auto"><li> Чи Аун (Мастодонт) (Твиттер)</li></ul><div class="markdown-heading" dir="auto"><h3> Волонтёры-переводчики</h3></div><ul dir="auto"><li> alidsds11 (арабский)</li><li> альтернатива (корейский)</li><li> BoFFire (арабский, французский, кабильский)</li><li> Бравару (русский)</li><li> cbasje (голландский)</li><li> cbo92 (французский)</li><li> CDN (китайский упрощенный)</li><li> dannypsnl (традиционный китайский)</li><li> датабио (каталанский)</li><li> Дизро (итальянский)</li><li> Drift6944 (Чехия)</li><li> Драйдэнву (традиционный китайский)</li><li> Элиссарк (французский)</li><li> ЭльПамплина (испанский)</li><li> Фитик (эсперанто, иврит)</li><li> Фреезия (японский)</li><li> гош (галисийский)</li><li> Хонминхи (корейский)</li><li> Гугоглиф (эсперанто, испанский)</li><li> изард (каталанский)</li><li> калиуву (польский)</li><li> Карлафей (Чешский)</li><li> катулло11 (итальянский)</li><li> Китта (немецкий)</li><li> лунь (тайский)</li><li> lucasofchirst (окситанский, португальский, португальский, бразильский)</li><li> Люкхонг (традиционный китайский)</li><li> марцин Козински (польский)</li><li> mkljczkk (польский)</li><li> моджосон (корейский)</li><li> Мореаль (корейский)</li><li> MrWillCom (китайский упрощенный)</li><li> нклм (французский)</li><li> паспи (итальянский)</li><li> punkrockgirl (баскский)</li><li> радекос (французский)</li><li> Разем (Чехия)</li><li> Realpixelcode (немецкий)</li><li> Резахоссейнзаде (персидский)</li><li> rwmpelstilzchen (эсперанто, иврит)</li><li> СадмЛ (русский)</li><li> SadmL_AI (русский)</li><li> сюдзи3 (японский)</li><li> Sky_NiniKo (фр.)</li><li> Steffo99 (итальянский)</li><li> Su5hicz (Чехия)</li><li> тферрермо (испанский)</li><li> tkbremnes (норвежский букмаль)</li><li> тукс93 (немецкий)</li><li> Вак31. (Литовский)</li><li> Валтлай (финский)</li><li> васирири (польский)</li><li> путешествие (традиционный китайский)</li><li> xabi_itzultzaile (баскский)</li><li> xen4n (украинский)</li><li> xqueralt (каталанский)</li><li> ЗириСут (Кабиле)</li><li> Зкремль (Чешский) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Предыстория</h2></div><p dir="auto"> Я один из первых пользователей Twitter. Твиттер был запущен 15 июля 2006 года. Я присоединился к нему в декабре 2006 года, а мой первый твит был опубликован 18 декабря 2006 года.</p><p dir="auto"> Я знаю, как выглядит ранний Твиттер. Это было весело.</p><p dir="auto"> Тогда я сделал клон Twitter под названием «Twig», написанный на Python и Google App Engine. Я почти создал свой собственный настольный клиент Twitter, написанный на Appcelerator Titanium. Один из своих лучших докладов о клиенте Twitter я сделал на мини-конференции. Я создал эту штуку под названием «Колонки Твиттера», веб-приложение, которое показывает список ваших подписчиков, подписчиков ваших подписчиков, ваших подписчиков, подписчиков ваших подписчиков и так далее. В 2009 году я написал запись в блоге под названием «Как я начал работать с Twitter». Я создал две темы для DestroyTwitter (клиент для настольных компьютеров, созданный Джонни Холлманом в Adobe Air), и одна из них называется «Vimeo». В 2013 году я написал собственный сайт резервного копирования твитов с интерфейсом для просмотра моих твитов и серверной частью CouchDB для их хранения.</p><p dir="auto"> Прошло <strong>более 15 лет</strong> .</p><p dir="auto"> И вот я здесь. Создание веб-клиента Mastodon.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Альтернативные веб-клиенты</h2></div><ul dir="auto"><li> Фанпи вилки ↓<ul dir="auto"><li> Агора</li></ul></li><li> Передник (пенсионер) - вилки ↓<ul dir="auto"><li> Семафор</li><li> Наперёд</li></ul></li><li> Кукушка+</li><li> Сенги</li><li> Мыльница</li><li> Лось - вилки ↓<ul dir="auto"><li> elk.fedified.com</li></ul></li><li> Мастодек</li><li> Стволы</li><li> Тути</li><li> туалетный лоток</li><li> Статузер</li><li> клыкастый</li><li> Mastodon Glitch Edition (автономный интерфейс)</li><li> Марганец</li><li> TheDesk</li><li> Более... </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> ?‍♂️ Уведомление всем остальным разработчикам клиентов социальных сетей.</h2></div><p dir="auto"> Пожалуйста, скопируйте идеи пользовательского интерфейса и эксперименты из этого приложения. Я думаю, что некоторые из них довольно хороши, и было бы здорово, если бы они были в большем количестве приложений.</p><p dir="auto"> Если вы не разработчик, расскажите своим любимым разработчикам клиентов социальных сетей об этом приложении и попросите их скопировать идеи и эксперименты пользовательского интерфейса.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Лицензия</h2></div><p dir="auto"> Массачусетский технологический институт.</p> </div> <div class="zd_btn more_version_btn" data-more="Расширять" data-less="Свернуть">Расширять</div> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template"> <span class="title">Дополнительная информация</span> </div> <ul class="more_info grid gap_y6 gap_x6 grid_c3"> <li> <span class="title">Версия</span> <span class="text"></span> </li> <li> <span class="title">Тип</span> <a class="text" href="/ru/category/list_228_1.html">Другой исходный код</a> </li> <li> <span class="title">Время обновления</span> <span class="text">2024-11-09</span> </li> <li> <span class="title">размер</span> <span class="text"></span> </li> <li> <span class="title">Язык</span> <span class="text">Упрощенный китайский</span> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Связанные приложения</span> </div> <ul class="version_list grid gap_x6 gap_y6 grid_c2"> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Рекомендуем вам</span> </div> <ul class="column3_box lr_img_text_template grid gap_x6 gap_y6 grid_c3"> <li> <a class="img_item" href="/ru/app/44151.html"><img src="https://images.downcodes.com/uploads/20230315/logo_641169e22e95f1.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Версия для Android Bidi Film and Television bdys"></a> <div class="content"> <h3><a href="/ru/app/44151.html">Версия для Android Bidi Film and Television bdys</a></h3> <div class="cate"> <a href="/ru/category/list_297_1.html">Воспроизведение видео</a> </div> <div class="other"> <span>V2.1.7</span> </div> </div> </li> <li> <a class="img_item" href="/ru/app/39387.html"><img src="https://images.downcodes.com/uploads/20230216/logo_63edd21d622421.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Скачать игру Штурмовая Лилия"></a> <div class="content"> <h3><a href="/ru/app/39387.html">Скачать игру Штурмовая Лилия</a></h3> <div class="cate"> <a href="/ru/category/list_301_1.html">ролевые игры</a> </div> <div class="other"> <span>v1.0.5</span> </div> </div> </li> <li> <a class="img_item" href="/ru/download/28990.html"><img src="https://images.downcodes.com/uploads/20220919/logo_63281248401771.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Исходный код системы оплаты знаний 丨Онлайн-образовательный контент, реализация платных знаний 丨Видео вопросов и ответов, графический платный курс, настройка мини-программы H5"></a> <div class="content"> <h3><a href="/ru/download/28990.html">Исходный код системы оплаты знаний 丨Онлайн-образовательный контент, реализация платных знаний 丨Видео вопросов и ответов, графический платный курс, настройка мини-программы H5</a></h3> <div class="cate"> <a href="/ru/category/list_55_1.html">Другие категории</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/ru/app/45483.html"><img src="https://images.downcodes.com/uploads/20230317/logo_6413c6576e3f21.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Растения против Зомби, издание «Путешествие на запад»"></a> <div class="content"> <h3><a href="/ru/app/45483.html">Растения против Зомби, издание «Путешествие на запад»</a></h3> <div class="cate"> <a href="/ru/category/list_299_1.html">Казуальная головоломка</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/ru/app/179136.html"><img src="https://images.downcodes.com/uploads/20240818/logo_66c1c8413413d1.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="PVZ гибридная версия 2.3.5 версия встроенного меню"></a> <div class="content"> <h3><a href="/ru/app/179136.html">PVZ гибридная версия 2.3.5 версия встроенного меню</a></h3> <div class="cate"> <a href="/ru/category/list_299_1.html">Казуальная головоломка</a> </div> <div class="other"> <span>2.3</span> </div> </div> </li> <li> <a class="img_item" href="/ru/app/176855.html"><img src="https://images.downcodes.com/uploads/20240628/logo_667e0d8fe35261.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Мод Pizza Tower Noise DLC"></a> <div class="content"> <h3><a href="/ru/app/176855.html">Мод Pizza Tower Noise DLC</a></h3> <div class="cate"> <a href="/ru/category/list_299_1.html">Казуальная головоломка</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/ru/app/176584.html"><img src="https://images.downcodes.com/uploads/20240624/logo_6678eedab44bc1.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Семейный симулятор Happy Block House Mobile"></a> <div class="content"> <h3><a href="/ru/app/176584.html">Семейный симулятор Happy Block House Mobile</a></h3> <div class="cate"> <a href="/ru/category/list_307_1.html">Имитируемый бизнес</a> </div> <div class="other"> <span>1.0.41</span> </div> </div> </li> <li> <a class="img_item" href="/ru/app/176463.html"><img src="https://images.downcodes.com/uploads/20240622/logo_66764c7e969a71.jpg" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Ремонт крюка, установка эвакуации из метро"></a> <div class="content"> <h3><a href="/ru/app/176463.html">Ремонт крюка, установка эвакуации из метро</a></h3> <div class="cate"> <a href="/ru/category/list_309_1.html">стрельба в полете</a> </div> <div class="other"> <span>1.25.20</span> </div> </div> </li> <li> <a class="img_item" href="/ru/app/178338.html"><img src="https://images.downcodes.com/uploads/20240731/logo_66a9c40e360431.png" onerror="this.src='https://images.downcodes.com/newdown/images/default.png'" alt="Мобильная игра BodyCam"></a> <div class="content"> <h3><a href="/ru/app/178338.html">Мобильная игра BodyCam</a></h3> <div class="cate"> <a href="/ru/category/list_309_1.html">стрельба в полете</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Связанные новости</span> <a href="/category/list_336_1.html">Все</a> </div> <ul class="cate_list_template"> <li> <a href="/ru/wz/212997.html"> <div class="text">Адрес официального сайта Bidi Film and Television</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/ru/wz/212996.html"> <div class="text">Как пополнить международный сервер Assault Lily</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/ru/wz/212995.html"> <div class="text">Как исправить заикание в «Сталкер 2: Сердце Чернобыля»</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/ru/wz/212994.html"> <div class="text">Где находится Juice WRLD в Fortnite?</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/ru/wz/212993.html"> <div class="text">Как начать расширение Wild Card в Star Wars Outlaws</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/ru/wz/212992.html"> <div class="text">Пекин открывает новое научно-исследовательское учреждение для улучшения безопасности искусственного интеллекта и схемы управления</div> <span class="time">2024-11-22</span> </a> </li> </ul> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template arrow_link"> <span class="title">Комментарии пользователей</span> </div> </div> </section> <footer class="footer_template"> <div class="w12_box"> <div class="clearfix"> <div class="l_item"> <img src="https://images.downcodes.com/newdown/images/down-logo-foot.png" alt=""> <div class="f_icon"> <a href="https://www.facebook.com/" title="facebook"></a> <a href="https://telegram.org/" title="telegram"></a> <a href="https://www.tiktok.com/" title="tiktok"></a> <a href="https://www.youtube.com/" title="youtube"></a> </div> </div> <div class="r_item"> <dl> <dt>Products & Services</dt> <dd><a href="javascript:;">Install APK</a></dd> <dd><a href="javascript:;">APK signature verification</a></dd> <dd><a href="javascript:;">APK Download Service</a></dd> </dl> <dl> <dt>Company</dt> <dd><a href="javascript:;">Developer Console</a></dd> <dd><a href="javascript:;">Submit APK</a></dd> <dd><a href="javascript:;">Monetization of traffic through downcodes</a></dd> </dl> <dl> <dt>Legal</dt> <dd><a href="javascript:;">About us</a></dd> <dd><a href="javascript:;">Contact Us</a></dd> <dd><a href="javascript:;">Cooperation</a></dd> </dl> </div> </div> <p>© 2006-2024Copyright All rights reserves</p> </div> </footer> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//tongji.zhangwan.net/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '3']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Matomo Code --> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-5D64MDP2H8"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5D64MDP2H8'); </script> </body> <script src="/newdown/js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/lazy.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/viewer.js" type="text/javascript" charset="utf-8"></script> <script src="/newdown/js/index.js" type="text/javascript" charset="utf-8"></script> <script> commonMethod.appdetail(); function phpLoadPage(){ this.kid = ''; this.lang = 'ru'; this.pageIndex = 1; this.resultLen = 10; this. requestUrl = "/show_comment_list"; } phpLoadPage.prototype.init = function() { var _this = this; var moreComment = 'Нажмите, чтобы загрузить больше'; $(".loadmore_item").click(function(){ if(_this.resultLen >= 10){ _this.pageIndex = _this.pageIndex + 1 $(".loadmore_item").html("loading...") $.ajax({ async: true, url: _this.requestUrl, type: 'GET', data : { page : _this.pageIndex,kid:_this.kid,lang:_this.lang }, dataType: 'json', timeout: 30000, success: function(result){ _this.resultLen = result.newArray.length if(_this.resultLen < 10){ $(".loadmore_item").html("Reached the end...") }else{ $(".loadmore_item").html(`${moreComment}`) } $(".comment_template").append(_this.mergeHtml(result.newArray)); }, error: function(xhr, status){ console.log('An error occurred...'); }, complete: function(xhr, status){ console.log('Ajax request has ended...'); } }) } }) } phpLoadPage.prototype.mergeHtml = function(data){ var textHtml = ""; var lang = 'ru'; let fromto = 'От'; for(var i=0;i<data.length;i++) { var item= data[i]; var lsHtml = item.mark == 1 && item.status == 1 ? `<span class="tip">${fromto}</span><a href="/${lang}/ask/${item.aid}.html">${item.title}</a>` : ''; textHtml += `<dd> <span class="img_item"> <img src="${item.headlogo}" alt="${item.adduser}"> </span> <div class="main"> <div class="title"> <span>${item.adduser}</span> ${lsHtml} <span>${item.showtime}</span> </div> <div>${item.content}</div> </div> </dd>`; } return textHtml; } new phpLoadPage().init() </script> </html>