From 4fa7d45e951e3ca410187ad6e16be5c639a4c531 Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Thu, 15 Dec 2022 14:43:46 +0800
Subject: [PATCH] =?UTF-8?q?footer=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/views/common/footer.blade.php | 88 ++++++++++++++++++++-----
 resources/views/index.blade.php         |  2 +-
 2 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/resources/views/common/footer.blade.php b/resources/views/common/footer.blade.php
index 7c00919..bd7cd1c 100644
--- a/resources/views/common/footer.blade.php
+++ b/resources/views/common/footer.blade.php
@@ -1,16 +1,72 @@
-<div class="mt-2">
-    <span>其他链接：</span>
-    <a class="text-blue-600" href="https://space.bilibili.com/328013928" target="_blank">永恒de草薙的B站主页</a>
-    <a class="text-blue-600" href="https://live.bilibili.com/24048885" target="_blank">永恒de草薙的直播间</a>
-    <a class="text-blue-600" href="https://space.bilibili.com/4847925" target="_blank">开心鄢的B站主页</a>
-    <a class="text-blue-600" href="https://space.bilibili.com/176444156" target="_blank">神鬼传奇（课代表）的B站主页</a>
-    <a class="text-blue-600" href="https://pan.baidu.com/s/1ECnwiHnsm-3dSXNJGWlR2g?pwd=ddxt" target="_blank">近期的录播文件（提取码：ddxt）</a>
-    <a class="text-blue-600" href="https://www.aliyundrive.com/s/2moBpEUqDTG" target="_blank">2022年的录播文件</a>
-    <a class="text-blue-600" href="https://www.aliyundrive.com/s/AAAMXjagZ79" target="_blank">2021年的录播文件</a>
-    <a class="text-blue-600" href="https://www.aliyundrive.com/s/hpYfF518yH7" target="_blank">2020年的录播文件</a>
-    <a class="text-blue-600" href="https://www.aliyundrive.com/s/GuyUChZ27Fy" target="_blank">2019年的录播文件</a>
-    <a class="text-blue-600" href="https://bilirec.home.jerryyan.top/" target="_blank">压制机器状态</a>
-</div>
-<div class="mt-2 text-center">
-    <a class="text-blue-600 underline" href="http://beian.miit.gov.cn" target="_blank">赣ICP备18004555号-1</a>
-</div>
+<footer class="bg-white dark:bg-gray-800 pt-4 pb-8 xl:pt-8">
+    <div class="max-w-screen-lg px-4 mx-auto text-gray-400 xl:max-w-screen-xl sm:px-6 md:px-8 dark:text-gray-300">
+        <ul class="flex flex-wrap justify-center pb-8 text-lg font-light">
+            <li class="w-1/2 md:w-1/4">
+                <div class="text-center">
+                    <h2 class="text-gray-500 dark:text-gray-200 text-md mb-4">
+                        永恒de草薙
+                    </h2>
+                    <ul>
+                        <li class="mb-2 md:mb-4 text-base transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
+                            <a href="https://space.bilibili.com/328013928" target="_blank">B站主页</a>
+                        </li>
+                        <li class="mb-2 md:mb-4 text-base transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
+                            <a href="https://live.bilibili.com/24048885" target="_blank">直播间</a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+            <li class="w-1/2 md:w-1/4">
+                <div class="text-center">
+                    <h2 class="text-gray-500 dark:text-gray-200 text-md mb-4">
+                        课代表们
+                    </h2>
+                    <ul>
+                        <li class="mb-2 md:mb-4 text-base transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
+                            <a href="https://space.bilibili.com/4847925" target="_blank">开心鄢的B站主页</a>
+                        </li>
+                        <li class="mb-2 md:mb-4 text-base transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
+                            <a href="https://space.bilibili.com/176444156" target="_blank">神鬼传奇的B站主页</a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+            <li class="w-1/2 md:w-1/4">
+                <div class="text-center">
+                    <h2 class="text-gray-500 dark:text-gray-200 text-md mb-4">
+                        录播文件
+                    </h2>
+                    <ul>
+                        <li class="mb-2 md:mb-4 text-base transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
+                            <a href="https://www.aliyundrive.com/s/2moBpEUqDTG" target="_blank">2022年的录播文件</a>
+                        </li>
+                        <li class="mb-2 md:mb-4 text-base transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
+                            <a href="https://www.aliyundrive.com/s/AAAMXjagZ79" target="_blank">2021年的录播文件</a>
+                        </li>
+                        <li class="mb-2 md:mb-4 text-base transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
+                            <a href="https://www.aliyundrive.com/s/hpYfF518yH7" target="_blank">2020年的录播文件</a>
+                        </li>
+                        <li class="mb-2 md:mb-4 text-base transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
+                            <a href="https://www.aliyundrive.com/s/GuyUChZ27Fy" target="_blank">2019年的录播文件</a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+            <li class="w-1/2 md:w-1/4">
+                <div class="text-center">
+                    <h2 class="text-gray-500 dark:text-gray-200 text-md mb-4">
+                        杂项
+                    </h2>
+                    <ul>
+                        <li class="mb-2 md:mb-4 text-base transition-colors duration-200 hover:text-gray-800 dark:hover:text-white">
+                            <a href="https://bilirec.home.jerryyan.top/" target="_blank">压制机器状态</a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
+        </ul>
+        <div class="border-t border-gray-200 text-center pt-10 sm:pt-12 font-light flex items-center justify-center">
+            <a class="text-blue-600 underline" href="http://beian.miit.gov.cn" target="_blank">赣ICP备18004555号-1</a>
+        </div>
+    </div>
+</footer>
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 1ea172b..e92e0a7 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -13,7 +13,7 @@
     <input class="border border-black" type="submit">
 </form>
 @foreach($comments as $comment)
-    <div class="max-w xl:max-w-5xl lg:max-w-2xl md:max-w-lg mx-1 md:mx-auto sm:mx-2 px-1 sm:px-2 md:px-4 py-4 bg-white border border-gray-200 rounded-lg shadow-md my-4 dark:bg-gray-800">
+    <div class="max-w xl:max-w-5xl lg:max-w-2xl md:max-w-lg mx-2 md:mx-auto px-1 sm:px-2 md:px-4 py-4 bg-white border border-gray-200 rounded-lg shadow-md my-4 dark:bg-gray-800">
         <div>
             <a href="/video/{{$comment->video->id}}" class="text-2xl font-bold text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-200 hover:underline" tabindex="0" role="link">{{$comment->video->title}}</a>
             <div class="px-2 md:px-4 lg:px-8 mt-2 flex items-center justify-between">