Página Inicial>Relacionado com a programação>Outro código-fonte
Baixar
fanpy

Fanpy

Cliente web Mastodon minimalista e opinativo.

Captura de tela sofisticada

?️ Pronúncia : /fænpi/ ( FAN-pee )? Ouvir

Este é um cliente web alternativo para Mastodon.

  • ? Produção : https://phanpy.social
    • ramo production
    • quebrar com menos frequência
    • correções mais lentas, a menos que sejam críticas
  • ?️ Desenvolvimento : https://dev.phanpy.social
    • ramo main
    • pode ver coisas novas e legais mais cedo
    • pode quebrar com mais frequência
    • pode ser corrigido muito mais rápido também

? Siga @phanpy no Mastodon para atualizações ✨

Tudo é projetado e projetado seguindo meu gosto e visão. Este é um projeto paralelo pessoal para eu aprender sobre o Mastodon e experimentar novas ideias de UI/UX.

Características

  • ? Várias contas
  • ? Compor janela pop-out/in
  • ? Tema claro/escuro/automático
  • ? Notificações agrupadas
  • ? Tópico de comentários aninhados
  • ? Recuperação de rascunho não enviado
  • ? Aumenta o Carrossel™️
  • ⚡ Shortcuts™️ com modos de visualização como multicolunas ou barra de guias
  • #️⃣ Linha do tempo com várias hashtags

Decisões de projeto

  • As ações de status (resposta, promoção, favorito, favorito, etc.) ficam ocultas por padrão .
    Eles aparecem apenas na página de status individual. Isso é para reduzir a desordem e a distração. Isso pode resultar em menor engajamento, mas não estamos perseguindo números aqui.
  • Boost é representado pelo ícone de foguete .
    O ícone de seta dupla verde (retuíte para Twitter) não parece adequado para o termo “impulso”. Foguete verde parece estranho, então uso roxo.
  • Nomes de usuário curtos ( @username ) são exibidos em linhas do tempo, em vez do nome de usuário completo da conta ( @username@instance ) .
    Apesar da diretriz mencionar que “A descentralização deve ser transparente para o usuário”, não acho que devamos passar isso na cara todas as vezes. Existem também algumas preocupações de acessibilidade relacionadas ao leitor de tela com o nome de usuário completo, embora este aplicativo da web infelizmente ainda não esteja acessível.
  • Não há reprodução automática para vídeo/GIF/qualquer coisa na linha do tempo .
    A linha do tempo já está uma grande bagunça com muitas pessoas, marcas, notícias e mídia tentando chamar sua atenção. Não vamos piorar as coisas. (A exceção atual agora seriam os emojis animados.)
  • URLs baseados em hash .
    Este aplicativo da web não pretende ser um substituto completo do front-end existente do Mastodon. Não há SEO, banco de dados, servidor sem servidor ou qualquer servidor de longa duração. Eu posso estar errado um dia.

Implementações sutis de UI

Exibição do nome de usuário

Exibição do nome de usuário

  • Na linha do tempo, o nome do usuário é exibido como [NAME] @[username] .
  • Para @[username] , sempre exclua o nome de domínio da instância.
  • Se [NAME] for igual a @[username] , então @[username] também será excluído.

Aumenta o carrossel

Aumenta o carrossel

  • A partir das postagens buscadas (por exemplo, 20 postagens por busca), se o número de impulsos for superior a um quarto do total de postagens ou mais de 3 impulsos consecutivos, a interface do carrossel de impulsos será acionada.
  • Se o número de boosts for superior a 3 quartos do total de postagens, a interface do carrossel de boosts será colocada no final do total de postagens buscadas (por "página").
  • Caso contrário, a IU do carrossel de reforços será colocada entre as postagens.

Emblema do número da linha (por exemplo, linha 1/X)

Selo de número de tópico

  • Verifique cada postagem em busca de inReplyToId no cache ou em solicitações de API adicionais, até que a postagem raiz seja encontrada.
  • Se a postagem raiz for encontrada, o emblema mostrará o número de índice da postagem no tópico.
  • Limite até 3 solicitações de API, pois a postagem raiz pode ser muito antiga ou o thread é muito longo.
  • Se o número do índice não puder ser encontrado, o emblema retornará para mostrar Thread sem o número.

