├── .gitignore ├── .node-version ├── CHANGELOG.md ├── README.md ├── ads.txt ├── disclaimer.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── App.jsx ├── css │ ├── additional-styles │ │ ├── range-slider.css │ │ ├── theme.css │ │ ├── toggle-switch.css │ │ └── utility-patterns.css │ ├── style.css │ └── tailwind.config.js ├── favicon.svg ├── images │ ├── aisource.png │ ├── anime-girl-1418451-wallhere.com.jpg │ ├── botset.png │ ├── chrome.svg │ ├── coffee.jpg │ ├── favicon.png │ ├── features-bg.png │ ├── features-chatgpt.jpg │ ├── features-element.png │ ├── features-wechat_message.jpg │ ├── features-wechat_web.jpg │ ├── firefox.svg │ ├── group2.jpg │ ├── group3.jpg │ ├── hero-image.png │ ├── join_bg.jpg │ ├── logo.svg │ ├── private.jpg │ ├── testimonial.jpg │ ├── try.jpg │ ├── wxzsm.jpg │ └── zfb.jpg ├── main.jsx ├── pages │ ├── Discover.tsx │ └── Home.jsx ├── partials │ ├── Faq.jsx │ ├── Features.jsx │ ├── Footer.jsx │ ├── Header.jsx │ ├── HeroHome.jsx │ ├── Join.jsx │ ├── Popup.css │ ├── Popup.jsx │ ├── Pricing.jsx │ ├── Pricing2.jsx │ ├── VideoPlayer.jsx │ └── websites.json └── utils │ ├── Dropdown.jsx │ ├── Modal.jsx │ └── Transition.jsx ├── vite.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | dist-ssr 5 | *.local -------------------------------------------------------------------------------- /.node-version: -------------------------------------------------------------------------------- 1 | v18.13.0 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG.md 2 | 3 | ## [1.3.0] - 2022-07-15 4 | 5 | - Update dependencies 6 | - Update React to v18 7 | - Replace Sass with CSS files 8 | 9 | ## [1.1.0] - 2022-01-27 10 | 11 | - Replace CRA (Create React App) with Vite 12 | - Remove Craco 13 | - Update dependencies 14 | 15 | ## [1.0.1] - 2020-10-19 16 | 17 | Fix issue with testimonail image on mobile 18 | 19 | ## [1.0.0] - 2020-10-15 20 | 21 | First release 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ChatGPT for Wechat 2 | 3 | **[ChatGPT for Wechat](https://aow.me)** 一个 `Chrome` 浏览器插件，通过 `ChatGPT` 来自动响应微信私信或群聊中 `@你` 的消息的智能聊天机器人 4 | 5 | 官方网站：👉️ 基于微信网页版开发 [项目网址](https://chatgpt4wechat.aow.me/) 6 | 7 | 插件下载：🤖 最新版本 v2.1.0 [安装地址](https://aow.me/chatgpt4wechat) 8 | 9 | 使用步骤：🙂 [抖音视频](https://www.douyin.com/video/7201829578636053764)、[油管视频](https://www.youtube.com/watch?v=jW3ilDz6syA) 10 | 11 | 功能说明： 12 | 13 | - 支持微信群聊、私聊 14 | 15 | - 支持单个用户的提问频次约束 16 | 17 | - 已接入两种AI源：ChatGPT、OpenAI APIKEY 18 | 19 | - ChatGPT模式支持上下文对话（推荐使用ChatGPT PLUS版本） 20 | 21 | - 支持多群组多人同时提问，消息进队列不阻塞，有序回答 22 | 23 | 其他事项：[用户协议](https://aow.me/tos)、[免责声明](https://aow.me/disclaimer) 24 | 25 | 个人助手版：基于微信文件传输助手开发 [项目网址](https://chatgpt4filehelper.aow.me)、 [安装地址](https://aow.me/chatgpt4filehelper) 26 | 27 | ## Usage 28 | 29 | This project was bootstrapped with [Vite](https://vitejs.dev/). 30 | 31 | ### Project setup 32 | ``` 33 | npm install 34 | ``` 35 | 36 | #### Compiles and hot-reloads for development 37 | ``` 38 | npm run dev 39 | ``` 40 | 41 | #### Compiles and minifies for production 42 | ``` 43 | npm run build 44 | ``` 45 | -------------------------------------------------------------------------------- /ads.txt: -------------------------------------------------------------------------------- 1 | google.com, pub-5874636604758542, DIRECT, f08c47fec0942fa0 -------------------------------------------------------------------------------- /disclaimer.md: -------------------------------------------------------------------------------- 1 | 免责声明： 2 | 3 | 该插件提供的所有信息和功能仅供参考和娱乐，并不构成任何形式的建议或指导。使用该插件的所有风险由用户自行承担。我们不保证插件提供的信息和功能的准确性、可靠性或适用性。我们不对使用该插件所导致的任何损失或损害负责，包括但不限于因使用该插件而导致的任何直接、间接、特殊、附带或后果性损失或损害，包括因程序漏洞、错误、滞后或其他任何原因而导致的损失或损害。 4 | 5 | 您应该注意，该插件的使用可能会导致不当言论或内容的发布。您应该对在聊天过程中发布的所有内容负责，包括但不限于诽谤、侵犯隐私权、侵犯知识产权等。 6 | 7 | 最后，请注意，该插件可能不适用于某些特定情况或地区。在使用该插件之前，请确保您已经了解了相关的法律和规定，以确保您的行为是合法的。 8 | 9 | 请仔细阅读本免责声明。使用该插件即表示您已经完全理解并同意承担任何风险。如果您不同意这些条款，请不要使用该插件。 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ChatGPT for Wechat, ChatGPT, 微信, 浏览器插件, 聊天机器人 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 23 |
24 | 25 | 26 | 27 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-light-react", 3 | "version": "0.1.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "preview": "vite preview" 8 | }, 9 | "dependencies": { 10 | "@tailwindcss/forms": "^0.5.2", 11 | "aos": "^3.0.0-beta.6", 12 | "react": "^18.2.0", 13 | "react-cookie-consent": "^8.0.1", 14 | "react-dom": "^18.2.0", 15 | "react-faq-component": "^1.3.4", 16 | "react-flatpickr": "^3.10.13", 17 | "react-router-dom": "^6.10.0", 18 | "react-transition-group": "^4.4.2", 19 | "sticky-js": "^1.3.0" 20 | }, 21 | "devDependencies": { 22 | "@vitejs/plugin-react": "^2.0.0", 23 | "autoprefixer": "^10.4.7", 24 | "postcss": "^8.4.14", 25 | "sass": "^1.53.0", 26 | "tailwindcss": "^3.1.6", 27 | "vite": "^3.0.0", 28 | "vite-plugin-static-copy": "^0.13.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | import tailwind from 'tailwindcss' 2 | import autoprefixer from 'autoprefixer' 3 | import tailwindConfig from './src/css/tailwind.config.js' 4 | 5 | export default { 6 | plugins: [tailwind(tailwindConfig), autoprefixer], 7 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { Routes, Route, Link, useLocation } from 'react-router-dom'; 3 | import 'aos/dist/aos.css'; 4 | import './css/style.css'; 5 | import AOS from 'aos'; 6 | import Home from './pages/Home'; 7 | import Discover from './pages/Discover'; 8 | import Header from './partials/Header'; // 修改为您的 Header 组件的实际路径 9 | 10 | 11 | function App() { 12 | const location = useLocation(); 13 | 14 | useEffect(() => { 15 | AOS.init({ 16 | once: true, 17 | disable: 'phone', 18 | duration: 700, 19 | easing: 'ease-out-cubic', 20 | }); 21 | }); 22 | 23 | useEffect(() => { 24 | document.querySelector('html').style.scrollBehavior = 'auto'; 25 | window.scroll({ top: 0 }); 26 | document.querySelector('html').style.scrollBehavior = ''; 27 | }, [location.pathname]); 28 | 29 | return ( 30 | <> 31 | {/* 添加导航链接 */} 32 |
33 | 34 | {/* 配置路由 */} 35 | 36 | } /> 37 | } /> 38 | 39 | 40 | ); 41 | } 42 | 43 | export default App; 44 | -------------------------------------------------------------------------------- /src/css/additional-styles/range-slider.css: -------------------------------------------------------------------------------- 1 | /* Range slider */ 2 | :root { 3 | --range-thumb-size: 36px; 4 | } 5 | 6 | input[type=range] { 7 | appearance: none; 8 | background: #ccc; 9 | border-radius: 3px; 10 | height: 6px; 11 | margin-top: (--range-thumb-size - 6px) * 0.5; 12 | margin-bottom: (--range-thumb-size - 6px) * 0.5; 13 | --thumb-size: #{--range-thumb-size}; 14 | } 15 | 16 | input[type=range]::-webkit-slider-thumb { 17 | appearance: none; 18 | -webkit-appearance: none; 19 | background-color: #000; 20 | background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E"); 21 | background-position: center; 22 | background-repeat: no-repeat; 23 | border: 0; 24 | border-radius: 50%; 25 | cursor: pointer; 26 | height: --range-thumb-size; 27 | width: --range-thumb-size; 28 | } 29 | 30 | input[type=range]::-moz-range-thumb { 31 | background-color: #000; 32 | background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E"); 33 | background-position: center; 34 | background-repeat: no-repeat; 35 | border: 0; 36 | border: none; 37 | border-radius: 50%; 38 | cursor: pointer; 39 | height: --range-thumb-size; 40 | width: --range-thumb-size; 41 | } 42 | 43 | input[type=range]::-ms-thumb { 44 | background-color: #000; 45 | background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .5v7L12 4zM0 4l4 3.5v-7z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E"); 46 | background-position: center; 47 | background-repeat: no-repeat; 48 | border: 0; 49 | border-radius: 50%; 50 | cursor: pointer; 51 | height: --range-thumb-size; 52 | width: --range-thumb-size; 53 | } 54 | 55 | input[type=range]::-moz-focus-outer { 56 | border: 0; 57 | } -------------------------------------------------------------------------------- /src/css/additional-styles/theme.css: -------------------------------------------------------------------------------- 1 | html { 2 | scroll-behavior: smooth; 3 | } 4 | 5 | .form-input:focus, 6 | .form-textarea:focus, 7 | .form-multiselect:focus, 8 | .form-select:focus, 9 | .form-checkbox:focus, 10 | .form-radio:focus { 11 | @apply ring-0; 12 | } 13 | 14 | /* Hamburger button */ 15 | .hamburger svg>*:nth-child(1), 16 | .hamburger svg>*:nth-child(2), 17 | .hamburger svg>*:nth-child(3) { 18 | transform-origin: center; 19 | transform: rotate(0deg); 20 | } 21 | 22 | .hamburger svg>*:nth-child(1) { 23 | transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), opacity 0.1s ease-in; 24 | } 25 | 26 | .hamburger svg>*:nth-child(2) { 27 | transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); 28 | } 29 | 30 | .hamburger svg>*:nth-child(3) { 31 | transition: y 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.1s 0.25s ease-in; 32 | } 33 | 34 | .hamburger.active svg>*:nth-child(1) { 35 | opacity: 0; 36 | y: 11; 37 | transform: rotate(225deg); 38 | transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.1s 0.12s ease-out; 39 | } 40 | 41 | .hamburger.active svg>*:nth-child(2) { 42 | transform: rotate(225deg); 43 | transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 44 | } 45 | 46 | .hamburger.active svg>*:nth-child(3) { 47 | y: 11; 48 | transform: rotate(135deg); 49 | transition: y 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.1s ease-out; 50 | } 51 | 52 | /* Pulsing animation */ 53 | @keyframes pulseLoop { 54 | 0% { opacity: .15; transform: scale(1) translateZ(0); } 55 | 30% { opacity: .15; } 56 | 60% { opacity: 0; } 57 | 80% { opacity: 0; transform: scale(1.8) translateZ(0); } 58 | } 59 | @keyframes pulseMiniLoop { 60 | 0% { opacity: 0; transform: scale(1) translateZ(0); } 61 | 30% { opacity: .3; } 62 | 50% { opacity: .3; } 63 | 80% { opacity: 0; transform: scale(3) translateZ(0); } 64 | } 65 | .pulse { 66 | transform: scale(1); 67 | opacity: 0; 68 | transform-origin: center; 69 | animation: pulseLoop 10000ms linear infinite; 70 | } 71 | .pulse-mini { 72 | animation: pulseMiniLoop 6000ms linear infinite; 73 | } 74 | .pulse-1 { 75 | animation-delay: -3000ms; 76 | } 77 | .pulse-2 { 78 | animation-delay: -6000ms; 79 | } 80 | 81 | /* Animations delay */ 82 | .animation-delay-500 { 83 | animation-delay: 500ms !important; 84 | } 85 | 86 | .animation-delay-1000 { 87 | animation-delay: 1000ms !important; 88 | } 89 | 90 | .translate-z-0 { 91 | transform: translateZ(0); 92 | } 93 | 94 | /* Custom AOS animations */ 95 | [data-aos="zoom-y-out"] { 96 | transform: scaleX(1.03); 97 | opacity: 0; 98 | transition-property: transform, opacity; 99 | } 100 | 101 | @media screen { 102 | html:not(.no-js) [data-aos=fade-up] { 103 | -webkit-transform: translate3d(0, 10px, 0); 104 | transform: translate3d(0, 10px, 0); 105 | } 106 | 107 | html:not(.no-js) [data-aos=fade-down] { 108 | -webkit-transform: translate3d(0, -10px, 0); 109 | transform: translate3d(0, -10px, 0); 110 | } 111 | 112 | html:not(.no-js) [data-aos=fade-right] { 113 | -webkit-transform: translate3d(-10px, 0, 0); 114 | transform: translate3d(-10px, 0, 0); 115 | } 116 | 117 | html:not(.no-js) [data-aos=fade-left] { 118 | -webkit-transform: translate3d(10px, 0, 0); 119 | transform: translate3d(10px, 0, 0); 120 | } 121 | 122 | html:not(.no-js) [data-aos=fade-up-right] { 123 | -webkit-transform: translate3d(-10px, 10px, 0); 124 | transform: translate3d(-10px, 10px, 0); 125 | } 126 | 127 | html:not(.no-js) [data-aos=fade-up-left] { 128 | -webkit-transform: translate3d(10px, 10px, 0); 129 | transform: translate3d(10px, 10px, 0); 130 | } 131 | 132 | html:not(.no-js) [data-aos=fade-down-right] { 133 | -webkit-transform: translate3d(-10px, -10px, 0); 134 | transform: translate3d(-10px, -10px, 0); 135 | } 136 | 137 | html:not(.no-js) [data-aos=fade-down-left] { 138 | -webkit-transform: translate3d(10px, -10px, 0); 139 | transform: translate3d(10px, -10px, 0); 140 | } 141 | 142 | html:not(.no-js) [data-aos=zoom-in-up] { 143 | -webkit-transform: translate3d(0, 10px, 0) scale(.6); 144 | transform: translate3d(0, 10px, 0) scale(.6); 145 | } 146 | 147 | html:not(.no-js) [data-aos=zoom-in-down] { 148 | -webkit-transform: translate3d(0, -10px, 0) scale(.6); 149 | transform: translate3d(0, -10px, 0) scale(.6); 150 | } 151 | 152 | html:not(.no-js) [data-aos=zoom-in-right] { 153 | -webkit-transform: translate3d(-10px, 0, 0) scale(.6); 154 | transform: translate3d(-10px, 0, 0) scale(.6); 155 | } 156 | 157 | html:not(.no-js) [data-aos=zoom-in-left] { 158 | -webkit-transform: translate3d(10px, 0, 0) scale(.6); 159 | transform: translate3d(10px, 0, 0) scale(.6); 160 | } 161 | 162 | html:not(.no-js) [data-aos=zoom-out-up] { 163 | -webkit-transform: translate3d(0, 10px, 0) scale(1.2); 164 | transform: translate3d(0, 10px, 0) scale(1.2); 165 | } 166 | 167 | html:not(.no-js) [data-aos=zoom-out-down] { 168 | -webkit-transform: translate3d(0, -10px, 0) scale(1.2); 169 | transform: translate3d(0, -10px, 0) scale(1.2); 170 | } 171 | 172 | html:not(.no-js) [data-aos=zoom-out-right] { 173 | -webkit-transform: translate3d(-10px, 0, 0) scale(1.2); 174 | transform: translate3d(-10px, 0, 0) scale(1.2); 175 | } 176 | 177 | html:not(.no-js) [data-aos=zoom-out-left] { 178 | -webkit-transform: translate3d(10px, 0, 0) scale(1.2); 179 | transform: translate3d(10px, 0, 0) scale(1.2); 180 | } 181 | } -------------------------------------------------------------------------------- /src/css/additional-styles/toggle-switch.css: -------------------------------------------------------------------------------- 1 | /* Switch element */ 2 | .form-switch { 3 | @apply relative select-none; 4 | width: 68px; 5 | } 6 | 7 | .form-switch label { 8 | @apply block overflow-hidden cursor-pointer rounded; 9 | height: 38px; 10 | } 11 | 12 | .form-switch label>span:first-child { 13 | @apply absolute block rounded shadow; 14 | width: 30px; 15 | height: 30px; 16 | top: 4px; 17 | left: 4px; 18 | right: 50%; 19 | transition: all .15s ease-out; 20 | } 21 | 22 | .form-switch input[type="checkbox"]:checked+label { 23 | @apply bg-blue-600; 24 | } 25 | 26 | .form-switch input[type="checkbox"]:checked+label>span:first-child { 27 | left: 34px; 28 | } 29 | -------------------------------------------------------------------------------- /src/css/additional-styles/utility-patterns.css: -------------------------------------------------------------------------------- 1 | /* Typography */ 2 | .h1 { 3 | @apply text-4xl font-extrabold leading-tight tracking-tighter; 4 | } 5 | 6 | .h2 { 7 | @apply text-3xl font-extrabold leading-tight tracking-tighter; 8 | } 9 | 10 | .h3 { 11 | @apply text-3xl font-bold leading-tight; 12 | } 13 | 14 | .h4 { 15 | @apply text-2xl font-bold leading-snug tracking-tight; 16 | } 17 | 18 | @screen md { 19 | .h1 { 20 | @apply text-5xl; 21 | } 22 | 23 | .h2 { 24 | @apply text-4xl; 25 | } 26 | } 27 | 28 | /* Buttons */ 29 | .btn, 30 | .btn-sm { 31 | @apply font-medium inline-flex items-center justify-center border border-transparent rounded leading-snug transition duration-150 ease-in-out; 32 | } 33 | 34 | .btn { 35 | @apply px-8 py-3 shadow-lg; 36 | } 37 | 38 | .btn-sm { 39 | @apply px-4 py-2 shadow; 40 | } 41 | 42 | /* Forms */ 43 | .form-input, 44 | .form-textarea, 45 | .form-multiselect, 46 | .form-select, 47 | .form-checkbox, 48 | .form-radio { 49 | @apply bg-white border border-gray-300 focus:border-gray-500; 50 | } 51 | 52 | .form-input, 53 | .form-textarea, 54 | .form-multiselect, 55 | .form-select, 56 | .form-checkbox { 57 | @apply rounded; 58 | } 59 | 60 | .form-input, 61 | .form-textarea, 62 | .form-multiselect, 63 | .form-select { 64 | @apply py-3 px-4; 65 | } 66 | 67 | .form-input, 68 | .form-textarea { 69 | @apply placeholder-gray-500; 70 | } 71 | 72 | .form-select { 73 | @apply pr-10; 74 | } 75 | 76 | .form-checkbox, 77 | .form-radio { 78 | @apply text-gray-800 rounded-sm; 79 | } -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=fallback'); 2 | 3 | @import 'tailwindcss/base'; 4 | @import 'tailwindcss/components'; 5 | 6 | /* Additional styles */ 7 | @import 'additional-styles/utility-patterns.css'; 8 | @import 'additional-styles/range-slider.css'; 9 | @import 'additional-styles/toggle-switch.css'; 10 | @import 'additional-styles/theme.css'; 11 | 12 | @import 'tailwindcss/utilities'; 13 | 14 | /* Additional Tailwind directives: https://tailwindcss.com/docs/functions-and-directives/#responsive */ 15 | @layer utilities { 16 | .rtl { 17 | direction: rtl; 18 | } 19 | } 20 | 21 | /* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */ 22 | [x-cloak=""] { 23 | display: none; 24 | } 25 | 26 | .bg-primary { 27 | background-color: #338CF5; 28 | } 29 | 30 | .text-primary { 31 | color: #338CF5; 32 | } -------------------------------------------------------------------------------- /src/css/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | './index.html', 4 | './src/**/*.{js,jsx,ts,tsx}', 5 | ], 6 | theme: { 7 | extend: { 8 | colors: { 9 | current: '#338CF5', 10 | gray: { 11 | 100: '#FBFBFB', 12 | 200: '#EAEAEA', 13 | 300: '#DFDFDF', 14 | 400: '#999999', 15 | 500: '#7F7F7F', 16 | 600: '#666666', 17 | 700: '#4C4C4C', 18 | 800: '#333333', 19 | 900: '#191919', 20 | }, 21 | blue: { 22 | 100: '#E6F0FD', 23 | 200: '#CCE2FC', 24 | 300: '#99C5FA', 25 | 400: '#66A9F7', 26 | 500: '#338CF5', 27 | 600: '#0070F4', 28 | 700: '#0064DA', 29 | 800: '#0059C2', 30 | 900: '#004391', 31 | }, 32 | teal: { 33 | 100: '#E6FFFA', 34 | 200: '#B2F5EA', 35 | 300: '#81E6D9', 36 | 400: '#4FD1C5', 37 | 500: '#3ABAB4', 38 | 600: '#319795', 39 | 700: '#2C7A7B', 40 | 800: '#285E61', 41 | 900: '#234E52', 42 | }, 43 | }, 44 | boxShadow: { 45 | xs: '0 0 0 1px rgba(0, 0, 0, 0.16)', 46 | sm: '0 1px 2px 0 rgba(0, 0, 0, 0.16)', 47 | default: '0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.03)', 48 | md: '0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.03)', 49 | lg: '0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02)', 50 | xl: '0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.02)', 51 | '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.15)', 52 | inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.04)', 53 | outline: '0 0 0 3px rgba(66, 153, 225, 0.5)', 54 | none: 'none', 55 | }, 56 | spacing: { 57 | '9/16': '56.25%', 58 | '3/4': '75%', 59 | '1/1': '100%', 60 | }, 61 | fontFamily: { 62 | inter: ['Inter', 'sans-serif'] 63 | }, 64 | fontSize: { 65 | xs: '0.75rem', 66 | sm: '0.875rem', 67 | base: '1rem', 68 | lg: '1.125rem', 69 | xl: '1.25rem', 70 | '2xl': '1.5rem', 71 | '3xl': '2rem', 72 | '4xl': '2.625rem', 73 | '5xl': '3.25rem', 74 | '6xl': '5.5rem', 75 | }, 76 | inset: { 77 | '1/2': '50%', 78 | 'full': '100%', 79 | }, 80 | letterSpacing: { 81 | tighter: '-0.02em', 82 | tight: '-0.01em', 83 | normal: '0', 84 | wide: '0.01em', 85 | wider: '0.02em', 86 | widest: '0.4em', 87 | }, 88 | lineHeight: { 89 | none: '1', 90 | tighter: '1.125', 91 | tight: '1.25', 92 | snug: '1.375', 93 | normal: '1.5', 94 | relaxed: '1.625', 95 | loose: '2', 96 | '3': '.75rem', 97 | '4': '1rem', 98 | '5': '1.2rem', 99 | '6': '1.5rem', 100 | '7': '1.75rem', 101 | '8': '2rem', 102 | '9': '2.25rem', 103 | '10': '2.5rem', 104 | }, 105 | minWidth: { 106 | '10': '2.5rem', 107 | '48': '12rem', 108 | }, 109 | opacity: { 110 | '90': '0.9', 111 | }, 112 | scale: { 113 | '98': '.98' 114 | }, 115 | animation: { 116 | float: 'float 3s ease-in-out infinite', 117 | }, 118 | keyframes: { 119 | float: { 120 | '0%, 100%': { transform: 'translateY(0)', }, 121 | '50%': { transform: 'translateY(-5%)', }, 122 | }, 123 | }, 124 | zIndex: { 125 | '-1': '-1', 126 | }, 127 | }, 128 | }, 129 | variants: { 130 | backgroundColor: ['responsive', 'hover', 'focus', 'group-hover'], 131 | textColor: ['responsive', 'hover', 'focus', 'group-hover'], 132 | translate: ['responsive', 'hover', 'focus', 'group-hover'], 133 | boxShadow: ['responsive', 'hover', 'focus', 'focus-within'], 134 | opacity: ['responsive', 'hover', 'focus', 'group-hover'], 135 | }, 136 | plugins: [ 137 | require('@tailwindcss/forms'), 138 | ], 139 | }; 140 | -------------------------------------------------------------------------------- /src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/images/aisource.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/aisource.png -------------------------------------------------------------------------------- /src/images/anime-girl-1418451-wallhere.com.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/anime-girl-1418451-wallhere.com.jpg -------------------------------------------------------------------------------- /src/images/botset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/botset.png -------------------------------------------------------------------------------- /src/images/chrome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/coffee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/coffee.jpg -------------------------------------------------------------------------------- /src/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/favicon.png -------------------------------------------------------------------------------- /src/images/features-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/features-bg.png -------------------------------------------------------------------------------- /src/images/features-chatgpt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/features-chatgpt.jpg -------------------------------------------------------------------------------- /src/images/features-element.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/features-element.png -------------------------------------------------------------------------------- /src/images/features-wechat_message.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/features-wechat_message.jpg -------------------------------------------------------------------------------- /src/images/features-wechat_web.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/features-wechat_web.jpg -------------------------------------------------------------------------------- /src/images/firefox.svg: -------------------------------------------------------------------------------- 1 | firefox-logo -------------------------------------------------------------------------------- /src/images/group2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/group2.jpg -------------------------------------------------------------------------------- /src/images/group3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/group3.jpg -------------------------------------------------------------------------------- /src/images/hero-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/hero-image.png -------------------------------------------------------------------------------- /src/images/join_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/join_bg.jpg -------------------------------------------------------------------------------- /src/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/images/private.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/private.jpg -------------------------------------------------------------------------------- /src/images/testimonial.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/testimonial.jpg -------------------------------------------------------------------------------- /src/images/try.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/try.jpg -------------------------------------------------------------------------------- /src/images/wxzsm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/wxzsm.jpg -------------------------------------------------------------------------------- /src/images/zfb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1cloudy/chatgpt-wechat-landing-page/65e607bdd6f83ce2d95c5c755c75e812ff053545/src/images/zfb.jpg -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import { HashRouter as Router } from 'react-router-dom'; 4 | import App from './App'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /src/pages/Discover.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import websites from "../partials/websites.json"; 3 | 4 | function Discover() { 5 | return ( 6 |
7 |

8 | Discover 9 |

10 |

11 | 发现更多有趣的机器人 12 |

13 | 14 |
15 | {websites.map(({ title, items }, siteIndex) => ( 16 |
17 |

{title}

18 | 19 |
20 | {items.map(({ title, tags, subtitle, logo, url }, itemIndex) => ( 21 | 22 |
23 |
24 |
25 |

26 | {title} 27 |

28 |
29 | {subtitle} 30 |
31 |
32 |
33 | {tags.map((tag, tagIndex) => ( 34 | 38 | {tag} 39 | 40 | ))} 41 |
42 |
43 | 44 |
45 | image 50 |
51 |
52 | 53 | ))} 54 |
55 |
56 | ))} 57 |
58 |
59 | ); 60 | } 61 | 62 | export default Discover; 63 | -------------------------------------------------------------------------------- /src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Header from '../partials/Header'; 4 | import HeroHome from '../partials/HeroHome'; 5 | import FeaturesHome from '../partials/Features'; 6 | import Footer from '../partials/Footer'; 7 | import Join from '../partials/Join'; 8 | import FAQ from '../partials/Faq'; 9 | import PricingTable from '../partials/Pricing'; 10 | import Pricing2 from '../partials/Pricing2'; 11 | import Popup from '../partials/Popup'; 12 | import ReactDOM from 'react-dom'; 13 | import VideoPlayer from '../partials/VideoPlayer'; 14 | 15 | function Home() { 16 | return ( 17 |
18 | {/* Page content */} 19 |
20 | 21 | {/* Page sections */} 22 | 23 | 24 | 25 | {/* */} 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | {/* Site footer */} 35 |
36 |
37 | ); 38 | } 39 | 40 | export default Home; -------------------------------------------------------------------------------- /src/partials/Faq.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Faq from "react-faq-component"; 3 | 4 | const data = { 5 | rows: [ 6 | { 7 | title: ( 8 |
9 | ChatGPT 是什么？ 10 |
11 | ), 12 | content: ( 13 |
14 |

ChatGPT 是由 OpenAI 开发的一种大型自然语言处理（NLP）模型

15 | 37 |
38 | ), 39 | }, 40 | { 41 | title: ( 42 |
43 | 这个插件可以用来做什么？ 44 |
45 | ), 46 | content: ( 47 |
48 | 这个插件可以帮助你快速搭建一个基于微信聊天的智能应答机器人，不需要任何服务器资源，只需要登录微信网页版页面和 49 | ChatGPT 页面（推荐）或配置 50 | OpenAI apikey 即可。 51 |
52 | ), 53 | }, 54 | { 55 | title: ( 56 |
57 | 使用这个插件我该注意点什么？ 58 |
59 | ), 60 | content: ( 61 |
62 | 106 |
107 | ), 108 | }, 109 | { 110 | title: ( 111 |
112 | 使用插件时，显示“ChatGPT 网页链接异常" 113 |
114 | ), 115 | content: ( 116 |
117 | 如果你在使用插件时出现这个提示： 118 | 119 | “ChatGPT 网页链接异常”，错误信息：CloudFlare 120 | 121 | 请选择使用API源。添加你的API-Key，继续使用。 122 |
{" "} 123 | 同时，请注意：群聊版插件仅可以在客户端请求时响应，比如在手机微信中@登录微信昵称。 124 |
125 | ), 126 | }, 127 | 128 | { 129 | title: ( 130 |
131 | 微信网页版无法登录怎么办？ 132 |
133 | ), 134 | content: ( 135 |
136 | 如果你在访问微信网页版时出现这个提示： 137 | 138 | “为了保障你的帐号安全，暂不支持使用网页版微信。你可以前往微信官网 139 | https://weixin.qq.com/ 下载客户端登录。” 140 | 141 | 。
142 | 请按照以下步骤操作： 143 | 163 |
164 | ), 165 | }, 166 | { 167 | title: ( 168 |
169 | 为什么@机器人，但是没有任何响应？ 170 |
171 | ), 172 | content: ( 173 |
174 | 190 |
191 | ), 192 | }, 193 | { 194 | title: ( 195 |
196 | 为什么@机器人的消息要好久才收到，感觉响应很慢？ 197 |
198 | ), 199 | content: ( 200 |
201 | 因为 ChatGPT 202 | 的响应是异步数据流，在网页上可以实时刷新数据流响应，但在微信消息中只能等收到完整结果后一次发送，所以体验上感觉会有30秒左右的延迟，具体视 203 | ChatGPT 的响应内容多少而定，这是正常现象。 204 |
205 | ), 206 | }, 207 | { 208 | title: ( 209 |
210 | 为什么会收到“抱歉，ChatGPT 服务异常”的消息？ 211 |
212 | ), 213 | content: ( 214 |
215 |

以下几种情况可能导致返回上面的错误提示：

216 | 237 |
238 | ), 239 | }, 240 | ], 241 | }; 242 | 243 | export default function FAQ() { 244 | return ( 245 |
246 |
247 | {/* Section header */} 248 |
249 |

常见问题

250 |
251 | 252 | {/* Section content */} 253 |
254 | 255 |
256 |
257 |
258 | ); 259 | } 260 | -------------------------------------------------------------------------------- /src/partials/Features.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef, useEffect } from "react"; 2 | import Transition from "../utils/Transition"; 3 | 4 | import FeaturesBg1 from '../images/aisource.png'; 5 | import FeaturesBg2 from '../images/botset.png'; 6 | import FeaturesBg3 from '../images/features-wechat_message.jpg'; 7 | 8 | function Features() { 9 | const [tab, setTab] = useState(1); 10 | 11 | const tabs = useRef(null); 12 | 13 | const heightFix = () => { 14 | if (tabs.current.children[tab]) { 15 | tabs.current.style.height = 16 | tabs.current.children[tab - 1].offsetHeight + "px"; 17 | } 18 | }; 19 | 20 | useEffect(() => { 21 | heightFix(); 22 | // eslint-disable-next-line react-hooks/exhaustive-deps 23 | }, [tab]); 24 | 25 | return ( 26 |
27 | {/* Section background (needs .relative class on parent and next sibling elements) */} 28 | 32 | 33 |
34 | {/* Section header */} 35 |
36 |

如何使用

37 |
38 | 39 | {/* Section content */} 40 |
41 | {/* Content */} 42 |
46 | {/* Tabs buttons */} 47 |
48 |
{ 56 | e.preventDefault(); 57 | setTab(1); 58 | }} 59 | > 60 |
61 |
1. 安装插件，配置AI源
62 |
已支持AI源：ChatGPT、Google Bard；使用AI源，需要打开AI源的网站并保持登录状态
63 |
64 |
65 |
{ 73 | e.preventDefault(); 74 | setTab(2); 75 | }} 76 | > 77 |
78 |
2. 设置 bot 参数
79 |
根据需要设置参数，bot默认开启状态。设置完成后点击插件小图标，查看连接状态。
80 |
81 |
82 |
{ 90 | e.preventDefault(); 91 | setTab(3); 92 | }} 93 | > 94 |
95 |
3. 触发 ChatGPT 应答微信消息
96 |
微信群聊/私聊，需登录微信网页版，使用方法：在手机微信群中@登录微信昵称 问题；仅自己使用，登录文件传输助手，命令： @gpt
97 |
98 |
99 |
100 |
101 | 102 | {/* Tabs items */} 103 |
108 |
109 | {/* Item 1 */} 110 | 121 |
122 | Login wechat web page 129 |
130 | 131 | {/* Item 2 */} 132 | 143 |
144 | Login chatgpt page 151 |
152 | 153 | {/* Item 3 */} 154 | 165 |
166 | Features bg 173 |
174 | 175 |
176 |
177 |
178 |
179 |
180 | ); 181 | } 182 | 183 | export default Features; 184 | -------------------------------------------------------------------------------- /src/partials/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Footer() { 4 | return ( 5 | 85 | ); 86 | } 87 | 88 | export default Footer; 89 | -------------------------------------------------------------------------------- /src/partials/Header.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | function Header() { 5 | 6 | const [top, setTop] = useState(true); 7 | 8 | // detect whether user has scrolled the page down by 10px 9 | useEffect(() => { 10 | const scrollHandler = () => { 11 | window.pageYOffset > 10 ? setTop(false) : setTop(true) 12 | }; 13 | window.addEventListener('scroll', scrollHandler); 14 | return () => window.removeEventListener('scroll', scrollHandler); 15 | }, [top]); 16 | 17 | return ( 18 |
19 |
20 |
21 | 22 | {/* Site branding */} 23 |
24 | {/* Logo */} 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | 43 | {/* Site navigation */} 44 | 60 |
61 |
62 |
63 | ); 64 | } 65 | 66 | export default Header; 67 | -------------------------------------------------------------------------------- /src/partials/HeroHome.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CoffeeImage from "../images/coffee.jpg"; 3 | import ChromeIcon from '../images/chrome.svg'; 4 | 5 | function HeroHome() { 6 | return ( 7 |
8 | 9 | {/* Illustration behind hero content */} 10 | 25 | 26 |
27 | 28 | {/* Hero content */} 29 |
30 |
31 |
32 | 无 ChatGPT 账号，在本站体验 ChatGPT 版本即将上线！开发者coding····
33 |
34 |
35 | {/* Section header */} 36 |
37 |

ChatGPT for Wechat

38 |
39 |

一个 Chrome 浏览器插件，通过 ChatGPT 来自动响应微信私信、群聊、文件传输助手中 @你 的消息的智能聊天机器人

40 | 49 |
50 |
51 |
52 |
53 |
54 | ); 55 | } 56 | 57 | export default HeroHome; 58 | -------------------------------------------------------------------------------- /src/partials/Join.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PrivateImage from "../images/private.jpg"; 3 | import GroupImage from "../images/group3.jpg"; 4 | import TryImage from "../images/try.jpg"; 5 | import WeChatPayImage from "../images/wxzsm.jpg"; 6 | import AliPayImage from "../images/zfb.jpg"; 7 | 8 | export default function Join() { 9 | return ( 10 |
11 |
12 | {/* Section header */} 13 |
14 |

加入社群

15 |
16 | 17 | {/* Section content */} 18 |
19 |
20 |
21 | 微信群 29 |
插件问题交流群
30 |
31 |
32 | 个人微信 40 |
插件支持[免费用户需先打赏再咨询]
41 |
42 |
43 | 个人微信 51 |
支持开发者
52 |
53 |
54 |
55 |
56 |
57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /src/partials/Popup.css: -------------------------------------------------------------------------------- 1 | .CookieConsent { 2 | max-width: 500px; 3 | border-radius: 5px; 4 | padding: 20px 30px; 5 | background-color: white; 6 | position: fixed; 7 | top: 50%; 8 | left: 50%; 9 | right: auto; 10 | bottom: auto; 11 | transform: translate3d(-50%, -50%, 9999990px); 12 | width: 95%; 13 | box-shadow: 0 3px 10px rgba(0,0,0,0.1); 14 | } 15 | 16 | .overlayclass { 17 | position: fixed; 18 | background-color: rgba(0,0,0,0.5); 19 | top: 0; 20 | left: 0; 21 | width: 100%; 22 | height: 100%; 23 | } -------------------------------------------------------------------------------- /src/partials/Popup.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Popup.css"; 3 | // Option 4 | import CookieConsent from "react-cookie-consent"; 5 | 6 | const Popup = () => { 7 | return ( 8 |
9 | {/* option */} 10 | 23 |

在使用本插件前，请您仔细阅读本插件用户协议及免责声明。如果您不同意用户协议和免责声明中的任意内容，请不要安装本插件。如果您对相关条款有疑问，请通过contact@aow.me与我们取得联系，我们将向您解释条款内容。感谢您的理解和支持！

24 | 25 |
26 | ); 27 | }; 28 | 29 | export default Popup; -------------------------------------------------------------------------------- /src/partials/Pricing.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const FeatureItem = ({ title, selected }) => { 4 | return ( 5 |
6 | 12 | 17 | 18 | 19 | 20 | {title} 21 | 22 |
23 | ); 24 | }; 25 | 26 | const pricingTable = [ 27 | { 28 | name: "Basic", 29 | price: "Free", 30 | description: "基础版", 31 | features: [ 32 | "支持ChatGPT 网页端", 33 | "🌟 支持Goolge Bard 【推荐】", 34 | "单用户提问 10分钟10次", 35 | "单群组提问 1天50次", 36 | "入群欢迎语", 37 | "一键开启bot" 38 | ], 39 | }, 40 | { 41 | name: "Pro", 42 | price: "¥79", 43 | description: "专业版", 44 | features: [ 45 | "🌟 支持ChatGPT API", 46 | "🌟 自定义AI身份/角色", 47 | "🌟 用户提问无限制", 48 | "🌟 群组提问无限制", 49 | "🌟 管理队列积压告警阈值", 50 | "🌟 私聊直接触发", 51 | "License 可激活3次", 52 | ], 53 | }, 54 | { 55 | name: "Max", 56 | price: "¥199", 57 | description: "高级版", 58 | features: [ 59 | "含 Pro 版本所有功能", 60 | "🌟 支持自定义代理服务器", 61 | "License 可激活3次", 62 | ], 63 | }, 64 | ]; 65 | 66 | const PlanButton = ({ url, bgColor, hoverColor, text }) => ( 67 |
68 | 69 | 74 | 75 |
76 | ); 77 | 78 | const PricingTable = () => ( 79 |
80 |
81 |
82 |

更多选择

83 |

84 | 升级必看 85 |

86 |
87 | 88 |
89 | {pricingTable.map((item, index) => { 90 | const isProPlan = item.name === "Pro"; 91 | const cardClass = `px-6 py-4 transition-colors duration-200 transform rounded-lg ${ 92 | isProPlan 93 | ? "bg-purple-500 text-gray-100" 94 | : "bg-gray-200 text-gray-800 " + item.name.toLowerCase() 95 | } hover:bg-purple-300 hover:text-gray-900 dark:hover:bg-purple-300 dark:hover:text-gray-900`; 96 | const order = isProPlan ? 2 : index; 97 | return ( 98 |
99 |
100 |
101 | {item.name} 102 |
103 |

104 | {item.price} 105 | {(item.name === "Max") && ( 106 | /季 107 | )} 108 | {(item.name === "Pro") && ( 109 | /月 110 | )} 111 |

112 |
113 |

{item.description}

114 | 115 |
116 | {item.features.map((feature) => { 117 | return ( 118 | 123 | ); 124 | })} 125 |
126 | 127 | {item.name === "Basic" && ( 128 | 134 | )} 135 | 136 | {isProPlan && ( 137 | 143 | )} 144 | 145 | {item.name === "Max" && ( 146 | 152 | )} 153 |
154 | ); 155 | })} 156 |
157 |
158 |
159 | ); 160 | export default PricingTable; 161 | -------------------------------------------------------------------------------- /src/partials/Pricing2.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const FeatureItem = ({ title, selected }) => { 4 | return ( 5 |
6 | 12 | 17 | 18 | 19 | 20 | {title} 21 | 22 |
23 | ); 24 | }; 25 | 26 | export default function PricingTable() { 27 | const pricingTable = { 28 | basic: { 29 | name: "Basic", 30 | price: "Free", 31 | description: "(仅限个人微信群使用)", 32 | features: [ 33 | "支持ChatGPT 网页端", 34 | "支持ChatGPT API", 35 | "API支持上下文", 36 | "可自由切换模型", 37 | ], 38 | }, 39 | plus: { 40 | name: "Plus", 41 | price: "100", 42 | description: "(仅限个人微信群使用)", 43 | features: [ 44 | "包含免费版所有功能", 45 | "🌟 定义AI身份/角色", 46 | "🌟 一键开启 Bot 接管", 47 | "🌟 入群欢迎语", 48 | "🌟 自定义单用户提问频率", 49 | "🌟 自定义队列积压告警阈值", 50 | ], 51 | }, 52 | business: { 53 | name: "Business", 54 | price: "300", 55 | description: "(可用于付费或企业微信群)", 56 | features: [ 57 | "含 Plus 版本所有功能", 58 | "🌟 商业授权 (定制消息模版)", 59 | "🌟 自定义代理服务器", 60 | "定制其他需求", 61 | "支持第三方平台接入", 62 | "过滤敏感词API", 63 | "模型定制", 64 | ], 65 | }, 66 | }; 67 | 68 | return ( 69 |
70 |
71 |
72 |

更多的选择

73 |
74 | 75 |
76 |
77 |
78 |
79 | {pricingTable.basic.name} 80 |
81 |

82 | {pricingTable.basic.price} 83 |

84 |
85 |

86 | {pricingTable.basic.description} 87 |

88 | 89 |
90 | {pricingTable.basic.features.map((item) => { 91 | return ; 92 | })} 93 |
94 | 95 | 98 |
99 | 100 |
101 |
102 |

103 | {pricingTable.plus.name} 104 |

105 |

106 | ¥{pricingTable.plus.price} 107 | /年 108 |

109 |
110 | 111 |

112 | {pricingTable.plus.description} 113 |

114 | 115 |
116 | {pricingTable.plus.features.map((item) => { 117 | return ; 118 | })} 119 |
120 | 121 | 124 |
125 | 126 |
127 |
128 |

129 | {pricingTable.business.name} 130 |

131 |

132 | ¥{pricingTable.business.price} 133 | /月 134 |

135 |
136 |

137 | {pricingTable.business.description} 138 |

139 | 140 |
141 | {pricingTable.business.features.map((item) => { 142 | return ; 143 | })} 144 |
145 | 146 | 149 |
150 |
151 |
152 |
153 | ); 154 | } 155 | -------------------------------------------------------------------------------- /src/partials/VideoPlayer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const VideoPlayer = () => { 4 | const videoSrc = "https://www.youtube.com/embed/HaZdvjFe9Iw"; 5 | 6 | return ( 7 |
8 |
9 | 16 |
17 |
18 | ); 19 | }; 20 | 21 | export default VideoPlayer; 22 | -------------------------------------------------------------------------------- /src/partials/websites.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "微信机器人", 4 | "items": [ 5 | { 6 | "title": "ChatGPT3.5", 7 | "tags": [ 8 | "both", 9 | "24h", 10 | "免费" 11 | ], 12 | "subtitle": "通用，机器人私聊微信号：lbw1385", 13 | "logo": "https://assets.aow.me/tuotuo.png", 14 | "url": "#" 15 | }, 16 | { 17 | "title": "HIGO", 18 | "tags": [ 19 | "both", 20 | "8～12h", 21 | "免费" 22 | ], 23 | "subtitle": "通用", 24 | "logo": "https://assets.aow.me/SAMUEL.png", 25 | "url": "#" 26 | }, 27 | { 28 | "title": "yuyuan", 29 | "tags": [ 30 | "私聊", 31 | "24h", 32 | "免费试用后付费" 33 | ], 34 | "subtitle": "脱口秀话题", 35 | "logo": "https://assets.aow.me/shejibuluo.png", 36 | "url": "#" 37 | }, 38 | { 39 | "title": "AI小助手", 40 | "tags": [ 41 | "群聊", 42 | "8～12h", 43 | "免费" 44 | ], 45 | "subtitle": "AiGC", 46 | "logo": "https://assets.aow.me/jaydenli.png", 47 | "url": "#" 48 | }, 49 | { 50 | "title": "AI智能助手", 51 | "tags": [ 52 | "私聊", 53 | "24h", 54 | "免费试用后付费" 55 | ], 56 | "subtitle": "通用", 57 | "logo": "https://assets.aow.me/kuangzhuixiaomayi.png", 58 | "url": "#" 59 | }, 60 | { 61 | "title": "小雨", 62 | "tags": [ 63 | "both", 64 | "24h", 65 | "免费" 66 | ], 67 | "subtitle": "互联网", 68 | "logo": "https://assets.aow.me/qingchengzuiyue.png", 69 | "url": "#" 70 | }, 71 | { 72 | "title": "全能者", 73 | "tags": [ 74 | "私聊", 75 | "24h", 76 | "免费" 77 | ], 78 | "subtitle": "你是全宇宙知识整理分类专业提取平台", 79 | "logo": "https://assets.aow.me/pengfei.png", 80 | "url": "#" 81 | }, 82 | { 83 | "title": "CCK Bot", 84 | "tags": [ 85 | "both", 86 | "24h", 87 | "免费试用后收费" 88 | ], 89 | "subtitle": "CCK Bot", 90 | "logo": "https://assets.aow.me/abc.png", 91 | "url": "#" 92 | }, 93 | { 94 | "title": "芽芽", 95 | "tags": [ 96 | "both", 97 | "24h", 98 | "免费" 99 | ], 100 | "subtitle": "通用，没训练过。3.5模型", 101 | "logo": "https://assets.aow.me/dusai.png", 102 | "url": "#" 103 | }, 104 | { 105 | "title": "AI联想未来", 106 | "tags": [ 107 | "群聊", 108 | "24h", 109 | "免费" 110 | ], 111 | "subtitle": "全能", 112 | "logo": "https://assets.aow.me/akuan.png", 113 | "url": "#" 114 | } 115 | ] 116 | }, 117 | { 118 | "title": "WhatsApp 机器人", 119 | "items": [ 120 | { 121 | "title": "ChatGPT体验群", 122 | "tags": [ 123 | "群聊", 124 | "24h", 125 | "免费" 126 | ], 127 | "subtitle": "通用，不定时切模型，使用方法：@gpt", 128 | "logo": "https://assets.aow.me/aoqgroup.png", 129 | "url": "https://aow.me/try" 130 | }, 131 | { 132 | "title": "gpt", 133 | "tags": [ 134 | "私聊", 135 | "24h", 136 | "免费" 137 | ], 138 | "subtitle": "通用，不定时切模型", 139 | "logo": "https://assets.aow.me/aoqgpt.png", 140 | "url": "https://aow.me/try" 141 | }, 142 | { 143 | "title": "Asabot", 144 | "tags": [ 145 | "私聊", 146 | "8h", 147 | "免费" 148 | ], 149 | "subtitle": "aoq.me 安装使用助手", 150 | "logo": "https://assets.aow.me/asbot.png", 151 | "url": "https://wa.me/8618601586458" 152 | } 153 | ] 154 | } 155 | ] -------------------------------------------------------------------------------- /src/utils/Dropdown.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Transition from '../utils/Transition'; 4 | 5 | function Dropdown({ 6 | children, 7 | title 8 | }) { 9 | 10 | const [dropdownOpen, setDropdownOpen] = useState(false); 11 | 12 | return ( 13 |
  • setDropdownOpen(true)} 16 | onMouseLeave={() => setDropdownOpen(false)} 17 | onFocus={() => setDropdownOpen(true)} 18 | onBlur={() => setDropdownOpen(false)} 19 | > 20 | e.preventDefault()} 25 | > 26 | {title} 27 | 28 | 29 | 30 | 31 | 42 | {children} 43 | 44 |
    • 45 | ); 46 | } 47 | 48 | export default Dropdown; 49 | 50 | Dropdown.propTypes = { 51 | children: PropTypes.oneOfType([ 52 | PropTypes.arrayOf(PropTypes.element), 53 | PropTypes.element.isRequired 54 | ]), 55 | title: PropTypes.string.isRequired, 56 | }; 57 | -------------------------------------------------------------------------------- /src/utils/Modal.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Transition from '../utils/Transition'; 4 | 5 | function Modal({ 6 | children, 7 | id, 8 | ariaLabel, 9 | show, 10 | handleClose 11 | }) { 12 | 13 | const modalContent = useRef(null); 14 | 15 | // close the modal on click outside 16 | useEffect(() => { 17 | const clickHandler = ({ target }) => { 18 | if (!show || modalContent.current.contains(target)) return; 19 | handleClose(); 20 | }; 21 | document.addEventListener('click', clickHandler); 22 | return () => document.removeEventListener('click', clickHandler); 23 | }); 24 | 25 | // close the modal if the esc key is pressed 26 | useEffect(() => { 27 | const keyHandler = ({ keyCode }) => { 28 | if (keyCode !== 27) return; 29 | handleClose(); 30 | }; 31 | document.addEventListener('keydown', keyHandler); 32 | 33 | return () => document.removeEventListener('keydown', keyHandler); 34 | }); 35 | 36 | return ( 37 | <> 38 | {/* Modal backdrop */} 39 |