app.blade.php 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <title>@yield('title', '巴利书库')</title>
  8. <link href="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css" rel="stylesheet" />
  9. <link href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons-sprite.svg" rel="stylesheet" />
  10. <style>
  11. .book-card {
  12. transition: transform 0.2s;
  13. }
  14. .book-card:hover {
  15. transform: translateY(-2px);
  16. }
  17. .book-cover {
  18. height: 200px;
  19. object-fit: cover;
  20. }
  21. @media (max-width: 768px) {
  22. .book-cover {
  23. height: 150px;
  24. }
  25. }
  26. .hero-section {
  27. height: 250px;
  28. width: 100%;
  29. background-image: url('{{ URL::asset("assets/images/hero-2.jpg") }}');
  30. background-size: cover;
  31. background-position: center;
  32. background-repeat: no-repeat;
  33. position: relative;
  34. display: flex;
  35. align-items: center;
  36. justify-content: center;
  37. }
  38. .hero-overlay {
  39. position: absolute;
  40. top: 0;
  41. left: 0;
  42. right: 0;
  43. bottom: 0;
  44. background: rgba(0, 0, 0, 0.5);
  45. }
  46. .hero-content {
  47. position: relative;
  48. z-index: 2;
  49. text-align: center;
  50. color: white;
  51. max-width: 600px;
  52. padding: 0 1rem;
  53. }
  54. .hero-title {
  55. font-size: 2.5rem;
  56. font-weight: bold;
  57. margin-bottom: 1rem;
  58. text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  59. }
  60. .hero-subtitle {
  61. font-size: 1.2rem;
  62. margin-bottom: 2rem;
  63. text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  64. }
  65. .search-box {
  66. background: white;
  67. border-radius: 0.5rem;
  68. padding: 0.5rem;
  69. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  70. max-width: 500px;
  71. margin: 0 auto;
  72. }
  73. .feature-card {
  74. transition: transform 0.3s ease, box-shadow 0.3s ease;
  75. height: 100%;
  76. }
  77. .feature-card:hover {
  78. transform: translateY(-5px);
  79. box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  80. }
  81. .stats-section {
  82. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  83. color: white;
  84. }
  85. .stat-item {
  86. text-align: center;
  87. padding: 2rem 1rem;
  88. }
  89. .stat-number {
  90. font-size: 2.5rem;
  91. font-weight: bold;
  92. display: block;
  93. }
  94. .stat-label {
  95. font-size: 1rem;
  96. opacity: 0.9;
  97. margin-top: 0.5rem;
  98. }
  99. @media (max-width: 768px) {
  100. .hero-title {
  101. font-size: 2rem;
  102. }
  103. .hero-subtitle {
  104. font-size: 1rem;
  105. }
  106. .hero-section {
  107. height: 250px;
  108. }
  109. .stat-number {
  110. font-size: 2rem;
  111. }
  112. }
  113. @media (max-width: 576px) {
  114. .hero-title {
  115. font-size: 1.5rem;
  116. }
  117. .hero-subtitle {
  118. font-size: 0.9rem;
  119. }
  120. }
  121. </style>
  122. </head>
  123. <body>
  124. <div class="page">
  125. <!-- Hero Section -->
  126. <section class="hero-section">
  127. <div class="hero-overlay"></div>
  128. <div class="hero-content">
  129. <h1 class="hero-title">巴利书库</h1>
  130. <p class="hero-subtitle">探索wikipali,开启智慧之门</p>
  131. <div class="search-box">
  132. <div class="input-group">
  133. <input type="text" class="form-control form-control-lg" placeholder="搜索图书、作者或主题...">
  134. <button class="btn btn-primary btn-lg" type="button">
  135. <i class="ti ti-search"></i>
  136. </button>
  137. </div>
  138. </div>
  139. </div>
  140. </section>
  141. <div class="page-wrapper">
  142. @yield('content')
  143. </div>
  144. </div>
  145. <script src="https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"></script>
  146. @stack('scripts')
  147. </body>
  148. </html>