Recheio de hashtag em colapso

Recheio de hashtag em colapso

  • O primeiro parágrafo do conteúdo da postagem com mais de 3 hashtags será reduzido para no máximo 3 linhas.
  • Os parágrafos subsequentes após o primeiro parágrafo com mais de 3 hashtags serão reduzidos para 1 linha.
  • Parágrafos adjacentes com mais de 1 hashtag após os parágrafos recolhidos serão recolhidos para 1 linha.
  • Se houver texto ao redor ou entre as hashtags, elas não serão recolhidas.
  • As hashtags recolhidas serão anexadas com ... no final.
  • Eles também estão ligeiramente desbotados para reduzir o ruído visual.
  • Abrir a visualização da postagem revelará as hashtags não recolhidas.

Postagens filtradas

  • As postagens filtradas por "Ocultar completamente" ficarão ocultas, sem interface de usuário para revelá-las.
  • As postagens filtradas por "Ocultar com um aviso" serão parcialmente ocultadas, mostrando o nome do filtro e o nome do autor.
    • O conteúdo pode ser parcialmente revelado passando o mouse sobre a postagem, com a dica mostrando o texto da postagem.
    • Clicar nele abrirá a página Postagem.
    • Manter pressionado ou clicar com o botão direito irá "espiar" a postagem com uma interface de usuário na página inferior.
    • No carrossel de boosts, eles são classificados até o final do carrossel.

Desenvolvimento

