使用Bootstrap的内置类来代替自定义CSS。您已经引入了Bootstrap,可以充分利用其功能。这可以减少代码量并使样式更一致。
添加一个响应式导航栏以增强用户体验。您可以使用Bootstrap的内置导航组件轻松实现这一点。
为表单添加验证以确保用户在提交之前输入有效的API密钥。这可以使用HTML5的内置输入验证或者使用Bootstrap的表单验证功能来实现。
在显示查询结果时,使用Bootstrap的卡片组件以保持一致性。
在显示查询结果时,您可以考虑以图表形式展示数据。这将使信息更容易理解。可以使用开源库,如Chart.js或D3.js。
根据以上建议,这里是一份更新后的代码:
<!DOCTYPE html>
连接断开,回复不完整。
<head>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
<!-- 添加表单验证脚本 -->
<script>
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
@ChatGPT 4,把js改成php,其他的功能不变,给我修改后的代码<!DOCTYPE html>
<html lang="zh-Hans">
<head>
OpenAI 余额查询
function checkOpenAICredit($apiKey) { $now = new DateTime(); $startDate = (new DateTime())->sub(new DateInterval('P90D')); $endDate = (new DateTime())->add(new DateInterval('P1D')); $urlSubscription = 'https://api.openai.com/v1/dashboard/billing/subscription'; $urlBalance = 'https://api.openai.com/dashboard/billing/credit_grants'; $urlUsage = 'https://api.openai.com/v1/dashboard/billing/usage?start_date=' . $startDate->format('Y-m-d') . '&end_date=' . $endDate->format('Y-m-d'); $headers = [ 'Authorization: Bearer ' . $apiKey, 'Content-Type: application/json' ]; $subscriptionData = fetchAPI($urlSubscription, $headers); $usageData = fetchAPI($urlUsage, $headers); $totalAmount = $subscriptionData['hard_limit_usd']; $is_subscribed = $subscriptionData['has_payment_method']; $totalUsage = $usageData['total_usage'] / 100; if ($is_subscribed) { $startDate = new DateTime('first day of this month'); $urlUsage = 'https://api.openai.com/v1/dashboard/billing/usage?start_date=' . $startDate->format('Y-m-d') . '&end_date=' . $endDate->format('Y-m-d'); $usageData = fetchAPI($urlUsage, $headers); $totalUsage = $usageData['total_usage'] / 100; } $remaining = $totalAmount - $totalUsage; return [ 'total_granted' => $totalAmount, 'total_used' => $totalUsage, 'total_available' => $remaining ]; } function fetchAPI($url, $headers) { $curl = curl_init(); curl_setopt_array($curl, [ CURLOPT_URL => $url, CURLOPT_RETURNTRANSFER => true, CURLOPT_HTTPHEADER => $headers ]); $response = curl_exec($curl); curl_close($curl); return json_decode($response, true); } function displayResult($data) { if ($data) { echo '<div class="row row-cols-1 row-cols-md-3 g-4">'; echo '<div class="col">'; echo '<div class="card text-center">'; echo '<div class="card-body">'; echo '<h5 class="card-title">总额度</h5>'; echo '<p class="card-text text-2xl font-semibold">' . number_format($data['total_granted'], 2) . '</p>'; echo '</div>'; echo '</div>'; echo '</div>'; echo '<div class="col">'; echo '<div class="card text-center">'; echo '<div class="card-body">'; echo '<h5 class="card-title">已使用额度</h5>'; echo '<p class="card-text text-2xl font-semibold">' . number_format($data['total_used'], 2) . '</p>'; echo '</div>'; echo '</div>'; echo '</div>'; echo '<div class="col">'; echo '<div class="card text-center">'; echo '<div class="card-body">'; echo '<h5 class="card-title">剩余可用额度</h5>'; echo '<p class="card-text text-2xl font-semibold">' . number_format($data['total_available'], 2) . '</p>'; echo '</div>'; echo '</div>'; echo '</div>'; echo '</div>'; } else { echo "<script>alert('您的账户已被封禁,请登录OpenAI进行查看。');</script>"; } } ?> </div> </div> </div> <!-- 引入 Bootstrap JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
</body>
</html>