FreeTool/index.html at main · zstar1003/FreeTool · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="FreeTool工具箱 - 免费在线工具集合，包含翻译、代码高亮、图片处理、PDF转PPT、提示词生成器等15+实用工具，纯前端实现，数据安全，无需注册。" />
    <meta name="keywords" content="在线工具,免费工具,图片转换,PDF转PPT,代码高亮,文本格式化,提示词生成器,AI工具" />
    <meta name="author" content="zstar" />
    <title>FreeTool 工具箱 - 在线小工具</title>
    <link rel="icon" type="image/png" href="./logo.png" />

    <!-- DNS 预解析 -->
    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
    <link rel="dns-prefetch" href="https://aistudiocdn.com">
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
    <link rel="dns-prefetch" href="https://huggingface.co">

    <!-- 预连接关键域名 -->
    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
    <link rel="preconnect" href="https://aistudiocdn.com" crossorigin>

    <!-- 字体预加载 (WOFF2 格式，体积更小) -->
    <link rel="preload" href="./libs/inter/Inter-400.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="./libs/inter/Inter-700.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="./libs/material-symbols/MaterialSymbolsOutlined.woff2" as="font" type="font/woff2" crossorigin>

    <!-- Fonts (Self-hosted) -->
    <link href="./libs/inter/inter.css" rel="stylesheet" />
    <link href="./libs/material-symbols/material-symbols-outlined.css" rel="stylesheet" />

    <!-- Highlight.js for syntax highlighting (Self-hosted) -->
    <link rel="stylesheet" href="./libs/highlight.js/styles/github.min.css" />
    <link rel="stylesheet" href="./libs/highlight.js/styles/github-dark.min.css" media="(prefers-color-scheme: dark)" />

    <!-- KaTeX for math formula rendering (Self-hosted) -->
    <link rel="stylesheet" href="./libs/katex/katex.min.css" />

    <!-- Main CSS (includes Tailwind) -->
    <link rel="stylesheet" href="./index.css">

    <style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        /* Simple spinner for loading state */
        .spinner {
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top: 2px solid #fff;
            width: 16px;
            height: 16px;
            -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
        }
        @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Fade in down animation for notifications */
        @keyframes fade-in-down {
            0% {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }
        .animate-fade-in-down {
            animation: fade-in-down 0.3s ease-out forwards;
        }
        /* Fade out up animation for notifications */
        @keyframes fade-out-up {
            0% {
                opacity: 1;
                transform: translate(-50%, 0);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
        }
        .animate-fade-out-up {
            animation: fade-out-up 0.3s ease-in forwards;
        }
    </style>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-KN165LH32Y"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-KN165LH32Y');
    </script>

    <script type="importmap">
    {
    "imports": {
        "@google/genai": "https://aistudiocdn.com/@google/genai@^1.29.1",
        "@huggingface/transformers": "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3",
        "react/": "https://aistudiocdn.com/react@^19.2.0/",
        "react": "https://aistudiocdn.com/react@^19.2.0",
        "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/"
    }
    }
    </script>

    <!-- ONNX Runtime Web for AI inference -->
    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.17.0/dist/ort.min.js"></script>

</head>
<body class="font-display bg-background-light dark:bg-background-dark text-text-light dark:text-text-dark">
    <div id="root"></div>
    <script type="module" src="./index.tsx"></script>
</body>
</html>