198 lines
12 KiB
JavaScript
198 lines
12 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import InOtherApp from "@/components/InOtherApp";
|
||
import Footer from "@/components/Footer";
|
||
import IosInstallStepModal from "@/components/IosInstallStepModal/page";
|
||
import { getCookie } from "cookies-next";
|
||
|
||
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");
|
||
}
|
||
}, []);
|
||
|
||
//ios安装教程Modal是否展示
|
||
const [isIosInstallStepModalVisible, setIsIosInstallStepModalVisible] =
|
||
useState(false);
|
||
|
||
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.5.0.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 gap-2">
|
||
{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={() => {
|
||
if (deviceType === "ios") setIsIosInstallStepModalVisible(true);
|
||
const url =
|
||
deviceType === "ios"
|
||
? "itms-services://?action=download-manifest&url=https://filecdn01.tiefen.fun/appdownload/ironfans.plist"
|
||
: "https://filecdn01.tiefen.fun/appdownload/ironfans1.5.0.apk";
|
||
window.location.href = url;
|
||
if (deviceType === "ios") {
|
||
setIsIosInstallStepModalVisible(true);
|
||
}
|
||
}}
|
||
>
|
||
安装
|
||
</div>
|
||
)}
|
||
{deviceType === "ios" && (
|
||
<div
|
||
className="btn bg-[#FFFFFF1A] rounded-full text-white text-lg font-medium w-64 h-14"
|
||
onClick={() => {
|
||
const inviter = getCookie("inviter");
|
||
const url = `https://app.tiefen.fun?inviter=${inviter}`;
|
||
window.location.href = url;
|
||
}}
|
||
>
|
||
手机网页版
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<IosInstallStepModal
|
||
isVisible={isIosInstallStepModalVisible}
|
||
setIsVisible={setIsIosInstallStepModalVisible}
|
||
/>
|
||
<Footer />
|
||
</section>
|
||
);
|
||
}
|