Pré-requisitos: Node.js 18+

  • npm install – Instalar dependências
  • npm run dev - Inicia o servidor de desenvolvimento e messages:extract ( clean + ``watch`) em paralelo
  • npm run build – Compilação para produção
  • npm run preview – Visualize a compilação de produção
  • npm run fetch-instances - Busque a lista de instâncias em joinmastodon.org/servers, salve-a em src/data/instances.json
  • npm run sourcemap - Execute source-map-explorer na compilação de produção
  • npm run messages:extract - Extrai mensagens de arquivos de origem e atualiza os catálogos de mensagens de localidade

Pilha de tecnologia

  • Vite - ferramenta de construção
  • Preact - biblioteca de UI
  • Valtio - Gestão do Estado
  • Roteador React - Roteamento
  • masto.js - cliente API Mastodon
  • Iconify - Biblioteca de ícones
    • Ícones MingCute
  • Lingui - Internacionalização
  • Vanilla CSS - Sim, sou da velha escola.

Algumas delas podem mudar no futuro. O mundo front-end está em constante mudança.

Internacionalização

Todas as traduções estão disponíveis como arquivos gettext .po na pasta src/locales . O idioma padrão é o inglês ( en ). Regras plurais CLDR são usadas para pluralização. Idiomas RTL (da direita para a esquerda) também são suportados com direção de texto, renderização de ícones e layout adequados.

No carregamento da página, o idioma padrão é detectado por meio destes métodos, na ordem (a primeira correspondência é usada):

  1. Parâmetro de URL lang /?lang=zh-Hant
  2. lang da chave localStorage
  3. navigator.language do navegador

Os usuários podem alterar o idioma nas configurações, que definem a chave localStorage lang .

Guia para tradutores

*Inspirado no Manual do Translate WordPress:

  • Não traduza literalmente, traduza organicamente.
  • Tente manter o mesmo nível de formalidade (ou informalidade)
  • Não use gírias ou termos específicos do público
  • Esteja atento aos espaços reservados para variáveis. Muitas strings possuem espaços reservados, por exemplo, {account} (variável), <0>{name} (tag com variável) e # (espaço reservado para número).
  • As reticências (…) são intencionais. Não remova isso.
    • Nielsen Norman Group: "Incluir reticências no texto do comando para indicar quando mais informações são necessárias"
    • Diretrizes de interface humana da Apple: "Anexar reticências ao rótulo de um item de menu quando a ação exigir mais informações antes de ser concluída. O caractere de reticências (…) sinaliza que as pessoas precisam inserir informações ou fazer escolhas adicionais, normalmente em outra visualização."
    • Desenvolvimento de aplicativos do Windows: "Elipses significam incompletude."
  • Carimbos de data e hora, intervalos de datas, números, nomes de idiomas e segmentação de texto são tratados pela API de internacionalização ECMAScript.
    • Intl.DateTimeFormat - por exemplo, "8 de agosto", "08/08/2024"
    • Intl.RelativeTimeFormat - por exemplo, "2 dias atrás", "em 2 dias"
    • Intl.NumberFormat - por exemplo, "1.000", "10K"
    • Intl.DisplayNames - por exemplo, "English" ( en ) em chinês tradicional ( zh-Hant ) é "英文"
    • Intl.Locale (com polyfill para navegadores mais antigos)
    • Intl.Segmenter (com polyfill para navegadores mais antigos)

Notas técnicas

  • IDs para strings são gerados automaticamente em vez de definidos explicitamente. Alguns dos benefícios são evitar o problema de “nomear coisas” e evitar duplicatas.
    • IDs explícitas poderão ser introduzidas no futuro, quando os requisitos e as prioridades mudarem. A biblioteca (Lingui) permite ambos.
    • Por favor, relate problemas se determinadas strings forem traduzidas de forma diferente com base no contexto, cultura ou região.
  • Não há strings para notificações push. O idioma é definido no servidor da instância.
  • Os seletores de data HTML nativos, por exemplo sempre seguirão a localidade do sistema e não a localidade definida pelo usuário.
  • "ALT" no emblema ALT não é traduzido. Ele serve como um padrão reconhecível em todos os idiomas.
  • Os nomes de emojis personalizados não são localizados, portanto, as pesquisas não funcionam para idiomas diferentes do inglês.
  • A API GIPHY oferece suporte a uma lista de idiomas para pesquisas.
  • A marca Unicode da direita para a esquerda (RLM) ( U+200F , ‏ ) pode precisar ser usada para texto misto RTL/LTR, especialmente para o elemento </code> ( <code>document.title</code> ).</li><li> No desenvolvimento, há um código de idioma <code>pseudo-LOCALE</code> adicional, usado para pseudolocalização. É para teste e não aparecerá na produção.</li><li> Ao compilar para produção, as mensagens do catálogo em inglês ( <code>en</code> ) não são agrupadas separadamente. Outras localidades são agrupadas como arquivos separados e carregadas sob demanda. Isso garante que <code>en</code> esteja sempre disponível como substituto.</li></ul><div class="markdown-heading" dir="auto"><h3> Traduções voluntárias</h3></div><p dir="auto"> As traduções são gerenciadas no Crowdin. Você pode ajudar oferecendo traduções voluntárias.</p><p dir="auto"> Leia a documentação de introdução para começar.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Auto-hospedagem</h2></div><p dir="auto"> Este é um <strong>aplicativo da web estático puro</strong> . Você pode hospedá-lo onde quiser.</p><p dir="auto"> Duas maneiras (escolha uma):</p><div class="markdown-heading" dir="auto"><h3> Maneira fácil</h3></div><p dir="auto"> Vá para Releases e baixe o <code>phanpy-dist.zip</code> ou <code>phanpy-dist.tar.gz</code> mais recente. É pré-construído, portanto não é necessário executar nenhum comando de instalação/construção. Extraia-o. Sirva a pasta de arquivos extraídos.</p><div class="markdown-heading" dir="auto"><h3> Maneira de construção personalizada</h3></div><p dir="auto"> Requer Node.js.</p><p dir="auto"> Baixe ou <code>git clone</code> este repositório. Use o ramo <code>production</code> para versões <em>estáveis</em> , <code>main</code> para <em>as versões mais recentes</em> . Construa-o executando <code>npm run build</code> (após <code>npm install</code> ). Sirva a pasta <code>dist</code> .</p><p dir="auto"> A personalização pode ser feita passando variáveis ​​de ambiente para o comando build. Exemplos: </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"> Também é possível configurá-los no arquivo <code>.env</code> .</p><p dir="auto"> Variáveis ​​disponíveis:</p><ul dir="auto"><li> <code>PHANPY_CLIENT_NAME</code> (opcional, padrão: <code>Phanpy</code> ) afeta:<ul dir="auto"><li> Título da página da Web, mostrado na janela do navegador ou no título da guia</li><li> Título do aplicativo, quando instalado como PWA, mostrado na tela inicial, dock do macOS, barra de tarefas do Windows, etc.</li><li> Título do cartão OpenGraph, quando compartilhado em redes sociais</li><li> Nome do cliente, ao registrar o aplicativo para autenticação e mostrado como cliente usado em postagens em alguns aplicativos/clientes</li></ul></li><li> <code>PHANPY_WEBSITE</code> (opcional, mas recomendado, padrão: <code>https://phanpy.social</code> ) afeta:<ul dir="auto"><li> URL canônica do site</li><li> URL do cartão OpenGraph, quando compartilhado em redes sociais</li><li> Caminho raiz para a imagem do cartão OpenGraph</li><li> URL do cliente, ao registrar o aplicativo para autenticação e mostrado como cliente usado em postagens em alguns aplicativos/clientes</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE</code> (opcional, sem padrões):<ul dir="auto"><li> por exemplo, 'mastodon.social', sem <code>https://</code></li><li> Instância padrão para login</li><li> Ao efetuar login, o usuário será redirecionado instantaneamente para a página de autenticação da instância, em vez de precisar digitar manualmente a URL da instância e enviar</li></ul></li><li> <code>PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL</code> (opcional, sem padrões):<ul dir="auto"><li> URL da página de registro da instância</li><li> Por exemplo, <code>https://mastodon.social/auth/sign_up</code></li></ul></li><li> <code>PHANPY_PRIVACY_POLICY_URL</code> (opcional, padrão para a política de privacidade da instância oficial):<ul dir="auto"><li> URL da página da política de privacidade</li><li> Pode especificar a política de privacidade da própria instância</li></ul></li><li> <code>PHANPY_DEFAULT_LANG</code> (opcional):<ul dir="auto"><li> O idioma padrão é inglês ( <code>en</code> ), se não for especificado.</li><li> Linguagem substituta após vários métodos de detecção (parâmetro de consulta <code>lang</code> , chave <code>lang</code> em <code>localStorage</code> e <code>navigator.language</code> )</li></ul></li><li> <code>PHANPY_LINGVA_INSTANCES</code> (opcional, lista separada por espaço, padrão: <code>lingva.phanpy.social [...hard-coded list of fallback instances]</code> ):<ul dir="auto"><li> Especifique uma lista de instâncias separadas por espaço. Primeiro será usado como padrão antes de voltar para as instâncias subsequentes. Se houver apenas 1 instância, significa que não há substituto.</li><li> Pode especificar uma instância auto-hospedada do Lingva, alimentada por lingva-translate ou lingva-api</li><li> Lista de instâncias substitutas codificadas em <code>/.env</code></li><li><g-emoji class="g-emoji" alias="arrow_upper_right"> ↗️</g-emoji> Lista de instâncias do lingva-translate</li></ul></li><li> <code>PHANPY_IMG_ALT_API_URL</code> (opcional, sem padrões):<ul dir="auto"><li> Terminal de API para instância auto-hospedada de img-alt-api.</li><li> Se fornecido, uma configuração aparecerá para os usuários ativarem o gerador de descrição de imagem no compositor. Desativado por padrão.</li></ul></li><li> <code>PHANPY_GIPHY_API_KEY</code> (opcional, sem padrões):<ul dir="auto"><li> Chave de API para GIPHY. Consulte a documentação da API.</li><li> Se fornecido, uma configuração aparecerá para os usuários ativarem o seletor de GIF no compositor. Desativado por padrão.</li><li> Isso não é auto-hospedado.</li></ul></li></ul><div class="markdown-heading" dir="auto"><h3> Hospedagem de site estático</h3></div><p dir="auto"> Experimente a pesquisa on-line sobre "como hospedar sites estáticos", pois há muitas maneiras de fazer isso.</p><div class="markdown-heading" dir="auto"><h4 tabindex="-1" class="heading-element" dir="auto"> Hospedagem Lingva-translate ou lingva-api</h4></div><p dir="auto"> Consulte a documentação para lingva-translate ou lingva-api.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Implantações comunitárias</h2></div><p dir="auto"> Eles são auto-hospedados por outras pessoas maravilhosas.</p><ul dir="auto"><li> ferengi.one por @david@weaknotes.com</li><li> halo.mookiesplace.com por @mookie@mookiesplace.com</li><li> phanpy.bauxite.tech por @b4ux1t3@hachyderm.io</li><li> phanpy.blaede.family por @cassidy@blaede.family</li><li> phanpy.crmbl.uk por @snail@crmbl.uk</li><li> phanpy.cz por @zdendys@mamutovo.cz</li><li> phanpy.fulda.social por @Ganneff@fulda.social</li><li> phanpy.gotosocial.social por @admin@gotosocial.social</li><li> phanpy.hear-me.social por @admin@hear-me.social</li><li> phanpy.mastodon.world por @ruud@mastodon.world</li><li> phanpy.mstdn.mx por @maop@mstdn.mx</li><li> phanpy.social.tchncs.de por @milan@social.tchncs.de</li><li> phanpy.tilde.zone por @ben@tilde.zone</li><li> phanpy.vmst.io por @vmstan@vmst.io</li><li> social.qrk.one por @kev@fosstodon.org</li></ul><blockquote><p dir="auto"> Observação: adicione o seu criando uma solicitação pull. </p></blockquote><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Custos</h2></div><p dir="auto"> Custos envolvidos na execução e desenvolvimento deste aplicativo web:</p><ul dir="auto"><li> Nome de domínio (.social): <strong>US$ 23,18/ano</strong> (US$ 6,87 1º ano)</li><li> Hospedagem: Gratuita</li><li> Desenvolvimento, design, manutenção: "Grátis" (meu precioso tempo) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Mascote</h2></div><p dir="auto"> Phanpy é um Pokémon do tipo Terrestre.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Mantenedores + contribuidores</h2></div><ul dir="auto"><li> Chee Aun (Mastodonte) (Twitter)</li></ul><div class="markdown-heading" dir="auto"><h3> Voluntários de tradução</h3></div><ul dir="auto"><li> aliidsds11 (árabe)</li><li> alternativa (coreano)</li><li> BoFFire (árabe, francês, cabila)</li><li> Brawaru (russo)</li><li> cbasje (holandês)</li><li> cbo92 (francês)</li><li> CDN (chinês simplificado)</li><li> dannypsnl (chinês tradicional)</li><li> databio (catalão)</li><li> Dizro (italiano)</li><li> Drift6944 (tcheco)</li><li> drydenwu (chinês tradicional)</li><li> elisarc (francês)</li><li> ElPamplina (espanhol)</li><li> Fitik (esperanto, hebraico)</li><li> Freesia (japonês)</li><li> ghose (galego)</li><li> Hongminhee (coreano)</li><li> Hugoglifo (esperanto, espanhol)</li><li> isard (catalão)</li><li> Kaliuwu (polonês)</li><li> karlafej (tcheco)</li><li> Katullo11 ​​(italiano)</li><li> Kytta (alemão)</li><li> llun (tailandês)</li><li> lucasofchirst (occitano, português, português, brasileiro)</li><li> LukeHong (chinês tradicional)</li><li> marcin.kozinski (polonês)</li><li> mkljczkk (polonês)</li><li> mojosoeun (coreano)</li><li> moreal (coreano)</li><li> MrWillCom (chinês simplificado)</li><li> nclm (francês)</li><li> pazpi (italiano)</li><li> punkrockgirl (basco)</li><li> radecos (francês)</li><li> Razem (tcheco)</li><li> código realpixel (alemão)</li><li> rezahosseinzadeh (persa)</li><li> rwmpelstilzchen (esperanto, hebraico)</li><li> SadmL (russo)</li><li> SadmL_AI (russo)</li><li> shuuji3 (japonês)</li><li> Sky_NiniKo (francês)</li><li> Steffo99 (italiano)</li><li> Su5hicz (tcheco)</li><li> tferrermo (espanhol)</li><li> tkbremnes (bokmal norueguês)</li><li> tux93 (alemão)</li><li> Vac31. (Lituano)</li><li> valtlai (finlandês)</li><li> Vasiriri (polonês)</li><li> voyagercy (chinês tradicional)</li><li> xabi_itzultzaile (Basco)</li><li> xen4n (ucraniano)</li><li> xqueralt (catalão)</li><li> ZiriSut (Cabila)</li><li> zkreml (tcheco) </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> História de fundo</h2></div><p dir="auto"> Sou um dos primeiros usuários do Twitter. O Twitter foi lançado em 15 de julho de 2006. Entrei em dezembro de 2006 e meu primeiro tweet foi postado em 18 de dezembro de 2006.</p><p dir="auto"> Eu sei como o Twitter parece antigo. Foi divertido.</p><p dir="auto"> Naquela época, fiz um clone do Twitter chamado "Twig", escrito em Python e Google App Engine. Quase criei meu próprio cliente de desktop do Twitter escrito em Appcelerator Titanium. Dei uma das minhas melhores palestras sobre o cliente Twitter em uma miniconferência. Eu construí uma coisa chamada "Twitter Columns", um aplicativo da web que mostra sua lista de seguidores, os seguidores de seus seguidores, seus seguidores, os seguidores de seus seguidores e assim por diante. Em 2009, escrevi uma postagem no blog intitulada “Como comecei com o Twitter”. Criei dois temas para o DestroyTwitter (um cliente desktop feito com Adobe Air por Jonnie Hallman) e um deles se chama "Vimeo". Em 2013, escrevi meu próprio site de backup de tweets com um front-end para visualizar meus tweets e um backend CouchDB para armazená-los.</p><p dir="auto"> Já se passaram <strong>mais de 15 anos</strong> .</p><p dir="auto"> E aqui estou. Construindo um cliente web Mastodon.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Clientes web alternativos</h2></div><ul dir="auto"><li> Garfos Fanpy ↓<ul dir="auto"><li> Ágora</li></ul></li><li> Avental (aposentado) - garfos ↓<ul dir="auto"><li> Semáforo</li><li> antes</li></ul></li><li> Cuco+</li><li> Sengi</li><li> Saboneteira</li><li> Alce - garfos ↓<ul dir="auto"><li> elk.fedified.com</li></ul></li><li> Mastodeque</li><li> Troncos</li><li> Deutinho</li><li> Caixa de areia</li><li> Statuzer</li><li> Presa</li><li> Mastodon Glitch Edition (front-end independente)</li><li> Mangano</li><li> A mesa</li><li> Mais... </li></ul><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> ?‍♂️ Aviso a todos os outros desenvolvedores de clientes de mídia social</h2></div><p dir="auto"> Por favor, copie as ideias e experimentos da interface do usuário deste aplicativo. Acho que alguns deles são muito bons e seria ótimo se mais aplicativos os tivessem.</p><p dir="auto"> Se você não é um desenvolvedor, informe seus desenvolvedores de clientes de mídia social favoritos sobre este aplicativo e peça-lhes que copiem as ideias e experimentos da interface do usuário.</p><div class="markdown-heading" dir="auto"><h2 tabindex="-1" class="heading-element" dir="auto"> Licença</h2></div><p dir="auto"> MIT.</p> </div> <div class="zd_btn more_version_btn" data-more="Expandir" data-less="Recolher">Expandir</div> </div> </section> <section class="section_box py_30 border_bottom"> <div class="w12_box"> <div class="title_template"> <span class="title">Informações adicionais</span> </div> <ul class="more_info grid gap_y6 gap_x6 grid_c3"> <li> <span class="title">Versão</span> <span class="text"></span> </li> <li> <span class="title">Tipo</span> <a class="text" href="/pt/category/list_228_1.html">Outro código-fonte</a> </li> <li> <span class="title">Data da Última Atualização</span> <span class="text">2024-11-09</span> </li> <li> <span class="title">tamanho</span> <span class="text"></span> </li> <li> <span class="title">Idioma</span> <span class="text">Chinês Simplificado</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">Aplicativos Relacionados</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">Recomendado para você</span> </div> <ul class="column3_box lr_img_text_template grid gap_x6 gap_y6 grid_c3"> <li> <a class="img_item" href="/pt/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="Bidi Film and Television bdys versão Android"></a> <div class="content"> <h3><a href="/pt/app/44151.html">Bidi Film and Television bdys versão Android</a></h3> <div class="cate"> <a href="/pt/category/list_297_1.html">Reprodução de vídeo</a> </div> <div class="other"> <span>V2.1.7</span> </div> </div> </li> <li> <a class="img_item" href="/pt/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="Baixar jogo Assault Lily"></a> <div class="content"> <h3><a href="/pt/app/39387.html">Baixar jogo Assault Lily</a></h3> <div class="cate"> <a href="/pt/category/list_301_1.html">dramatização</a> </div> <div class="other"> <span>v1.0.5</span> </div> </div> </li> <li> <a class="img_item" href="/pt/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="Código-fonte do sistema de pagamento de conhecimento丨Conteúdo educacional on-line realização de conhecimento pago丨Vídeo Q&A gráfico de curso pago personalização de miniprograma H5"></a> <div class="content"> <h3><a href="/pt/download/28990.html">Código-fonte do sistema de pagamento de conhecimento丨Conteúdo educacional on-line realização de conhecimento pago丨Vídeo Q&A gráfico de curso pago personalização de miniprograma H5</a></h3> <div class="cate"> <a href="/pt/category/list_55_1.html">Outras categorias</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/pt/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="Edição Plants vs. Zombies Westward Journey"></a> <div class="content"> <h3><a href="/pt/app/45483.html">Edição Plants vs. Zombies Westward Journey</a></h3> <div class="cate"> <a href="/pt/category/list_299_1.html">Quebra-cabeças casual</a> </div> <div class="other"> <span></span> </div> </div> </li> <li> <a class="img_item" href="/pt/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="Versão híbrida PVZ 2.3.5 versão do menu integrado"></a> <div class="content"> <h3><a href="/pt/app/179136.html">Versão híbrida PVZ 2.3.5 versão do menu integrado</a></h3> <div class="cate"> <a href="/pt/category/list_299_1.html">Quebra-cabeças casual</a> </div> <div class="other"> <span>2.3</span> </div> </div> </li> <li> <a class="img_item" href="/pt/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="Mod DLC de ruído da torre de pizza"></a> <div class="content"> <h3><a href="/pt/app/176855.html">Mod DLC de ruído da torre de pizza</a></h3> <div class="cate"> <a href="/pt/category/list_299_1.html">Quebra-cabeças casual</a> </div> <div class="other"> <span>1.0</span> </div> </div> </li> <li> <a class="img_item" href="/pt/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="Simulador de família Happy Block House móvel"></a> <div class="content"> <h3><a href="/pt/app/176584.html">Simulador de família Happy Block House móvel</a></h3> <div class="cate"> <a href="/pt/category/list_307_1.html">Negócio simulado</a> </div> <div class="other"> <span>1.0.41</span> </div> </div> </li> <li> <a class="img_item" href="/pt/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="Reparar instalação de escape de metrô com gancho"></a> <div class="content"> <h3><a href="/pt/app/176463.html">Reparar instalação de escape de metrô com gancho</a></h3> <div class="cate"> <a href="/pt/category/list_309_1.html">tiro de voo</a> </div> <div class="other"> <span>1.25.20</span> </div> </div> </li> <li> <a class="img_item" href="/pt/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="Jogo para celular BodyCam"></a> <div class="content"> <h3><a href="/pt/app/178338.html">Jogo para celular BodyCam</a></h3> <div class="cate"> <a href="/pt/category/list_309_1.html">tiro de voo</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">Informações Relacionadas</span> <a href="/category/list_336_1.html">Todos</a> </div> <ul class="cate_list_template"> <li> <a href="/pt/wz/212997.html"> <div class="text">Endereço do site oficial da Bidi Film and Television</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/pt/wz/212996.html"> <div class="text">Como recarregar o servidor internacional Assault Lily</div> <span class="time">2024-11-24</span> </a> </li> <li> <a href="/pt/wz/212995.html"> <div class="text">Como consertar a gagueira em Stalker 2: Heart of Chornobyl</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/pt/wz/212994.html"> <div class="text">Onde está o Juice WRLD em Fortnite?</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/pt/wz/212993.html"> <div class="text">Como iniciar a expansão do Wild Card em Star Wars Outlaws</div> <span class="time">2024-11-23</span> </a> </li> <li> <a href="/pt/wz/212992.html"> <div class="text">Pequim adiciona uma nova instituição de P&D para melhorar a segurança da inteligência artificial e o layout de governança</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">Comentários dos Usuários</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 = 'pt'; this.pageIndex = 1; this.resultLen = 10; this. requestUrl = "/show_comment_list"; } phpLoadPage.prototype.init = function() { var _this = this; var moreComment = 'Clique para ver mais'; $(".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 = 'pt'; let fromto = 'Vindo de'; 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>