'dd'

2025-07-28 05:53:16 +08:00
parent a0765174fd
commit af48e9084f
84 changed files with 18552 additions and 3 deletions
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1 @@
+process.env.TARO_API_API="/api"
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1 @@
+process.env.TARO_API_API="https://api.nomadcna.com"
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,7 @@
+dist/
+deploy_versions/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store
+.swc
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# cloudphone
+# cityh5



@@ -15,14 +15,14 @@ Already a pro? Just edit this README.md and make it your own. Want to make it ea

 ```
 cd existing_repo
-git remote add origin http://gitlab.yidooplanet.com/gitlab-instance-0a899031/cloudphone.git
+git remote add origin http://gitlab.yidooplanet.com/gitlab-instance-0a899031/cityh5.git
 git branch -M main
 git push -uf origin main
 ```

 ## Integrate with your tools

- [ ] [Set up project integrations](http://gitlab.yidooplanet.com/gitlab-instance-0a899031/cloudphone/-/settings/integrations)
+- [ ] [Set up project integrations](http://gitlab.yidooplanet.com/gitlab-instance-0a899031/cityh5/-/settings/integrations)

 ## Collaborate with your team

--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,10 @@
+// babel-preset-taro 更多选项和默认值：
+// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
+module.exports = {
+  presets: [
+    ['taro', {
+      framework: 'react',
+      ts: false
+    }]
+  ]
+}
--- a/config/dev.js
+++ b/config/dev.js
@@ -0,0 +1,10 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"development"'
+  },
+  defineConstants: {
+    'process.env.TARO_API_API': JSON.stringify("/api")
+  },
+  mini: {},
+  h5: {}
+}
--- a/config/index.js
+++ b/config/index.js
@@ -0,0 +1,147 @@
+import path from "path";
+// const { GenerateSW } = require("workbox-webpack-plugin");
+
+const WebpackObfuscator = require("webpack-obfuscator");
+const config = {
+  projectName: "cityh5",
+
+  date: "2023-12-2",
+  designWidth: 750,
+  deviceRatio: {
+    640: 2.34 / 2,
+    750: 1,
+    828: 1.81 / 2,
+  },
+  sourceRoot: "src",
+  outputRoot: "dist",
+  plugins: [],
+  defineConstants: {},
+  copy: {
+    patterns: [],
+    options: {},
+  },
+  framework: "react",
+  compiler: "webpack5",
+  cache: {
+    enable: false, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
+  },
+
+  h5: {
+    webpackChain(chain) {
+      chain.output.filename("static/js/[name].[contenthash:8].js");
+      chain.output.chunkFilename("static/js/[name].[contenthash:8].js");
+      chain
+        .plugin("MiniCssExtractPlugin")
+        .use(require("mini-css-extract-plugin"), [
+          {
+            filename: "static/css/[name].[contenthash:8].css",
+            chunkFilename: "static/css/[name].[contenthash:8].css",
+          },
+        ]);
+      if (process.env.NODE_ENV === "production") {
+        // js代码混淆
+        chain.plugin("obfuscator").use(WebpackObfuscator, [
+          {
+            rotateStringArray: true,
+            stringArray: true,
+            stringArrayThreshold: 0.5, // 降低比例，提高速度
+            compact: true,
+            controlFlowFlattening: false, // 关闭，提高速度
+            deadCodeInjection: false, // 关闭，提高速度
+            debugProtection: false,
+            disableConsoleOutput: true,
+            selfDefending: false, // 关闭，提高速度
+            simplify: true, // 开启简化，提高性能
+            // 禁用对 async/await 的转换
+            target: "browser", // 或设置为适合目标环境的 ECMAScript 版本
+            disableOptimizations: true, // 禁用某些优化来避免处理 async/await
+          },
+          ["**/*.js", "!node_modules/**"], // 避免对 node_modules 进行混淆
+        ]);
+      }
+
+      chain.module
+        .rule("markdown")
+        .test(/\.md$/)
+        .use("raw-loader")
+        .loader("raw-loader")
+        .end();
+      chain.module
+        .rule("ico")
+        .test(/\.ico$/)
+        .use("file-loader")
+        .loader("file-loader")
+        .options({
+          name: "static/images/[name].[ext]",
+        });
+    },
+
+    esnextModules: ["taro-ui"],
+    publicPath: "/",
+    // publicPath: `/v${new Date().getTime()}/`,
+
+    staticDirectory: "static",
+    postcss: {
+      autoprefixer: {
+        enable: true,
+        config: {},
+      },
+      cssModules: {
+        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        config: {
+          namingPattern: "module", // 转换模式，取值为 global/module
+          generateScopedName: "[name]__[local]___[hash:base64:5]",
+        },
+      },
+    },
+
+    router: {
+      // basename: '/myapp',
+      mode: "browser", // 或者是 'hash'
+      customRoutes: {
+        // "页面路径": "自定义路由"
+        "/pages/index/index": "/",
+        "/pages/book/index": "/book",
+        // '/pages/detail/index': ['/detail'], // 可以通过数组为页面配置多个自定义路由
+        // "pages/my/index": "/my",
+        // "pages/meetup/index": "/meetup",
+        // "pages/meetup/Detail/index": "/detail",
+      },
+    },
+    // defineConstants: {
+    //   HOST: '"/api"'
+    // },
+    devServer: {
+      // host: 'nomad.hackrobot.cn', // 替换为您的域名
+      // port: 10087,            // 选择一个适当的端口号
+      proxy: {
+        "/api/": {
+          target: JSON.parse('"http://localhost:8700"'), //本地调试端口
+          pathRewrite: {
+            "^/api/": "/",
+          },
+          changeOrigin: true,
+        },
+      },
+      // 允许特定域名访问
+      allowedHosts: ["nomadro.com", "localhost", ".nomadro.com","hackrobot.cn"], // 允许所有 *.nomadyt.com 子域访问
+    },
+    htmlPluginOption: {
+      favicon: path.resolve(__dirname, "..", "src", "images", "dgnomad.png"), // 同样处理 favicon 路径
+      meta: {
+        "cache-control": "no-cache, no-store, must-revalidate",
+        pragma: "no-cache",
+        expires: "0",
+      },
+    },
+
+    target: ["web", "browserslist:> 0.25%, not dead"],
+  },
+};
+
+module.exports = function (merge) {
+  if (process.env.NODE_ENV === "development") {
+    return merge({}, config, require("./dev"));
+  }
+  return merge({}, config, require("./prod"));
+};
--- a/config/prod.js
+++ b/config/prod.js
@@ -0,0 +1,38 @@
+module.exports = {
+  env: {
+    NODE_ENV: '"production"'
+  },
+  defineConstants: {
+    'process.env.TARO_API_API': JSON.stringify("https://api.nomadcna.com")
+  },
+  mini: {},
+  h5: {
+    /**
+     * WebpackChain 插件配置
+     * @docs https://github.com/neutrinojs/webpack-chain
+     */
+    // webpackChain (chain) {
+    //   /**
+    //    * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
+    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
+    //    */
+    //   chain.plugin('analyzer')
+    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
+
+    //   /**
+    //    * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
+    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
+    //    */
+    //   const path = require('path')
+    //   const Prerender = require('prerender-spa-plugin')
+    //   const staticDir = path.join(__dirname, '..', 'dist')
+    //   chain
+    //     .plugin('prerender')
+    //     .use(new Prerender({
+    //       staticDir,
+    //       routes: [ '/pages/index/index' ],
+    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
+    //     }))
+    // }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,80 @@
+{
+  "name": "",
+  "version": "1.0.0",
+  "private": true,
+  "description": "city",
+  "templateInfo": {
+    "name": "h5-youshu",
+    "typescript": false,
+    "css": "sass"
+  },
+  "scripts": {
+    "build:h5": "taro build --type h5",
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:qq": "taro build --type qq",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:qq": "npm run build:qq -- --watch"
+  },
+  "browserslist": [
+    "last 3 versions",
+    "Android >= 4.1",
+    "ios >= 8"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/runtime": "^7.7.7",
+    "@tarojs/components": "3.6.20",
+    "@tarojs/helper": "3.6.20",
+    "@tarojs/plugin-framework-react": "3.6.20",
+    "@tarojs/plugin-platform-alipay": "3.6.20",
+    "@tarojs/plugin-platform-h5": "3.6.20",
+    "@tarojs/plugin-platform-jd": "3.6.20",
+    "@tarojs/plugin-platform-qq": "3.6.20",
+    "@tarojs/plugin-platform-swan": "3.6.20",
+    "@tarojs/plugin-platform-tt": "3.6.20",
+    "@tarojs/plugin-platform-weapp": "3.6.20",
+    "@tarojs/react": "3.6.20",
+    "@tarojs/runtime": "3.6.20",
+    "@tarojs/shared": "3.6.20",
+    "@tarojs/taro": "3.6.20",
+    "animate.css": "^4.1.1",
+    "github-markdown-css": "^5.6.1",
+    "marked": "^14.1.2",
+    "raw-loader": "^4.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sr-sdk-h5": "^1.3.1",
+    "taro-ui": "^3.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
+    "@tarojs/cli": "3.6.20",
+    "@tarojs/taro-loader": "3.6.20",
+    "@tarojs/webpack5-runner": "3.6.20",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.0",
+    "@types/webpack-env": "^1.13.6",
+    "babel-preset-taro": "3.6.20",
+    "eslint": "^8.12.0",
+    "eslint-config-taro": "3.6.20",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "javascript-obfuscator": "^4.1.1",
+    "postcss": "^8.4.18",
+    "react-refresh": "^0.11.0",
+    "stylelint": "9.3.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.1.0",
+    "webpack": "^5.78.0",
+    "webpack-obfuscator": "^3.5.1"
+  }
+}
--- a/project.config.json
+++ b/project.config.json
@@ -0,0 +1,15 @@
+{
+  "miniprogramRoot": "./dist",
+  "projectname": "cityh5",
+  "description": "city",
+  "appid": "touristappid",
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "enhance": false,
+    "compileHotReLoad": false,
+    "postcss": false,
+    "minified": false
+  },
+  "compileType": "miniprogram"
+}
--- a/roboth5.sh
+++ b/roboth5.sh
@@ -0,0 +1 @@
+yarn dev:h5
--- a/src/app.config.js
+++ b/src/app.config.js
@@ -0,0 +1,18 @@
+export default {
+  pages: [
+    'pages/index/index',
+    'pages/my/index',
+    'pages/meetup/index',
+    'pages/meetup/Detail/index',
+    'pages/group/index',
+    'pages/book/index',
+    'pages/salon/index',
+    'pages/sphone/index'
+  ],
+  window: {
+    backgroundTextStyle: 'light',
+    navigationBarBackgroundColor: '#fff',
+    navigationBarTitleText: 'WeChat',
+    navigationBarTextStyle: 'black'
+  }
+}
--- a/src/app.js
+++ b/src/app.js
@@ -0,0 +1,75 @@
+import { Component } from 'react'
+import SDK from 'sr-sdk-h5'
+
+import './app.scss'
+import 'animate.css';
+import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
+
+/**
+   * 有数埋点SDK 默认配置
+   * 使用方法请参考文档 https://mp.zhls.qq.com/youshu-docs/develop/sdk/Taro.html
+   * 如对有数SDK埋点接入有任何疑问，请联系微信：sr_data_service
+   */
+  
+ window.srt = new SDK({
+  
+  /**
+   * 有数 - ka‘接入测试用’ 分配的 app_id，对应的业务
+   */
+  token: 'bi72fccc7184ef45f9',
+
+  /**
+   * 传入自定义的后台上报接口，若传入则token将无意义
+   */
+  // serverUrl: 'aaa.baidu.com',
+
+  /**
+   * 开启打印调试信息， 默认 false
+   */
+  debug: true,
+
+  /**
+   * 代理配置，自动代理页面浏览事件、页面离开事件、点击事件，默认 false。建议开启
+   */
+  autoTrack: true,
+
+  /**
+   * 自动开始上报，默认 true。建议开启
+   */
+  autoStart: true,
+
+  /**
+   * 上报返回的钩子函数，返回 false 则代表不通过，SDK不会清除本地记录，会继续重拾
+   */
+  // onUploaded?: () => {},
+
+  /**
+   * 跳过初始化时对  token 的必要检查
+   * 满足场景：服务商转发SDK上报数据，在服务端回填appid，解决大量小程序同时接入的问题，默认false
+   */
+  // skipTokenCheck: false,
+
+  /**
+   * 小程序appid
+   */
+  appid: ''
+});
+
+// window.srt.setChan({chan_id: 'xxx'}) // 设置渠道，渠道信息将会被设置在props.chan对象中
+
+// window.srt.setUser({user_id: 'xxx'}) // 设置用户信息，用户信息将会被设置在props.wx_user对象中
+
+class App extends Component {
+  componentDidMount () {}
+
+  componentDidShow () {}
+
+  componentDidHide () {}
+
+  // this.props.children 是将要会渲染的页面
+  render () {
+    return this.props.children
+  }
+}
+
+export default App
--- a/src/app.scss
+++ b/src/app.scss
--- a/src/images/AI.png
+++ b/src/images/AI.png
--- a/src/images/AIGC.png
+++ b/src/images/AIGC.png
--- a/src/images/avatar.jpg
+++ b/src/images/avatar.jpg
--- a/src/images/book.png
+++ b/src/images/book.png
--- a/src/images/book.svg
+++ b/src/images/book.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<path fill="#F9EBB2" d="M56,62H10c-2.209,0-4-1.791-4-4s1.791-4,4-4h46V62z"/>
+	<g>
+		<path fill="#45AAB8" d="M6,4v49.537C7.062,52.584,8.461,52,10,52h2V2H8C6.896,2,6,2.896,6,4z"/>
+		<path fill="#45AAB8" d="M56,2H14v50h42h2v-2V4C58,2.896,57.104,2,56,2z"/>
+	</g>
+	<g>
+		<path fill="#394240" d="M60,52V4c0-2.211-1.789-4-4-4H8C5.789,0,4,1.789,4,4v54c0,3.313,2.687,6,6,6h49c0.553,0,1-0.447,1-1
+			s-0.447-1-1-1h-1v-8C59.104,54,60,53.104,60,52z M6,4c0-1.104,0.896-2,2-2h4v50h-2c-1.539,0-2.938,0.584-4,1.537V4z M56,62H10
+			c-2.209,0-4-1.791-4-4s1.791-4,4-4h46V62z M56,52H14V2h42c1.104,0,2,0.896,2,2v46v2H56z"/>
+		<path fill="#394240" d="M43,26H23c-0.553,0-1,0.447-1,1s0.447,1,1,1h20c0.553,0,1-0.447,1-1S43.553,26,43,26z"/>
+		<path fill="#394240" d="M49,20H23c-0.553,0-1,0.447-1,1s0.447,1,1,1h26c0.553,0,1-0.447,1-1S49.553,20,49,20z"/>
+		<path fill="#394240" d="M23,16h12c0.553,0,1-0.447,1-1s-0.447-1-1-1H23c-0.553,0-1,0.447-1,1S22.447,16,23,16z"/>
+	</g>
+	<path opacity="0.2" fill="#231F20" d="M6,4v49.537C7.062,52.584,8.461,52,10,52h2V2H8C6.896,2,6,2.896,6,4z"/>
+</g>
+</svg>
--- a/src/images/bookqr.jpg
+++ b/src/images/bookqr.jpg
--- a/src/images/cat.jpg
+++ b/src/images/cat.jpg
--- a/src/images/code.svg
+++ b/src/images/code.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="browserbinary"  viewBox="0 0 232 192" enable-background="new 0 0 232 192" xml:space="preserve" width="512" height="512">
+<g>
+	<path fill="#D0E8FF" d="M128,100h16.0156c2.2383,0,3.9922-1.7441,3.9922-3.9688V67.9688c0-2.1875-1.7891-3.9688-3.9922-3.9688H128   c-2.2383,0-3.9922,1.7441-3.9922,3.9688v28.0625C124.0078,98.2188,125.7969,100,128,100z"/>
+	<path fill="#D0E8FF" d="M8,184h216V40H8V184z M184.0156,160c0,6.5977-5.3789,11.9668-11.9922,11.9668h-16.0156   c-6.6133,0-11.9922-5.3691-11.9922-11.9668v-28.0645c0-6.5996,5.3789-11.9688,11.9922-11.9688h16.0156   c6.6133,0,11.9922,5.3691,11.9922,11.9688V160z M176.0156,56c6.6133,0,11.9922,5.3691,11.9922,11.9688v36.0625   c0,2.209-1.7891,4-4,4s-4-1.791-4-4V67.9688c0-2.1875-1.7891-3.9688-3.9922-3.9688c-2.2109,0-4-1.791-4-4S173.8047,56,176.0156,56z    M116.0078,67.9688C116.0078,61.3691,121.3867,56,128,56h16.0156c6.6133,0,11.9922,5.3691,11.9922,11.9688v28.0625   c0,6.5996-5.3789,11.9688-11.9922,11.9688H128c-6.6133,0-11.9922-5.3691-11.9922-11.9688V67.9688z M116.0156,119.9668   c6.6133,0,11.9922,5.3691,11.9922,11.9688V168c0,2.209-1.7891,4-4,4s-4-1.791-4-4v-36.0645c0-2.1875-1.7891-3.9688-3.9922-3.9688   c-2.2109,0-4-1.791-4-4S113.8047,119.9668,116.0156,119.9668z M88.0078,56C94.6211,56,100,61.3691,100,67.9688v36.0625   c0,2.209-1.7891,4-4,4s-4-1.791-4-4V67.9688C92,65.7812,90.2109,64,88.0078,64c-2.2109,0-4-1.791-4-4S85.7969,56,88.0078,56z    M88.0078,119.9668c6.6133,0,11.9922,5.3691,11.9922,11.9688V168c0,2.209-1.7891,4-4,4s-4-1.791-4-4v-36.0645   c0-2.1875-1.7891-3.9688-3.9922-3.9688c-2.2109,0-4-1.791-4-4S85.7969,119.9668,88.0078,119.9668z M28,67.9688   C28,61.3691,33.3789,56,39.9922,56h16.0156C62.6211,56,68,61.3691,68,67.9688v28.0625C68,102.6309,62.6211,108,56.0078,108H39.9922   C33.3789,108,28,102.6309,28,96.0312V67.9688z M28,131.9355c0-6.5996,5.3789-11.9688,11.9922-11.9688h16.0156   c6.6133,0,11.9922,5.3691,11.9922,11.9688V160c0,6.5977-5.3789,11.9668-11.9922,11.9668H39.9922   C33.3789,171.9668,28,166.5977,28,160V131.9355z"/>
+	<path fill="#D0E8FF" d="M39.9922,100h16.0156C58.2461,100,60,98.2559,60,96.0312V67.9688C60,65.7812,58.2109,64,56.0078,64H39.9922   C37.7539,64,36,65.7441,36,67.9688v28.0625C36,98.2188,37.7891,100,39.9922,100z"/>
+	<path fill="#D0E8FF" d="M39.9922,163.9668h16.0156C58.2461,163.9668,60,162.2246,60,160v-28.0645   c0-2.1875-1.7891-3.9688-3.9922-3.9688H39.9922c-2.2383,0-3.9922,1.7441-3.9922,3.9688V160   C36,162.1875,37.7891,163.9668,39.9922,163.9668z"/>
+	<path fill="#5CB0FF" d="M8,8v24h216V8H8z M20,28c-4.4102,0-8-3.5879-8-8s3.5898-8,8-8s8,3.5879,8,8S24.4102,28,20,28z M40,28   c-4.4102,0-8-3.5879-8-8s3.5898-8,8-8s8,3.5879,8,8S44.4102,28,40,28z M60,28c-4.4102,0-8-3.5879-8-8s3.5898-8,8-8s8,3.5879,8,8   S64.4102,28,60,28z"/>
+	<path fill="#D0E8FF" d="M172.0234,127.9668h-16.0156c-2.2383,0-3.9922,1.7441-3.9922,3.9688V160   c0,2.1875,1.7891,3.9668,3.9922,3.9668h16.0156c2.2383,0,3.9922-1.7422,3.9922-3.9668v-28.0645   C176.0156,129.748,174.2266,127.9668,172.0234,127.9668z"/>
+	<path fill="#1C71DA" d="M0,0v32v8v152h232V40v-8V0H0z M224,184H8V40h216V184z M8,32V8h216v24H8z"/>
+	<path fill="#1C71DA" d="M20,12c-4.4102,0-8,3.5879-8,8s3.5898,8,8,8s8-3.5879,8-8S24.4102,12,20,12z"/>
+	<path fill="#1C71DA" d="M40,12c-4.4102,0-8,3.5879-8,8s3.5898,8,8,8s8-3.5879,8-8S44.4102,12,40,12z"/>
+	<path fill="#1C71DA" d="M60,12c-4.4102,0-8,3.5879-8,8s3.5898,8,8,8s8-3.5879,8-8S64.4102,12,60,12z"/>
+	<path fill="#1C71DA" d="M39.9922,108h16.0156C62.6211,108,68,102.6309,68,96.0312V67.9688C68,61.3691,62.6211,56,56.0078,56   H39.9922C33.3789,56,28,61.3691,28,67.9688v28.0625C28,102.6309,33.3789,108,39.9922,108z M36,67.9688   C36,65.7441,37.7539,64,39.9922,64h16.0156C58.2109,64,60,65.7812,60,67.9688v28.0625C60,98.2559,58.2461,100,56.0078,100H39.9922   C37.7891,100,36,98.2188,36,96.0312V67.9688z"/>
+	<path fill="#1C71DA" d="M128,108h16.0156c6.6133,0,11.9922-5.3691,11.9922-11.9688V67.9688   c0-6.5996-5.3789-11.9688-11.9922-11.9688H128c-6.6133,0-11.9922,5.3691-11.9922,11.9688v28.0625   C116.0078,102.6309,121.3867,108,128,108z M124.0078,67.9688C124.0078,65.7441,125.7617,64,128,64h16.0156   c2.2031,0,3.9922,1.7812,3.9922,3.9688v28.0625c0,2.2246-1.7539,3.9688-3.9922,3.9688H128c-2.2031,0-3.9922-1.7812-3.9922-3.9688   V67.9688z"/>
+	<path fill="#1C71DA" d="M172.0234,119.9668h-16.0156c-6.6133,0-11.9922,5.3691-11.9922,11.9688V160   c0,6.5977,5.3789,11.9668,11.9922,11.9668h16.0156c6.6133,0,11.9922-5.3691,11.9922-11.9668v-28.0645   C184.0156,125.3359,178.6367,119.9668,172.0234,119.9668z M176.0156,160c0,2.2246-1.7539,3.9668-3.9922,3.9668h-16.0156   c-2.2031,0-3.9922-1.7793-3.9922-3.9668v-28.0645c0-2.2246,1.7539-3.9688,3.9922-3.9688h16.0156   c2.2031,0,3.9922,1.7812,3.9922,3.9688V160z"/>
+	<path fill="#1C71DA" d="M39.9922,171.9668h16.0156C62.6211,171.9668,68,166.5977,68,160v-28.0645   c0-6.5996-5.3789-11.9688-11.9922-11.9688H39.9922c-6.6133,0-11.9922,5.3691-11.9922,11.9688V160   C28,166.5977,33.3789,171.9668,39.9922,171.9668z M36,131.9355c0-2.2246,1.7539-3.9688,3.9922-3.9688h16.0156   c2.2031,0,3.9922,1.7812,3.9922,3.9688V160c0,2.2246-1.7539,3.9668-3.9922,3.9668H39.9922C37.7891,163.9668,36,162.1875,36,160   V131.9355z"/>
+	<path fill="#1C71DA" d="M88.0078,64C90.2109,64,92,65.7812,92,67.9688v36.0625c0,2.209,1.7891,4,4,4s4-1.791,4-4V67.9688   C100,61.3691,94.6211,56,88.0078,56c-2.2109,0-4,1.791-4,4S85.7969,64,88.0078,64z"/>
+	<path fill="#1C71DA" d="M116.0156,127.9668c2.2031,0,3.9922,1.7812,3.9922,3.9688V168c0,2.209,1.7891,4,4,4s4-1.791,4-4v-36.0645   c0-6.5996-5.3789-11.9688-11.9922-11.9688c-2.2109,0-4,1.791-4,4S113.8047,127.9668,116.0156,127.9668z"/>
+	<path fill="#1C71DA" d="M88.0078,127.9668c2.2031,0,3.9922,1.7812,3.9922,3.9688V168c0,2.209,1.7891,4,4,4s4-1.791,4-4v-36.0645   c0-6.5996-5.3789-11.9688-11.9922-11.9688c-2.2109,0-4,1.791-4,4S85.7969,127.9668,88.0078,127.9668z"/>
+	<path fill="#1C71DA" d="M176.0156,64c2.2031,0,3.9922,1.7812,3.9922,3.9688v36.0625c0,2.209,1.7891,4,4,4s4-1.791,4-4V67.9688   c0-6.5996-5.3789-11.9688-11.9922-11.9688c-2.2109,0-4,1.791-4,4S173.8047,64,176.0156,64z"/>
+</g>
+<path fill="#FF5D5D" d="M196.252,167.8237c-1.0234,0-2.0469-0.3906-2.8281-1.1714c-1.5625-1.5625-1.5625-4.0952,0-5.6572  l14.1426-14.1421c1.5605-1.5615,4.0938-1.5615,5.6562,0c1.5625,1.5625,1.5625,4.0952,0,5.6572l-14.1426,14.1421  C198.2998,167.4331,197.2754,167.8237,196.252,167.8237z"/>
+<path fill="#FF5D5D" d="M210.3945,167.8223c-1.0234,0-2.0479-0.3906-2.8281-1.1714l-14.1426-14.1426  c-1.5625-1.5625-1.5625-4.0947,0-5.6572c1.5605-1.5615,4.0957-1.5615,5.6562,0l14.1426,14.1426  c1.5625,1.5625,1.5625,4.0947,0,5.6572C212.4424,167.4316,211.418,167.8223,210.3945,167.8223z"/>
+<path fill="#00D40B" d="M206.252,87.8237c-7.7197,0-14-6.2803-14-14s6.2803-14,14-14s14,6.2803,14,14  S213.9717,87.8237,206.252,87.8237z M206.252,67.8237c-3.3086,0-6,2.6914-6,6s2.6914,6,6,6s6-2.6914,6-6  S209.5605,67.8237,206.252,67.8237z"/>
+<path fill="#FFC504" d="M107.5664,50.4492c-1.0234,0-2.0469-0.3906-2.8281-1.1714L93.4238,37.9644  c-0.75-0.75-1.1719-1.7676-1.1719-2.8286s0.4219-2.0786,1.1719-2.8286l11.3145-11.3135c1.5625-1.5615,4.0938-1.5615,5.6562,0  l11.3135,11.3135c1.5625,1.5625,1.5625,4.0947,0,5.6572l-11.3135,11.3135C109.6143,50.0586,108.5898,50.4492,107.5664,50.4492z   M101.9092,35.1357l5.6572,5.6567l5.6562-5.6567l-5.6562-5.6567L101.9092,35.1357z"/>
+</svg>
--- a/src/images/demo.svg
+++ b/src/images/demo.svg
--- a/src/images/dgnomad.png
+++ b/src/images/dgnomad.png
--- a/src/images/emoji.png
+++ b/src/images/emoji.png
--- a/src/images/girl.jpg
+++ b/src/images/girl.jpg
--- a/src/images/group.svg
+++ b/src/images/group.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" ?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<style type="text/css">
+	.st0{fill:#E6E6E6;}
+	.st1{fill:#69C9C9;}
+	.st2{fill:#4D5152;}
+</style>
+
+<g>
+
+<path class="st0" d="M56.3,322.3v-10h-26c3.5-49.6,32.8-94,77.1-116.7c16.2,17.2,39.3,28,64.8,28c2.3,0,4.6-0.1,6.9-0.3   c2,16.9,7.7,32.7,16.4,46.5c-25.3,13.1-47.3,31.1-64.9,52.4L56.3,322.3z"/>
+
+</g>
+
+<g>
+
+<path class="st1" d="M262.1,446.4H102.4c3.6-68.3,43.9-129.7,105.3-160.2c20.8,23,50.9,37.5,84.4,37.5c33.4,0,63.5-14.5,84.4-37.5   c61.4,30.5,101.7,91.9,105.3,160.2H322.1v10h-60V446.4z"/>
--- a/src/images/host.svg
+++ b/src/images/host.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" ?>
+
+<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<g>
+
+<rect fill="#4E4C4D" height="28.59021" width="37.51397" x="6.24299" y="11.46645"/>
+
+<path d="M41.94715,36.23013H8.05279c-3.89517,0-7.05282,3.15766-7.05282,7.05282v0.00002   c0,3.89516,3.15766,7.05282,7.05282,7.05282h33.89436c3.89517,0,7.05282-3.15766,7.05282-7.05282v-0.00002   C48.99997,39.38779,45.84232,36.23013,41.94715,36.23013z" fill="#656766"/>
+
+<path d="M41.94715,17.9426H8.05279c-3.89517,0-7.05282,3.15766-7.05282,7.05282v0.00001   c0,3.89517,3.15766,7.05282,7.05282,7.05282h33.89436c3.89517,0,7.05282-3.15766,7.05282-7.05282v-0.00001   C48.99997,21.10026,45.84232,17.9426,41.94715,17.9426z" fill="#656766"/>
+
+<path d="M41.94715-0.33579H8.05279c-3.89517,0-7.05282,3.15766-7.05282,7.05282v0.00001   c0,3.89517,3.15766,7.05282,7.05282,7.05282h33.89436c3.89517,0,7.05282-3.15766,7.05282-7.05282V6.71703   C48.99997,2.82187,45.84232-0.33579,41.94715-0.33579z" fill="#656766"/>
+
+<g>
+
+<circle cx="8.51297" cy="6.71704" fill="#EC6E62" r="2.71455"/>
+
+<circle cx="16.22803" cy="6.71704" fill="#85BD57" r="2.71455"/>
+
+</g>
+
+<g>
+
+<circle cx="8.51297" cy="24.99543" fill="#EC6E62" r="2.71455"/>
--- a/src/images/joinGroup.png
+++ b/src/images/joinGroup.png
--- a/src/images/laptop.svg
+++ b/src/images/laptop.svg
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path style="fill:#F6F6F7;" d="M461.228,418.472H50.772V153.386c0-9.446,7.656-17.102,17.102-17.102h376.251
+	c9.446,0,17.102,7.656,17.102,17.102V418.472z"/>
+<g>
+	<path style="fill:#68727E;" d="M461.228,153.386c0-9.445-7.658-17.102-17.102-17.102H67.875c-9.446,0-17.102,7.658-17.102,17.102
+		v17.102h410.455V153.386z"/>
+	<path style="fill:#68727E;" d="M503.983,409.921H8.017v8.551c0,18.891,15.314,34.205,34.205,34.205h427.557
+		c18.891,0,34.205-15.314,34.205-34.205V409.921z"/>
+</g>
+<path style="fill:#424F5E;" d="M13.248,436.643c6.052,9.629,16.762,16.033,28.973,16.033h427.557
+	c12.212,0,22.922-6.405,28.973-16.033H13.248z"/>
+<rect x="332.96" y="256" style="fill:#FFC44F;" width="171.023" height="119.716"/>
+<path style="fill:#F7AB49;" d="M332.96,281.653l79.843,79.843c3.131,3.131,8.207,3.131,11.338,0l79.842-79.843V256H332.96V281.653z"
+	/>
+<polygon style="fill:#FFC44F;" points="332.96,256 418.472,341.511 503.983,256 "/>
+<circle style="fill:#C4DF64;" cx="256" cy="341.511" r="17.102"/>
+<path style="fill:#FF8C78;" d="M196.142,136.284c0-42.505-42.113-76.96-94.063-76.96S8.017,93.779,8.017,136.284
+	c0,42.503,42.113,76.96,94.063,76.96c5.451,0,10.793-0.384,15.99-1.113l52.42,35.317l-17.102-46.656
+	C179.125,187.061,196.142,163.299,196.142,136.284z"/>
+<path style="fill:#DF7A6E;" d="M33.67,136.284c0-38.944,35.356-71.126,81.236-76.245c-4.194-0.468-8.475-0.715-12.827-0.715
+	c-51.949,0-94.063,34.456-94.063,76.96c0,42.503,42.113,76.96,94.063,76.96c4.339,0,8.605-0.253,12.787-0.719
+	C69.006,207.391,33.67,175.216,33.67,136.284z"/>
+<rect x="50.772" y="392.818" style="fill:#D9DCDF;" width="410.455" height="17.102"/>
+<path d="M503.983,383.733c4.428,0,8.017-3.589,8.017-8.017V256c0-4.348-3.67-8.017-8.017-8.017h-34.739v-94.597
+	c0-13.851-11.268-25.119-25.119-25.119H203.701c-4.869-43.111-48.582-76.96-101.622-76.96C45.792,51.307,0,89.428,0,136.284
+	c0,28.454,16.887,53.683,42.756,69.114v130.77c0,4.427,3.588,8.017,8.017,8.017s8.017-3.589,8.017-8.017V213.229
+	c13.151,5.148,27.822,8.032,43.29,8.032c4.671,0,9.371-0.267,14.009-0.797l49.921,33.634c3.09,2.082,7.321,1.719,10.016-0.852
+	c2.284-2.181,3.078-5.59,1.991-8.555l-14.782-40.325c11.378-7.07,20.685-15.901,27.536-25.888c0.186,0.013,0.372,0.029,0.562,0.029
+	h261.879v69.478H332.96c-4.364,0-8.017,3.661-8.017,8.017v119.716c0,4.427,3.588,8.017,8.017,8.017h120.251v18.171H58.789v-24.05
+	c0-4.427-3.588-8.017-8.017-8.017s-8.017,3.589-8.017,8.017v24.049H8.017c-4.428,0-8.017,3.589-8.017,8.017v8.551
+	c0,23.28,18.941,42.221,42.221,42.221h335.098c4.428,0,8.017-3.589,8.017-8.017c0-4.427-3.588-8.017-8.017-8.017H42.221
+	c-14.441,0-26.188-11.748-26.188-26.188v-0.534h479.933v0.534c0,14.44-11.747,26.188-26.188,26.188h-51.841
+	c-4.428,0-8.017,3.589-8.017,8.017c0,4.427,3.588,8.017,8.017,8.017h51.841c23.28,0,42.221-18.941,42.221-42.221v-8.551
+	c0-4.427-3.588-8.017-8.017-8.017h-34.739v-18.171H503.983z M149.613,193.719c-3.528,1.882-5.13,6.078-3.754,9.832l8.585,23.423
+	l-31.897-21.49c-3.017-2.032-6.342-1.133-9.697-0.796c-3.578,0.359-7.174,0.541-10.771,0.541c-47.446,0-86.046-30.928-86.046-68.944
+	s38.6-68.944,86.046-68.944s86.046,30.928,86.046,68.944C188.125,159.383,173.727,180.854,149.613,193.719z M199.236,162.472
+	c2.26-5.847,3.77-11.933,4.469-18.171h240.42c5.01,0,9.086,4.076,9.086,9.086v9.086H199.236z M484.63,264.017l-66.158,66.158
+	l-66.158-66.158H484.63z M340.977,275.354l71.825,71.825c3.089,3.088,8.249,3.088,11.338,0l71.826-71.825v92.345h-154.99V275.354z"
+	/>
+<path d="M256,316.392c-13.851,0-25.119,11.268-25.119,25.119c0,13.851,11.268,25.119,25.119,25.119
+	c13.851,0,25.119-11.268,25.119-25.119C281.119,327.661,269.851,316.392,256,316.392z M256,350.597c-5.01,0-9.086-4.076-9.086-9.086
+	c0-5.01,4.076-9.086,9.086-9.086c5.01,0,9.086,4.076,9.086,9.086C265.086,346.521,261.01,350.597,256,350.597z"/>
+<path d="M288.595,301.085c2.217-3.832,0.908-8.736-2.924-10.954c-8.982-5.196-19.241-7.943-29.67-7.943
+	c-10.427,0-20.686,2.746-29.667,7.941c-3.833,2.217-5.144,7.121-2.926,10.954c2.216,3.832,7.124,5.144,10.953,2.926
+	c6.545-3.786,14.028-5.787,21.64-5.787c7.613,0,15.096,2.002,21.641,5.788c1.264,0.732,2.644,1.08,4.007,1.08
+	C284.415,305.088,287.109,303.652,288.595,301.085z"/>
+<path d="M305.692,271.452c2.217-3.832,0.908-8.736-2.926-10.953c-14.155-8.188-30.327-12.516-46.766-12.516
+	c-16.441,0-32.614,4.328-46.77,12.517c-3.832,2.217-5.142,7.121-2.924,10.954c1.487,2.569,4.178,4.004,6.947,4.004
+	c1.362,0,2.743-0.348,4.007-1.079c11.719-6.779,25.116-10.363,38.741-10.363c13.624,0,27.02,3.583,38.739,10.361
+	C298.572,276.595,303.476,275.285,305.692,271.452z"/>
+<path d="M317.684,246.911c2.718,0,5.369-1.382,6.874-3.881c2.285-3.792,1.062-8.719-2.73-11.003
+	c-19.815-11.938-42.578-18.248-65.828-18.248c-22.454,0-44.541,5.911-63.873,17.094c-3.833,2.217-5.144,7.121-2.926,10.954
+	c2.217,3.833,7.122,5.142,10.953,2.926c16.896-9.774,36.207-14.94,55.845-14.94c20.334,0,40.236,5.514,57.555,15.948
+	C314.849,246.54,316.275,246.911,317.684,246.911z"/>
+<path d="M106.355,128.267h-8.551c-4.428,0-8.017,3.589-8.017,8.017c0,4.427,3.588,8.017,8.017,8.017h8.551
+	c4.428,0,8.017-3.589,8.017-8.017C114.372,131.857,110.783,128.267,106.355,128.267z"/>
+<path d="M72.15,128.267h-8.551c-4.428,0-8.017,3.589-8.017,8.017c0,4.427,3.588,8.017,8.017,8.017h8.551
+	c4.428,0,8.017-3.589,8.017-8.017C80.167,131.857,76.579,128.267,72.15,128.267z"/>
+<path d="M140.56,128.267h-8.551c-4.428,0-8.017,3.589-8.017,8.017c0,4.427,3.588,8.017,8.017,8.017h8.551
+	c4.428,0,8.017-3.589,8.017-8.017C148.576,131.857,144.988,128.267,140.56,128.267z"/>
+</svg>
--- a/src/images/loft.jpg
+++ b/src/images/loft.jpg
--- a/src/images/loft.png
+++ b/src/images/loft.png
--- a/src/images/meetup.jpg
+++ b/src/images/meetup.jpg
--- a/src/images/nomad.png
+++ b/src/images/nomad.png
--- a/src/images/nomadro.png
+++ b/src/images/nomadro.png
--- a/src/images/nomadvloglife.png
+++ b/src/images/nomadvloglife.png
--- a/src/images/phone.png
+++ b/src/images/phone.png
--- a/src/images/qrcode.png
+++ b/src/images/qrcode.png
--- a/src/images/robot.png
+++ b/src/images/robot.png
--- a/src/images/robot.svg
+++ b/src/images/robot.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 -77.5 1179 1179" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.215632 994.574713h403.714943s43.549425-8.945287 43.549425-114.64092 94.16092-577.677241-459.976092-577.677241-457.151264 541.425287-457.151264 541.425287-25.423448 160.77977 54.848735 157.013333 415.014253-6.12046 415.014253-6.120459z" fill="#FFFFFF" /><path d="M1071.786667 712.798161h72.503908v136.297931h-72.503908zM36.016552 712.798161h72.503908v136.297931H36.016552z" fill="#EA5D5C" /><path d="M305.68366 559.40926l556.254412-1.165018 0.398364 190.20464-556.254412 1.165018-0.398364-190.20464Z" fill="#4C66AF" /><path d="M1129.931034 680.312644h-59.556781c-3.295632-152.069885-67.56046-258.942529-172.079081-324.384368l115.347127-238.462529a47.08046 47.08046 0 1 0-42.372414-20.48l-114.640919 236.57931a625.934713 625.934713 0 0 0-269.30023-53.200919 625.228506 625.228506 0 0 0-270.006437 54.848736l-115.817931-235.402299a47.08046 47.08046 0 1 0-42.372414 20.715402l117.701149 238.462529c-103.812414 65.441839-167.135632 173.02069-169.960459 324.61977H47.786667a47.08046 47.08046 0 0 0-47.08046 47.08046v117.701149a47.08046 47.08046 0 0 0 47.08046 47.08046h58.615172v57.908965a70.62069 70.62069 0 0 0 70.62069 70.62069l823.908046-1.647816a70.62069 70.62069 0 0 0 70.620689-70.62069v-57.908965h59.085977a47.08046 47.08046 0 0 0 47.08046-47.08046v-117.701149A47.08046 47.08046 0 0 0 1129.931034 680.312644zM94.16092 847.212874H47.08046v-117.70115h47.08046v117.70115z m929.83908 103.106206a23.54023 23.54023 0 0 1-23.54023 23.54023l-823.908046 1.647816a23.54023 23.54023 0 0 1-23.54023-23.540229v-258.942529c0-329.563218 303.668966-365.57977 434.788046-365.815173s435.494253 34.604138 436.20046 363.931954z m105.46023-105.224827h-47.08046v-117.70115h47.08046v117.70115z" fill="#3F4651" /><path d="M464.684138 135.827126l22.363218-19.53839 40.018391 62.381609a30.131494 30.131494 0 0 0 25.423448 13.888735h2.824828a30.131494 30.131494 0 0 0 25.188046-19.067586l20.715402-79.095172 21.186207 74.387126v2.118621a30.366897 30.366897 0 0 0 52.494713 6.826667l30.366896-57.202759 13.182529 12.947126a30.131494 30.131494 0 0 0 21.186207 8.709886h57.673563a23.54023 23.54023 0 0 0 23.54023-23.54023 23.54023 23.54023 0 0 0-23.54023-23.54023h-50.140689l-23.54023-23.54023a30.366897 30.366897 0 0 0-45.668046 3.766437l-21.42161 40.01839L629.465747 19.302989a30.131494 30.131494 0 0 0-28.012873-19.067587 30.131494 30.131494 0 0 0-28.012874 19.067587l-26.60046 101.693793-29.660689-47.08046a30.366897 30.366897 0 0 0-20.48-13.653333 30.837701 30.837701 0 0 0-23.54023 6.826666l-32.250115 28.248276h-60.027586a23.54023 23.54023 0 0 0-23.54023 23.54023 23.54023 23.54023 0 0 0 23.54023 23.54023h66.148046a31.308506 31.308506 0 0 0 17.655172-6.591265zM776.121379 532.950805H404.421149A121.232184 121.232184 0 0 0 282.482759 639.352644a117.701149 117.701149 0 0 0 117.701149 129.000459h371.70023a121.232184 121.232184 0 0 0 121.938391-106.401839 117.701149 117.701149 0 0 0-117.70115-129.000459z m0 188.321839H402.302529a72.503908 72.503908 0 0 1-72.268506-56.496552 70.62069 70.62069 0 0 1 68.972874-84.744828h373.81885a72.503908 72.503908 0 0 1 72.268506 56.496552 70.62069 70.62069 0 0 1-68.502069 84.744828z" fill="#3F4651" /></svg>
--- a/src/images/robot192.png
+++ b/src/images/robot192.png
--- a/src/images/ssh.svg
+++ b/src/images/ssh.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="white" fill-opacity="0.01"/>
+<rect x="4" y="8" width="40" height="32" rx="2" fill="#2F88FF" stroke="#000000" stroke-width="4" stroke-linejoin="round"/>
+<path d="M12 18L19 24L12 30" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23 32H36" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/images/touxiang.png
+++ b/src/images/touxiang.png
--- a/src/images/travel.svg
+++ b/src/images/travel.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" class="icon"  version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M885.76 921.28h-106.56l-0.32-26.77333333c0.10666667-0.74666667-0.10666667-68.26666667-7.46666667-171.52-8.96-125.65333333-21.76-243.41333333-167.57333333-334.82666667l24.53333333-26.02666667c78.72 46.93333333 146.24 112 178.88 167.36 42.34666667 72 56.85333333 110.29333333 69.54666667 176.85333334 21.65333333 112.64 9.49333333 211.30666667 8.96 214.93333333z" fill="#755E49" /><path d="M565.65333333 893.40444445c0 14.93333333-1.38666667 29.44-4.05333333 43.52H129.28c-2.66666667-14.08-4.05333333-28.69333333-4.05333333-43.52 0-25.81333333 4.26666667-50.66666667 11.94666666-73.81333334 29.76-88.64 111.78666667-152.32 208.21333334-152.32 96.42666667 0 178.45333333 63.68 208.21333333 152.32 7.89333333 23.14666667 12.05333333 48 12.05333333 73.81333334z" fill="#FF9D00" /><path d="M989.12 926.61333333c0 16.21333333-6.61333333 30.82666667-17.17333333 41.49333334-10.56 10.66666667-25.28 17.17333333-41.49333334 17.17333333h-838.4c-32.42666667 0-58.66666667-26.24-58.66666666-58.66666667 0-16.21333333 6.61333333-30.82666667 17.17333333-41.49333333 10.66666667-10.56 25.28-17.17333333 41.49333333-17.17333333h838.4c32.42666667 0 58.66666667 26.24 58.66666667 58.66666666z" fill="#00B7FF" /><path d="M981.86666667 399.57333333c10.45333333 0 14.50666667-17.17333333 5.86666666-24.42666666-31.14666667-26.24-91.73333333-64.21333333-181.01333333-64.74666667-89.92-0.64-150.29333333 38.50666667-180.90666667 65.28-8.53333333 7.46666667-4.37333333 24.32 5.97333334 24.32l350.08-0.42666667z" fill="#02C652" /><path d="M882.77333333 158.61333333c7.36-7.36-1.81333333-22.4-13.12-21.44-40.64 3.52-110.29333333 19.52-173.76 82.24-64 63.14666667-79.04 133.44-81.81333333 174.08-0.74666667 11.30666667 14.08 20.37333333 21.44 13.01333334l247.25333333-247.89333334z" fill="#02C652" /><path d="M648 391.89333333c7.36-7.36-1.81333333-22.4-13.12-21.44-40.64 3.52-110.29333333 19.52-173.76 82.24-64 63.14666667-79.04 133.44-81.81333333 174.08-0.74666667 11.30666667 14.08 20.37333333 21.44 13.01333334l247.25333333-247.89333334z" fill="#02C652" /><path d="M657.92 44.69333333c0-10.45333333-17.17333333-14.50666667-24.42666667-5.86666666-26.24 31.14666667-64.21333333 91.73333333-64.74666666 181.01333333-0.64 89.92 38.50666667 150.29333333 65.28 180.90666667 7.46666667 8.53333333 24.32 4.37333333 24.32-5.97333334l-0.42666667-350.08z" fill="#02C652" /><path d="M657.92 372.58666667c0-10.45333333-17.17333333-14.50666667-24.42666667-5.86666667-26.24 31.14666667-64.21333333 91.73333333-64.74666666 181.01333333-0.64 89.92 38.50666667 150.29333333 65.28 180.90666667 7.46666667 8.53333333 24.32 4.37333333 24.32-5.97333333l-0.42666667-350.08z" fill="#02C652" /><path d="M642.66666667 402.24c10.45333333 0 14.50666667-17.17333333 5.86666666-24.42666667-31.14666667-26.24-91.73333333-64.21333333-181.01333333-64.74666666-89.92-0.64-150.29333333 38.50666667-180.90666667 65.28-8.53333333 7.46666667-4.37333333 24.32 5.97333334 24.32l350.08-0.42666667z" fill="#02C652" /></svg>
--- a/src/images/youtube
+++ b/src/images/youtube
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="red" d="M14.712 4.633a1.754 1.754 0 00-1.234-1.234C12.382 3.11 8 3.11 8 3.11s-4.382 0-5.478.289c-.6.161-1.072.634-1.234 1.234C1 5.728 1 8 1 8s0 2.283.288 3.367c.162.6.635 1.073 1.234 1.234C3.618 12.89 8 12.89 8 12.89s4.382 0 5.478-.289a1.754 1.754 0 001.234-1.234C15 10.272 15 8 15 8s0-2.272-.288-3.367z"/><path fill="#ffffff" d="M6.593 10.11l3.644-2.098-3.644-2.11v4.208z"/></svg>
--- a/src/images/youtube.ico
+++ b/src/images/youtube.ico
--- a/src/images/youtube.svg
+++ b/src/images/youtube.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="red" d="M14.712 4.633a1.754 1.754 0 00-1.234-1.234C12.382 3.11 8 3.11 8 3.11s-4.382 0-5.478.289c-.6.161-1.072.634-1.234 1.234C1 5.728 1 8 1 8s0 2.283.288 3.367c.162.6.635 1.073 1.234 1.234C3.618 12.89 8 12.89 8 12.89s4.382 0 5.478-.289a1.754 1.754 0 001.234-1.234C15 10.272 15 8 15 8s0-2.272-.288-3.367z"/><path fill="#ffffff" d="M6.593 10.11l3.644-2.098-3.644-2.11v4.208z"/></svg>
--- a/src/images/yt2.svg
+++ b/src/images/yt2.svg
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<rect x="64" style="fill:#FFFFFF;" width="384" height="512"/>
+<rect id="SVGCleanerId_0" x="106.672" y="370.08" style="fill:#415E72;" width="133.032" height="10.896"/>
+<rect id="SVGCleanerId_1" x="106.672" y="412.784" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+<rect id="SVGCleanerId_2" x="106.672" y="434.08" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+<rect id="SVGCleanerId_3" x="106.672" y="455.448" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+<path style="fill:#25B6D2;" d="M391.992,338.224H120.008c-8.8,0-16-7.2-16-16V124.888c0-8.8,7.2-16,16-16h272c8.8,0,16,7.2,16,16
+	v197.336C408,331.024,400.8,338.224,391.992,338.224z"/>
+<rect x="66" y="2" style="fill:#FFFFFF;" width="380" height="508"/>
+<path style="fill:#C7D5DD;" d="M444,4v504H68V4H444 M448,0H64v512h384V0L448,0z"/>
+<g>
+	<rect id="SVGCleanerId_0_1_" x="106.672" y="370.08" style="fill:#415E72;" width="133.032" height="10.896"/>
+</g>
+<g>
+	<rect id="SVGCleanerId_1_1_" x="106.672" y="412.784" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+</g>
+<g>
+	<rect id="SVGCleanerId_2_1_" x="106.672" y="434.08" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+</g>
+<g>
+	<rect id="SVGCleanerId_3_1_" x="106.672" y="455.448" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+</g>
+<path style="fill:#E04F5F;" d="M391.992,338.224H120.008c-8.8,0-16-7.2-16-16V124.888c0-8.8,7.2-16,16-16h272c8.8,0,16,7.2,16,16
+	v197.336C408,331.024,400.8,338.224,391.992,338.224z"/>
+<g>
+	<rect x="274.96" y="369.04" style="fill:#CFDCE5;" width="133.032" height="25.896"/>
+	<rect x="274.96" y="405.272" style="fill:#CFDCE5;" width="133.032" height="25.896"/>
+	<rect x="274.96" y="441.52" style="fill:#CFDCE5;" width="133.032" height="25.896"/>
+</g>
+<g>
+	<rect x="274.96" y="441.52" style="fill:#415E72;" width="27.648" height="25.896"/>
+	<rect x="274.96" y="405.272" style="fill:#415E72;" width="27.648" height="25.896"/>
+	<rect x="274.96" y="369.04" style="fill:#415E72;" width="27.648" height="25.896"/>
+</g>
+<g>
+	<path style="fill:#CFDCE5;" d="M405.328,43.672v26.712h-184.16V43.672H405.328 M408,41H218.504v32.048H408V41L408,41z"/>
+	<rect x="372.168" y="41" style="fill:#CFDCE5;" width="35.832" height="32.08"/>
+</g>
+<path style="fill:#E04F5F;" d="M190.168,73.056h-46.92c-1.784,0-3.248-1.456-3.248-3.248v-25.56c0-1.784,1.456-3.248,3.248-3.248
+	h46.92c1.784,0,3.248,1.456,3.248,3.248v25.56C193.416,71.592,191.944,73.056,190.168,73.056z"/>
+<g>
+	<path style="fill:#FFFFFF;" d="M149.8,53.464h-3.792V51.44h10.056v2.024h-3.832v11.272H149.8L149.8,53.464z"/>
+	<path style="fill:#FFFFFF;" d="M165.144,61.856c0,1.144,0.04,2.104,0.08,2.888h-2.136l-0.12-1.472h-0.032
+		c-0.416,0.688-1.36,1.68-3.08,1.68c-1.752,0-3.352-1.048-3.352-4.184V55.12h2.432v5.232c0,1.6,0.52,2.64,1.8,2.64
+		c0.968,0,1.6-0.688,1.848-1.304c0.088-0.216,0.144-0.472,0.144-0.752V55.12h2.432v6.736H165.144z"/>
+	<path style="fill:#FFFFFF;" d="M167.688,64.744c0.04-0.656,0.088-1.72,0.088-2.704V50.72h2.432v5.72h0.04
+		c0.592-0.912,1.632-1.536,3.072-1.536c2.352,0,4.032,1.952,4.008,4.88c0,3.456-2.192,5.176-4.368,5.176
+		c-1.24,0-2.352-0.48-3.04-1.656h-0.04l-0.12,1.44C169.76,64.744,167.688,64.744,167.688,64.744z M170.2,60.776
+		c0,0.208,0.024,0.392,0.056,0.576c0.264,0.968,1.104,1.712,2.16,1.712c1.528,0,2.448-1.232,2.448-3.16
+		c0-1.712-0.808-3.08-2.432-3.08c-0.984,0-1.872,0.72-2.16,1.776c-0.032,0.176-0.08,0.392-0.08,0.632v1.544
+		C170.192,60.776,170.2,60.776,170.2,60.776z"/>
+	<path style="fill:#FFFFFF;" d="M181.04,60.616c0.056,1.744,1.416,2.496,2.96,2.496c1.12,0,1.928-0.16,2.672-0.432l0.36,1.68
+		c-0.84,0.336-1.984,0.6-3.368,0.6c-3.112,0-4.96-1.92-4.96-4.872c0-2.656,1.624-5.176,4.696-5.176c3.128,0,4.152,2.568,4.152,4.688
+		c0,0.456-0.04,0.808-0.08,1.024L181.04,60.616z M185.264,58.912c0.024-0.88-0.368-2.352-1.992-2.352
+		c-1.504,0-2.136,1.376-2.232,2.352H185.264z"/>
+</g>
+<g>
+	<path style="fill:#415E72;" d="M108.208,64.744v-5.552L104,51.44h2.768l1.6,3.408c0.456,0.992,0.792,1.744,1.152,2.648h0.032
+		c0.336-0.848,0.712-1.68,1.168-2.648l1.6-3.408h2.744l-4.424,7.704v5.6H108.208z"/>
+	<path style="fill:#415E72;" d="M123.728,59.84c0,3.544-2.48,5.12-4.936,5.12c-2.72,0-4.816-1.872-4.816-4.944
+		c0-3.168,2.072-5.096,4.976-5.096C121.824,54.904,123.728,56.92,123.728,59.84z M116.488,59.944c0,1.848,0.904,3.256,2.384,3.256
+		c1.384,0,2.352-1.36,2.352-3.304c0-1.504-0.672-3.224-2.328-3.224C117.184,56.68,116.488,58.336,116.488,59.944z"/>
+	<path style="fill:#415E72;" d="M134.344,61.856c0,1.144,0.04,2.104,0.08,2.888h-2.136l-0.128-1.472h-0.032
+		c-0.416,0.688-1.36,1.68-3.08,1.68c-1.752,0-3.352-1.048-3.352-4.184V55.12h2.432v5.232c0,1.6,0.52,2.64,1.8,2.64
+		c0.968,0,1.6-0.688,1.848-1.304c0.088-0.216,0.144-0.472,0.144-0.752V55.12h2.432v6.736H134.344z"/>
+	<path style="fill:#415E72;" d="M389.36,62.336c-4.216,0-7.648-3.432-7.648-7.648s3.432-7.648,7.648-7.648
+		c4.216,0,7.648,3.432,7.648,7.648S393.576,62.336,389.36,62.336z M389.36,48.768c-3.256,0-5.912,2.656-5.912,5.912
+		s2.656,5.912,5.912,5.912c3.256,0,5.912-2.656,5.912-5.912S392.616,48.768,389.36,48.768z"/>
+	
+		<rect x="395.373" y="59.304" transform="matrix(0.7967 -0.6044 0.6044 0.7967 42.2993 252.3526)" style="fill:#415E72;" width="1.728" height="8"/>
+</g>
+<g>
+	<path style="fill:#FFFFFF;" d="M234.336,61.504c0.656,0.4,1.616,0.744,2.616,0.744c1.496,0,2.36-0.784,2.36-1.928
+		c0-1.048-0.6-1.656-2.128-2.248c-1.84-0.656-2.984-1.616-2.984-3.2c0-1.768,1.456-3.064,3.648-3.064
+		c1.152,0,1.992,0.264,2.496,0.544l-0.4,1.184C239.576,53.328,238.824,53,237.8,53c-1.544,0-2.128,0.912-2.128,1.688
+		c0,1.056,0.688,1.568,2.248,2.176c1.904,0.752,2.88,1.664,2.88,3.32c0,1.744-1.296,3.256-3.952,3.256
+		c-1.088,0-2.288-0.328-2.888-0.72L234.336,61.504z"/>
+	<path style="fill:#FFFFFF;" d="M243.72,59.488c0.032,2.008,1.304,2.808,2.792,2.808c1.056,0,1.688-0.176,2.248-0.416l0.248,1.056
+		c-0.52,0.24-1.408,0.504-2.704,0.504c-2.496,0-3.984-1.648-3.984-4.088s1.44-4.376,3.8-4.376c2.656,0,3.352,2.32,3.352,3.824
+		c0,0.296-0.032,0.536-0.056,0.672h-5.696C243.72,59.472,243.72,59.488,243.72,59.488z M248.048,58.448
+		c0.024-0.936-0.392-2.4-2.048-2.4c-1.496,0-2.144,1.376-2.264,2.4H248.048z"/>
+	<path style="fill:#FFFFFF;" d="M255.84,63.28l-0.12-1.024h-0.04c-0.456,0.64-1.32,1.208-2.48,1.208c-1.648,0-2.48-1.152-2.48-2.32
+		c0-1.968,1.744-3.04,4.88-3.016v-0.176c0-0.664-0.184-1.888-1.848-1.888c-0.752,0-1.536,0.24-2.112,0.608l-0.36-0.976
+		c0.664-0.424,1.648-0.72,2.672-0.72c2.48,0,3.08,1.688,3.08,3.312v3.04c0,0.712,0.032,1.392,0.144,1.936h-1.336V63.28z
+		 M255.616,59.152c-1.616-0.032-3.44,0.248-3.44,1.816c0,0.96,0.64,1.408,1.392,1.408c1.056,0,1.736-0.664,1.96-1.36
+		c0.056-0.152,0.088-0.328,0.088-0.472V59.152z"/>
+	<path style="fill:#FFFFFF;" d="M259.472,57.704c0-0.96-0.024-1.776-0.08-2.536h1.288l0.056,1.6h0.056
+		c0.368-1.088,1.264-1.776,2.256-1.776c0.16,0,0.272,0.008,0.416,0.04v1.392c-0.152-0.032-0.304-0.04-0.504-0.04
+		c-1.048,0-1.784,0.784-1.984,1.896c-0.032,0.2-0.08,0.424-0.08,0.672v4.328h-1.456v-5.576H259.472z"/>
+	<path style="fill:#FFFFFF;" d="M270.6,62.984c-0.392,0.208-1.24,0.472-2.344,0.472c-2.44,0-4.04-1.656-4.04-4.136
+		c0-2.504,1.72-4.312,4.368-4.312c0.872,0,1.648,0.232,2.048,0.416l-0.336,1.136c-0.36-0.208-0.904-0.384-1.72-0.384
+		c-1.864,0-2.864,1.376-2.864,3.064c0,1.888,1.208,3.04,2.808,3.04c0.84,0,1.392-0.232,1.808-0.4L270.6,62.984z"/>
+	<path style="fill:#FFFFFF;" d="M272.36,51.384h1.472v5.056h0.032c0.24-0.416,0.608-0.784,1.056-1.032
+		c0.424-0.248,0.96-0.416,1.504-0.416c1.104,0,2.832,0.664,2.832,3.464v4.824h-1.472v-4.664c0-1.304-0.48-2.408-1.872-2.408
+		c-0.96,0-1.72,0.664-1.984,1.472c-0.088,0.208-0.112,0.416-0.112,0.712v4.904h-1.472V51.384H272.36z"/>
+</g>
+<rect x="155.224" y="264" style="fill:#415E72;" width="21.592" height="34.912"/>
+<rect x="191.216" y="240.08" style="fill:#FFFFFF;" width="21.592" height="59.064"/>
+<rect x="227.208" y="207.248" style="fill:#415E72;" width="21.592" height="91.888"/>
+<rect x="263.2" y="148.184" style="fill:#FFFFFF;" width="21.592" height="150.952"/>
+<rect x="299.2" y="178.632" style="fill:#415E72;" width="21.592" height="120.48"/>
+<rect x="335.184" y="226.944" style="fill:#FFFFFF;" width="21.592" height="72.16"/>
+</svg>
--- a/src/images/yt3.svg
+++ b/src/images/yt3.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path style="fill:#415E72;" d="M0,355.2v-324c0.104-5.704,4.696-10.296,10.4-10.4h491.2c5.704,0.104,10.296,4.696,10.4,10.4v324H0z"
+	/>
+<g>
+	<path style="fill:#CFDCE5;" d="M512,355.2v41.6c-0.104,5.704-4.696,10.296-10.4,10.4H10.4c-5.704-0.104-10.296-4.696-10.4-10.4
+		v-41.6H512z"/>
+	<rect x="146.4" y="480.8" style="fill:#CFDCE5;" width="219.2" height="10.4"/>
+</g>
+<polygon style="fill:#AAC1CE;" points="328.8,480.8 183.2,480.8 193.6,407.2 318.4,407.2 "/>
+<rect x="20.8" y="41.6" style="fill:#FFFFFF;" width="470.4" height="292.8"/>
+<polygon style="fill:#8BA0AE;" points="318.4,407.2 193.6,407.2 187.792,448.28 320.272,420.424 "/>
+<path style="fill:#E04F5F;" d="M84.368,64.8h149.728c10.336,0,18.72,8.384,18.72,18.72v99.68c0,10.336-8.384,18.72-18.72,18.72
+	H84.368c-10.336,0-18.72-8.384-18.72-18.72V83.52C65.648,73.184,74.032,64.8,84.368,64.8z"/>
+<polygon style="fill:#FFFFFF;" points="136.56,97.544 198.6,133.36 136.56,169.184 "/>
+<g>
+	<rect x="71.824" y="237.576" style="fill:#CFDCE5;" width="176.24" height="6.616"/>
+	<rect x="71.824" y="257.76" style="fill:#CFDCE5;" width="176.24" height="6.616"/>
+	<rect x="71.824" y="277.952" style="fill:#CFDCE5;" width="176.24" height="6.616"/>
+	<rect x="71.824" y="298.16" style="fill:#CFDCE5;" width="176.24" height="6.616"/>
+	<rect x="291.04" y="152.8" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+</g>
+<rect x="291.04" y="152.8" style="fill:#415E72;" width="32.32" height="30.232"/>
+<rect x="291.04" y="109.344" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+<rect x="291.04" y="109.344" style="fill:#E04F5F;" width="32.32" height="30.232"/>
+<rect x="291.04" y="65.888" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+<rect x="291.04" y="65.888" style="fill:#415E72;" width="32.32" height="30.232"/>
+<rect x="291.04" y="283.192" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+<rect x="291.04" y="283.192" style="fill:#E04F5F;" width="32.32" height="30.232"/>
+<rect x="291.04" y="239.728" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+<rect x="291.04" y="239.728" style="fill:#415E72;" width="32.32" height="30.232"/>
+<rect x="291.04" y="196.264" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+<rect x="291.04" y="196.264" style="fill:#E04F5F;" width="32.32" height="30.232"/>
+</svg>
--- a/src/images/yt4.svg
+++ b/src/images/yt4.svg
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<circle style="fill:#E8E8E8;" cx="256" cy="256" r="256"/>
+<rect id="SVGCleanerId_0" x="115" y="68" style="fill:#FFFFFF;" width="282" height="376"/>
+<path id="SVGCleanerId_1" style="fill:#DB2B42;" d="M355.872,316.384H156.128c-6.464,0-11.752-5.288-11.752-11.752v-144.92
+	c0-6.464,5.288-11.752,11.752-11.752H355.88c6.464,0,11.752,5.288,11.752,11.752v144.92
+	C367.624,311.096,362.336,316.384,355.872,316.384z"/>
+<g>
+	<rect id="SVGCleanerId_0_1_" x="115" y="68" style="fill:#FFFFFF;" width="282" height="376"/>
+</g>
+<g>
+	<path id="SVGCleanerId_1_1_" style="fill:#DB2B42;" d="M355.872,316.384H156.128c-6.464,0-11.752-5.288-11.752-11.752v-144.92
+		c0-6.464,5.288-11.752,11.752-11.752H355.88c6.464,0,11.752,5.288,11.752,11.752v144.92
+		C367.624,311.096,362.336,316.384,355.872,316.384z"/>
+</g>
+<g>
+	<path style="fill:#E0E0E0;" d="M365.664,100.072v19.616h-135.24v-19.616H365.664 M367.624,98.112h-139.16v23.536h139.16
+		L367.624,98.112L367.624,98.112z"/>
+	<rect x="341.312" y="98.112" style="fill:#E0E0E0;" width="26.312" height="23.536"/>
+</g>
+<path style="fill:#DB2B42;" d="M207.656,121.648H173.2c-1.312,0-2.384-1.072-2.384-2.384v-18.768c0-1.312,1.072-2.384,2.384-2.384
+	h34.456c1.312,0,2.384,1.072,2.384,2.384v18.768C210.04,120.576,208.96,121.648,207.656,121.648z"/>
+<g>
+	<path style="fill:#FFFFFF;" d="M178.008,107.264h-2.784v-1.488h7.384v1.488h-2.816v8.28h-1.784L178.008,107.264L178.008,107.264z"
+		/>
+	<path style="fill:#FFFFFF;" d="M189.28,113.424c0,0.84,0.032,1.544,0.056,2.12h-1.568l-0.088-1.08h-0.024
+		c-0.304,0.504-1,1.232-2.264,1.232c-1.288,0-2.464-0.768-2.464-3.072v-4.144h1.784v3.84c0,1.176,0.384,1.936,1.32,1.936
+		c0.712,0,1.176-0.504,1.36-0.96c0.064-0.16,0.104-0.344,0.104-0.552v-4.264h1.784V113.424z"/>
+	<path style="fill:#FFFFFF;" d="M191.144,115.544c0.032-0.48,0.064-1.264,0.064-1.984v-8.312h1.784v4.2h0.032
+		c0.432-0.672,1.2-1.128,2.256-1.128c1.728,0,2.96,1.432,2.944,3.584c0,2.536-1.608,3.8-3.208,3.8c-0.912,0-1.728-0.352-2.232-1.216
+		h-0.032l-0.088,1.056H191.144z M192.992,112.632c0,0.152,0.016,0.288,0.04,0.424c0.192,0.712,0.808,1.256,1.584,1.256
+		c1.12,0,1.8-0.904,1.8-2.32c0-1.256-0.592-2.264-1.784-2.264c-0.72,0-1.376,0.528-1.584,1.304
+		c-0.024,0.128-0.056,0.288-0.056,0.464V112.632z"/>
+	<path style="fill:#FFFFFF;" d="M200.952,112.512c0.04,1.28,1.04,1.832,2.176,1.832c0.824,0,1.416-0.12,1.96-0.32l0.264,1.232
+		c-0.616,0.248-1.456,0.44-2.472,0.44c-2.288,0-3.64-1.408-3.64-3.576c0-1.952,1.192-3.8,3.448-3.8c2.296,0,3.048,1.888,3.048,3.44
+		c0,0.336-0.032,0.592-0.056,0.752C205.68,112.512,200.952,112.512,200.952,112.512z M204.056,111.264
+		c0.016-0.648-0.272-1.728-1.464-1.728c-1.104,0-1.568,1.008-1.64,1.728H204.056z"/>
+</g>
+<g>
+	<path style="fill:#2D2D2D;" d="M147.464,115.544v-4.072l-3.088-5.696h2.032l1.176,2.504c0.336,0.728,0.584,1.28,0.848,1.944h0.024
+		c0.248-0.624,0.52-1.232,0.856-1.944l1.176-2.504h2.016l-3.248,5.656v4.112H147.464z"/>
+	<path style="fill:#2D2D2D;" d="M158.864,111.944c0,2.6-1.824,3.76-3.624,3.76c-2,0-3.536-1.376-3.536-3.632
+		c0-2.328,1.52-3.744,3.656-3.744C157.464,108.32,158.864,109.8,158.864,111.944z M153.544,112.024c0,1.36,0.664,2.392,1.752,2.392
+		c1.016,0,1.728-1,1.728-2.424c0-1.104-0.496-2.368-1.712-2.368C154.056,109.624,153.544,110.84,153.544,112.024z"/>
+	<path style="fill:#2D2D2D;" d="M166.656,113.424c0,0.84,0.032,1.544,0.056,2.12h-1.568l-0.088-1.08h-0.024
+		c-0.304,0.504-1,1.232-2.264,1.232c-1.288,0-2.464-0.768-2.464-3.072v-4.144h1.784v3.84c0,1.176,0.384,1.936,1.32,1.936
+		c0.712,0,1.176-0.504,1.36-0.96c0.064-0.16,0.104-0.344,0.104-0.552v-4.264h1.784V113.424z"/>
+	<path style="fill:#2D2D2D;" d="M353.936,113.776c-3.096,0-5.616-2.52-5.616-5.616s2.52-5.616,5.616-5.616s5.616,2.52,5.616,5.616
+		C359.552,111.256,357.032,113.776,353.936,113.776z M353.936,103.816c-2.392,0-4.344,1.952-4.344,4.344s1.952,4.344,4.344,4.344
+		s4.344-1.952,4.344-4.344S356.328,103.816,353.936,103.816z"/>
+	
+		<rect x="356.02" y="113.813" transform="matrix(-0.6044 -0.7967 0.7967 -0.6044 484.7665 469.5985)" style="fill:#2D2D2D;" width="5.896" height="1.272"/>
+	<path style="fill:#2D2D2D;" d="M240.088,113.168c0.48,0.296,1.184,0.544,1.92,0.544c1.096,0,1.736-0.576,1.736-1.416
+		c0-0.768-0.44-1.216-1.56-1.648c-1.352-0.48-2.192-1.184-2.192-2.352c0-1.296,1.072-2.248,2.68-2.248
+		c0.848,0,1.464,0.192,1.832,0.4l-0.296,0.872c-0.272-0.152-0.824-0.392-1.576-0.392c-1.136,0-1.56,0.672-1.56,1.24
+		c0,0.776,0.504,1.152,1.648,1.6c1.4,0.544,2.12,1.216,2.12,2.432c0,1.28-0.952,2.392-2.904,2.392c-0.8,0-1.68-0.24-2.12-0.528
+		L240.088,113.168z"/>
+	<path style="fill:#2D2D2D;" d="M246.984,111.688c0.024,1.472,0.96,2.064,2.048,2.064c0.776,0,1.24-0.128,1.648-0.304l0.184,0.776
+		c-0.384,0.176-1.032,0.368-1.984,0.368c-1.832,0-2.928-1.208-2.928-3s1.056-3.216,2.792-3.216c1.952,0,2.464,1.704,2.464,2.808
+		c0,0.216-0.024,0.392-0.04,0.496h-4.184V111.688z M250.16,110.92c0.016-0.688-0.288-1.76-1.504-1.76
+		c-1.096,0-1.576,1.008-1.664,1.76H250.16z"/>
+	<path style="fill:#2D2D2D;" d="M255.88,114.472l-0.088-0.752h-0.032c-0.336,0.472-0.968,0.888-1.824,0.888
+		c-1.208,0-1.824-0.848-1.824-1.704c0-1.448,1.28-2.232,3.584-2.216v-0.128c0-0.488-0.136-1.384-1.36-1.384
+		c-0.552,0-1.128,0.176-1.552,0.448l-0.248-0.72c0.488-0.312,1.208-0.528,1.96-0.528c1.824,0,2.264,1.24,2.264,2.432v2.232
+		c0,0.52,0.024,1.024,0.104,1.424h-0.984V114.472z M255.72,111.44c-1.184-0.024-2.528,0.184-2.528,1.336
+		c0,0.704,0.472,1.032,1.024,1.032c0.776,0,1.272-0.488,1.44-1c0.04-0.112,0.064-0.24,0.064-0.344V111.44z"/>
+	<path style="fill:#2D2D2D;" d="M258.552,110.376c0-0.704-0.016-1.304-0.056-1.864h0.944l0.04,1.176h0.04
+		c0.272-0.8,0.928-1.304,1.656-1.304c0.12,0,0.2,0.008,0.304,0.032v1.024c-0.112-0.024-0.224-0.032-0.368-0.032
+		c-0.768,0-1.312,0.576-1.456,1.392c-0.024,0.144-0.056,0.312-0.056,0.496v3.176h-1.072v-4.096H258.552z"/>
+	<path style="fill:#2D2D2D;" d="M266.72,114.256c-0.288,0.152-0.912,0.344-1.72,0.344c-1.792,0-2.968-1.216-2.968-3.04
+		c0-1.84,1.264-3.168,3.208-3.168c0.64,0,1.208,0.168,1.504,0.304l-0.248,0.84c-0.264-0.152-0.664-0.28-1.264-0.28
+		c-1.368,0-2.104,1.008-2.104,2.248c0,1.384,0.888,2.232,2.064,2.232c0.616,0,1.024-0.168,1.328-0.296L266.72,114.256z"/>
+	<path style="fill:#2D2D2D;" d="M268.016,105.736h1.08v3.712h0.024c0.176-0.304,0.448-0.576,0.776-0.76
+		c0.312-0.184,0.704-0.304,1.104-0.304c0.808,0,2.08,0.488,2.08,2.544v3.544H272v-3.424c0-0.96-0.352-1.768-1.376-1.768
+		c-0.704,0-1.264,0.488-1.456,1.08c-0.064,0.152-0.08,0.304-0.08,0.52v3.6h-1.08v-8.744H268.016z"/>
+	<rect x="146.312" y="340.304" style="fill:#2D2D2D;" width="219.336" height="8"/>
+</g>
+<g>
+	<rect x="146.312" y="371.6" style="fill:#E0E0E0;" width="219.336" height="8"/>
+	<rect x="146.312" y="387.28" style="fill:#E0E0E0;" width="219.336" height="8"/>
+	<rect x="146.312" y="402.96" style="fill:#E0E0E0;" width="219.336" height="8"/>
+</g>
+<circle style="fill:#FFFFFF;" cx="201.52" cy="212.16" r="17.248"/>
+<g>
+	<path style="fill:#2D2D2D;" d="M200.696,269.496l-16.664-36.128c0,0-17.48,0.232-17.48,16.32s0,19.816,0,19.816
+		S200.816,269.496,200.696,269.496z"/>
+	<path style="fill:#2D2D2D;" d="M202.328,269.496l16.664-36.128c0,0,17.48,0.232,17.48,16.32s0,19.816,0,19.816
+		S202.216,269.496,202.328,269.496z"/>
+</g>
+<polygon style="fill:#8AD5DD;" points="201.512,235.144 191.112,235.144 201.512,258.168 211.92,235.144 "/>
+<g>
+	<path style="fill:#FFFFFF;" d="M313.512,259.488h-50.928c-2.848,0-5.168-2.328-5.168-5.168v-45.248
+		c0-2.848,2.328-5.168,5.168-5.168h50.928c2.848,0,5.168,2.328,5.168,5.168v45.248C318.68,257.16,316.352,259.488,313.512,259.488z"
+		/>
+	<polygon style="fill:#FFFFFF;" points="344.296,259.488 325.872,243.976 325.872,219.416 344.296,203.896 	"/>
+</g>
+</svg>
--- a/src/images/ytGpt.png
+++ b/src/images/ytGpt.png
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <meta name="format-detection" content="telephone=no,address=no">
+  <meta name="apple-mobile-web-app-status-bar-style" content="white">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+  <link rel="apple-touch-icon" href="/static/images/images/dgnomad.png" />
+  <!-- <link rel="apple-touch-icon" href="/static/images/images/youtube.svg" /> -->
+
+  <link
+    rel="icon"
+    sizes="192x192"
+    href="/static/images/images/dgnomad.png"
+    
+
+  />
+  <title>数字游民</title>
+  <meta name="description" content="数字游民">
+  <meta property="og:description" content="数字游民">
+  <meta name="twitter:description" content="数字游民">
+  <script><%= htmlWebpackPlugin.options.script %></script>
+  <!-- 禁止缓存 -->
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
--- a/src/pages/book/book.md
+++ b/src/pages/book/book.md
@@ -0,0 +1,701 @@
+# 前言
+
+## 🚀 数字游民
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fqwfqwff.jpg?imageSlim" title="" alt="fqwfqwff.jpg" width="333">
+
+对于普通人而言,最好的杠杆依然是`媒体`和`代码`  
+
+如今有了AIGC的加持  
+
+以前创作的门槛,已经不再是`门槛`    
+
+数字游民,翻译自`digital nomad`,指的是依靠依靠互联网获取收入,并且像游牧民族一样旅居各个地方的群体
+
+## 目录
+
+- 被动收入:YouTube运营
+
+- 副业:wordpress建站
+
+- 独立开发:sass业务
+
+- 一人公司/分布式团队
+
+- 展望与结束语
+
+本书不是`教人赚钱`的指南,但作为参考,应该可以给你一些启发
+
+持续更新中,未完待续
+
+---
+
+# 远程工作
+
+大多数人成为数字游民,还是依赖一份旱涝保收的`远程工作`
+
+然后经营自己的副业,直到成为主页
+
+![2025-04-03-12-54-51-Hire a Freelance Developer for Programming Jobs _ Fiverr.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-03-12-54-51-Hire%20a%20Freelance%20Developer%20for%20Programming%20Jobs%20_%20Fiverr.png?imageSlim)
+
+以下是海外常用的远程工作平台
+
+- [fiverr](https://go.fiverr.com/visit/?bta=1111508&brand=fiverrmarketplace)
+
+- [upwork](https://www.upwork.com/)
+
+- [remoteok](https://remoteok.com/)
+
+英语和重要,必要的沟通,还是要行
+
+## 谨防欺诈
+
+![afafwff.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/afafwff.jpg?imageSlim)
+
+很多工作机会,并不是真实的,平台也不一定能监管到位
+
+从人力性价比来说,印度的更便宜,有原生的`语言和网络优势`,以及`汇率`
+
+而菲律宾也是`呼叫中心`的核心外包国家
+
+作为一名中国人,在很多业务上,并没有优势,很多活跃都是外贸采购人员
+
+但平台可以帮助我们确认:才是才是需求高的`业务方向`
+
+## 国内平台
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/wegwgweg.jpg?imageSlim" title="" alt="wegwgweg.jpg" width="383">
+
+国内有很多XX社区,在做致力于数字游民的事业
+
+但由于本土众所周知的原因
+
+大多都是套了一层壳,本质还是`劳务中介`和`二房东`的生意
+
+不是创始人不够努力,也不是技术和运营的问题,而是土壤天生不允许发芽
+
+如果寻求远程,可以在某直聘`搜索职位时,加上远程`
+
+有些`开发,客户,运营`是存在远程岗位的
+
+话说,这是一个向企业和用户双方都收费的平台🤣...可以试试
+
+---
+
+# 被动收入:YouTube运营
+
+你可以在 [nomadyt.com](https://nomadyt.com) 阅读,关于youtube运营的电子书
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-03-30-01-40-00-Youtube%E8%BF%90%E8%90%A5%E7%AC%94%E8%AE%B0.png?imageSlim" title="" alt="2025-03-30-01-40-00-Youtube运营笔记.png" width="189">
+
+但是本书,会展示更多运营的细节
+
+比如无人直播,除了`ffmpeg推流`,以及`obs开源软件`之外
+
+如何使用`安卓开发板+采集卡`的方案,模拟移动端直播,权重更高,平台推荐,且防封
+
+除此之外,例如使用`链式代理`,如何选择`静态住宅ip`,也是出海业务的基础
+
+如果没有掌握,一切都是徒劳,会面临0播,限流,甚至封号  
+
+---
+
+# wordpess建站
+
+> 网站已死?网站永生
+
+网站,在国内,似乎是一个很古老的词,因为它是互联网的下等公民
+
+在移动互联网时代,被各种`小程序`或者`快应用`取代
+
+最不济也是用`自研app`,圈地画牢,获取用户的数据
+
+而web网站,或者H5,都是排除在生态之外,用户信任度也较低
+
+> 但如果目光望向海外呢
+
+各种当下火热的AI,都是`网页为先,支持pwa`
+
+如果想要成为成为独立开发者,只需要接入stripe支付即可
+
+各种独立站,电子商务,私域也让各种商家大赚特赚
+
+> wordpress建站
+
+![afwqfqwf.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/afwqfqwf.png?imageSlim)
+
+wordpress是基于php开发的开源建站程序,拥有最丰富的`主题和插件`生态
+
+即便是小白,也能分分钟上线一个网站,可以是:
+
+- 个人博客
+
+- 企业官网
+
+- woocommerce独立站
+
+- 网校/电子书/论坛
+
+- 等等
+
+一夜之间上线网站,全球访问,是一件很简单的事情
+
+如果想要盈利,最简单的就是接入`谷歌的广告`,自动化嵌入
+
+## 一夜之间上线网站
+
+> 购买域名
+
+可以在 [ namesilo](https://www.namesilo.com/?rid=3bd4047mc) 购买域名,也就是类似`google.com`的网址
+
+因为是海外服务商,所以不需要备案
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-08-15-14-Low-Cost%20Domain%20Names%20%26%20Hosting%20from%20%240.99%20_%20NameSilo.png?imageSlim" title="" alt="2025-04-02-08-15-14-Low-Cost Domain Names & Hosting from $0.99 _ NameSilo.png" width="480">
+
+> 购买vps服务器
+
+域名虽然是英文字母, 但是用户访问后,实际是`google.com==>8.8.8.8`,
+
+dns会把网址解析到 服务器的默认`公网ip`地址
+
+因为是海外的厂商,所以也不要备案
+
+在 [vultr](https://www.vultr.com/?ref=8985003) 购买一个vps服务器,后,建议立即用一键脚本部署`宝塔面板`
+
+自带wordpress安装程序
+
+<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-08-18-13-index.tsx%20-%20nomadro.com%20-%20Visual%20Studio%20Code.png?imageSlim" alt="2025-04-02-08-18-13-index.tsx - nomadro.com - Visual Studio Code.png" width="469">
+
+## adsense赚美金
+
+> wordpress插件: [google site kit](https://wordpress.org/plugins/google-site-kit/)
+
+<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/afqfqfqwf.jpg?imageSlim" alt="afqfqfqwf.jpg" width="466">
+
+插件会自动帮你关联`google分析`,与`adsense账户`
+
+当你点击申请后,官方会人工审核网站的`内容和流量`,一般2周,快的次日就有结果
+
+## 拓展其他收益:affiliate
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-09-25-35-images.jpg.png?imageSlim" title="" alt="2025-04-02-09-25-35-images.jpg.png" width="457">
+
+仅仅在wordpress自动放广告,如果不是站群,收益不会太多
+
+ps: 站群:可以基于`k8s,docker`技术,自动批量建站
+
+但大多数人,都是技术小白,远不到玩站群的层次,也没必要
+
+在自己没核心业务:比如无职业资源`律师,医生,销售`也没有商品.产品等背景下
+
+建议采用`affiliate佣金`模式,增加收入,别入
+
+- amazon: 商品佣金 + kindle书籍
+
+- vps服务器: [vultr](https://www.vultr.com/?ref=8985003) 和域名平台: [namesilo](https://www.namesilo.com/?rid=3bd4047mc)
+
+- 金融:[ wise](https://wise.com/invite/amc/xiaoshuangh)钱包 和 [okx](https://okx.com/join/84999861)交易所
+
+- 等等
+
+affiliate marketing的好处是,推广的服务基本都是互联网平台
+
+而且.平台/推广者/用户,三方收益
+
+平台有新客户,新用户有优惠,推广者有提成
+
+---
+
+# 独立开发sass
+
+> web优先,ios app其次
+
+<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fqwfqwfqw.jpg?imageSlim" alt="fqwfqwfqw.jpg" width="323">
+
+web只需要解决`登录`和`支付`2个核心问题,优势就太多了
+
+- 几分钟上线
+
+- 快速迭代更新
+
+- 用户点击进入(短信/文章/聊天框)
+
+大多数人,之所以选择iOS app, 是因为它的生态:
+
+- `推送`,`全球分发`,`云数据`,`身份id认证``支付收款`
+
+但`下载`的成本很高,在测试用户是否具有粘性之前
+
+用web先行测试是一种策略
+
+## 数字游民CNA
+
+如果你了解过数字游民,那么一定会知晓`nomadlist`这个网站
+
+模仿它的特色,我正在尝试开发类似的网站,针对中文用户
+
+目前仍然很简陋,但会持续迭代,可访问: [nomadcna](https://nomadcna.com/)
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-08-38-51-%E6%95%B0%E5%AD%97%E6%B8%B8%E6%B0%91CNA.png?imageSlim" title="" alt="2025-04-02-08-38-51-数字游民CNA.png" width="391">
+
+## 技术栈
+
+在nomadlist的创始人的`MAKER`一书中,作者用着`最古老的jquery和php以及sqlite数据库`,却开发了平均 40k$/m纯利润各种网站,包括 `AI 工具站/电子商务`,其数据都在X上实时更新
+
+其实只需要5$/月的  [vultr](https://www.vultr.com/?ref=8985003) 服务器,就足以支撑业务
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-08-46-57-%40levelsio%20(%40levelsio)%20_%20X.png?imageSlim" title="" alt="2025-04-02-08-46-57-@levelsio (@levelsio) _ X.png" width="427">
+
+本人比较推荐基于js的react生态,它可以满足
+
+- react开发web网站
+
+- chrome插件
+
+- electron开发pc客户端软件
+
+- react native开发iOS app
+
+当然,如果你想开发一个完整的应用,会涉及很多,体验/功能 比如`用户无法感知`的
+
+- 埋点:分析/错误监控
+
+- 多语言 (翻译)
+
+- 加固混淆 (防止逆向渗透)
+
+- pwa (将web进行app化)
+
+- wasm,three.js,webVR (边缘计算能力与3D可视化)
+
+思虑越多,越难以行动,完美主义很致命
+
+即便是一个`hello world`,当它被各个世界的用户,可点击访问时
+
+你就成功了一半,因为它以为,除了`自媒体作品`之外,你有了`创造产品`的能力
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fqwfwqfqwf.png?imageSlim" title="" alt="fqwfwqfqwf.png" width="390">
+
+## 收益: admob广告与内购
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/wqfqwfqwf.png?imageSlim" title="" alt="wqfqwfqwf.png" width="400">
+
+以iOS app为例子,收益的方式有很多
+
+- admob广告
+
+- 购买下载 (一次性买断)
+
+- 内购:订阅制 (月付)
+
+如果不想向用户收费,可以直接接入admob广告,也是google 广告
+
+进一步可以采取pro升级模式,用户付费后,免广告,且提供高级功能
+
+在国内,用户付费意愿较低
+
+如果用户基础大,也可以采取`开屏广告`和`广告位`形式获取获取企业厂商赞助
+
+最理想的模式的是`订阅制`,基于`1000个粉丝`的理论,开发者就可以实现客观的收入了
+
+但风险也是对等的
+
+一旦成功,就会无数团队模仿,利用资金/资源/投放广告,来碾压开发者
+
+如果建立护城河,是一个难题
+
+---
+
+# 地理套利
+
+数字游民最本质的优势在于`地理套利`
+
+![qwfqfwqf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwfqfwqf.jpg?imageSlim)
+
+更详细的优势如下:
+
+- 地理优势:东亚气候温暖,风景唯美,适合旅居
+
+- 生活成本:三四线城市消费水平低,物价便宜
+
+- 汇率差:赚美元,换算成泰铢可以达到1:30,人民币1:7左右
+
+- 当地特产/文化:比如泰国旅游业,印度仿制药,香港金融等等
+
+- 时间差:淡季旅行性价比高,错峰出行,看见不一样的文化
+
+即便是每月1000$/m的收益,也可以过得很舒服惬意,也拥有无限的可能性
+
+## 大理与乌托邦
+
+在中国境内,`大理`是所有裸辞打工人的第一站
+
+逃离钢筋水泥,回归自然田园
+
+![dwqdqwf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/dwqdqwf.jpg?imageSlim)
+
+房租编译,风景怡人,各个XX社区,遍地开花
+
+很多东南亚的客户,也来这里旅行,通过 [ctrip](https://www.trip.com/nomadcna?Allianceid=6238114&SID=193455508&trip_sub1=&trip_sub3=D2700672) 订票,也就是某程英文版
+
+其实`惠州`也值得一试,离广东的`深圳/广州`一线城市距离近
+
+![wgwggg.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/wgwggg.jpg?imageSlim)
+
+房价/物价便宜,气候温暖
+
+乘坐高铁,到附近省份也方便
+
+至于`鹤岗`,个人认为纯粹不值得,生活在南方的人,无法理解北方的酷寒
+
+不知道鹅毛大雪几米深的恐怖,也不知道暖气停供一晚,如何撑得过零下几十度
+
+连救护车开到了医院大门,即便轮胎上了防滑链,都有没法开进去的情况
+
+需要男护士/男医生踩着雪抬进去
+
+当选择一个环境的时候,有时候,气候,是保证一个人生命安全的关键
+
+## 泰国:曼谷与清迈
+
+据nomadlist统计报告,泰国`曼谷`是最受欢迎的数字游民聚集地
+
+![2025-04-03-01-37-27-Nomads.com - Best Places to Live for Digital Nomads (formerly Nomad List).png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-03-01-37-27-Nomads.com%20-%20Best%20Places%20to%20Live%20for%20Digital%20Nomads%20(formerly%20Nomad%20List).png?imageSlim)
+
+其次是`清迈`
+
+而且该国对数字游民,也比较友好,出台了很多`针对性的政策`
+
+但不得不提醒的是,泰国也被列为最危险的国家
+
+- 不禁枪支
+
+- 风月场所合法,比如芭提雅
+
+- 周边国家,存在贩毒与电诈
+
+- 存在人口贩卖和地下奴隶市场
+
+当一个博主从`印度`或者`泰国`回来,用"很安全,我不就是好好的吗?"来解答你的疑惑时
+
+这个人要么愚蠢,要么下贱
+
+`幸存者偏差`的意思是,只有或者的人,才有机会开口说话
+
+那么遭遇危险的人,已无法发生
+
+---
+
+# 多元杠杆
+
+成为一个数字游民,就必须让自己的过程,产生多元的杠杆价值,放大收益
+
+![qfqwffwq.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qfqwffwq.jpg?imageSlim)
+
+这里有个框架,3个关键词,可以套用在任何事物上,如下
+
+- `直播`live
+
+- `社群`互动
+
+- `录制`存档
+
+在框架的基础,我也会解释`副产品`的优势
+
+现在我们举个栗子
+
+假设你是一个开发者,`正在coding编程`,这个如何实现多元化呢?
+
+![QWQWFQWF.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/QWQWFQWF.png?imageSlim)
+
+链路如下:
+
+1. 实时直播,手机=>拍着正在敲键盘的你
+
+2. 交流互动,针对观众的提问(看副屏),进行回答,让业务有实时的反馈
+
+3. OBS后台录屏 (副产品:技术视频教程)
+
+4. 编码本身 (软件产品,ios app,观众可以成为种子用户)
+
+5. Api互动: 根据打赏的礼物,控制`显示器/esp32`进行趣味玩法
+
+6. 橱窗带货:比如桌面炫酷/萌萌的摆件
+
+总结一下,实时编码,不仅让业务有`即时反馈`,也会产生很多`副产品`
+
+增加了收益渠道
+
+## RPA自动化
+
+![qwfqwfqwf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwfqwfqwf.jpg?imageSlim)
+
+前面我们提到了直播,可以实现多元化杠杆,但,它是一个实时同步的过程
+
+那么有没有24小时无人值守,自动化的方案呢?
+
+有,比如
+
+- 基于ffmmpeg/obs直播推流 (录播素材)
+
+- 社媒mitm爬虫:数据分析/自动点赞评论
+
+- 发卡平台: 虚拟资源,卡密网盘发货
+
+- N8N: 平台与流程自动化,积木一样串联工作流
+
+- 群机器人bot: telegram和微信群
+
+- 等等
+
+缺点是最技术的要求较高
+
+---
+
+# 分布式团队
+
+成为一个数字游民,并不意味着一个人完成所有的项目过程
+
+参与或者成立一个分布式团队,进行远程办公,也是必要的
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fqwfqfqwf.jpg?imageSlim" title="" alt="fqwfqfqwf.jpg" width="397">
+
+可以雇佣兼职/外包,或者让用户产生内容 [UGC]
+
+接下来我会推荐`开源`的远程工具
+
+1. 任务看板:`planka`
+
+2. `eliment `(基于martix斜体的聊天工具)
+
+3. 文档wiki/知识库: `docmost`
+
+使用开源的好处在于:`低成本,保护隐私,完全控制,可拓展`
+
+> 任务看板planka
+
+以任务卡片的形式,给成员安排任务
+
+设置子任务/完成时间/上传附件/以及评论@
+
+所有进度一目了然
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-11-11-29-Sample%20Project%20_%20Sample%20Board.png?imageSlim" title="" alt="2025-04-02-11-11-29-Sample Project _ Sample Board.png" width="463">
+
+> eliment
+
+eleliment只是基于martrix协议的一个客户端
+
+目前支持PC/mac/Android/ios/linux全平台
+
+可以聊天/视频语音通话
+
+后台可以进行消息统计/分析,防止商业机密泄露
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-11-14-33-Element%20_%20Secure%20collaboration%20and%20messaging.png?imageSlim" title="" alt="2025-04-02-11-14-33-Element _ Secure collaboration and messaging.png" width="469">
+
+> wiki文档: docmost
+
+它内置编辑器支持 Mermaid、Draw.io 和 Excalidraw 图表工具
+
+可以将团队的文档整理输出
+
+方便成员学习,分享
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwdqwdqwd.png?imageSlim" title="" alt="qwdqwdqwd.png" width="506">
+
+> 如何搭建?
+
+购买  [vultr](https://www.vultr.com/?ref=8985003) 服务器,按照官方提供的`docker镜像`,一键安装
+
+---
+
+# 一人公司
+
+> 数字游民与一人公司区别很大
+
+![qwqwfqwf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwqwfqwf.jpg?imageSlim)
+
+数字游民一般是以`远程工作`为主,本质还是偶雇佣关系,把工位换成了远程旅居
+
+也进行一些`副业`
+
+但一人公司,更偏向于`创业`
+
+经营`自媒体/独立开发/电商`等收益上限比较高的互联网业务
+
+## 基础设备
+
+一人公司,也意味着硬件和软件资产的流程化,比如
+
+- windows办公主机
+
+- 安卓手机:产品测试/社媒运营
+
+- linux服务器:应用部署
+
+<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/1000029229.jpg?imageSlim" alt="1000029229.jpg" width="339">
+
+图示是作者用mini主机+开发板打造的远程操作系统
+
+可以随时随地,`远控/群控`
+
+利用[vultr](https://www.vultr.com/?ref=8985003) 服务器,设置`frp内网穿透`即可,或者`wireguard点对点VPN异地组网`
+
+## 开源部署
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-11-46-55-Uptime%20Kuma%20Status.png?imageSlim" title="" alt="2025-04-02-11-46-55-Uptime Kuma Status.png" width="395">
+
+经营业务,必须准备大量的基础服务来支撑自动化运营,比如
+
+- erp系统: ERPNext
+
+- scrm客服:chatwoot
+
+- 邮件营销:邮件营销
+
+- 项目开发: `禅道`(项目管理) /` gitlab`(代码仓库)/`YAPI`接口文档
+
+- 运维CI/CD:jenkins自动部署/`rancher`容器管理
+
+- 埋点监控: `Sentry`错误监控/`plausible`统计/`Uptime Kuma`服务状态
+
+- 流程自动化`N8N`
+
+- 等等
+
+都是开源免费
+
+- 缺点:需要自己部署,维护
+
+- 优点:省下数以万计的费用
+
+---
+
+# 展望与结束语
+
+![efqwfegwegweg.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/efqwfegwegweg.jpg?imageSlim)
+
+在以上内容,并没有提及2个领域:`跨境电商`和`加密货币`
+
+前者偏向于实体,成本高,链路复杂,市场因政策变化频繁
+
+后者遇到投机主义,一不小心就容易倾家荡产
+
+换个思路,不做卖家,可以做amazon affiliate, 买入闲置,用涨跌来跨越大周期,穿越牛熊
+
+原本只打算写2个小册
+
+- [youtube运营笔记](https://nomadyt.com/)  (free)
+
+- [从零开始,成为数字游民](https://nomadro.com/)  (试读80% +pay)
+
+后续会酌情增加
+
+- [一人公司](https://nomadvps.com/)   (预订)
+
+最初的是打算写技术书籍的~~
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-03-02-14-22-AI%20%E4%B8%8E%20RPA%E8%87%AA%E5%8A%A8%E5%8C%96.png?imageSlim" title="" alt="2025-04-03-02-14-22-AI 与 RPA自动化.png" width="375">
+
+> 不管是生意还是创业,第一原则,先找到`买家`
+
+在某个领域里,你发现了需求,或者有人为你的创造买单,就有收益,然后放大
+
+如果没有调研市场
+
+就默默地闭门造车,结局会很惨
+
+持续更新中.....
+
+---
+
+# 数字游民与一人公司(vip)
+
+`数字游民`更倾向于`远程工作`或者`副业`,用收益来支持`旅居`的生活
+
+当然旅行不是必须的
+
+把`朝九晚五的坐班`抛弃才是核心意义,`身体和时间`成本非常可怕
+
+提示:
+
+- 以下内容均为`付费内容`
+
+- 章节标题会有`(vip)`标识
+
+
+
+---
+
+# 写书(vip)
+
+`写文章`和`写书`完全不是一个概念,即便是万字长文
+
+书的框架更加立体
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-21-11-52-05-book%20-%20Google%20Search.png?imageSlim" title="" alt="2025-04-21-11-52-05-book - Google Search.png" width="221">
+
+你现在看到的`web电子书`,是我用`reactjs`开发的,在此之前,也研究并实践了很多方案
+
+比如:
+
+- 亚马逊`kindle`,即kdp自出版,同步全球
+
+- `BOOKDNA`,中文市场(微信读书/当当图书/豆瓣阅读..),仅调研
+
+- `Docusaurus`:静态站点生成器 / ``github pages`
+
+后来借鉴了`levelsio`的创业哲学,web优先,他的`MAKER`就是一个单页网站,连目录都没有
+
+## 免费阅读,赚佣金
+
+我本人是野生程序猿,无论是前端/后端/运维,还有大火的AI,边缘计算
+
+无论是互联网还是实体商业
+
+都离不开的`水电气`是: `域名`/`vps主机`/以及`ip池子`(静态住宅和动态代理)
+
+白话而言,如果一本书,没有向用户收费
+
+那么你可以借助`水电气`的佣金,让`平台/作者/用户`,实现三赢,也就是offer订阅,也可以说`affiliate佣金`
+
+![fwfwqf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fwfwqf.jpg?imageSlim)
+
+实际案例:
+
+比如针对<<youtube运营笔记>>这本小书,是免费阅读的
+
+但是如果读者想要运营油管,那么必定离不开vps: [vultr服务器](https://www.vultr.com/?ref=8985003)
+
+## 经营你的利基niche
+
+利基*市场*（niche market):指该产品表现出来的许多独特利益有别于其他产品，同时也能得到消费者的认同
+
+自媒体有很多平台,比如X/youtube/reddit等等
+
+但是,平台只是放大器,在没有确定`利基业务`之前,我个人更推荐做`水电气`的模式
+
+> 那么,如何确定业务呢?
+
+比如程序员,可以做
+
+- 知识付费:`编程课`
+
+- 软件脚本开发:IOS app/PC客户端/chro插件
+
+- saas (一般指网站)
+
+具体的案例比如: <<独立开发者手册>>,就能帮助无数ios的开发者闭坑
+
+## 付费阅读
+
+前面说过,本书的网页,支付,都是我自己开发的,好处是
+
+- 不需要经过平台审核
+
+- 不需要与编辑,三对三校
+
+- 不需要isbn出版号
+
+可以实时上线,随时更新,样式自定义
--- a/src/pages/book/index.config.js
+++ b/src/pages/book/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '数字游民'
+}
--- a/src/pages/book/index.scss
+++ b/src/pages/book/index.scss
@@ -0,0 +1,133 @@
+// 在 src/index.scss 中引入 GitHub Markdown 主题
+@import "github-markdown-css/github-markdown.css";
+
+// marktext的换行处理
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre,
+.markdown-body details {
+  margin-bottom: 10px;
+}
+
+.markdown-body li > p {
+  margin-top: 0px;
+}
+
+.book_header_div {
+  width: 100%;
+  height: 80px;
+}
+.book_header {
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  height: 80px;
+  // background-color: aquamarine;
+  // background-color: #f0f5ff;
+  border-bottom: 2px solid #f0f5ff;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .book_header_left {
+    width: 100px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: #69b1ff;
+  }
+  .book_header_middle {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: #69b1ff;
+  }
+  .book_header_right {
+    width: 100px;
+    // background-color: yellow;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: #69b1ff;
+  }
+}
+.Book {
+  padding: 40px;
+
+  .markdown-body {
+    font-size: 30px;
+    // color: #72d572;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    /* 保持图像的纵横比 */
+  }
+
+  .at-drawer__content {
+    .at-list {
+      .at-list__item {
+        font-size: 30px;
+
+        // background-color: aqua;
+        .at-list__item-container {
+          .at-list__item-content {
+          }
+        }
+      }
+    }
+  }
+  .joinSalon {
+    margin-top: 30px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .Book {
+    width: 100%;
+    // height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    // background-color: yellow;
+    .book_left {
+      width: 400px;
+      height: 100%;
+      background-color: red;
+    }
+
+    .markdown-body {
+      width: 100%;
+      max-width: 1400px;
+      font-size: 22px;
+      // color: red;
+      // background-color: #72d572;
+    }
+
+    .book_right {
+      width: 400px;
+      height: 100%;
+      background-color: greenyellow;
+    }
+
+    .joinSalon {
+      // width: 100%;
+      // height: 100px;
+      display: none;
+      // background-color: yellow;
+    }
+  }
+}
--- a/src/pages/book/index.tsx
+++ b/src/pages/book/index.tsx
@@ -0,0 +1,247 @@
+// @ts-nocheck
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtButton, AtInput, AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";
+import { AtTag } from "taro-ui";
+import { AtList, AtListItem } from "taro-ui";
+import { AtForm, AtMessage, AtDrawer, AtIcon } from "taro-ui";
+import { marked } from "marked";
+import infoText from "./info.md";
+import bookText from "./book.md";
+// import youtubeIco from "../../images/youtube.ico";
+
+marked.setOptions({
+  breaks: true, // 是否回车换行
+  gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
+  // pedantic: true, //严格模式
+  // highlight(code:any, lang:any) {
+  //   //  语法高亮
+  //   let val = code;
+  //   if (lang) {
+  //     val = hljs.highlight(lang, code).value;
+  //   } else {
+  //     val = hljs.highlightAuto(code).value;
+  //   }
+  //   return val;
+  // },
+});
+
+// const renderer = new marked.Renderer();
+// // 使用拓展
+// marked.use({ renderer });
+
+// export default class Index extends Component {
+const Book = () => {
+  const [book, setbook] = useState(window.localStorage.getItem("book"));
+  const [markText, setmarkText] = useState(book == 1 ? bookText : infoText);
+  const [isWeChat, setisWeChat] = useState(false);
+  const [show, setshow] = useState(false);
+
+  const [headers, setHeaders] = useState([]); // 存储所有 <h1> 的内容
+  const contentRef = useRef(null); // 用于获取渲染后的 DOM
+
+  useEffect(() => {
+    //  window.localStorage.removeItem("book");
+    isWeChatFun();
+  }, []);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      const h1Elements = contentRef.current.querySelectorAll("h1");
+      const h2Elements = contentRef.current.querySelectorAll("h2");
+
+      const h1Texts = Array.from(h1Elements).map((el) => el.textContent);
+      const h2Texts = Array.from(h2Elements).map((el) => el.textContent);
+
+      setHeaders(h1Texts);
+      // console.log("获取到的 H1 标题:"); // 控制台查看
+      console.log("获取到的 H1 标题:", h1Texts); // 控制台查看
+      console.log("获取到的 H2 标题:", h2Texts); // 控制台查看
+    }
+  }, [markText]); // 监听 HTML 内容变化
+
+  const handleJump = (text) => {
+    const h1Elements = contentRef.current.querySelectorAll("h1");
+    for (let h1 of h1Elements) {
+      if (h1.textContent.trim() === text.trim()) {
+        // if (h1.textContent === text) {
+        h1.scrollIntoView({ behavior: "smooth" });
+        break;
+      }
+    }
+  };
+
+  // const handleClick = (value) => {
+  //   // 跳转到目的页面，在当前页面打开
+  //   Taro.navigateTo({
+  //     url: "/pages/index/index",
+  //   });
+  // };
+
+  // 是否在微信客户端
+  const isWeChatFun = () => {
+    var ua = navigator.userAgent.toLowerCase();
+    if (ua.indexOf("micromessenger") != -1) {
+      setisWeChat(true);
+      return true;
+    } else {
+      setisWeChat(false);
+      return false;
+    }
+  };
+
+  const payh5 = (type, total_fee = 1000) => {
+    // console.log("111");
+    Taro.request({
+      method: "POST",
+      url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
+      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
+
+      data: {
+        callback_url: window.location.href,
+        openid: window.localStorage.getItem("openid"),
+        total_fee: total_fee, // 金额,单位:分
+        type: type, //订单类型 book/meetup/video/vip
+      },
+      header: {
+        "content-type": "application/json", // 默认值
+      },
+      success: function (res) {
+        console.log(res.data);
+        // window.alert(res.data.jsapi);
+        WeixinJSBridge.invoke(
+          "getBrandWCPayRequest",
+          {
+            // 以下6个支付参数通过payjs的jsapi接口获取
+            // appId: "wxc5205a653b0259bf",
+            // timeStamp: "1701401644",
+            // nonceStr: "KhOYB0wFV6j9qyQK",
+            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
+            // signType: "MD5",
+            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
+            ...(res?.data?.jsapi ?? {}),
+          },
+          function (res) {
+            // 支付成功
+            if (res.err_msg == "get_brand_wcpay_request:ok") {
+              window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
+              WeixinJSBridge.call("closeWindow");
+            }
+          }
+        );
+      },
+    });
+  };
+
+  return (
+    <>
+      <View className="book_header_div"></View>
+      <View className="book_header">
+        <View
+          className="book_header_left"
+          onClick={() => {
+            Taro.redirectTo({
+              url: `/`,
+            });
+            // Taro.navigateBack({
+            //   delta: 1, // 表示返回的页面数，默认是 1，表示返回上一页
+            // });
+          }}
+        >
+          <AtIcon value="chevron-left"></AtIcon>
+        </View>
+        <View className="book_header_middle">{`📗 数字游民`}</View>
+        <View
+          className="book_header_right"
+          onClick={() => {
+            setshow(!show);
+          }}
+        >
+          <AtIcon value="bullet-list"></AtIcon>
+        </View>
+      </View>
+      <View className="Book">
+        <View
+          ref={contentRef}
+          className="markdown-body" // 添加 GitHub Markdown 主题类
+          dangerouslySetInnerHTML={{
+            // __html: marked(markText),
+            __html: marked(book == 1 ? bookText : infoText),
+          }}
+        ></View>
+
+        <AtDrawer
+          className="book_AtDrawer"
+          show={show}
+          mask
+          items={headers}
+          onItemClick={(index) => {
+            handleJump(headers[index]);
+          }}
+          onClose={() => {
+            setshow(false);
+          }}
+        >
+          <View className="drawer-item"></View>
+          {/* <View className="drawer-item">如果items没有数据就会展示children</View> */}
+          {/* <View className="drawer-item">
+          这是自定义内容 <AtIcon value="home" size="20" />
+        </View> */}
+        </AtDrawer>
+
+        {/* 判断有没有wxid */}
+        {book !=1 ? (
+          <AtButton
+            type="primary"
+            size="normal"
+            className="joinSalon"
+            onClick={() => {
+              if (book == 1) {
+                return false;
+              } else {
+                if (!!isWeChat) {
+                  // 19.8元
+                  payh5("book", 1980);
+                } else {
+                  window.location.href = `https://mp.weixin.qq.com/s/GBU3THKaXRRkdpZXH_18jw`;
+                }
+              }
+            }}
+          >
+            {`阅读更多`}
+          </AtButton>
+        ) : <span style={{color:'green'}}>持续更新中....</span>}
+
+        {/* <AtButton
+          type="primary"
+          size="normal"
+          className="joinSalon"
+          onClick={() => {
+            if (book == 1) {
+              return false;
+            } else {
+              if (!!isWeChat) {
+                // 198元
+                payh5("group", 29800);
+              } else {
+                window.location.href = `https://mp.weixin.qq.com/s/GBU3THKaXRRkdpZXH_18jw`;
+              }
+            }
+          }}
+        >
+          {`游民社群`}
+        </AtButton> */}
+      </View>
+    </>
+  );
+};
+
+export default Book;
--- a/src/pages/book/info.md
+++ b/src/pages/book/info.md
@@ -0,0 +1,609 @@
+# 前言
+
+## 🚀 数字游民
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fqwfqwff.jpg?imageSlim" title="" alt="fqwfqwff.jpg" width="333">
+
+对于普通人而言,最好的杠杆依然是`媒体`和`代码`  
+
+如今有了AIGC的加持  
+
+以前创作的门槛,已经不再是`门槛`    
+
+数字游民,翻译自`digital nomad`,指的是依靠依靠互联网获取收入,并且像游牧民族一样旅居各个地方的群体
+
+## 目录
+
+- 被动收入:YouTube运营
+
+- 副业:wordpress建站
+
+- 独立开发:sass业务
+
+- 一人公司/分布式团队
+
+- 展望与结束语
+
+本书不是`教人赚钱`的指南,但作为参考,应该可以给你一些启发
+
+持续更新中,未完待续
+
+---
+
+# 远程工作
+
+大多数人成为数字游民,还是依赖一份旱涝保收的`远程工作`
+
+然后经营自己的副业,直到成为主页
+
+![2025-04-03-12-54-51-Hire a Freelance Developer for Programming Jobs _ Fiverr.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-03-12-54-51-Hire%20a%20Freelance%20Developer%20for%20Programming%20Jobs%20_%20Fiverr.png?imageSlim)
+
+以下是海外常用的远程工作平台
+
+- [fiverr](https://go.fiverr.com/visit/?bta=1111508&brand=fiverrmarketplace)
+
+- [upwork](https://www.upwork.com/)
+
+- [remoteok](https://remoteok.com/)
+
+英语和重要,必要的沟通,还是要行
+
+## 谨防欺诈
+
+![afafwff.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/afafwff.jpg?imageSlim)
+
+很多工作机会,并不是真实的,平台也不一定能监管到位
+
+从人力性价比来说,印度的更便宜,有原生的`语言和网络优势`,以及`汇率`
+
+而菲律宾也是`呼叫中心`的核心外包国家
+
+作为一名中国人,在很多业务上,并没有优势,很多活跃都是外贸采购人员
+
+但平台可以帮助我们确认:才是才是需求高的`业务方向`
+
+## 国内平台
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/wegwgweg.jpg?imageSlim" title="" alt="wegwgweg.jpg" width="383">
+
+国内有很多XX社区,在做致力于数字游民的事业
+
+但由于本土众所周知的原因
+
+大多都是套了一层壳,本质还是`劳务中介`和`二房东`的生意
+
+不是创始人不够努力,也不是技术和运营的问题,而是土壤天生不允许发芽
+
+如果寻求远程,可以在某直聘`搜索职位时,加上远程`
+
+有些`开发,客户,运营`是存在远程岗位的
+
+话说,这是一个向企业和用户双方都收费的平台🤣...可以试试
+
+---
+
+# 被动收入:YouTube运营
+
+你可以在 [nomadyt.com](https://nomadyt.com) 阅读,关于youtube运营的电子书
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-03-30-01-40-00-Youtube%E8%BF%90%E8%90%A5%E7%AC%94%E8%AE%B0.png?imageSlim" title="" alt="2025-03-30-01-40-00-Youtube运营笔记.png" width="189">
+
+但是本书,会展示更多运营的细节
+
+比如无人直播,除了`ffmpeg推流`,以及`obs开源软件`之外
+
+如何使用`安卓开发板+采集卡`的方案,模拟移动端直播,权重更高,平台推荐,且防封
+
+除此之外,例如使用`链式代理`,如何选择`静态住宅ip`,也是出海业务的基础
+
+如果没有掌握,一切都是徒劳,会面临0播,限流,甚至封号  
+
+---
+
+# wordpess建站
+
+> 网站已死?网站永生
+
+网站,在国内,似乎是一个很古老的词,因为它是互联网的下等公民
+
+在移动互联网时代,被各种`小程序`或者`快应用`取代
+
+最不济也是用`自研app`,圈地画牢,获取用户的数据
+
+而web网站,或者H5,都是排除在生态之外,用户信任度也较低
+
+> 但如果目光望向海外呢
+
+各种当下火热的AI,都是`网页为先,支持pwa`
+
+如果想要成为成为独立开发者,只需要接入stripe支付即可
+
+各种独立站,电子商务,私域也让各种商家大赚特赚
+
+> wordpress建站
+
+![afwqfqwf.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/afwqfqwf.png?imageSlim)
+
+wordpress是基于php开发的开源建站程序,拥有最丰富的`主题和插件`生态
+
+即便是小白,也能分分钟上线一个网站,可以是:
+
+- 个人博客
+
+- 企业官网
+
+- woocommerce独立站
+
+- 网校/电子书/论坛
+
+- 等等
+
+一夜之间上线网站,全球访问,是一件很简单的事情
+
+如果想要盈利,最简单的就是接入`谷歌的广告`,自动化嵌入
+
+## 一夜之间上线网站
+
+> 购买域名
+
+可以在 [ namesilo](https://www.namesilo.com/?rid=3bd4047mc) 购买域名,也就是类似`google.com`的网址
+
+因为是海外服务商,所以不需要备案
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-08-15-14-Low-Cost%20Domain%20Names%20%26%20Hosting%20from%20%240.99%20_%20NameSilo.png?imageSlim" title="" alt="2025-04-02-08-15-14-Low-Cost Domain Names & Hosting from $0.99 _ NameSilo.png" width="480">
+
+> 购买vps服务器
+
+域名虽然是英文字母, 但是用户访问后,实际是`google.com==>8.8.8.8`,
+
+dns会把网址解析到 服务器的默认`公网ip`地址
+
+因为是海外的厂商,所以也不要备案
+
+在 [vultr](https://www.vultr.com/?ref=8985003) 购买一个vps服务器,后,建议立即用一键脚本部署`宝塔面板`
+
+自带wordpress安装程序
+
+<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-08-18-13-index.tsx%20-%20nomadro.com%20-%20Visual%20Studio%20Code.png?imageSlim" alt="2025-04-02-08-18-13-index.tsx - nomadro.com - Visual Studio Code.png" width="469">
+
+## adsense赚美金
+
+> wordpress插件: [google site kit](https://wordpress.org/plugins/google-site-kit/)
+
+<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/afqfqfqwf.jpg?imageSlim" alt="afqfqfqwf.jpg" width="466">
+
+插件会自动帮你关联`google分析`,与`adsense账户`
+
+当你点击申请后,官方会人工审核网站的`内容和流量`,一般2周,快的次日就有结果
+
+## 拓展其他收益:affiliate
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-09-25-35-images.jpg.png?imageSlim" title="" alt="2025-04-02-09-25-35-images.jpg.png" width="457">
+
+仅仅在wordpress自动放广告,如果不是站群,收益不会太多
+
+ps: 站群:可以基于`k8s,docker`技术,自动批量建站
+
+但大多数人,都是技术小白,远不到玩站群的层次,也没必要
+
+在自己没核心业务:比如无职业资源`律师,医生,销售`也没有商品.产品等背景下
+
+建议采用`affiliate佣金`模式,增加收入,别入
+
+- amazon: 商品佣金 + kindle书籍
+
+- vps服务器: [vultr](https://www.vultr.com/?ref=8985003) 和域名平台: [namesilo](https://www.namesilo.com/?rid=3bd4047mc)
+
+- 金融:[ wise](https://wise.com/invite/amc/xiaoshuangh)钱包 和 [okx](https://okx.com/join/84999861)交易所
+
+- 等等
+
+affiliate marketing的好处是,推广的服务基本都是互联网平台
+
+而且.平台/推广者/用户,三方收益
+
+平台有新客户,新用户有优惠,推广者有提成
+
+---
+
+# 独立开发sass
+
+> web优先,ios app其次
+
+<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fqwfqwfqw.jpg?imageSlim" alt="fqwfqwfqw.jpg" width="323">
+
+web只需要解决`登录`和`支付`2个核心问题,优势就太多了
+
+- 几分钟上线
+
+- 快速迭代更新
+
+- 用户点击进入(短信/文章/聊天框)
+
+大多数人,之所以选择iOS app, 是因为它的生态:
+
+- `推送`,`全球分发`,`云数据`,`身份id认证``支付收款`
+
+但`下载`的成本很高,在测试用户是否具有粘性之前
+
+用web先行测试是一种策略
+
+## 数字游民CNA
+
+如果你了解过数字游民,那么一定会知晓`nomadlist`这个网站
+
+模仿它的特色,我正在尝试开发类似的网站,针对中文用户
+
+目前仍然很简陋,但会持续迭代,可访问: [nomadcna](https://nomadcna.com/)
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-08-38-51-%E6%95%B0%E5%AD%97%E6%B8%B8%E6%B0%91CNA.png?imageSlim" title="" alt="2025-04-02-08-38-51-数字游民CNA.png" width="391">
+
+## 技术栈
+
+在nomadlist的创始人的`MAKER`一书中,作者用着`最古老的jquery和php以及sqlite数据库`,却开发了平均 40k$/m纯利润各种网站,包括 `AI 工具站/电子商务`,其数据都在X上实时更新
+
+其实只需要5$/月的  [vultr](https://www.vultr.com/?ref=8985003) 服务器,就足以支撑业务
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-08-46-57-%40levelsio%20(%40levelsio)%20_%20X.png?imageSlim" title="" alt="2025-04-02-08-46-57-@levelsio (@levelsio) _ X.png" width="427">
+
+本人比较推荐基于js的react生态,它可以满足
+
+- react开发web网站
+
+- chrome插件
+
+- electron开发pc客户端软件
+
+- react native开发iOS app
+
+当然,如果你想开发一个完整的应用,会涉及很多,体验/功能 比如`用户无法感知`的
+
+- 埋点:分析/错误监控
+
+- 多语言 (翻译)
+
+- 加固混淆 (防止逆向渗透)
+
+- pwa (将web进行app化)
+
+- wasm,three.js,webVR (边缘计算能力与3D可视化)
+
+思虑越多,越难以行动,完美主义很致命
+
+即便是一个`hello world`,当它被各个世界的用户,可点击访问时
+
+你就成功了一半,因为它以为,除了`自媒体作品`之外,你有了`创造产品`的能力
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fqwfwqfqwf.png?imageSlim" title="" alt="fqwfwqfqwf.png" width="390">
+
+## 收益: admob广告与内购
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/wqfqwfqwf.png?imageSlim" title="" alt="wqfqwfqwf.png" width="400">
+
+以iOS app为例子,收益的方式有很多
+
+- admob广告
+
+- 购买下载 (一次性买断)
+
+- 内购:订阅制 (月付)
+
+如果不想向用户收费,可以直接接入admob广告,也是google 广告
+
+进一步可以采取pro升级模式,用户付费后,免广告,且提供高级功能
+
+在国内,用户付费意愿较低
+
+如果用户基础大,也可以采取`开屏广告`和`广告位`形式获取获取企业厂商赞助
+
+最理想的模式的是`订阅制`,基于`1000个粉丝`的理论,开发者就可以实现客观的收入了
+
+但风险也是对等的
+
+一旦成功,就会无数团队模仿,利用资金/资源/投放广告,来碾压开发者
+
+如果建立护城河,是一个难题
+
+---
+
+# 地理套利
+
+数字游民最本质的优势在于`地理套利`
+
+![qwfqfwqf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwfqfwqf.jpg?imageSlim)
+
+更详细的优势如下:
+
+- 地理优势:东亚气候温暖,风景唯美,适合旅居
+
+- 生活成本:三四线城市消费水平低,物价便宜
+
+- 汇率差:赚美元,换算成泰铢可以达到1:30,人民币1:7左右
+
+- 当地特产/文化:比如泰国旅游业,印度仿制药,香港金融等等
+
+- 时间差:淡季旅行性价比高,错峰出行,看见不一样的文化
+
+即便是每月1000$/m的收益,也可以过得很舒服惬意,也拥有无限的可能性
+
+## 大理与乌托邦
+
+在中国境内,`大理`是所有裸辞打工人的第一站
+
+逃离钢筋水泥,回归自然田园
+
+![dwqdqwf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/dwqdqwf.jpg?imageSlim)
+
+房租编译,风景怡人,各个XX社区,遍地开花
+
+很多东南亚的客户,也来这里旅行,通过 [ctrip](https://www.trip.com/nomadcna?Allianceid=6238114&SID=193455508&trip_sub1=&trip_sub3=D2700672) 订票,也就是某程英文版
+
+其实`惠州`也值得一试,离广东的`深圳/广州`一线城市距离近
+
+![wgwggg.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/wgwggg.jpg?imageSlim)
+
+房价/物价便宜,气候温暖
+
+乘坐高铁,到附近省份也方便
+
+至于`鹤岗`,个人认为纯粹不值得,生活在南方的人,无法理解北方的酷寒
+
+不知道鹅毛大雪几米深的恐怖,也不知道暖气停供一晚,如何撑得过零下几十度
+
+连救护车开到了医院大门,即便轮胎上了防滑链,都有没法开进去的情况
+
+需要男护士/男医生踩着雪抬进去
+
+当选择一个环境的时候,有时候,气候,是保证一个人生命安全的关键
+
+## 泰国:曼谷与清迈
+
+据nomadlist统计报告,泰国`曼谷`是最受欢迎的数字游民聚集地
+
+![2025-04-03-01-37-27-Nomads.com - Best Places to Live for Digital Nomads (formerly Nomad List).png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-03-01-37-27-Nomads.com%20-%20Best%20Places%20to%20Live%20for%20Digital%20Nomads%20(formerly%20Nomad%20List).png?imageSlim)
+
+其次是`清迈`
+
+而且该国对数字游民,也比较友好,出台了很多`针对性的政策`
+
+但不得不提醒的是,泰国也被列为最危险的国家
+
+- 不禁枪支
+
+- 风月场所合法,比如芭提雅
+
+- 周边国家,存在贩毒与电诈
+
+- 存在人口贩卖和地下奴隶市场
+
+当一个博主从`印度`或者`泰国`回来,用"很安全,我不就是好好的吗?"来解答你的疑惑时
+
+这个人要么愚蠢,要么下贱
+
+`幸存者偏差`的意思是,只有或者的人,才有机会开口说话
+
+那么遭遇危险的人,已无法发生
+
+---
+
+# 多元杠杆
+
+成为一个数字游民,就必须让自己的过程,产生多元的杠杆价值,放大收益
+
+![qfqwffwq.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qfqwffwq.jpg?imageSlim)
+
+这里有个框架,3个关键词,可以套用在任何事物上,如下
+
+- `直播`live
+
+- `社群`互动
+
+- `录制`存档
+
+在框架的基础,我也会解释`副产品`的优势
+
+现在我们举个栗子
+
+假设你是一个开发者,`正在coding编程`,这个如何实现多元化呢?
+
+![QWQWFQWF.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/QWQWFQWF.png?imageSlim)
+
+链路如下:
+
+1. 实时直播,手机=>拍着正在敲键盘的你
+
+2. 交流互动,针对观众的提问(看副屏),进行回答,让业务有实时的反馈
+
+3. OBS后台录屏 (副产品:技术视频教程)
+
+4. 编码本身 (软件产品,ios app,观众可以成为种子用户)
+
+5. Api互动: 根据打赏的礼物,控制`显示器/esp32`进行趣味玩法
+
+6. 橱窗带货:比如桌面炫酷/萌萌的摆件
+
+总结一下,实时编码,不仅让业务有`即时反馈`,也会产生很多`副产品`
+
+增加了收益渠道
+
+## RPA自动化
+
+![qwfqwfqwf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwfqwfqwf.jpg?imageSlim)
+
+前面我们提到了直播,可以实现多元化杠杆,但,它是一个实时同步的过程
+
+那么有没有24小时无人值守,自动化的方案呢?
+
+有,比如
+
+- 基于ffmmpeg/obs直播推流 (录播素材)
+
+- 社媒mitm爬虫:数据分析/自动点赞评论
+
+- 发卡平台: 虚拟资源,卡密网盘发货
+
+- N8N: 平台与流程自动化,积木一样串联工作流
+
+- 群机器人bot: telegram和微信群
+
+- 等等
+
+缺点是最技术的要求较高
+
+---
+
+# 分布式团队
+
+成为一个数字游民,并不意味着一个人完成所有的项目过程
+
+参与或者成立一个分布式团队,进行远程办公,也是必要的
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fqwfqfqwf.jpg?imageSlim" title="" alt="fqwfqfqwf.jpg" width="397">
+
+可以雇佣兼职/外包,或者让用户产生内容 [UGC]
+
+接下来我会推荐`开源`的远程工具
+
+1. 任务看板:`planka`
+
+2. `eliment `(基于martix斜体的聊天工具)
+
+3. 文档wiki/知识库: `docmost`
+
+使用开源的好处在于:`低成本,保护隐私,完全控制,可拓展`
+
+> 任务看板planka
+
+以任务卡片的形式,给成员安排任务
+
+设置子任务/完成时间/上传附件/以及评论@
+
+所有进度一目了然
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-11-11-29-Sample%20Project%20_%20Sample%20Board.png?imageSlim" title="" alt="2025-04-02-11-11-29-Sample Project _ Sample Board.png" width="463">
+
+> eliment
+
+eleliment只是基于martrix协议的一个客户端
+
+目前支持PC/mac/Android/ios/linux全平台
+
+可以聊天/视频语音通话
+
+后台可以进行消息统计/分析,防止商业机密泄露
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-11-14-33-Element%20_%20Secure%20collaboration%20and%20messaging.png?imageSlim" title="" alt="2025-04-02-11-14-33-Element _ Secure collaboration and messaging.png" width="469">
+
+> wiki文档: docmost
+
+它内置编辑器支持 Mermaid、Draw.io 和 Excalidraw 图表工具
+
+可以将团队的文档整理输出
+
+方便成员学习,分享
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwdqwdqwd.png?imageSlim" title="" alt="qwdqwdqwd.png" width="506">
+
+> 如何搭建?
+
+购买  [vultr](https://www.vultr.com/?ref=8985003) 服务器,按照官方提供的`docker镜像`,一键安装
+
+---
+
+# 一人公司
+
+> 数字游民与一人公司区别很大
+
+![qwqwfqwf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwqwfqwf.jpg?imageSlim)
+
+数字游民一般是以`远程工作`为主,本质还是偶雇佣关系,把工位换成了远程旅居
+
+也进行一些`副业`
+
+但一人公司,更偏向于`创业`
+
+经营`自媒体/独立开发/电商`等收益上限比较高的互联网业务
+
+## 基础设备
+
+一人公司,也意味着硬件和软件资产的流程化,比如
+
+- windows办公主机
+
+- 安卓手机:产品测试/社媒运营
+
+- linux服务器:应用部署
+
+<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/1000029229.jpg?imageSlim" alt="1000029229.jpg" width="339">
+
+图示是作者用mini主机+开发板打造的远程操作系统
+
+可以随时随地,`远控/群控`
+
+利用[vultr](https://www.vultr.com/?ref=8985003) 服务器,设置`frp内网穿透`即可,或者`wireguard点对点VPN异地组网`
+
+## 开源部署
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-11-46-55-Uptime%20Kuma%20Status.png?imageSlim" title="" alt="2025-04-02-11-46-55-Uptime Kuma Status.png" width="395">
+
+经营业务,必须准备大量的基础服务来支撑自动化运营,比如
+
+- erp系统: ERPNext
+
+- scrm客服:chatwoot
+
+- 邮件营销:邮件营销
+
+- 项目开发: `禅道`(项目管理) /` gitlab`(代码仓库)/`YAPI`接口文档
+
+- 运维CI/CD:jenkins自动部署/`rancher`容器管理
+
+- 埋点监控: `Sentry`错误监控/`plausible`统计/`Uptime Kuma`服务状态
+
+- 流程自动化`N8N`
+
+- 等等
+
+都是开源免费
+
+- 缺点:需要自己部署,维护
+
+- 优点:省下数以万计的费用
+
+---
+
+# 展望与结束语
+
+![efqwfegwegweg.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/efqwfegwegweg.jpg?imageSlim)
+
+在以上内容,并没有提及2个领域:`跨境电商`和`加密货币`
+
+前者偏向于实体,成本高,链路复杂,市场因政策变化频繁
+
+后者遇到投机主义,一不小心就容易倾家荡产
+
+换个思路,不做卖家,可以做amazon affiliate, 买入闲置,用涨跌来跨越大周期,穿越牛熊
+
+原本只打算写2个小册
+
+- [youtube运营笔记](https://nomadyt.com/)  (free)
+
+- [从零开始,成为数字游民](https://nomadro.com/)  (试读80% +pay)
+
+后续会酌情增加
+
+- [一人公司](https://nomadvps.com/)   (预订)
+
+最初的是打算写技术书籍的~~
+
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-03-02-14-22-AI%20%E4%B8%8E%20RPA%E8%87%AA%E5%8A%A8%E5%8C%96.png?imageSlim" title="" alt="2025-04-03-02-14-22-AI 与 RPA自动化.png" width="375">
+
+> 不管是生意还是创业,第一原则,先找到`买家`
+
+在某个领域里,你发现了需求,或者有人为你的创造买单,就有收益,然后放大
+
+如果没有调研市场
+
+就默默地闭门造车,结局会很惨
+
+持续更新中.....
--- a/src/pages/group/index.config.js
+++ b/src/pages/group/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '加入微信群'
+}
--- a/src/pages/group/index.scss
+++ b/src/pages/group/index.scss
@@ -0,0 +1,13 @@
+.group{
+    padding: 40px;
+
+    .formCode{
+        display: flex;
+        flex-direction: row;
+        .codeBtn{
+            background-color: aquamarine;
+            // height: 80px;
+            // color: red;
+        }
+    }
+}
--- a/src/pages/group/index.tsx
+++ b/src/pages/group/index.tsx
@@ -0,0 +1,130 @@
+// @ts-nocheck
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtButton, AtInput, AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";
+import { AtTag } from "taro-ui";
+import { AtList, AtListItem } from "taro-ui";
+import { AtForm, AtMessage } from "taro-ui";
+
+// export default class Index extends Component {
+const Group = () => {
+  const [current, setcurrent] = useState(2);
+  const [wxid, setwxid] = useState(null);
+  const [phoneNum, setphoneNum] = useState(null);
+  const [vCode, setvCode] = useState(null);
+  const [waitTime, setWaitTime] = useState(0); // 等待秒数
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false); // 按钮是否禁用
+
+  useEffect(() => {}, []);
+
+  const handleClick = (value) => {
+    // 跳转到目的页面，在当前页面打开
+    Taro.navigateTo({
+      url: "/pages/index/index",
+    });
+  };
+
+  const startTimer = () => {
+    setIsButtonDisabled(true);
+    let localWaitTime = 60; // 使用局部变量
+
+    // 更新状态的函数
+    const updateTime = () => {
+      if (localWaitTime <= 0) {
+        clearInterval(timer);
+        setIsButtonDisabled(false);
+        setWaitTime(0);
+      } else {
+        setWaitTime(localWaitTime);
+        localWaitTime -= 1;
+      }
+    };
+
+    // 设定计时器
+    const timer = setInterval(updateTime, 1000);
+    // 初始调用
+    updateTime();
+  };
+
+  const validatePhoneNumber=(phoneNum) =>{
+    // 检查是否为11位数字
+    const phoneRegex = /^[0-9]{11}$/;
+    return phoneRegex.test(phoneNum);
+  }
+
+
+  return (
+    <View className="group">
+      <AtForm
+        onSubmit={(event) => {
+          console.log("onSubmit-event--", event[0]?.detail?.value);
+        }}
+        onReset={(event) => {
+          // 重置数据
+        }}
+      >
+        <AtInput
+          name="phoneNum"
+          border={false}
+          title="手机号"
+          type="phone"
+          placeholder="请输入"
+          value={phoneNum}
+          disabled={isButtonDisabled}
+          onChange={(value) => {
+            console.log("value", value);
+            setphoneNum(value);
+          }}
+        />
+        <View className="formCode">
+          <AtInput
+            name="vCode"
+            title="验证码"
+            type="number"
+            placeholder="请输入4位数字"
+            
+            value={vCode}
+            onChange={(value) => {
+              setvCode(value);
+            }}
+          />
+          <AtButton
+            className="codeBtn"
+            onClick={() => {
+              if (!!phoneNum & !!validatePhoneNumber(phoneNum)) {
+                // 提交手机数据
+                setIsButtonDisabled(true);
+                startTimer(); // 开始防抖计时
+              } else {
+                Taro.atMessage({
+                  message: "请检查手机号",
+                  type: `warning`,
+                });
+              }
+            }}
+            // type="primary"
+            disabled={isButtonDisabled}
+          >
+            {isButtonDisabled ? `${waitTime} 秒` : "获取"}
+          </AtButton>
+        </View>
+
+        <AtButton formType="submit" type="primary">
+          {"提交"}
+        </AtButton>
+      </AtForm>
+
+      <AtMessage />
+    </View>
+  );
+};
+
+export default Group;
--- a/src/pages/index/index.config.js
+++ b/src/pages/index/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '数字游民'
+}
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -0,0 +1,470 @@
+import { Component } from "react";
+import Taro from "@tarojs/taro";
+import { View, Text, Image, Button } from "@tarojs/components";
+import "./index.scss";
+import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import { AtButton } from "taro-ui";
+import { AtSearchBar } from "taro-ui";
+import { Picker } from "@tarojs/components";
+import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
+import {
+  AtModal,
+  AtModalHeader,
+  AtModalContent,
+  AtModalAction,
+  AtAvatar,
+  AtAccordion,
+} from "taro-ui";
+import { AtToast } from "taro-ui";
+import { AtIcon } from "taro-ui";
+import { VIEW } from "@tarojs/runtime";
+import "animate.css";
+import touxiang from "../../images/touxiang.png";
+import cat from "../../images/cat.jpg";
+import girl from "../../images/girl.jpg";
+
+import emoji from "../../images/emoji.png";
+import phone from "../../images/phone.png";
+// import robot from "../../images/robot.png";
+import nomad from "../../images/nomad.png";
+// import book from "../../images/book.png";
+import qrcode from "../../images/qrcode.png";
+
+import meetup from "../../images/meetup.jpg";
+import bookqr from "../../images/bookqr.jpg";
+import loft from "../../images/loft.png";
+import AIGC from "../../images/AIGC.png";
+import robot192 from "../../images/robot192.png";
+import youtube from "../../images/youtube.svg";
+import ssh from "../../images/ssh.svg";
+import robot from "../../images/robot.svg";
+import host from "../../images/host.svg";
+import ytGpt from "../../images/ytGpt.png";
+
+import demo from "../../images/demo.svg";
+import AI from "../../images/AI.png";
+import nomadro from "../../images/nomadro.png";
+import code from "../../images/code.svg";
+import laptop from "../../images/laptop.svg";
+import travel from "../../images/travel.svg";
+import group from "../../images/group.svg";
+import book from "../../images/book.svg";
+import youtubesvg from "../../images/youtube.svg";
+// export default class Index extends Component {
+const Index = () => {
+  const [current, setcurrent] = useState(0);
+  const [openId, setopenId] = useState(null);
+  const [wxid, setwxid] = useState(null);
+  const [userInfo, setuserInfo] = useState({});
+
+  const [open, setopen] = useState(false);
+  const [referer, setreferer] = useState(window.document.referrer);
+
+  const [isOpened, setisOpened] = useState(false);
+  const [meetupQR, setmeetupQR] = useState(false);
+
+  const [bookToast, setbookToast] = useState(false);
+  const [meetupToast, setmeetupToast] = useState(false);
+
+  const [joinMeetup, setjoinMeetup] = useState(false);
+  const [bookpay, setbookpay] = useState(0);
+
+  const [isWeChat, setisWeChat] = useState(false);
+
+  const getOpenidFromUrl = (url) => {
+    const pattern = /[?&]openid=([^&#]+)/;
+    const match = url.match(pattern);
+    if (match) {
+      return match[1];
+    }
+    return null;
+  };
+
+  // 是否在微信客户端
+  const isWeChatFun = () => {
+    var ua = navigator.userAgent.toLowerCase();
+    if (ua.indexOf("micromessenger") != -1) {
+      setisWeChat(true);
+      return true;
+    } else {
+      setisWeChat(false);
+      return false;
+    }
+  };
+
+  // 获取openid
+  const getOpenid = () => {
+    // let newparams = Taro.getCurrentInstance().router.params;
+    // let urlopenid = newparams.openid;
+
+    // hash模式
+    // http://192.168.31.245:10086/?openid=o7LFAwR32hWGq9XOpd7ZxK1wZxq8#/pages/index/index
+    let hashopenid = null;
+    if (window.location.href.includes("openid")) {
+      hashopenid = getOpenidFromUrl(window.location.href);
+    } else {
+      // hashopenid = window.localStorage.getItem("openid");
+    }
+    if (!!hashopenid && hashopenid != "undefined" && hashopenid != "null") {
+      // 获取到openid
+      window.localStorage.setItem("openid", hashopenid);
+      setopenId(hashopenid);
+
+      // window.alert(hashopenid);
+      // 查询数据库是否存在openid
+      Taro.request({
+        method: "GET",
+        url: `${process.env.TARO_API_API}/user/${hashopenid}`, //仅为示例，并非真实的接口地址
+        // url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
+        success: function (res) {
+          if (res?.data?.userInfo) {
+            //  有完整的用户信息userInfo
+            setuserInfo(res?.data?.userInfo);
+            window.localStorage.setItem("userInfo", userInfo);
+          }
+        },
+        complete: function (finy) {
+          // 获取wxid参数
+          getWxidFromUrl();
+        },
+      });
+    } else {
+      let nowUrl = window.location.href;
+      window.localStorage.removeItem("openid");
+      let payUrl = `https://payjs.cn/api/openid?mchid=1561724891&callback_url=${nowUrl}`;
+      window.location.href = payUrl;
+    }
+  };
+
+  // 获取更新用户信息
+  const getUserinfo = (wxid) => {
+    Taro.request({
+      method: "GET",
+      url: `${process.env.TARO_API_API}/user/${wxid}`, //仅为示例，并非真实的接口地址
+      // url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
+      success: function (res) {
+        if (res?.data?.userInfo) {
+          //判断wxid是否存在
+          if (res?.data?.userInfo?.openid) {
+            //  有完整的用户信息userInfo
+            setuserInfo(res?.data?.userInfo);
+            window.localStorage.setItem("userInfo", userInfo);
+          }
+        }
+      },
+      complete: function (finy) {},
+    });
+  };
+
+  // 获取url中的wxid
+  const getWxidFromUrl = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const urlwxid = urlParams.get("wxid");
+    if (!!urlwxid) {
+      setwxid(urlwxid);
+      window.localStorage.setItem("wxid", wxid);
+      // 优先查询openid是否存在数据库
+      Taro.request({
+        method: "GET",
+        url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
+        // url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
+        success: function (res) {
+          if (res?.data?.userInfo) {
+            //判断wxid是否存在
+            if (res?.data?.userInfo?.openid) {
+              // window.alert(res?.data?.userInfo?.openid);
+              // window.alert(window.localStorage.getItem("openid"));
+
+              if (
+                res?.data?.userInfo?.openid !==
+                window.localStorage.getItem("openid")
+              ) {
+                // 删除其他用户的wxid
+                window.localStorage.removeItem("userInfo");
+                window.localStorage.removeItem("openid");
+                window.localStorage.removeItem("wxid");
+                window.location.href = "https://nomadro.com";
+              } else {
+                //  有完整的用户信息userInfo
+                setuserInfo(res?.data?.userInfo);
+                window.localStorage.setItem("userInfo", userInfo);
+              }
+            } else {
+              // 绑定wxid与openid到数据库
+              wxidTapopenid(urlwxid);
+            }
+          } else {
+            // 新增wxid用户
+          }
+        },
+        complete: function (finy) {
+          // tg消息通知
+          // tgMessage();
+        },
+      });
+    } else {
+      // tg消息通知
+      // tgMessage();
+    }
+    return wxid;
+  };
+
+  // 绑定wxid与openid
+  const wxidTapopenid = (newWxid) => {
+    const userUpdateData = {
+      openid: window.localStorage.getItem("openid"), // 只更新 openid 字段
+    };
+    Taro.request({
+      method: "PUT",
+      // url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
+      url: `${process.env.TARO_API_API}/user/${newWxid}`, //仅为示例，并非真实的接口地址
+      data: userUpdateData,
+      header: {
+        "Content-Type": "application/json",
+      },
+      success: function (res) {},
+      fail: function (err) {},
+      complete: function (finy) {},
+    });
+  };
+
+  // 新增openid用户
+  const addopenidUser = () => {
+    const userUpdateData = {
+      openid: window.localStorage.getItem("openid"), // 只更新 openid 字段
+    };
+    Taro.request({
+      method: "GET",
+      // url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
+      url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem(
+        "openid"
+      )}`, //仅为示例，并非真实的接口地址
+      data: userUpdateData,
+      header: {
+        "Content-Type": "application/json",
+      },
+      success: function (res) {},
+      fail: function (err) {},
+      complete: function (finy) {},
+    });
+  };
+
+  // 网页查看通知
+  const tgMessage = () => {
+    Taro.request({
+      method: "GET",
+      url: `${
+        process.env.TARO_API_API
+      }/tgMessage?openid=${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
+      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
+      success: function (res) {
+        console.log("访问提醒发送成功");
+      },
+    });
+  };
+
+  // 入群申请
+
+  useEffect(() => {
+   
+    let inwechat = isWeChatFun();
+    if (inwechat) {
+      // 获取openId
+      getOpenid();
+    } else {
+      // window.alert('不在微信')
+    }
+  }, []);
+
+  useEffect(() => {
+    // alert(window.localStorage.getItem("bookpay"))
+    setbookpay(window.localStorage.getItem("bookpay"));
+  }, []);
+
+  const goBack = () => {
+    Taro.navigateBack({});
+  };
+
+  const handleClick = (value) => {
+    // window.alert(value)
+    setopen(value);
+  };
+
+  const payh5 = (type, total_fee = 1000) => {
+    // console.log("111");
+    Taro.request({
+      method: "POST",
+      url: `${process.env.TARO_API_API}/payh5`,
+      // url: "${process.env.TARO_API_API}/payh5",
+
+      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
+
+      data: {
+        callback_url: window.location.href,
+        openid: window.localStorage.getItem("openid"),
+        total_fee: total_fee, // 金额,单位:分
+        type: type, //订单类型 book/meetup/video/vip
+      },
+      header: {
+        "content-type": "application/json", // 默认值
+      },
+      success: function (res) {
+        console.log(res.data);
+        // window.alert(res.data.jsapi);
+        WeixinJSBridge.invoke(
+          "getBrandWCPayRequest",
+          {
+            // 以下6个支付参数通过payjs的jsapi接口获取
+            // appId: "wxc5205a653b0259bf",
+            // timeStamp: "1701401644",
+            // nonceStr: "KhOYB0wFV6j9qyQK",
+            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
+            // signType: "MD5",
+            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
+            ...(res?.data?.jsapi ?? {}),
+          },
+          function (res) {
+            // 支付成功
+            if (res.err_msg == "get_brand_wcpay_request:ok") {
+              window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
+              WeixinJSBridge.call("closeWindow");
+            }
+          }
+        );
+      },
+    });
+  };
+
+  const goRead = () => {
+    Taro.navigateTo({
+      url: "/pages/book/index",
+    });
+  };
+
+  return (
+    <>
+      <View className="index">
+        {/* 在线图书 */}
+
+        {/* 参考资料https://readmake.com/ */}
+        <View className="index-book  animate__animated animate__pulse">
+          <View className="index_book_left">
+            <View className="left_title">《从零开始,成为数字游民》</View>
+            {/* <View className="left_text">手册3</View> */}
+            {/* <View className="left_mobile">
+              <Text>🚀 边旅行转赚钱</Text>
+              <Text>1️⃣ 杠杆:媒体与代码</Text>
+              <Text>2️⃣ 出海:地理套利</Text>
+              <Text>3️⃣ 即时业务:一夜之间上线网站</Text>
+              <Text>4️⃣ homelab:你的全球总部</Text>
+              <Text>5️⃣ 远程团队:分布式协作</Text>
+              <Text>5️⃣ -----------------</Text>
+
+              <Text>🔥 一起实践,交流</Text>
+            </View> */}
+
+            {/* 卡片 */}
+            <View className="card">
+              <View className="cardItem">
+                <View className="cardItem_left">
+                  <Image
+                    className="cardItem_left_img youtubeSvg"
+                    src={travel}
+                  ></Image>
+                </View>
+                <View className="cardItem_right">
+                  <View className="cardItem_rightUp">地理套利</View>
+                  <View className="cardItem_rightDown">
+                    边旅行边赚钱,无国界
+                  </View>
+                </View>
+              </View>
+              <View className="cardItem">
+                <View className="cardItem_left">
+                  <Image className="cardItem_left_img" src={laptop}></Image>
+                </View>
+                <View className="cardItem_right">
+                  <View className="cardItem_rightUp">远程办公</View>
+                  <View className="cardItem_rightDown">
+                    自由职业,分布式团队
+                  </View>
+                </View>
+              </View>
+              <View className="cardItem">
+                <View className="cardItem_left">
+                  <Image className="cardItem_left_img" src={group}></Image>
+                </View>
+                <View className="cardItem_right">
+                  <View className="cardItem_rightUp">游民社区</View>
+                  <View className="cardItem_rightDown">信息交流,快人一步</View>
+                </View>
+              </View>
+            </View>
+
+            <View className="left_btn ">
+              <AtButton
+                onClick={() => {
+                  goRead();
+                }}
+                className="startRead"
+                type="primary"
+                size="small"
+                circle
+              >
+                开始阅读
+              </AtButton>
+            </View>
+          </View>
+          <View className="index_book_img">
+            <Image
+            className="book_img"
+              // style="width: 40%px;height:100%;background: #fff;"
+              src={nomadro}
+            />
+          </View>
+        </View>
+
+        <View className="svgItems">
+          <View className="svgItem">
+            <View className="bookImg">
+              <Image
+                // style="width: 40%px;height:100%;background: #fff;"
+                // src={book}
+                src={laptop}
+              />
+              <View className="bookImg_text">远程办公</View>
+            </View>
+
+            <View className="bookImg">
+              <Image
+                // style="width: 40%px;height:100%;background: #fff;"
+                // src={book}
+                src={travel}
+              />
+              <View className="bookImg_text">地理套利</View>
+            </View>
+            <View className="bookImg">
+              <Image
+                // style="width: 40%px;height:100%;background: #fff;"
+                // src={book}
+                src={code}
+              />
+              <View className="bookImg_text">独立开发</View>
+            </View>
+          </View>
+        </View>
+        {/* <View className="footer">
+          <View>Copyright © 2025 </View>
+        </View> */}
+      </View>
+      {/* <View className="footer_div"></View> */}
+    </>
+  );
+};
+
+export default Index;
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -0,0 +1,310 @@
+.index {
+  // background-color: #002329;
+  // width: 100vw;
+  // padding-top: 80px;
+  height: 100vh;
+  // height: 100%;
+  // padding-left: 100px;
+  // padding-right: 100px;
+  // background-color: yellow;
+  .index-book {
+    // margin-top: 80px;
+    // width: 100%;
+    min-height: 300px;
+    // padding: 20px;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    justify-content: space-between;
+    // background-color: #f0f0f0;
+    // background-color: #f0f5ff;
+    // background-color: yellow;
+    .index_book_left {
+      min-width: 600px;
+      min-height: 300px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+      // background-color: rgb(208, 255, 0);
+      .left_title {
+        font-size: 50px;
+        font-weight: 700;
+        color: #69b1ff;
+      }
+      .left_text {
+        font-size: 30px;
+      }
+      .left_mobile {
+        margin-top: 20px;
+        width: 100%;
+        font-size: 30px;
+        display: flex;
+        flex-direction: column;
+        // align-items: center;
+        // justify-content: space-around;
+        // background-color: yellow;
+      }
+
+      .card {
+        margin-top: 40px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .cardItem {
+          padding: 20px;
+          // padding-top: 20px;
+          width: 500px;
+          // height: 300px;
+
+          margin-bottom: 20px;
+          display: flex;
+          flex-direction: row;
+          background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity, 1));
+          // background-color: yellow;
+          background-color: #f0f5ff;
+          border-radius: 20px;
+
+          // align-items: center;
+          // justify-content: center;
+          .cardItem_left {
+            // width: 100px;
+            // height: 100%;
+            // background-color: #69b1ff;
+            display: flex;
+            flex-direction: column;
+            // align-items: center;
+            // justify-content: center;
+            margin-right: 40px;
+            .cardItem_left_img {
+              width: 80px;
+              height: 80px;
+            }
+            .youtubeSvg {
+              position: relative;
+              top: -5px;
+            }
+          }
+          .cardItem_right {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            // background-color: red;
+            .cardItem_rightUp {
+              width: 100%;
+              height: 80px;
+              // background-color: aquamarine;
+              display: flex;
+              flex-direction: row;
+              font-weight: 700;
+              font-size: 35px;
+              // align-items: center;
+              // justify-content: center;
+            }
+            .cardItem_rightDown {
+              width: 100%;
+              // height: 200px;
+              flex: 1;
+              // background-color: red;
+              display: flex;
+              flex-direction: row;
+              // align-items: center;
+              // justify-content: center;
+              font-size: 30px;
+              flex-wrap: wrap;
+              color: #262626;
+            }
+          }
+          .left_mobile {
+            margin-top: 20px;
+            // width: 100%;
+            font-size: 30px;
+            display: flex;
+            flex-direction: column;
+            // background-color: aqua;
+            // align-items: center;
+            // justify-content: space-around;
+            // background-color: yellow;
+          }
+        }
+      }
+
+      .left_btn {
+        margin-top: 40px;
+        // background-color: aqua;
+        // display: none;
+        .startRead {
+          width: 500px;
+        }
+      }
+    }
+    .index_book_img {
+      margin-top: 80px;
+      width: 400px;
+      height: 400px;
+    }
+  }
+
+  .svgItems {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    // background-color: yellow;
+    margin-top: 20px;
+    // padding: 20px;
+    .bookImg {
+      display: none;
+    }
+  }
+  .index_btn {
+    // background-color: yellow;
+    // margin-top: 40px;
+    .startRead {
+      width: 200px;
+    }
+  }
+  .footer {
+    position: absolute;
+    // position: fixed;
+    bottom: 0px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 60px;
+    // margin-bottom: 20px;
+    font-size: 14px;
+    // background-color: yellow;
+  }
+}
+
+@media (min-width: 1536px) {
+  .index {
+    // padding: 100px;
+    // height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    // background-color: aqua;
+    position: relative;
+
+    .index-book {
+      width: 100%;
+      max-width: 1400px;
+
+      // max-width: 2000px;
+      // padding: 20px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      // justify-content: center;
+      justify-content: space-between;
+      background-color: #f0f5ff;
+      border-radius: 20px;
+
+      .index_book_left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        // background-color: yellow;
+        // background-color: #69b1ff;
+        .left_mobile {
+          display: none;
+        }
+        .card {
+          display: none;
+        }
+        .left_btn {
+          display: flex;
+
+          .startRead {
+            // display: flex;
+            width: 200px;
+          }
+        }
+      }
+      .index_book_img {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        // height: 100%;
+        // background-color: yellow;
+        .book_img{
+          margin-bottom: 40px;
+
+        }
+      }
+    }
+
+    .svgItems {
+      // width: 1400px;
+      width: 100%;
+      max-width: 1400px;
+      margin-top: 80px;
+      // padding: 0px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      // background-color: #69b1ff;
+      // background-color: yellow;
+      // background-color: brown;
+      .svgItem {
+        // min-width: 1400px;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        // background-color: #69b1ff;
+        .bookImg {
+          width: 350px;
+          height: 350px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          // background-color: yellow;
+          .bookImg_text {
+            margin-top: 20px;
+            font-size: 30px;
+          }
+        }
+      }
+    }
+
+    .index_btn {
+      .startRead {
+        display: none;
+      }
+    }
+
+    .footer {
+      position: absolute;
+      // position: fixed;
+      bottom: 0px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 60px;
+      // margin-bottom: 20px;
+      font-size: 14px;
+      // background-color: yellow;
+    }
+  }
+}
+
+.footer_div {
+  width: 100%;
+  height: 60px;
+}
--- a/src/pages/meetup/Detail/index.jsx
+++ b/src/pages/meetup/Detail/index.jsx
@@ -0,0 +1,177 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";
+import { AtButton } from "taro-ui";
+// import Taro from "@tarojs/taro";
+
+import { AtList, AtListItem } from "taro-ui";
+
+// export default class Index extends Component {
+const Detail = () => {
+  const [current, setcurrent] = useState(2);
+  const [id, setid] = useState(null);
+  const [openid, setopenid] = useState(null);
+  const [joinMeetup, setjoinMeetup] = useState(false);
+
+  useEffect(() => {
+    let newparams = Taro.getCurrentInstance().router.params;
+    let newId = newparams.id;
+    if (newId) {
+      setid(newId);
+    }
+    let newjoinMeetup=window.localStorage.getItem('joinMeetup')
+    setjoinMeetup(newjoinMeetup)
+  }, []);
+
+  // const handleClick = (value) => {
+  //   console.log("value", value);
+  //   setcurrent(value);
+  //   if (value == 2) {
+  //     // 跳转到目的页面，在当前页面打开
+  //     Taro.navigateTo({
+  //       url: "/pages/my/index",
+  //     });
+  //   } else if (value == 0) {
+  //     Taro.navigateTo({
+  //       url: "/pages/index/index",
+  //     });
+  //   } else {
+  //     Taro.navigateTo({
+  //       url: "/pages/meetup/index",
+  //     });
+  //   }
+  // };
+
+  const onBridgeReady = () => {
+    WeixinJSBridge.call("hideOptionMenu");
+  };
+
+  useEffect(() => {
+    let $instance = Taro.getCurrentInstance();
+    // console.log("11");
+    console.log($instance.router.params);
+    // if (typeof WeixinJSBridge == "undefined") {
+    //   if (document.addEventListener) {
+    //     document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
+    //   } else if (document.attachEvent) {
+    //     document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
+    //     document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
+    //   }
+    // }
+  }, []);
+
+  const joinmeet = () => {
+    // console.log("111");
+    Taro.request({
+      method:'POST',
+      url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
+      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
+
+      data: {
+        callback_url:window.location.href,
+        openid:window.localStorage.getItem('openid')
+      },
+      header: {
+        "content-type": "application/json", // 默认值
+      },
+      success: function (res) {
+        console.log(res.data);
+        // window.alert(res.data.jsapi);
+        WeixinJSBridge.invoke(
+          "getBrandWCPayRequest",
+          {
+            // 以下6个支付参数通过payjs的jsapi接口获取
+            // appId: "wxc5205a653b0259bf",
+            // timeStamp: "1701401644",
+            // nonceStr: "KhOYB0wFV6j9qyQK",
+            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
+            // signType: "MD5",
+            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
+            ...res?.data?.jsapi??{},
+          },
+          function (res) {
+            if (res.err_msg == "get_brand_wcpay_request:ok") {
+              setjoinMeetup(true)
+              window.localStorage.setItem('joinMeetup',true)
+              WeixinJSBridge.call("closeWindow");
+            }
+          }
+        );
+      },
+    });
+  };
+  return (
+    <View className="Detail">
+      {/* <Text>Hello world!</Text> */}
+      {/* <AtAvatar image='https://cdn.huodongxing.com/logo/202312/8732019012100/promoteMini.png'></AtAvatar> */}
+      <View>
+        <Image
+          style="width:100%;height: 200px;background: #fff;"
+          src={
+            "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+          }
+        />
+      </View>
+      <AtList>
+        <AtListItem title="[副业交流] 沙龙茶话会" onClick={() => {}} />
+        <AtListItem title="日期" extraText="2023/12/06" arrow="" />
+        <AtListItem title="报名人数" extraText="4/10" arrow="" />
+        <AtListItem
+          title="地点"
+          note="广东省深圳市福田区石厦地铁站C口"
+          extraText=""
+        />
+        {/* <AtListItem title='禁用状态' disabled extraText='详细信息' /> */}
+      </AtList>
+
+      {/* <AtList>
+        <AtListItem
+          title="联系我们"
+          note=""
+          arrow="right"
+          iconInfo={{ size: 25, color: "#78A4FA", value: "calendar" }}
+        />
+        <AtListItem
+          title="版本日志"
+          note=""
+          extraText=""
+          arrow="right"
+          iconInfo={{ size: 25, color: "#FF4949", value: "bookmark" }}
+        />
+      </AtList> */}
+
+      <View>
+        <AtButton
+          className="bottomBtn"
+          type="primary"
+          onClick={() => joinmeet()}
+          disabled={joinMeetup}
+        >
+          {!!joinMeetup?'已报名':'立即报名'}
+        </AtButton>
+      </View>
+
+      {/* <View className="indexTablebar">
+        <AtTabBar
+          tabList={[
+            { title: "首页", text: "" },
+            { title: "活动" },
+            { title: "我的" },
+          ]}
+          onClick={(value) => handleClick(value)}
+          current={current}
+        />
+      </View> */}
+    </View>
+  );
+};
+
+export default Detail;
--- a/src/pages/meetup/Detail/index.scss
+++ b/src/pages/meetup/Detail/index.scss
@@ -0,0 +1,11 @@
+.Detail{
+
+
+
+    .bottomBtn{
+        display: flex;
+        position: fixed;
+        bottom: 0px;
+        width: 100%;
+    }
+}
--- a/src/pages/meetup/index.jsx
+++ b/src/pages/meetup/index.jsx
@@ -0,0 +1,155 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtButton } from "taro-ui";
+
+import { Picker } from "@tarojs/components";
+import { AtList, AtListItem } from "taro-ui";
+import { AtNavBar } from "taro-ui";
+
+// export default class Index extends Component {
+const Meetup = () => {
+  const [current, setcurrent] = useState(1);
+  const [joinMeetup, setjoinMeetup] = useState(false);
+
+  const [pickData, setpickData] = useState({
+    selector: ["美国", "中国", "巴西", "日本"],
+    selectorChecked: "美国",
+    timeSel: "12:01",
+    dateSel: "2018-04-22",
+  });
+  const handleClick = (value) => {
+    console.log("value", value);
+    setcurrent(value);
+    if (value == 2) {
+      // 跳转到目的页面，在当前页面打开
+      Taro.navigateTo({
+        url: "/pages/my/index",
+      });
+    } else if (value == 0) {
+      Taro.navigateTo({
+        url: "/pages/index/index",
+      });
+    } else {
+      Taro.navigateTo({
+        url: "/pages/meetup/index",
+      });
+    }
+  };
+  const goBack = () => {
+    // window.history.back();
+    Taro.navigateBack({
+      // delta: 2
+    });
+  };
+
+  useEffect(() => {
+    let newjoinMeetup = window.localStorage.getItem("joinMeetup");
+    setjoinMeetup(newjoinMeetup);
+
+    // window.localStorage.removeItem("joinMeetup");
+    // setjoinMeetup(false)
+  }, []);
+
+  return (
+    <View className="my">
+      {/* <AtNavBar
+        // onClickRgIconSt={handleClick}
+        // onClickRgIconNd={handleClick}
+        // onClickLeftIcon={goBack}
+        // leftIconType="chevron-left"
+        color="#000"
+        title="活动列表"
+        // leftText='返回'
+        // rightFirstIconType='bullet-list'
+        // rightSecondIconType='user'
+      /> */}
+      {/* <Text>Hello world!</Text> */}
+
+      {/* <View className="page-section">
+        <View>
+          <Picker mode="selector" range={pickData.selector} onChange={() => {}}>
+            <AtList>
+              <AtListItem
+                title="国家地区"
+                extraText={pickData.selectorChecked}
+              />
+            </AtList>
+          </Picker>
+        </View>
+        <View>
+          <Picker mode="selector" range={pickData.selector} onChange={() => {}}>
+            <AtList>
+              <AtListItem
+                title="国家地区"
+                extraText={pickData.selectorChecked}
+              />
+            </AtList>
+          </Picker>
+        </View>
+      </View> */}
+
+      <AtCard
+        note=""
+        extra=""
+        title="[副业交流] 沙龙茶话会"
+        thumb="http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG"
+      >
+        <View className="meetupCard">
+          {" "}
+          <View className="left">
+            {" "}
+            <Image
+              style="width: 150px;height: 100px;background: #fff;"
+              src={
+                "https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
+              }
+            />
+          </View>
+          <View className="right">
+            <View className="up">
+              <span style={{ color: "green" }}>[已报名]</span> 4/10
+            </View>
+            <View className="middle">2023/12/06 星期三</View>
+            <View className="down">
+              <AtButton
+                type="primary"
+                size="small"
+                className="submitBtn"
+                disabled={joinMeetup}
+                onClick={() => {
+                  Taro.navigateTo({
+                    url: "/pages/meetup/Detail/index",
+                  });
+                }}
+              >
+                {!!joinMeetup ? "已报名" : "立即报名"}
+              </AtButton>
+            </View>
+          </View>
+        </View>
+      </AtCard>
+
+      <View className="indexTablebar">
+        <AtTabBar
+          tabList={[
+            { title: "首页", text: "" },
+            { title: "活动" },
+            { title: "我的" },
+          ]}
+          onClick={(value) => handleClick(value)}
+          current={current}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default Meetup;
--- a/src/pages/meetup/index.scss
+++ b/src/pages/meetup/index.scss
@@ -0,0 +1,42 @@
+.my{
+margin-top: 20px;
+
+  .page-section{
+    display: flex;
+    flex-direction: row;
+  }
+
+  .meetupCard {
+    display: flex;
+    flex-direction: row;
+    .right {
+      // background-color: yellow;
+      width: 100%;
+      margin-left: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .down {
+        width: 200px;
+        // background-color: aqua;
+        position: relative;
+        bottom: 10px;
+        right: -120px;
+        // display: flex;
+        // flex-direction: column-reverse;
+        // justify-content:flex-end
+        // position: relative;
+        .submitBtn {
+          // width: 200px;
+          // position: absolute;
+          // right: 0px;
+        }
+      }
+    }
+  }
+    .indexTablebar {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+      }
+}
--- a/src/pages/model/index.config.js
+++ b/src/pages/model/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '模版页面'
+}
--- a/src/pages/model/index.scss
+++ b/src/pages/model/index.scss
@@ -0,0 +1,4 @@
+.Model{
+    padding: 40px;
+
+}
--- a/src/pages/model/index.tsx
+++ b/src/pages/model/index.tsx
@@ -0,0 +1,31 @@
+// @ts-nocheck
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtButton, AtInput, AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";
+import { AtTag } from "taro-ui";
+import { AtList, AtListItem } from "taro-ui";
+import { AtForm, AtMessage } from "taro-ui";
+
+// export default class Index extends Component {
+const Model = () => {
+  useEffect(() => {}, []);
+
+  const handleClick = (value) => {
+    // 跳转到目的页面，在当前页面打开
+    Taro.navigateTo({
+      url: "/pages/index/index",
+    });
+  };
+
+  return <View className="Model">模版</View>;
+};
+
+export default Model;
--- a/src/pages/my/index.jsx
+++ b/src/pages/my/index.jsx
@@ -0,0 +1,92 @@
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";
+import { AtTag } from "taro-ui";
+import { AtList, AtListItem } from "taro-ui";
+import avatar from "../../images/avatar.jpg";
+
+// export default class Index extends Component {
+const My = () => {
+  const [current, setcurrent] = useState(2);
+  const [wxid, setwxid] = useState(null);
+
+  useEffect(()=>{
+    getWxid()
+  },[])
+
+  const getWxid = () => {
+    let newWxid = window.localStorage.getItem("wxid");
+    if (!!newWxid) {
+      setwxid(newWxid);
+    }
+  };
+
+  const handleClick = (value) => {
+    console.log("value", value);
+    setcurrent(value);
+    if (value == 2) {
+      // 跳转到目的页面，在当前页面打开
+      Taro.navigateTo({
+        url: "/pages/my/index",
+      });
+    } else if (value == 0) {
+      Taro.navigateTo({
+        url: "/pages/index/index",
+      });
+    } else {
+      Taro.navigateTo({
+        url: "/pages/meetup/index",
+      });
+    }
+  };
+  return (
+    <View className="my">
+      {/* <Text>Hello world!</Text> */}
+
+      <View className="myAtAvatar">
+        <AtAvatar className="AtAvatar" image={avatar}></AtAvatar>
+        <AtTag type="primary" circle>
+          新注册用户
+        </AtTag>
+      </View>
+
+      <AtList>
+        <AtListItem
+          title="联系我们"
+          note=""
+          arrow="right"
+          iconInfo={{ size: 25, color: "#78A4FA", value: "calendar" }}
+        />
+        <AtListItem
+          title="版本日志"
+          note=""
+          extraText=""
+          arrow="right"
+          iconInfo={{ size: 25, color: "#FF4949", value: "bookmark" }}
+        />
+      </AtList>
+
+      <View className="indexTablebar">
+        <AtTabBar
+          tabList={[
+            { title: "首页", text: "" },
+            { title: "活动" },
+            { title: "我的" },
+          ]}
+          onClick={(value) => handleClick(value)}
+          current={current}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default My;
--- a/src/pages/my/index.scss
+++ b/src/pages/my/index.scss
@@ -0,0 +1,23 @@
+.my{
+
+.myAtAvatar{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 300px;
+  // background-color: #f4ffb8;
+  // padding-left: 20px;
+  // padding-right: 20px;
+  .AtAvatar{
+    margin-bottom: 10px;
+  }
+}
+
+    .indexTablebar {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+      }
+}
--- a/src/pages/planet/index.config.js
+++ b/src/pages/planet/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '副业沙龙'
+}
--- a/src/pages/planet/index.scss
+++ b/src/pages/planet/index.scss
@@ -0,0 +1,23 @@
+.Model {
+  padding: 20px;
+
+  .bottomDiv {
+    width: 100%;
+    height: 100px;
+    // background-color: yellow;
+  }
+
+  .joinSalon {
+    // position: relative;
+    bottom: 20px;
+    position: fixed;
+    width: 700px;
+  }
+
+  .model-emoji {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
--- a/src/pages/planet/index.tsx
+++ b/src/pages/planet/index.tsx
@@ -0,0 +1,217 @@
+// @ts-nocheck
+import { Component } from "react";
+import { View, Text, Image, Button } from "@tarojs/components";
+import "./index.scss";
+import { AtButton, AtInput, AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtTag } from "taro-ui";
+import { AtList, AtListItem } from "taro-ui";
+import { AtForm, AtMessage } from "taro-ui";
+import loft from "../../images/loft.png";
+import nomadvloglife from "../../images/nomadvloglife.png";
+
+import {
+  AtModal,
+  AtModalHeader,
+  AtModalContent,
+  AtModalAction,
+  AtAvatar,
+  AtAccordion,
+} from "taro-ui";
+
+import qrcode from "../../images/qrcode.png";
+import joinGroup from "../../images/joinGroup.png";
+
+// export default class Index extends Component {
+const Salon = () => {
+  const [meetupQR, setmeetupQR] = useState(false);
+  const [isWeChat, setisWeChat] = useState(false);
+  const [meetup, setmeetup] = useState(window.localStorage.getItem("meetup"));
+
+  useEffect(() => {
+    isWeChatFun();
+  }, []);
+
+  // const handleClick = (value) => {
+  //   // 跳转到目的页面，在当前页面打开
+  //   Taro.navigateTo({
+  //     url: "/pages/index/index",
+  //   });
+  // };
+
+  // 是否在微信客户端
+  const isWeChatFun = () => {
+    var ua = navigator.userAgent.toLowerCase();
+    if (ua.indexOf("micromessenger") != -1) {
+      setisWeChat(true);
+      return true;
+    } else {
+      setisWeChat(false);
+      return false;
+    }
+  };
+
+  const payh5 = (type, total_fee = 1000) => {
+    // console.log("111");
+    Taro.request({
+      method: "POST",
+      url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
+      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
+
+      data: {
+        callback_url: window.location.href,
+        openid: window.localStorage.getItem("openid"),
+        total_fee: total_fee, // 金额,单位:分
+        type: type, //订单类型 book/meetup/video/vip
+      },
+      header: {
+        "content-type": "application/json", // 默认值
+      },
+      success: function (res) {
+        console.log(res.data);
+        // window.alert(res.data.jsapi);
+        WeixinJSBridge.invoke(
+          "getBrandWCPayRequest",
+          {
+            // 以下6个支付参数通过payjs的jsapi接口获取
+            // appId: "wxc5205a653b0259bf",
+            // timeStamp: "1701401644",
+            // nonceStr: "KhOYB0wFV6j9qyQK",
+            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
+            // signType: "MD5",
+            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
+            ...(res?.data?.jsapi ?? {}),
+          },
+          function (res) {
+            // 支付成功
+            if (res.err_msg == "get_brand_wcpay_request:ok") {
+              window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
+              WeixinJSBridge.call("closeWindow");
+            }
+          }
+        );
+      },
+    });
+  };
+
+  return (
+    <View className="Model">
+      <View className="meetup-left">
+        <Image style="width: 100%;height: 100px;background: #fff;" src={loft} />
+      </View>
+
+      <View className="at-article">
+        <View className="at-article__h1">技术交流群</View>
+        <View className="at-article__info">
+          {/* 2017-05-07&nbsp;&nbsp;&nbsp; */}
+          异度星球
+        </View>
+        <View className="at-article__content">
+          <View className="at-article__section">
+            <View className="at-article__h2">群简介</View>
+            <View className="at-article__h3">| 📣技术爱好者</View>
+            <View className="at-article__p">
+              微信群是一个交流技术的平台,不限软件/硬件
+            </View>
+            <br />
+            <View className="at-article__h3">| 📋入群须知</View>
+            <View className="at-article__p">
+              微信群只是一个沟通平台,与其他伙伴搭桥
+              <br />
+              可以讨论但不限于:
+              <br />
+              1️⃣云手机
+              <br />
+              2️⃣机器人
+              <br />
+              3️⃣AIGC /边缘计算
+            </View>
+            <br />
+            <View className="at-article__h3">| ❌禁止以下行为</View>
+            <View className="at-article__p">
+              🚫营销推广
+              <br />
+              🚫恶意捣乱
+              <br />
+              <br />
+              ❗群主没有解答义务,勿随意@
+              {/* <br />
+              💰价格29元/人 (场地成本) */}
+            </View>
+            <br />
+            {meetup == 1 ? (
+              <View className="at-article__h3">| ☕入群口令:3399</View>
+            ) : null}
+            {meetup == 1 ? (
+              <View className="at-article__p">
+                {`ID:${window.localStorage.getItem("openid")}`}
+              </View>
+            ) : null}
+            {/* 已报名 */}
+            {meetup == 1 ? (
+              <View className="model-emoji">
+                <Image
+                  style="width: 240px;height: 240px;background: #fff;"
+                  // src={qrcode}
+                  src={joinGroup}
+                />
+              </View>
+            ) : null}
+          </View>
+        </View>
+      </View>
+
+      <View className="bottomDiv"></View>
+      {/* 判断有没有wxid,是否女性 */}
+      <AtButton
+        type="primary"
+        size="normal"
+        className="joinSalon"
+        onClick={() => {
+          if (meetup == 1) {
+            return false;
+          } else {
+            if (!!isWeChat) {
+              payh5("meetup", 2900);
+            } else {
+              setmeetupQR(true);
+            }
+          }
+        }}
+      >
+        {meetup == 1 ? "入群口令: 3399" : `立即加入`}
+      </AtButton>
+
+      <View className="meetupQR">
+        {/* 软件下载模态窗 */}
+        <AtModal isOpened={meetupQR}>
+          <AtModalHeader>咨询沙龙</AtModalHeader>
+          <AtModalContent>
+            <View className="model-emoji">
+              <Image
+                // style="width: 100%;height: 240px;background: #fff;"
+                src={qrcode}
+              />
+            </View>
+          </AtModalContent>
+          <AtModalAction>
+            <Button
+              onClick={() => {
+                setmeetupQR(false);
+              }}
+            >
+              知道了
+            </Button>
+          </AtModalAction>
+        </AtModal>
+      </View>
+    </View>
+  );
+};
+
+export default Salon;
--- a/src/pages/salon/index.config.js
+++ b/src/pages/salon/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '异度星球'
+}
--- a/src/pages/salon/index.scss
+++ b/src/pages/salon/index.scss
@@ -0,0 +1,35 @@
+.Model {
+  padding: 20px;
+
+  .bottomDiv {
+    width: 100%;
+    height: 100px;
+    // background-color: yellow;
+  }
+
+  .joinSalon {
+    // position: relative;
+    bottom: 20px;
+    position: fixed;
+    width: 700px;
+    font-weight: 600;
+    background-color:#72D572 ;
+    border-color: #72D572 ;;
+  }
+
+  .model-emoji {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+
+.no-border {
+  border: none;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  scrollbar-width: none; /* Firefox */
+}
--- a/src/pages/salon/index.tsx
+++ b/src/pages/salon/index.tsx
@@ -0,0 +1,248 @@
+// @ts-nocheck
+import { Component } from "react";
+import { View, Text, Image, Button } from "@tarojs/components";
+import "./index.scss";
+import { AtButton, AtInput, AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtTag } from "taro-ui";
+import { AtList, AtListItem } from "taro-ui";
+import { AtForm, AtMessage } from "taro-ui";
+import loft from "../../images/loft.png";
+import nomadvloglife from "../../images/nomadvloglife.png";
+
+import {
+  AtModal,
+  AtModalHeader,
+  AtModalContent,
+  AtModalAction,
+  AtAvatar,
+  AtAccordion,
+} from "taro-ui";
+
+import qrcode from "../../images/qrcode.png";
+import joinGroup from "../../images/joinGroup.png";
+
+// export default class Index extends Component {
+const Salon = () => {
+  const [meetupQR, setmeetupQR] = useState(false);
+  const [isWeChat, setisWeChat] = useState(false);
+  const [meetup, setmeetup] = useState(window.localStorage.getItem("meetup"));
+
+  useEffect(() => {
+    isWeChatFun();
+  }, []);
+
+  // const handleClick = (value) => {
+  //   // 跳转到目的页面，在当前页面打开
+  //   Taro.navigateTo({
+  //     url: "/pages/index/index",
+  //   });
+  // };
+
+  // 是否在微信客户端
+  const isWeChatFun = () => {
+    var ua = navigator.userAgent.toLowerCase();
+    if (ua.indexOf("micromessenger") != -1) {
+      setisWeChat(true);
+      return true;
+    } else {
+      setisWeChat(false);
+      return false;
+    }
+  };
+
+  const payh5 = (type, total_fee = 1000) => {
+    // console.log("111");
+    Taro.request({
+      method: "POST",
+      url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
+      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
+
+      data: {
+        callback_url: window.location.href,
+        openid: window.localStorage.getItem("openid"),
+        total_fee: total_fee, // 金额,单位:分
+        type: type, //订单类型 book/meetup/video/vip
+      },
+      header: {
+        "content-type": "application/json", // 默认值
+      },
+      success: function (res) {
+        console.log(res.data);
+        // window.alert(res.data.jsapi);
+        WeixinJSBridge.invoke(
+          "getBrandWCPayRequest",
+          {
+            // 以下6个支付参数通过payjs的jsapi接口获取
+            // appId: "wxc5205a653b0259bf",
+            // timeStamp: "1701401644",
+            // nonceStr: "KhOYB0wFV6j9qyQK",
+            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
+            // signType: "MD5",
+            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
+            ...(res?.data?.jsapi ?? {}),
+          },
+          function (res) {
+            // 支付成功
+            if (res.err_msg == "get_brand_wcpay_request:ok") {
+              window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
+              WeixinJSBridge.call("closeWindow");
+            }
+          }
+        );
+      },
+    });
+  };
+
+  return (
+    <View className="Model">
+      <View className="meetup-left">
+        <Image style="width: 100%;height: 100px;background: #fff;" src={loft} />
+      </View>
+
+      {meetup != 1 ? (
+        <View className="at-article">
+          <View className="at-article__h1">异度星球</View>
+          <View className="at-article__info">
+            {/* 2017-05-07&nbsp;&nbsp;&nbsp; */}
+            异度星球
+          </View>
+          <View className="at-article__content">
+            <View className="at-article__section">
+              <View className="at-article__h2">群简介</View>
+              <View className="at-article__h3">| 📣技术爱好者</View>
+              <View className="at-article__p">
+                {/* 微信群是一个交流技术的平台,不限软件/硬件 */}
+                交流灌水
+                <br />
+                践行『长期价值』和『杠杆主义』
+                <br />
+                折腾开源软件和开源硬件
+                {/* <br />
+                长期更新 */}
+              </View>
+              <br />
+              <View className="at-article__h3">| 📋核心主题</View>
+              <View className="at-article__p">
+                {/* 微信群只是一个沟通平台,与其他伙伴搭桥
+                <br /> */}
+                包括但不限于:
+                <br />
+                1️⃣云手机
+                <br />
+                2️⃣微信机器人
+                <br />
+                3️⃣AIGC /边缘计算
+              </View>
+              <br />
+              <View className="at-article__h3">| 🟩微信群</View>
+              <View className="at-article__p">
+                {/* 『微信群』是一个沟通平台,
+                <br />
+                加入后,会显示『入群口令』
+                <br /> */}
+                机器人会自动邀请加群
+              </View>
+              <br />
+              <View className="at-article__h3">| 🔊声明</View>
+              <View className="at-article__p">
+                🚫禁止营销推广
+                <br />
+                {/* 🚫恶意捣乱
+                <br />
+                <br /> */}
+                ❗请勿随意@群主
+              </View>
+
+              <br />
+            </View>
+          </View>
+        </View>
+      ) : (
+        <View>
+          <View>
+            <View className="at-article__h3">| ☕微信自动入群口令:<span style={{color:"red"}}>3399</span></View>
+            <View className="at-article__p">
+              {`ID:${window.localStorage.getItem("openid")}`}
+            </View>
+
+            <View className="model-emoji">
+              <Image
+                // style="width: 100%;height: 240px;background: #fff;"
+                src={qrcode}
+              />
+            </View>
+            <View className="model-emoji">
+              <Image
+                style="width: 240px;height: 240px;background: #fff;"
+                // src={qrcode}
+                src={joinGroup}
+              />
+            </View>
+          </View>
+          {/* webview=社区 */}
+          {/* <iframe
+            className="no-border"
+            src="https://memos.nomadcna.com/"
+          ></iframe> */}
+        </View>
+      )}
+
+      <View className="bottomDiv"></View>
+      {/* 判断有没有wxid,是否女性 */}
+      {meetup != 1 ? (
+        <AtButton
+          type="primary"
+          size="normal"
+          className="joinSalon"
+          onClick={() => {
+            if (meetup == 1) {
+              return false;
+            } else {
+              if (!!isWeChat) {
+                // 1元
+                payh5("meetup", 100);
+              } else {
+                setmeetupQR(true);
+              }
+            }
+          }}
+        >
+          {/* {meetup == 1 ? "已加入" : `立即加入`} */}
+          {`立即加入 ¥1`}
+        </AtButton>
+      ) : null}
+
+      <View className="meetupQR">
+        {/* 软件下载模态窗 */}
+        <AtModal isOpened={meetupQR}>
+          <AtModalHeader>添加好友</AtModalHeader>
+          <AtModalContent>
+            <View className="model-emoji">
+              <Image
+                // style="width: 100%;height: 240px;background: #fff;"
+                src={qrcode}
+              />
+            </View>
+          </AtModalContent>
+          <AtModalAction>
+            <Button
+              onClick={() => {
+                setmeetupQR(false);
+              }}
+            >
+              知道了
+            </Button>
+          </AtModalAction>
+        </AtModal>
+      </View>
+    </View>
+  );
+};
+
+export default Salon;
--- a/src/pages/sphone/index.config.js
+++ b/src/pages/sphone/index.config.js
@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '云手机'
+}
--- a/src/pages/sphone/index.scss
+++ b/src/pages/sphone/index.scss
@@ -0,0 +1,37 @@
+
+// 在 src/index.scss 中引入 GitHub Markdown 主题
+@import 'github-markdown-css/github-markdown.css';
+
+.Sphone {
+  padding: 40px;
+//   font-size: 30px !important;
+  // color: #666;
+
+  .markdown-body{
+    font-size: 30px !important;
+  }
+  img {
+    max-width: 100%;
+    height: auto; /* 保持图像的纵横比 */
+  }
+  .formCode {
+    display: flex;
+    flex-direction: row;
+    .codeBtn {
+      background-color: aquamarine;
+      // height: 80px;
+      // color: red;
+    }
+  }
+
+  .joinSalon {
+    // position: relative;
+    // bottom: 20px;
+    // position: fixed;
+    width: 700px;
+    font-weight: 600;
+    background-color:#72D572 ;
+    border-color: #72D572 ;;
+  }
+
+}
--- a/src/pages/sphone/index.tsx
+++ b/src/pages/sphone/index.tsx
@@ -0,0 +1,151 @@
+// @ts-nocheck
+import { Component } from "react";
+import { View, Text, Image } from "@tarojs/components";
+import "./index.scss";
+import { AtButton, AtInput, AtTabBar } from "taro-ui";
+import React, { useCallback, useEffect, useState } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";
+import { AtTag } from "taro-ui";
+import { AtList, AtListItem } from "taro-ui";
+import { AtForm, AtMessage } from "taro-ui";
+import { marked } from "marked";
+import infoText from "./info.md";
+import payText from "./pay.md";
+
+marked.setOptions({
+  breaks: true, // 是否回车换行
+  gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
+  // pedantic: true, //严格模式
+  // highlight(code:any, lang:any) {
+  //   //  语法高亮
+  //   let val = code;
+  //   if (lang) {
+  //     val = hljs.highlight(lang, code).value;
+  //   } else {
+  //     val = hljs.highlightAuto(code).value;
+  //   }
+  //   return val;
+  // },
+});
+
+// const renderer = new marked.Renderer();
+// // 使用拓展
+// marked.use({ renderer });
+
+// export default class Index extends Component {
+const Sphone = () => {
+  const [markText, setmarkText] = useState();
+  const [isWeChat, setisWeChat] = useState(false);
+
+  const [sphone, setsphone] = useState(window.localStorage.getItem("sphone"));
+
+  useEffect(() => {
+    isWeChatFun();
+  }, []);
+
+  // const handleClick = (value) => {
+  //   // 跳转到目的页面，在当前页面打开
+  //   Taro.navigateTo({
+  //     url: "/pages/index/index",
+  //   });
+  // };
+
+    // 是否在微信客户端
+    const isWeChatFun = () => {
+      var ua = navigator.userAgent.toLowerCase();
+      if (ua.indexOf("micromessenger") != -1) {
+        setisWeChat(true);
+        return true;
+      } else {
+        setisWeChat(false);
+        return false;
+      }
+    };
+  
+  const payh5 = (type, total_fee = 1000) => {
+    // console.log("111");
+    Taro.request({
+      method: "POST",
+      url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
+      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
+
+      data: {
+        callback_url: window.location.href,
+        openid: window.localStorage.getItem("openid"),
+        total_fee: total_fee, // 金额,单位:分
+        type: type, //订单类型 sphone/meetup/video/vip
+      },
+      header: {
+        "content-type": "application/json", // 默认值
+      },
+      success: function (res) {
+        console.log(res.data);
+        // window.alert(res.data.jsapi);
+        WeixinJSBridge.invoke(
+          "getBrandWCPayRequest",
+          {
+            // 以下6个支付参数通过payjs的jsapi接口获取
+            // appId: "wxc5205a653b0259bf",
+            // timeStamp: "1701401644",
+            // nonceStr: "KhOYB0wFV6j9qyQK",
+            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
+            // signType: "MD5",
+            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
+            ...(res?.data?.jsapi ?? {}),
+          },
+          function (res) {
+            // 支付成功
+            if (res.err_msg == "get_brand_wcpay_request:ok") {
+              window.localStorage.setItem(type, 1); //订单类型 sphone/meetup/video/vip
+              WeixinJSBridge.call("closeWindow");
+            }
+          }
+        );
+      },
+    });
+  };
+
+
+  return (
+    <View className="Sphone">
+      <View
+        className="markdown-body" // 添加 GitHub Markdown 主题类
+        dangerouslySetInnerHTML={{
+          __html: marked(sphone == 1 ? payText : infoText),
+        }}
+      ></View>
+
+      <View className="bottomDiv"></View>
+      {/* 判断有没有wxid,是否女性 */}
+      {sphone != 1 ? (
+        <AtButton
+          type="primary"
+          size="normal"
+          className="joinSalon"
+          onClick={() => {
+            if (sphone == 1) {
+              return false;
+            } else {
+              if (!!isWeChat) {
+                // 180元
+                payh5("sphone", 18000);
+              } else {
+                // setmeetupQR(true);
+              }
+            }
+          }}
+        >
+          {/* {meetup == 1 ? "已加入" : `立即加入`} */}
+          {`阅读更多  80`}
+        </AtButton>
+      ) : null}
+    </View>
+  );
+};
+
+export default Sphone;
--- a/src/pages/sphone/info.md
+++ b/src/pages/sphone/info.md
@@ -0,0 +1,51 @@
+## 云手机教程
+
+> docker部署
+
+![2024-12-22-01-00-03-Escrcpy.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2024-12-22-01-00-03-Escrcpy.png?imageSlim)
+
+> 原生安卓AOSP
+
+![2025-01-06-01-40-05-EscrcpyMirror-rk3588_s(WIFI).png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-01-06-01-40-05-EscrcpyMirror-rk3588_s(WIFI).png?imageSlim)
+
+***
+
+## 目录
+
+- 云手机设备指北
+
+- 硬件选型
+
+- 方案1:docker容器化安卓
+
+- 虚拟化的优缺点/设置
+
+- 方案2:主板+原生AOSP
+
+- root权限与magisk配置 
+
+- OTG外设配件
+
+- 内网穿透
+
+- 远程控制:云控
+
+- 魔法:多开/群控/应用变量/gps/ip属地
+
+- 应用场景:无人直播/机器人bot/RPA自动化+数据爬虫
+
+- 杂谈~~
+
+***
+
+## 简述
+
+教程属于`操作类,不是原理`
+
+比如不涉及:内核编译,ROM定制,虚拟化
+
+图文+视频录制
+
+长期更新
+
+
--- a/src/pages/sphone/pay.md
+++ b/src/pages/sphone/pay.md
@@ -0,0 +1,79 @@
+## 云手机教程
+
+> docker部署
+
+![2024-12-22-01-00-03-Escrcpy.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2024-12-22-01-00-03-Escrcpy.png?imageSlim)
+
+> 原生安卓AOSP
+
+![2025-01-06-01-40-05-EscrcpyMirror-rk3588_s(WIFI).png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-01-06-01-40-05-EscrcpyMirror-rk3588_s(WIFI).png?imageSlim)
+
+***
+
+## 目录
+
+- 云手机设备指北
+
+- 硬件选型
+
+- 方案1:docker容器化安卓
+
+- 虚拟化的优缺点/设置
+
+- 方案2:主板+原生AOSP
+
+- root权限与magisk配置 
+
+- OTG外设配件
+
+- 内网穿透
+
+- 远程控制:云控
+
+- 魔法:多开/群控/应用变量/gps/ip属地
+
+- 应用场景:无人直播/机器人bot/RPA自动化+数据爬虫
+
+- 杂谈~~
+
+***
+
+## 简述
+
+教程属于`操作类,不是原理`
+
+比如不涉及:内核编译,ROM定制,虚拟化
+
+图文+视频录制
+
+长期更新
+
+***
+
+## 云手机设备指北
+
+这里说的云手机,默认指的
+
+1. 开源硬件:ARM主板,
+
+2. 设置安卓系统
+
+3. 远程控制
+
+***
+
+## 硬件选型
+
+建议购买RK3588芯片的开发板
+
+- 香橙派5plus
+
+- nvme ssd硬盘
+
+- TF卡:用于测试系统
+
+- 2个支持`uvc协议+带麦克风`的摄像头
+
+
+
+教程正在更新中,视频录制操作过程,请等待
--- a/yarn.lock
+++ b/yarn.lock
				`@@ -0,0 +1 @@`
				`process.env.TARO_API_API="https://api.nomadcna.com"`