-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
169 lines (163 loc) · 7.86 KB
/
index.html
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="免费在线渐变背景生成器，轻松创建和下载漂亮的渐变背景图片。支持自定义颜色、角度和尺寸，可导出多种格式。">
<meta name="keywords" content="渐变背景,背景生成器,在线工具,CSS渐变,设计工具,图片生成器">
<meta name="author" content="DIYUN">
<meta name="robots" content="index, follow">
<meta property="og:title" content="渐变背景生成器 - 在线创建精美渐变背景">
<meta property="og:description" content="免费在线渐变背景生成器，轻松创建和下载漂亮的渐变背景图片。支持自定义颜色、角度和尺寸，可导出多种格式。">
<meta property="og:type" content="website">
<title>渐变背景生成器 - 在线创建精美渐变背景</title>
<link rel="icon" href="https://files.diyun.site/blog/2024/07/7fae6d19f5561324c078bebcfe19cbff.webp">
<!-- TailwindCSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
<!-- 语言切换按钮样式 -->
<style>
.language-selector {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
display: flex;
gap: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 8px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.language-btn {
padding: 4px 8px;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
cursor: pointer;
transition: all 0.3s;
}
.language-btn:hover {
background: #f0f0f0;
}
.language-btn.active {
background: #4158D0;
color: white;
border-color: #4158D0;
}
</style>
<!-- 百度统计 -->
<script>
// 加载配置文件并初始化百度统计
fetch('config.json')
.then(response => response.json())
.then(config => {
if (config.baiduAnalytics) {
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?" + config.baiduAnalytics;
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
}
})
.catch(error => console.error('加载配置文件失败:', error));
</script>
</head>
<body>
<header class="header">
<h1 data-lang="pageTitle">渐变背景生成器</h1>
<a href="https://github.com/DemoJ/gradient-generator" target="_blank" class="github-link" title="View on GitHub">
<i class="fab fa-github"></i>
</a>
<div class="language-buttons">
<button class="language-btn active" onclick="setLanguage('zh-CN')">中文</button>
<button class="language-btn" onclick="setLanguage('en')">English</button>
</div>
</header>
<div class="container">
<div class="controls">
<!-- 推荐渐变 -->
<div class="control-group">
<label data-lang="presetGradients">推荐渐变：</label>
<div class="preset-gradients">
<button class="preset-btn" data-colors='["#FF3CAC", "#784BA0"]' title="霓虹紫">
<div class="preset-preview" style="background: linear-gradient(45deg, #FF3CAC, #784BA0)"></div>
</button>
<button class="preset-btn" data-colors='["#FF9A9E", "#FAD0C4"]' title="珊瑚粉">
<div class="preset-preview" style="background: linear-gradient(45deg, #FF9A9E, #FAD0C4)"></div>
</button>
<button class="preset-btn" data-colors='["#4158D0", "#C850C0"]' title="极光紫">
<div class="preset-preview" style="background: linear-gradient(45deg, #4158D0, #C850C0)"></div>
</button>
<button class="preset-btn" data-colors='["#0093E9", "#80D0C7"]' title="海洋蓝">
<div class="preset-preview" style="background: linear-gradient(45deg, #0093E9, #80D0C7)"></div>
</button>
<button class="preset-btn" data-colors='["#FF3CAC", "#2B86C5"]' title="糖果渐变">
<div class="preset-preview" style="background: linear-gradient(45deg, #FF3CAC, #2B86C5)"></div>
</button>
<button class="preset-btn" data-colors='["#FF6B6B", "#4ECDC4"]' title="热带风情">
<div class="preset-preview" style="background: linear-gradient(45deg, #FF6B6B, #4ECDC4)"></div>
</button>
<button class="preset-btn" data-colors='["#764BA2", "#667EEA"]' title="深邃紫">
<div class="preset-preview" style="background: linear-gradient(45deg, #764BA2, #667EEA)"></div>
</button>
<button class="preset-btn" data-colors='["#F83600", "#FE8C00"]' title="热情橙">
<div class="preset-preview" style="background: linear-gradient(45deg, #F83600, #FE8C00)"></div>
</button>
</div>
</div>
<!-- 自定义渐变 -->
<div class="control-group">
<label data-lang="customGradient">自定义渐变：</label>
<div class="color-inputs">
<input type="color" id="color1" value="#4158D0">
<input type="color" id="color2" value="#C850C0">
</div>
</div>
<!-- 渐变角度 -->
<div class="control-group">
<label data-lang="gradientAngle">渐变角度：</label>
<input type="range" id="angle" min="0" max="360" value="45">
<span id="angleValue">45°</span>
</div>
<!-- 图片尺寸 -->
<div class="control-group">
<label data-lang="imageSize">图片尺寸：</label>
<div class="size-inputs">
<input type="number" id="width" value="1920" placeholder="宽度">
<span>×</span>
<input type="number" id="height" value="1080" placeholder="高度">
</div>
</div>
<!-- 图片格式 -->
<div class="control-group">
<label data-lang="imageFormat">图片格式：</label>
<div class="format-options">
<label class="format-option">
<input type="radio" name="format" value="png" checked>
<span>PNG</span>
</label>
<label class="format-option">
<input type="radio" name="format" value="jpeg">
<span>JPEG</span>
</label>
<label class="format-option">
<input type="radio" name="format" value="webp">
<span>WebP</span>
</label>
</div>
</div>
<button id="download" data-lang="downloadButton">下载背景图片</button>
</div>
<div class="preview-container">
<div id="preview" class="preview"></div>
</div>
</div>
<script src="i18n.js"></script>
<script src="script.js"></script>
</body>
</html>