project:guess

feat:vue-devtools
fix:toggleTodo
2025-12-16 13:41:59 -05:00 · 2025-12-12 11:04:25 +08:00 · 2025-12-08 23:09:46 +08:00 · 2025-12-01 13:28:47 +08:00 · 2025-12-01 12:55:42 +08:00
24 changed files with 4359 additions and 10 deletions
--- a/README.md
+++ b/README.md
@@ -1,2 +1,32 @@
 # Vue
-This is a Vue test on school.
+
+<p align="center">
+  <img src="https://github.com/Dichgrem/Vue/blob/main/todos/view.png" width="300">
+</p>
+
+## 概述
+
+这是一个基于 **Vue 3 + Pinia** 的轻量级待办事项 (Todo) 项目，具有以下功能：
+
+* 添加/删除/编辑待办事项
+* 按照全部 / 未完成 / 已完成进行筛选
+* 拖拽排序待办事项
+* 一键清除已完成事项
+* 本地存储 (`localStorage`) 数据持久化
+* 控制台打印操作日志，便于调试
+
+
+## 结构
+
+```
+.
+├── App.vue              # 根组件，管理整体状态和方法
+├── main.js              # 项目入口
+├── stores/todo.js       # Pinia 状态管理，存储 todos 数据和操作方法
+├── components
+│   ├── TodoHeader.vue   # 输入框和添加功能
+│   ├── TodoList.vue     # 待办事项列表，支持编辑和拖拽排序
+│   └── TodoFooter.vue   # 底部统计、筛选和清除已完成
+├── assets               # 静态资源（CSS/图片）
+└── style.css            # 全局样式
+```
--- a/guess-game/.gitignore
+++ b/guess-game/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/guess-game/.vscode/extensions.json
+++ b/guess-game/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
--- a/guess-game/README.md
+++ b/guess-game/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
--- a/guess-game/index.html
+++ b/guess-game/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>guess-game</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/guess-game/package-lock.json
+++ b/guess-game/package-lock.json
--- a/guess-game/package.json
+++ b/guess-game/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "guess-game",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^7.2.4",
+    "vite-plugin-vue-devtools": "^8.0.5"
+  }
+}
--- a/guess-game/public/vite.svg
+++ b/guess-game/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/guess-game/src/App.vue
+++ b/guess-game/src/App.vue
@@ -0,0 +1,131 @@
+<template>
+  <div id="app">
+    <div class="header">
+      <h1>Vue3 猜数游戏</h1>
+      <div class="toggle-buttons">
+        <button
+          :class="{ active: currentView === 'composition' }"
+          @click="currentView = 'composition'"
+        >
+          组合式 API
+        </button>
+        <button
+          :class="{ active: currentView === 'options' }"
+          @click="currentView = 'options'"
+        >
+          选项式 API
+        </button>
+        <button
+          :class="{ active: currentView === 'both' }"
+          @click="currentView = 'both'"
+        >
+          对比查看
+        </button>
+      </div>
+    </div>
+
+    <div class="content">
+      <!-- 单独显示组合式 -->
+      <GuessComposition v-if="currentView === 'composition'" />
+
+      <!-- 单独显示选项式 -->
+      <GuessOptions v-if="currentView === 'options'" />
+
+      <!-- 并排对比显示 -->
+      <div v-if="currentView === 'both'" class="comparison">
+        <GuessComposition />
+        <GuessOptions />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import GuessComposition from "./components/GuessComposition.vue";
+import GuessOptions from "./components/GuessOptions.vue";
+
+const currentView = ref("both"); // 默认显示对比视图
+</script>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+#app {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+}
+
+.header {
+  text-align: center;
+  color: white;
+  margin-bottom: 30px;
+}
+
+.header h1 {
+  font-size: 2.5em;
+  margin-bottom: 20px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.toggle-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.toggle-buttons button {
+  padding: 10px 20px;
+  border: 2px solid white;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+  border-radius: 25px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+  transition: all 0.3s;
+}
+
+.toggle-buttons button:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+.toggle-buttons button.active {
+  background-color: white;
+  color: #667eea;
+}
+
+.content {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.comparison {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+  gap: 20px;
+  justify-items: center;
+}
+
+@media (max-width: 768px) {
+  .comparison {
+    grid-template-columns: 1fr;
+  }
+
+  .header h1 {
+    font-size: 1.8em;
+  }
+
+  .toggle-buttons button {
+    font-size: 14px;
+    padding: 8px 15px;
+  }
+}
+</style>
--- a/guess-game/src/assets/vue.svg
+++ b/guess-game/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/guess-game/src/components/GuessComposition.vue
+++ b/guess-game/src/components/GuessComposition.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="guess-container">
+    <h2>猜数游戏</h2>
+    <strong>请输入一个 0-100 之间的随机整数:</strong>
+    <br /><br />
+
+    <form @submit.prevent>
+      <input
+        v-model="guessInput"
+        type="text"
+        placeholder="输入你的猜测"
+        :disabled="!isGameActive"
+      />
+      <button type="button" @click="handleGuess" :disabled="!isGameActive">
+        提交
+      </button>
+      <button type="button" @click="restartGame">开始</button>
+      <br />
+
+      <label>
+        结果:
+        <input v-model="feedback" type="text" readonly />
+      </label>
+
+      <label>
+        当前还可以猜测的次数:
+        <input v-model="remainingCount" type="text" readonly />
+      </label>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+// 响应式变量定义
+const guessInput = ref(""); // 用户输入的猜测值
+const feedback = ref(""); // 反馈信息
+const remainingCount = ref(10); // 剩余猜测次数
+const targetNumber = ref(0); // 目标随机数
+const isGameActive = ref(false); // 游戏是否进行中
+
+// 重启游戏方法
+const restartGame = () => {
+  isGameActive.value = true;
+  guessInput.value = "";
+  feedback.value = "";
+  remainingCount.value = 10;
+  targetNumber.value = Math.floor(Math.random() * 101); // 生成 0-100 的随机数
+  console.log("目标数字:", targetNumber.value); // 调试用
+};
+
+// 处理猜测逻辑
+const handleGuess = () => {
+  if (!isGameActive.value) {
+    return;
+  }
+
+  const guess = parseInt(guessInput.value);
+
+  // 验证输入是否有效
+  if (isNaN(guess) || guess < 0 || guess > 100) {
+    feedback.value = "请输入一个 0-100 之间的有效数字!";
+    return;
+  }
+
+  // 判断猜测结果
+  if (guess > targetNumber.value) {
+    feedback.value = "猜的有点大!";
+  } else if (guess < targetNumber.value) {
+    feedback.value = "猜的有点小!";
+  } else {
+    feedback.value = `猜对啦！答案是 ${guess}`;
+    isGameActive.value = false; // 猜对后结束游戏
+    return;
+  }
+
+  // 更新剩余次数
+  remainingCount.value -= 1;
+
+  // 检查游戏是否结束
+  if (remainingCount.value === 0) {
+    feedback.value = `游戏结束！次数已用完，正确答案是 ${targetNumber.value}`;
+    isGameActive.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.guess-container {
+  text-align: center;
+  font-family: Arial, sans-serif;
+  background-color: #f0f8ff;
+  padding: 40px;
+  border-radius: 10px;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+form {
+  display: inline-block;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+input[type="text"] {
+  padding: 8px;
+  margin-bottom: 10px;
+  width: 150px;
+  text-align: center;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+}
+
+input[type="text"]:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+button {
+  padding: 8px 15px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #007bff;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+button:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+button:disabled {
+  background-color: #ccc;
+  border-color: #ccc;
+  cursor: not-allowed;
+}
+
+label {
+  display: block;
+  margin: 15px 0;
+  font-size: 14px;
+  color: #555;
+}
+
+label input {
+  margin-left: 10px;
+}
+</style>
--- a/guess-game/src/components/GuessOptions.vue
+++ b/guess-game/src/components/GuessOptions.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="guess-container">
+    <h2>猜数游戏</h2>
+    <strong>请输入一个 0-100 之间的随机整数:</strong>
+    <br /><br />
+
+    <form @submit.prevent>
+      <input
+        v-model="guessInput"
+        type="text"
+        placeholder="输入你的猜测"
+        :disabled="!isGameActive"
+        @keyup.enter="handleGuess"
+      />
+      <button type="button" @click="handleGuess" :disabled="!isGameActive">
+        提交
+      </button>
+      <button type="button" @click="restartGame">开始</button>
+      <br />
+
+      <label>
+        结果:
+        <input v-model="feedback" type="text" readonly />
+      </label>
+
+      <label>
+        当前还可以猜测的次数:
+        <input v-model="remainingCount" type="text" readonly />
+      </label>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GuessOptions",
+
+  // 数据选项
+  data() {
+    return {
+      guessInput: "",
+      feedback: "",
+      remainingCount: 10,
+      targetNumber: 0,
+      isGameActive: false,
+    };
+  },
+
+  // 方法选项
+  methods: {
+    // 重启游戏
+    restartGame() {
+      this.isGameActive = true;
+      this.guessInput = "";
+      this.feedback = "";
+      this.remainingCount = 10;
+      this.targetNumber = Math.floor(Math.random() * 101);
+      console.log("选项式 - 目标数字:", this.targetNumber);
+    },
+
+    // 处理猜测
+    handleGuess() {
+      if (!this.isGameActive) {
+        return;
+      }
+
+      const guess = parseInt(this.guessInput);
+
+      // 验证输入
+      if (isNaN(guess) || guess < 0 || guess > 100) {
+        this.feedback = "请输入一个 0-100 之间的有效数字!";
+        return;
+      }
+
+      // 判断结果
+      if (guess > this.targetNumber) {
+        this.feedback = "猜的有点大!";
+      } else if (guess < this.targetNumber) {
+        this.feedback = "猜的有点小!";
+      } else {
+        this.feedback = `猜对啦！答案是 ${guess}`;
+        this.isGameActive = false;
+        return;
+      }
+
+      // 更新次数
+      this.remainingCount -= 1;
+
+      // 检查游戏结束
+      if (this.remainingCount === 0) {
+        this.feedback = `游戏结束！次数已用完，正确答案是 ${this.targetNumber}`;
+        this.isGameActive = false;
+      }
+    },
+  },
+
+  // 计算属性
+  computed: {
+    canGuess() {
+      return this.isGameActive && this.remainingCount > 0;
+    },
+  },
+
+  mounted() {
+    console.log("选项式组件已挂载");
+  },
+};
+</script>
+
+<style scoped>
+.guess-container {
+  text-align: center;
+  font-family: Arial, sans-serif;
+  background-color: #f0f8ff;
+  padding: 40px;
+  border-radius: 10px;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+form {
+  display: inline-block;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+input[type="text"] {
+  padding: 8px;
+  margin-bottom: 10px;
+  width: 150px;
+  text-align: center;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+}
+
+input[type="text"]:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+button {
+  padding: 8px 15px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #007bff;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+button:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+button:disabled {
+  background-color: #ccc;
+  border-color: #ccc;
+  cursor: not-allowed;
+}
+
+label {
+  display: block;
+  margin: 15px 0;
+  font-size: 14px;
+  color: #555;
+}
+
+label input {
+  margin-left: 10px;
+}
+</style>
--- a/guess-game/src/main.js
+++ b/guess-game/src/main.js
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import "/src/style.css";
+import App from "/src/App.vue";
+
+createApp(App).mount("#app");
--- a/guess-game/src/style.css
+++ b/guess-game/src/style.css
@@ -0,0 +1,11 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
--- a/guess-game/vite.config.js
+++ b/guess-game/vite.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import VueDevTools from "vite-plugin-vue-devtools";
+// https://vite.dev/config/
+export default defineConfig({
+  base: "./",
+  plugins: [vue(), VueDevTools()],
+});
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Vue",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
--- a/todos/index.html
+++ b/todos/index.html
@@ -14,4 +14,4 @@
  <script type="module" src="/src/main.js"></script>
 </body>

-</html>
+</html>
--- a/todos/package-lock.json
+++ b/todos/package-lock.json
--- a/todos/package.json
+++ b/todos/package.json
@@ -15,6 +15,7 @@
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
-    "vite": "^7.2.2"
+    "vite": "^7.2.2",
+    "vite-plugin-vue-devtools": "^8.0.5"
  }
 }
--- a/todos/src/App.vue
+++ b/todos/src/App.vue
@@ -28,6 +28,10 @@ function editTodo({ item, text }) {
  todoStore.editTodo({ item, text });
 }

+function toggleTodo(item) {
+  todoStore.toggle(item);
+}
+
 function changeTabType(type) {
  console.log("App.vue tab change:", type);
  todoStore.setTab(type);
@@ -50,6 +54,7 @@ const showTodos = computed(() => {
    @delTodo="delTodo"
    @move="moveTodo"
    @edit="editTodo"
+    :toggleTodo="toggleTodo"
  />

  <TodoFooter
--- a/todos/src/components/TodoList.vue
+++ b/todos/src/components/TodoList.vue
@@ -11,8 +11,12 @@
        @drop="onDrop(index)"
      >
        <div class="tdItem-main">
-          <input type="checkbox" v-model="item.completed" class="toToggle" />
-
+          <input 
+            type="checkbox" 
+            :checked="item.completed" 
+            @change="toggleTodo(item)" 
+            class="toToggle" 
+          />
          <!-- <span class="tdTxt" :class="{ completed: item.completed }"> -->
          <!--   {{ item.txt }} -->
          <!-- </span> -->
@@ -46,7 +50,7 @@

 <script>
 export default {
-  props: ["todos"],
+  props: ["todos", "toggleTodo", "delTodo", "editTodo", "moveTodo"],
  data() {
    return {
      editingId: null,
--- a/todos/src/stores/todo.js
+++ b/todos/src/stores/todo.js
@@ -65,6 +65,15 @@ export const useTodoStore = defineStore("todoStore", {
      console.log("Current todos:", toRaw(this.todos));
    },

+    toggle(item) {
+      const t = this.todos.find(t => t.id === item.id);
+      if (t) {
+        t.completed = !t.completed;
+        this.save();
+        console.log("Toggled:", t);
+      }
+    },
+
    clearCompleted() {
      this.todos = this.todos.filter((t) => !t.completed);
      this.save();
--- a/todos/view.png
+++ b/todos/view.png
--- a/todos/vite.config.js
+++ b/todos/vite.config.js
@@ -1,8 +1,8 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-
+import VueDevTools from "vite-plugin-vue-devtools";
 // https://vite.dev/config/
 export default defineConfig({
-  base: './',
-  plugins: [vue()],
+  base: "./",
+  plugins: [vue(), VueDevTools()],
 });
Author	SHA1	Message	Date
dichgrem	9b5060afd1	project:guess	2025-12-12 11:04:25 +08:00
dichgrem	485fe0b634	feat:vue-devtools	2025-12-08 23:09:46 +08:00
dichgrem	db48b95509	fix:toggleTodo	2025-12-01 13:28:47 +08:00
dichgrem	62e283907a	update:readme	2025-12-01 12:55:42 +08:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`