Spaces:
Running
Running
Update index.html
Browse files- index.html +32 -10
index.html
CHANGED
@@ -76,16 +76,18 @@
|
|
76 |
}
|
77 |
.circle-container {
|
78 |
display: flex;
|
79 |
-
justify-content: space-
|
80 |
align-items: center;
|
81 |
flex: 1;
|
82 |
max-height: 400px;
|
|
|
83 |
}
|
84 |
.model-container {
|
85 |
display: flex;
|
86 |
flex-direction: column;
|
87 |
align-items: center;
|
88 |
position: relative;
|
|
|
89 |
}
|
90 |
.circle {
|
91 |
background-color: #ffffff;
|
@@ -111,6 +113,24 @@
|
|
111 |
font-size: 20px;
|
112 |
font-weight: bold;
|
113 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
114 |
</style>
|
115 |
</head>
|
116 |
<body>
|
@@ -148,6 +168,9 @@
|
|
148 |
</div>
|
149 |
<div id="new-param" class="param-label">1B</div>
|
150 |
</div>
|
|
|
|
|
|
|
151 |
<div class="model-container">
|
152 |
<div id="circle-old" class="circle"></div>
|
153 |
<div class="circle-label">
|
@@ -208,21 +231,20 @@
|
|
208 |
const equivalent = params * Math.pow(2, generation - 4);
|
209 |
resultEquiv.textContent = equivalent.toFixed(1);
|
210 |
|
211 |
-
// 更新圆形大小
|
212 |
-
const baseSize = 80;
|
213 |
const newSize = baseSize * Math.sqrt(params);
|
214 |
const oldSize = baseSize * Math.sqrt(equivalent);
|
215 |
|
216 |
-
//
|
217 |
-
const
|
218 |
-
const scaleFactor = Math.max(newSize, oldSize) > maxSize ? maxSize / Math.max(newSize, oldSize) : 1;
|
219 |
|
220 |
-
circleNew.style.width = `${Math.max(
|
221 |
-
circleNew.style.height = `${Math.max(
|
222 |
newParam.textContent = `${params.toFixed(1)}B`;
|
223 |
|
224 |
-
circleOld.style.width = `${Math.max(
|
225 |
-
circleOld.style.height = `${Math.max(
|
226 |
oldParam.textContent = `${equivalent.toFixed(1)}B`;
|
227 |
|
228 |
// 调整参数文本颜色
|
|
|
76 |
}
|
77 |
.circle-container {
|
78 |
display: flex;
|
79 |
+
justify-content: space-between;
|
80 |
align-items: center;
|
81 |
flex: 1;
|
82 |
max-height: 400px;
|
83 |
+
padding: 0 40px;
|
84 |
}
|
85 |
.model-container {
|
86 |
display: flex;
|
87 |
flex-direction: column;
|
88 |
align-items: center;
|
89 |
position: relative;
|
90 |
+
flex: 1;
|
91 |
}
|
92 |
.circle {
|
93 |
background-color: #ffffff;
|
|
|
113 |
font-size: 20px;
|
114 |
font-weight: bold;
|
115 |
}
|
116 |
+
.equals-sign {
|
117 |
+
font-size: 80px;
|
118 |
+
color: #4CAF50;
|
119 |
+
font-weight: bold;
|
120 |
+
display: flex;
|
121 |
+
align-items: center;
|
122 |
+
justify-content: center;
|
123 |
+
text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
|
124 |
+
animation: glow 2s ease-in-out infinite alternate;
|
125 |
+
}
|
126 |
+
@keyframes glow {
|
127 |
+
from {
|
128 |
+
text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
|
129 |
+
}
|
130 |
+
to {
|
131 |
+
text-shadow: 0 0 20px rgba(76, 175, 80, 0.8);
|
132 |
+
}
|
133 |
+
}
|
134 |
</style>
|
135 |
</head>
|
136 |
<body>
|
|
|
168 |
</div>
|
169 |
<div id="new-param" class="param-label">1B</div>
|
170 |
</div>
|
171 |
+
|
172 |
+
<div class="equals-sign">≈</div>
|
173 |
+
|
174 |
<div class="model-container">
|
175 |
<div id="circle-old" class="circle"></div>
|
176 |
<div class="circle-label">
|
|
|
231 |
const equivalent = params * Math.pow(2, generation - 4);
|
232 |
resultEquiv.textContent = equivalent.toFixed(1);
|
233 |
|
234 |
+
// 更新圆形大小 - 移除大小限制,只保留极小的最小值
|
235 |
+
const baseSize = 80;
|
236 |
const newSize = baseSize * Math.sqrt(params);
|
237 |
const oldSize = baseSize * Math.sqrt(equivalent);
|
238 |
|
239 |
+
// 只设置一个很小的最小值,避免完全看不见
|
240 |
+
const minSize = 20;
|
|
|
241 |
|
242 |
+
circleNew.style.width = `${Math.max(minSize, newSize)}px`;
|
243 |
+
circleNew.style.height = `${Math.max(minSize, newSize)}px`;
|
244 |
newParam.textContent = `${params.toFixed(1)}B`;
|
245 |
|
246 |
+
circleOld.style.width = `${Math.max(minSize, oldSize)}px`;
|
247 |
+
circleOld.style.height = `${Math.max(minSize, oldSize)}px`;
|
248 |
oldParam.textContent = `${equivalent.toFixed(1)}B`;
|
249 |
|
250 |
// 调整参数文本颜色
|