tiefen_space_web/app/page.jsx

183 lines
12 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import React, { useState, useEffect } from "react";
import InOtherApp from "@/components/InOtherApp";
import Footer from "@/components/Footer";
import Link from "next/link";
export default function Home() {
const [deviceType, setDeviceType] = useState("");
useEffect(() => {
const userAgent = navigator.userAgent;
//区分设备类型
if (/Android/i.test(userAgent)) {
setDeviceType("Android");
} else if (/iPhone|iPad|iPod/i.test(userAgent)) {
setDeviceType("ios");
} else {
setDeviceType("pc");
}
}, []);
return (
<section className="flex flex-col container">
<InOtherApp />
<div className="absolute top-0 left-0 w-full h-full z-0">
<img
className="absolute top-0 left-0 w-36"
src={
process.env.NEXT_PUBLIC_CDN_URL +
"/public/images/download_lefttop.png"
}
alt=""
/>
<img
className="absolute top-10 right-0 w-28"
src={
process.env.NEXT_PUBLIC_CDN_URL +
"/public/images/download_righttop.png"
}
alt=""
/>
<img
className="absolute top-64 right-0 w-24"
src={
process.env.NEXT_PUBLIC_CDN_URL +
"/public/images/download_rightmedium.png"
}
alt=""
/>
<img
className="absolute bottom-[17rem] left-0 w-32"
src={
process.env.NEXT_PUBLIC_CDN_URL +
"/public/images/download_leftbottom.png"
}
alt=""
/>
<img
className="absolute bottom-0 right-0 w-[21rem]"
src={
process.env.NEXT_PUBLIC_CDN_URL +
"/public/images/download_rightbottom.png"
}
alt=""
/>
</div>
<div className="flex flex-col flex-1 py-8 items-center justify-around z-10">
<img
className="w-96"
src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/slogan.png"}
alt=""
/>
<div className="flex px-8 max-w-xl">
<h1 className="text-white text-base leading-6">
<svg
className="inline-block mr-2"
viewBox="0 0 1024 1024"
width="16"
height="16"
>
<path
d="M989.696 506.88c-23.04-23.04-50.688-34.304-83.968-34.304H768c-16.384 0-30.208-5.632-41.984-17.408-11.776-11.776-17.408-25.6-17.408-41.984v-19.456c0-43.52 15.36-80.896 46.08-111.616s68.096-46.08 111.616-46.08h39.424c10.752 0 19.968-4.096 27.648-11.776 7.68-7.68 11.776-16.896 11.776-27.648V118.272c0-10.752-3.584-19.968-11.776-27.648-7.68-7.68-16.896-11.776-27.648-11.776h-39.424c-42.496 0-83.456 8.192-122.368 25.088-38.912 16.384-72.192 38.912-100.864 67.584-28.16 28.16-50.688 61.952-67.584 100.864-16.896 38.912-25.088 79.36-25.088 122.368v433.152c0 32.768 11.776 60.928 34.304 83.968 23.04 23.04 50.688 34.304 83.968 34.304h236.032c32.768 0 60.928-11.264 83.968-34.304 23.04-23.04 34.304-50.688 34.304-83.968v-236.544c1.024-33.28-10.24-61.44-33.28-84.48M438.272 506.88c-23.04-23.04-50.688-34.304-83.456-34.304h-138.24c-16.384 0-30.208-5.632-41.984-17.408-11.776-11.776-17.408-25.6-17.408-41.984v-19.456c0-43.52 15.36-80.896 46.08-111.616s68.096-46.08 111.616-46.08h39.424c10.752 0 19.968-4.096 27.648-11.776 7.68-7.68 11.776-16.896 11.776-27.648V118.272c0-10.752-4.096-19.968-11.776-27.648-7.68-7.68-16.896-11.776-27.648-11.776h-39.424c-42.496 0-83.456 8.192-122.368 25.088-38.912 16.384-72.192 38.912-100.864 67.584C63.488 199.68 40.96 233.472 24.064 272.384 8.192 310.272 0 351.232 0 393.728v433.152c0 32.768 11.264 60.928 34.304 83.968 23.04 23.04 50.688 34.304 83.968 34.304h236.544c32.768 0 60.928-11.264 83.456-34.304 23.04-23.04 34.304-50.688 34.304-83.968v-236.544c0-32.256-11.264-60.416-34.304-83.456"
fill="#FF669E"
></path>
</svg>
铁粉空间是一款专注于创作者与粉丝互动的内容分享平台在这里你可以查看你喜欢的创作者的全平台账号并可以一键跳转进行关注也能在这儿查看Ta的最新动态做最了解Ta的那个铁粉
<svg
className="inline-block ml-2"
viewBox="0 0 1024 1024"
width="16"
height="16"
>
<path
d="M34.304 517.12c23.04 23.04 50.688 34.304 83.968 34.304H256c16.384 0 30.208 5.632 41.984 17.408 11.776 11.776 17.408 25.6 17.408 41.984v19.456c0 43.52-15.36 80.896-46.08 111.616s-68.096 46.08-111.616 46.08h-39.424c-10.752 0-19.968 4.096-27.648 11.776-7.68 7.68-11.776 16.896-11.776 27.648V906.24c0 10.752 3.584 19.968 11.776 27.648 7.68 7.68 16.896 11.776 27.648 11.776h39.424c42.496 0 83.456-8.192 122.368-25.088 38.912-16.384 72.192-38.912 100.864-67.584 28.16-28.16 50.688-61.952 67.584-100.864 16.896-38.912 25.088-79.36 25.088-122.368V197.12c0-32.768-11.776-60.928-34.304-83.968-23.04-23.04-50.688-34.304-83.968-34.304H118.272c-32.768 0-60.928 11.264-83.968 34.304C11.264 136.192 0 163.84 0 197.12v236.544C0 465.92 11.264 494.08 34.304 517.12m551.424 0c23.04 23.04 50.688 34.304 83.456 34.304h137.728c16.384 0 30.208 5.632 41.984 17.408 11.776 11.776 17.408 25.6 17.408 41.984v19.456c0 43.52-15.36 80.896-46.08 111.616s-68.096 46.08-111.616 46.08h-39.424c-10.752 0-19.968 4.096-27.648 11.776-7.68 7.68-11.776 16.896-11.776 27.648V906.24c0 10.752 4.096 19.968 11.776 27.648 7.68 7.68 16.896 11.776 27.648 11.776h39.424c42.496 0 83.456-8.192 122.368-25.088 38.912-16.384 72.192-38.912 100.864-67.584 28.16-28.16 50.688-61.952 67.584-100.864 16.896-38.912 25.088-79.36 25.088-122.368V197.12c0-32.768-11.264-60.928-34.304-83.968-23.04-23.04-50.688-34.304-83.968-34.304h-236.544c-32.768 0-60.928 11.264-83.456 34.304-23.04 23.04-34.304 50.688-34.304 83.968v236.544c-0.512 32.256 10.752 60.416 33.792 83.456"
fill="#FF669E"
></path>
</svg>
</h1>
</div>
{deviceType === "pc" && (
<div className="flex flex-row gap-20">
<a
href="https://filecdn01.tiefen.fun/appdownload/ironfans1.4.6.apk"
className="group relative cursor-pointer w-20 h-20 rounded-full bg-[#FFFFFF1A]"
>
<p className="group-hover:opacity-100 opacity-0 transition-all duration-300 absolute flex w-full h-full items-center justify-center text-white text-xs">
立即下载
</p>
<div className="group-hover:opacity-0 opacity-100 transition-all duration-300 flex flex-col w-full h-full items-center justify-center">
<svg viewBox="0 0 1024 1024" width="32" height="32">
<path
d="M192.128 240.298667a42.666667 42.666667 0 0 1 58.24 15.872l71.552 125.226666A467.712 467.712 0 0 1 511.957333 341.333333c61.056 0 119.381333 11.648 172.885334 32.853334l67.413333-118.016a42.666667 42.666667 0 0 1 74.112 42.325333l-65.322667 114.304a469.333333 469.333333 0 0 1 217.941334 350.976A42.666667 42.666667 0 0 1 936.533333 810.666667H87.466667a42.666667 42.666667 0 0 1-42.453334-46.890667 469.12 469.12 0 0 1 202.410667-340.821333L176.256 298.496a42.666667 42.666667 0 0 1 15.872-58.197333zM320 661.333333a42.666667 42.666667 0 1 0 0-85.333333 42.666667 42.666667 0 0 0 0 85.333333z m426.666667-42.666666a42.666667 42.666667 0 1 0-85.333334 0 42.666667 42.666667 0 0 0 85.333334 0z"
fill="#ffffff"
></path>
</svg>
<p className="text-white text-xs ">Android</p>
</div>
</a>
<a
href="itms-services://?action=download-manifest&url=https://filecdn01.tiefen.fun/appdownload/ironfans.plist"
className="group relative cursor-pointer w-20 h-20 rounded-full bg-[#FFFFFF1A]"
>
<p className="group-hover:opacity-100 opacity-0 transition-all duration-300 text-center p-3 absolute flex w-full h-full items-center justify-center text-white text-xs">
立即安装
</p>
<div className="group-hover:opacity-0 opacity-100 transition-all duration-300 flex flex-col w-full h-full items-center justify-center">
<svg viewBox="0 0 1024 1024" width="32" height="32">
<path
d="M549.973333 117.077333c-24.704 34.944-38.101333 76.757333-39.850666 124.373334 8.021333-0.896 16-1.962667 23.893333-3.2 8.96-1.408 16.341333-2.986667 21.76-4.608 16.341333-5.632 34.816-18.048 54.784-36.778667 21.333333-21.290667 37.461333-44.842667 47.744-69.888 9.813333-25.898667 14.762667-49.408 14.762667-69.930667v-9.045333l-1.152-5.162667c-56.149333 14.122667-97.152 39.082667-121.941334 74.24z"
fill="#ffffff"
></path>
<path
d="M200.533333 279.04C248.490667 232.064 307.114667 213.333333 349.482667 213.333333c41.813333 0 76.629333 18.261333 101.546666 31.402667l2.944 1.536c28.16 14.762667 45.909333 23.125333 65.493334 23.125333 20.224 0 39.509333-8.789333 71.082666-23.850666l0.597334-0.298667C619.733333 231.594667 657.92 213.333333 704 213.333333c63.701333 0 116.693333 32.256 158.421333 86.528a42.666667 42.666667 0 0 1-5.205333 57.642667c-45.482667 41.173333-67.84 91.690667-67.84 154.496 0 87.04 61.312 125.44 90.837333 143.018667a42.666667 42.666667 0 0 1 18.432 50.816c-10.666667 30.250667-30.208 68.181333-49.92 101.333333-19.370667 32.682667-41.728 65.493333-59.306666 83.626667l-0.896 0.981333c-12.885333 13.269333-27.648 28.501333-45.568 39.424-20.437333 12.373333-42.794667 18.133333-69.888 18.133333-15.957333 0-31.872-3.456-45.610667-7.253333-12.458667-3.413333-25.557333-7.850667-37.461333-11.861333l-4.053334-1.365334c-28.458667-9.6-49.792-16-66.474666-16-15.957333 0-33.706667 5.973333-59.605334 15.573334l-3.84 1.408c-22.016 8.234667-52.053333 19.498667-82.474666 19.498666-64.426667 0-105.6-50.005333-118.357334-65.450666a221.952 221.952 0 0 0-2.304-2.773334l-1.152-1.322666c-18.346667-21.333333-136.362667-157.952-136.362666-367.786667 0-109.184 35.797333-184.704 85.077333-232.96z"
fill="#ffffff"
></path>
</svg>
<p className="text-white text-xs ">ios</p>
</div>
</a>
</div>
)}
<div className="flex flex-col justify-center items-center">
<img
className="w-28 rounded-2xl"
src={process.env.NEXT_PUBLIC_CDN_URL + "/public/images/qrcode.png"}
alt=""
/>
{deviceType === "pc" && (
<p className="mt-3 text-white text-sm font-normal">手机扫码下载</p>
)}
</div>
<div className="flex flex-col items-center">
{deviceType !== "pc" && (
<div
className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-64 h-14"
onClick={() => {
const url =
deviceType === "ios"
? "itms-services://?action=download-manifest&url=https://filecdn01.tiefen.fun/appdownload/ironfans.plist"
: "https://filecdn01.tiefen.fun/appdownload/ironfans1.4.6.apk";
window.location.href = url;
}}
>
安装
</div>
)}
{deviceType !== "Android" && (
<p className="mt-3 text-white text-sm font-normal">
安装前请卸载旧版本详情请
<Link
className="link text-primary cursor-pointer"
href="/doc/ioshowtoinstall"
>
查看帮助
</Link>
</p>
)}
</div>
</div>
<Footer />
</section>
);
}