From 6ce0a8789180ee0d03aa45f1ef7b564a47379a61 Mon Sep 17 00:00:00 2001 From: RayTsai94 Date: Tue, 20 Aug 2024 23:52:20 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=E9=9A=8A=E4=BC=8D=E5=A0=B1=E5=90=8D?= =?UTF-8?q?=E5=85=A7=E5=AE=B9=E8=A9=B3=E7=B4=B0=E8=B3=87=E8=A8=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .php：內容架構 - .css加入響應式設計：if(max-width <= 768px) - .js 金錢數字增加器 --- public/assets/css/tripDetail.css | 99 +++++++++++++++++++++++ public/assets/js/tripDetail.js | 30 +++++++ resources/views/trip/tripDetail.blade.php | 89 ++++++++++++++++++++ 3 files changed, 218 insertions(+) create mode 100644 public/assets/css/tripDetail.css create mode 100644 public/assets/js/tripDetail.js create mode 100644 resources/views/trip/tripDetail.blade.php diff --git a/public/assets/css/tripDetail.css b/public/assets/css/tripDetail.css new file mode 100644 index 0000000..f6b596b --- /dev/null +++ b/public/assets/css/tripDetail.css @@ -0,0 +1,99 @@ +/*滾動效果*/ +html{ + scroll-behavior: smooth; +} +/*目次導引調整*/ +.content-adjust{ + scroll-margin-top: 85px; +} +/*內容區域*/ +.content{ + width: auto; + /*float: left;*/ + padding: 20px; +} +/*目次css*/ +.toc{ + position: fixed; + top: 200px; + right: 5%; + width: 200px; + padding: 10px; + background-color: #f4f4f4; + border: 1px solid #ddd; + /*z-index: 1000;*/ + +} + +.toc ul{ + list-style-type: none; + padding-left: 0; +} +.toc li{ + margin-bottom: 10px; +} +.toc a{ + text-decoration: none; + color: #0366d6; +} +.toc a:hover{ + text-decoration: underline; +} +@media screen and (max-width: 768px) { + .toc { + position: static; + width: 100%; /* 可根据需要调整宽度 */ + display: flex; + flex-direction: column; /* 确保 h2 和其他元素按[列]排列 */ + align-items: center; /* 水平居中 */ + } + + .toc li { + display: inline; + font-size: 20px; + margin-inline: 5px; + } +} + +/*隊伍費用css*/ +.amount { + font-size: 48px; + font-weight: bold; + color: #333; + position: relative; + display: inline-block; +} +.amount::before { + content: "$"; + position: absolute; + left: 0; +} +.number { + margin-left: 1ch; /* 1 characters space */ + display: inline-block; +} + +/*時間表格css*/ + + .styled-table{ + width: 100%; + border-collapse: collapse; + background-color: #f4f4f4; + } +.styled-table thead tr{ + background-color: #ddd; +} +.styled-table th, .styled-table td{ + padding: 10px; + text-align: left; + border: 1px solid #ddd; +} +.styled-table tbody tr:nth-child(even){ + background-color: #e9e9e9; +} +.style-table tbody tr:hover{ + background-color: #d1d1d1; +} + + + diff --git a/public/assets/js/tripDetail.js b/public/assets/js/tripDetail.js new file mode 100644 index 0000000..0b9f62e --- /dev/null +++ b/public/assets/js/tripDetail.js @@ -0,0 +1,30 @@ +// 隊伍費用動畫 +function animateValue(id, start, end, duration) { + let obj = document.getElementById(id); + let range = end - start; + let current = start; + let increment = end > start ? Math.ceil(range / (duration / 50)) : Math.floor(range / (duration / 50)); + let stepTime = Math.abs(Math.floor(duration / (range / increment))); + let timer = setInterval(function() { + current += increment; + if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) { + current = end; + clearInterval(timer); + } + obj.textContent = current; + }, stepTime); +} + +document.addEventListener("DOMContentLoaded", function() { + let target = document.getElementById("amount"); + + let observer = new IntersectionObserver(function(entries) { + if (entries[0].isIntersecting) { + animateValue("amount", 0, 5000, 2000); // 參數end可以調整金錢數值 + observer.unobserve(target); // 動畫開始後停止觀察 + } + }, {threshold: 1}); // 元素進入視窗100%時觸發 + + observer.observe(target); +}); + diff --git a/resources/views/trip/tripDetail.blade.php b/resources/views/trip/tripDetail.blade.php new file mode 100644 index 0000000..75e598c --- /dev/null +++ b/resources/views/trip/tripDetail.blade.php @@ -0,0 +1,89 @@ +@extends('basic.main') + +@section('title', 'Coming Soon') + +@section('content') + +
+

目錄

+ +
+ +
+
+
+
+ + +
+
山岳類別 • Jul 5th '22
+ + + + +
+

路線名稱

+ +
+ +
+

★ 詳細行程

+

D0 6/2(四) 18:00中央大學≧21:30鎮西堡登山口 (C0)

+

D1 6/3(五) (日出：05:05，日落：18:40) C0 05:00出發→06:40 B區神木岔→08:30馬望海三岔路口營地(整裝)-->09:30 H2385鞍部-->10:00 H2438山頭-->10:30 H2484山頭-->11:20馬望海山(60min午餐) -->15:30馬望海三岔路口營地C1

+

D2 6/4(六) (日出：05:05，日落：18:40) C1 05:00出發-->05:50塔克金溪支流溪底-->07:00檜木獵人營地-->07:30稜線岔路營地-->08:00馬望女苦山-->09:20 H2384峰(282261,2713789)-->10:40留倉賀山(午餐30min) -->14:00馬望女苦山-->14:30稜線岔路營地-->15:50塔克金溪支流溪底(取水)-->17:15 C2(同C1)

+

D3 6/5(日) (日出：05:05，日落：18:41) C2 06:00→06:30馬洋毒龍潭岔→09:00 H2370鞍部(278850,2714059)→11:30 H2494峰前鞍部(毒龍潭岔)(279102,2713934) → 13:00毒龍潭(午餐30min) →(視情況前往AB神木區)→17:00鎮西堡登山口

+
+ +
+ +
+

★ 特色介紹

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at error explicabo inventore iste, molestiae numquam perferendis ut vel. Ab asperiores consectetur dicta fugit inventore ipsum laborum quas quisquam, soluta!

+
+ +
+ +
+

★ 行程費用

+
+ 0 +
+
+ +
+ +
+

★ 時間安排

+ + + + + + + + + + + + + + + + + +
報名截止時間公佈錄取時間行前會議時間鳥隊時間
datedatedatedate
+
+
+ +
+
+
+
+
+@endsection From 1b6b290b17e829d20b585644301b1e5ecf7ad182 Mon Sep 17 00:00:00 2001 From: RayTsai94 Date: Tue, 20 Aug 2024 23:55:25 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=E9=9A=8A=E4=BC=8D=E5=A0=B1=E5=90=8D?= =?UTF-8?q?=E5=85=A7=E5=AE=B9=E8=A9=B3=E7=B4=B0=E8=B3=87=E8=A8=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .php：內容架構 - .css加入響應式設計：if(max-width <= 768px) - .js 金錢數字增加器 --- ZenBlog/single-post.html | 197 ++++++++++++++++----------- resources/views/basic/main.blade.php | 4 + routes/web.php | 3 + 3 files changed, 124 insertions(+), 80 deletions(-) diff --git a/ZenBlog/single-post.html b/ZenBlog/single-post.html index c65367d..5130e99 100644 --- a/ZenBlog/single-post.html +++ b/ZenBlog/single-post.html @@ -5,7 +5,8 @@ - ZenBlog Bootstrap Template - Single Post + 中央大學登山社— + @@ -42,64 +43,62 @@ +
  • 登入
    • + + + + +
    + + + + + + +
    +
    + + + +
    +
    + +
    + + + +
    @@ -109,29 +108,67 @@

    ZenBlog

    -
    -
    Business • Jul 5th '22
    -

    13 Amazing Poems from Shel Silverstein with Valuable Life Lessons

    -

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione officia sed, suscipit distinctio, numquam omnis quo fuga ipsam quis inventore voluptatum recusandae culpa, unde doloribus saepe labore alias voluptate expedita? Dicta delectus beatae explicabo odio voluptatibus quas, saepe qui aperiam autem obcaecati, illo et! Incidunt voluptas culpa neque repellat sint, accusamus beatae, cumque autem tempore quisquam quam eligendi harum debitis.

    - -
    - -
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, odit?
    -
    -

    Sunt reprehenderit, hic vel optio odit est dolore, distinctio iure itaque enim pariatur ducimus. Rerum soluta, perspiciatis voluptatum cupiditate praesentium repellendus quas expedita exercitationem tempora aliquam quaerat in eligendi adipisci harum non omnis reprehenderit quidem beatae modi. Ea fugiat enim libero, ipsam dicta explicabo nihil, tempore, nulla repellendus eos necessitatibus eligendi corporis cum? Eaque harum, eligendi itaque numquam aliquam soluta.

    -

    Explicabo perspiciatis, laborum provident voluptates illum in nulla consectetur atque quaerat excepturi quisquam, veniam velit ex pariatur quos consequuntur? Excepturi reiciendis perferendis, cupiditate dolorem eos illum amet. Beatae voluptates nemo esse ratione voluptate, nesciunt fugit magnam veritatis voluptas dignissimos doloribus maiores? Aliquam, dolores natus exercitationem corrupti blanditiis, consequuntur nihil nobis sed voluptatibus maiores sunt, illo provident aliquid laborum. Vitae, ut.

    -

    Reprehenderit aut sed doloribus blanditiis, aspernatur magni? In molestias rem, similique ut esse repudiandae quod recusandae dolores neque earum omnis at, suscipit fuga? Minima qui veniam deserunt quisquam error amet at ratione nesciunt porro quis placeat repudiandae voluptatibus officiis fuga necessitatibus, expedita officia adipisci eaque labore accusamus? Nesciunt repellat illo exercitationem facilis similique quaerat, quis sequi? Praesentium nulla ipsam dolor.

    -

    Dolorum, incidunt! Adipisci harum itaque maxime dolores doloremque porro eligendi quis, doloribus vel sit rerum sunt obcaecati nam suscipit nulla vitae alias blanditiis aliquam debitis atque illo modi et placeat. Ratione iure eveniet provident. Culpa laboriosam sed ad quia. Corrupti, earum, perferendis dolore cupiditate sint nihil maiores iusto tempora nobis porro itaque est. Ut laborum culpa assumenda pariatur et perferendis?

    -

    Est soluta veritatis laboriosam, consequuntur temporibus asperiores, fugit id a ullam sed, expedita sequi doloribus fugiat. Odio et necessitatibus enim nam, iste reprehenderit cupiditate omnis ut iure aliquid obcaecati, repellendus nemo provident eveniet tempora minus! Voluptates aut laboriosam, maiores nihil accusantium, a dolorum quaerat tenetur illo eum culpa cum laudantium sunt doloremque modi possimus magni? Perferendis cum repudiandae corrupti porro.

    -
    - -
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, odit?
    -
    -

    Quis molestiae, dolorem consequuntur labore perferendis enim accusantium commodi optio, sequi magnam ad consectetur iste omnis! Voluptatibus, quia officia esse necessitatibus magnam tempore reprehenderit quo aspernatur! Assumenda, minus dolorem repellendus corporis corrupti quia temporibus repudiandae in. Sit rem aut, consectetur repudiandae perferendis nemo alias, iure ipsam omnis quam soluta, nobis animi quis aliquam blanditiis at. Dicta nemo vero sequi exercitationem.

    -

    Architecto ex id at illum aperiam corporis, quidem magnam doloribus non eligendi delectus laborum porro molestiae beatae eveniet dolor odit optio soluta dolores! Eaque odit a nihil recusandae, error repellendus debitis ex autem ab commodi, maiores officiis doloribus provident optio, architecto assumenda! Nihil cum laboriosam eos dolore aliquid perferendis amet doloremque quibusdam odio soluta vero odit, ipsa, quisquam quod nulla.

    -

    Consequuntur corrupti fugiat quod! Ducimus sequi nemo illo ad necessitatibus amet nobis corporis et quasi. Optio cum neque fuga. Ad excepturi magnam quisquam ex voluptatibus vitae aut nam quidem doloribus, architecto perspiciatis sit consequatur pariatur alias animi expedita quas? Et doloribus voluptatibus perferendis qui fugiat voluptatum autem facere aspernatur quidem quae assumenda iste, sit similique, necessitatibus laborum magni. Ea, dolores!

    -

    Possimus temporibus rerum illo quia repudiandae provident sed quas atque. Ipsam adipisci accusamus iste optio illo aliquam molestias? Voluptatibus, veniam recusandae facilis nobis perspiciatis rem similique, nisi ad explicabo ipsa voluptatum, inventore molestiae natus adipisci? Fuga delectus quia assumenda totam aspernatur. Nobis hic ea rem, quaerat voluptate vero illum laboriosam omnis aspernatur labore, natus ex iusto ducimus exercitationem a officia.

    -
    +
    +
    山岳類別 • Jul 5th '22
    +

    路線名稱

    +

    ★ 詳細行程

    + +
    + Description of the image content +
    這是描述照片的內容1
    +
    + +

    ★ 行程費用

    +

    12345

    +
    + +
    這是描述照片的內容2
    +
    +

    ★ 特色介紹

    +

    12345

    +

    時間安排

    + + + + + + + + + + + + + + + + + + + +
    報名截止時間公佈錄取時間行前會議時間鳥隊時間
    datedatedatedate
    + +
    +
    @@ -556,4 +593,4 @@

    Recent Posts

    - \ No newline at end of file + diff --git a/resources/views/basic/main.blade.php b/resources/views/basic/main.blade.php index 67532f1..35b4625 100644 --- a/resources/views/basic/main.blade.php +++ b/resources/views/basic/main.blade.php @@ -45,6 +45,10 @@ + + + + diff --git a/routes/web.php b/routes/web.php index c4a1ece..d4718b1 100644 --- a/routes/web.php +++ b/routes/web.php @@ -33,6 +33,9 @@ Route::get('/aboutus', function () { return view('information.aboutus'); }); +Route::get('/trip/detail', function () { + return view('trip.tripDetail'); +}); Route::get('/conference/register', function () { return view('conference.register'); From 3299a551a15e7a594edd8dd32bf608ae6f3b2e85 Mon Sep 17 00:00:00 2001 From: RayTsai94 Date: Thu, 3 Oct 2024 19:24:01 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=E9=9A=8A=E4=BC=8D=E5=A0=B1=E5=90=8D?= =?UTF-8?q?=E5=85=A7=E5=AE=B9=E8=A9=B3=E7=B4=B0=E8=B3=87=E8=A8=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .php：內容架構 - .css加入響應式設計：if(max-width <= 768px) - .js 金錢數字增加器 --- public/assets/css/tripDetail.css | 10 ++++++++++ resources/views/trip/tripDetail.blade.php | 21 +++++++++++---------- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/public/assets/css/tripDetail.css b/public/assets/css/tripDetail.css index f6b596b..12bb049 100644 --- a/public/assets/css/tripDetail.css +++ b/public/assets/css/tripDetail.css @@ -12,6 +12,16 @@ html{ /*float: left;*/ padding: 20px; } +/*date資訊*/ +.namedate{ + display: flex; /* Use flexbox for alignment within the .date element */ + flex-direction: column; + align-items: center; + justify-content: center; /* Center the content horizontally */ + font-size: 14px; /* Adjust font size as needed */ + color: #333; /* Set a color for text */ + font-family: Arial, sans-serif; /* Choose a font family */ +} /*目次css*/ .toc{ position: fixed; diff --git a/resources/views/trip/tripDetail.blade.php b/resources/views/trip/tripDetail.blade.php index 75e598c..0a5f039 100644 --- a/resources/views/trip/tripDetail.blade.php +++ b/resources/views/trip/tripDetail.blade.php @@ -21,19 +21,20 @@
    -
    山岳類別 • Jul 5th '22
    - - -
    -

    路線名稱

    +
    +

    毒龍潭

    + 中級山 • 2024.07.22 + + 領隊名稱：林序樺 +
    +
    -

    ★ 詳細行程

    +

    詳細行程

    D0 6/2(四) 18:00中央大學≧21:30鎮西堡登山口 (C0)

    D1 6/3(五) (日出：05:05，日落：18:40) C0 05:00出發→06:40 B區神木岔→08:30馬望海三岔路口營地(整裝)-->09:30 H2385鞍部-->10:00 H2438山頭-->10:30 H2484山頭-->11:20馬望海山(60min午餐) -->15:30馬望海三岔路口營地C1

    D2 6/4(六) (日出：05:05，日落：18:40) C1 05:00出發-->05:50塔克金溪支流溪底-->07:00檜木獵人營地-->07:30稜線岔路營地-->08:00馬望女苦山-->09:20 H2384峰(282261,2713789)-->10:40留倉賀山(午餐30min) -->14:00馬望女苦山-->14:30稜線岔路營地-->15:50塔克金溪支流溪底(取水)-->17:15 C2(同C1)

    @@ -43,14 +44,14 @@ class="mx-1">• Jul 5th '22
    -

    ★ 特色介紹

    +

    特色介紹

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at error explicabo inventore iste, molestiae numquam perferendis ut vel. Ab asperiores consectetur dicta fugit inventore ipsum laborum quas quisquam, soluta!

    -

    ★ 行程費用

    +

    行程費用

    0
    @@ -59,7 +60,7 @@ class="mx-1">• Jul 5th '22
    -

    ★ 時間安排

    +

    時間安排

    From 3387cf5dd0ccd2a82a081db05d8f280faae6e4cf Mon Sep 17 00:00:00 2001 From: RayTsai94 Date: Thu, 3 Oct 2024 19:30:47 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat:=E9=9A=8A=E4=BC=8D=E5=A0=B1=E5=90=8D?= =?UTF-8?q?=E5=85=A7=E5=AE=B9=E8=A9=B3=E7=B4=B0=E8=B3=87=E8=A8=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - .php：內容架構 - .css加入響應式設計：if(max-width <= 768px) - .js 金錢數字增加器 --- app/Http/Livewire/JudgementComponent/temp.md | 43 ++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 app/Http/Livewire/JudgementComponent/temp.md diff --git a/app/Http/Livewire/JudgementComponent/temp.md b/app/Http/Livewire/JudgementComponent/temp.md new file mode 100644 index 0000000..8d52936 --- /dev/null +++ b/app/Http/Livewire/JudgementComponent/temp.md @@ -0,0 +1,43 @@ +# 隊伍難度分數計算規則 + +## 天數 + +| 天數 | 傳統路分數 | 非傳統路分數 | +|----|-------|--------| +| 1 | 5 | 10 | +| 2 | 10 | 15 | +| 3 | 10 | 20 | +| 4 | 15 | 25 | +| 5 | 15 | 30 | +| 6 | 20 | 35 | +| 7 | 20 | 40 | +| 8 | 20 | 45 | +| 9+ | 25 | 50 | + +## 路況 + +分數計算方式：路況分數 + (路跡 * 0.3 + 地形 * 0.4 + 植被 * 0.3) * 1.5 + +| 路況分級 | 對應分數 | +|------|------| +| 一 | 1 | +| 二 | 11 | +| 三 a | 21 | +| 三 b | 26 | +| 四 a | 31 | +| 四 b | 36 | + +## 體力 + +分數計算方式：體力分數 + 背水天數 * 2 + +| 體力分級 | 對應分數 | +|------|------| +| 1 | 7 | +| 2 | 14 | +| 3 | 21 | +| 4 | 28 | + +## 行程加權 +壓縮行程 -> 總分 * 1.1 +寬鬆行程 -> 總分 * 0.9