devicon-gen/index.html at main · 6871296/devicon-gen · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>DevIcon生成器</title>
        <style>
            body{
                background-size: cover;
                text-align: center;
            }
            img{
                width: 30;
                height: 30;
                vertical-align: middle;
            }
            input{
                width: 300px;
                height: 30px;
                font-size: 18px;
                text-align: center;
                border: #30b087 2px solid;
                border-radius: 5px;
            }
            input:focus{
                outline: none;
                border: 2px solid #50d0a7;
                background-color: aquamarine;
            }
            input::placeholder{
                font-size: 16px;
                color: #206029;
            }
            button{
                width: 100px;
                height: 30px;
                font-size: 16px;
                margin: 10px;
                background-color:green;
                color: white;
                border: 1px solid #000000;
                border-radius: 5px;
            }
            button:hover{
                background-color: #20a020;
                cursor: pointer;
            }
            #urlDisplay{
                font-size: 14px;
                margin:10px 10px 10px 20px;
            }
            #iconDisplay{
                margin: 20px auto;
                max-width: 200px;
                max-height: 200px;
            }
        </style>
    </head>
    <body>
        <h1>
            <img src="https://avatars.githubusercontent.com/u/66767815?s=200&v=4" height="40" width="40">
            DevIcon<strong>生成器</strong>
        </h1>
        <p>
            本项目可以通过软件包名称获取DevIcon图标集中的图标，只要图标存在就可以正常生成。<br>
            如果无法生成，可以看看你是不是打错字了，或者图标不存在。<br>
            <a href="https://github.com/devicons/devicon" style="color:green">DevIcon图标集</a>
        </p>
        <font id="JSEnableCheck" color="red">JavaScript似乎未启用，请启用后刷新再试！<br></font><!--写noscript不能展示其他内容-->
        <input type="text" id="input" placeholder="输入软件包名称"><br>
        <span id="urlDisplay" style="color:#206029">URL未输入</span><br>
        <span id="errDisplay" style="color:red; display:none;"></span>
        <button id="generateBtn" onclick="gen()">生成图标</button> <button id="copyBtn" onclick="copy()">复制URL</button>
        <img id="iconDisplay" alt="DevIcon图标将显示在这里" style="display:none;">
        <script>
            document.getElementById('JSEnableCheck').style.display = 'none';
            console.log('JavaScript已启用，页面加载成功');
            function gen(){
                document.getElementById('generateBtn').textContent = '生成图标';
                document.getElementById('errDisplay').style.display = 'none';
                const name = document.getElementById('input').value;
                if(name === ''){
                    document.getElementById('generateBtn').textContent = '❌生成失败';
                    document.getElementById('errDisplay').style.display = 'block';
                    document.getElementById('errDisplay').textContent = '未输入软件包名称！';
                    console.log('未输入软件包名称，生成操作取消');
                    setTimeout(() => {
                        document.getElementById('generateBtn').textContent = '生成图标';
                        document.getElementById('errDisplay').style.display = 'none';
                    }, 3000);
                    return;
                }
                const iconUrl = 'https://raw.githubusercontent.com/devicons/devicon/refs/heads/master/icons/'+name+'/'+name+'-original.svg';
                const iconDisplay = document.getElementById('iconDisplay').src = iconUrl;
                document.getElementById('iconDisplay').style.display = 'block';
                document.getElementById('urlDisplay').textContent = iconUrl;
                console.log('已生成软件包'+name+'的DevIcon URL：' + iconUrl);
            }
            function copy(){
                document.getElementById('copyBtn').textContent = '复制URL';
                document.getElementById('errDisplay').style.display = 'none';
                const name = document.getElementById('input').value;
                if(name === ''){
                    document.getElementById('copyBtn').textContent = '❌复制失败';
                    document.getElementById('errDisplay').style.display = 'block';
                    document.getElementById('errDisplay').textContent = '未输入软件包名称！';
                    setTimeout(() => {
                        document.getElementById('copyBtn').textContent = '复制URL';
                        document.getElementById('errDisplay').style.display = 'none';
                    }, 3000);
                    console.log('未输入软件包名称，复制操作取消');
                    return;
                }else{
                    const iconUrl = document.getElementById('iconDisplay').src;
                    if(!navigator || !navigator.clipboard){
                        document.getElementById('errDisplay').style.display = 'block';
                        document.getElementById('errDisplay').textContent = '浏览器版本过旧，无法复制！';
                        document.getElementById('copyBtn').textContent = '❌复制失败';
                        setTimeout(() => {
                            document.getElementById('copyBtn').textContent = '复制URL';
                            document.getElementById('errDisplay').style.display = 'none';
                        }, 3000);
                        console.log('浏览器不支持Clipboard API，自动复制失败');
                        return;
                    }else{
                        navigator.clipboard.writeText(iconUrl).then(() => {}, () => {
                            document.getElementById('copyBtn').textContent = '❌复制失败';
                            setTimeout(() => {
                                document.getElementById('copyBtn').textContent = '复制URL';
                            }, 3000);
                            console.log('Clipboard API写入失败，自动复制失败');
                            return;
                        });
                        document.getElementById('copyBtn').textContent = '✅已复制';
                        setTimeout(() => {
                            document.getElementById('copyBtn').textContent = '复制URL';
                        }, 3000);
                        console.log('已复制软件包'+name+'的DevIcon URL：'+iconUrl);
                    }
                }
            }
        </script><!--写完后的唯一感觉：JavaScript Debug太难了！！！但这是我自学的第一门语言-->
    </body>
</html>