Skip to content

NCUMT-37 隊伍報名詳細資訊 #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RayTsai94 wants to merge 4 commits into
base: feature/NCUMT-37
Choose a base branch
from
Open

NCUMT-37 隊伍報名詳細資訊 #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6ce0a87
feat:隊伍報名內容詳細資訊
RayTsai94 Aug 20, 2024
1b6b290
feat:隊伍報名內容詳細資訊
RayTsai94 Aug 20, 2024
3299a55
feat:隊伍報名內容詳細資訊
RayTsai94 Oct 3, 2024
3387cf5
feat:隊伍報名內容詳細資訊
RayTsai94 Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 117 additions & 80 deletions ZenBlog/single-post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">

<title>ZenBlog Bootstrap Template - Single Post</title>
<title>中央大學登山社—</title>

<meta content="" name="description">
<meta content="" name="keywords">

Expand Down Expand Up @@ -42,64 +43,62 @@

<!-- ======= Header ======= -->
<header id="header" class="header d-flex align-items-center fixed-top">
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">

<a href="index.html" class="logo d-flex align-items-center">
<!-- Uncomment the line below if you also wish to use an image logo -->
<!-- <img src="assets/img/logo.png" alt=""> -->
<h1>ZenBlog</h1>
</a>

<nav id="navbar" class="navbar">
<ul>
<li><a href="index.html">Blog</a></li>
<li><a href="single-post.html">Single Post</a></li>
<li class="dropdown"><a href="category.html"><span>Categories</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="search-result.html">Search Result</a></li>
<li><a href="#">Drop Down 1</a></li>
<li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="#">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li>
</ul>
</li>
<li><a href="#">Drop Down 2</a></li>
<li><a href="#">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li>
</ul>
</li>

<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav><!-- .navbar -->

<div class="position-relative">
<a href="#" class="mx-2"><span class="bi-facebook"></span></a>
<a href="#" class="mx-2"><span class="bi-twitter"></span></a>
<a href="#" class="mx-2"><span class="bi-instagram"></span></a>

<a href="#" class="mx-2 js-search-open"><span class="bi-search"></span></a>
<i class="bi bi-list mobile-nav-toggle"></i>

<!-- ======= Search Form ======= -->
<div class="search-form-wrap js-search-form-wrap">
<form action="search-result.html" class="search-form">
<span class="icon bi-search"></span>
<input type="text" placeholder="Search" class="form-control">
<button class="btn js-search-close"><span class="bi-x"></span></button>
</form>
</div><!-- End Search Form -->
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">

<a href="/" class="logo d-flex align-items-center">
<!-- Uncomment the line below if you also wish to use an image logo -->
<img src="https://ncumt.student.ncu.edu.tw/assets/img/favicon.png" alt="">
<h1>NCUMT</h1>
</a>

<nav id="navbar" class="navbar">
<ul>
<li><a href="https://ncumt.student.ncu.edu.tw/aboutus">關於我們</a></li>
<li class="dropdown"><a><span>社課資訊</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="https://ncumt.student.ncu.edu.tw/course/register">社課報名</a></li>
<li><a href="https://ncumt.student.ncu.edu.tw/course">社課影片</a></li>
</ul>
</li><li class="dropdown"><a><span>難度評分</span> <i class="bi bi-chevron-down dropdown-indicator"></i></a>
<ul>
<li><a href="https://ncumt.student.ncu.edu.tw/judgement">評分系統</a></li>
<li><a href="https://ncumt.student.ncu.edu.tw/judgement/record">評分紀錄</a></li>
<li><a href="https://ncumt.student.ncu.edu.tw/judgement/rule">評分規則</a></li>
<li><a href="https://ncumt.student.ncu.edu.tw/judgement/pointRule">分數計算</a></li>
</ul>
</li><li><a href="https://ncumt.student.ncu.edu.tw/record">所有紀錄</a></li>


<li><a href="https://ncumt.student.ncu.edu.tw/faq">FAQ</a></li>


</div>

</div>

</header><!-- End Header -->
<li><a href="/portal">登入</a></li>

</ul>
</nav><!-- .navbar -->

<div class="position-relative">
<a href="https://www.facebook.com/ncumountaineeringclub" target="_blank" class="mx-2"><span class="bi-facebook"></span></a>
<a href="https://www.instagram.com/ncumountaineeringclub/" target="_blank" class="mx-2"><span class="bi-instagram"></span></a>
<a href="#" class="mx-2 js-search-open"><span class="bi-search"></span></a>
<i class="bi bi-list mobile-nav-toggle"></i>

<!-- ======= Search Form ======= -->
<div class="search-form-wrap js-search-form-wrap">
<form action="search-result.html" class="search-form">
<span class="icon bi-search"></span>
<input type="text" placeholder="Search" class="form-control">
<button class="btn js-search-close"><span class="bi-x"></span></button>
</form>
</div><!-- End Search Form -->

</div>

</div>

</header>

<main id="main">

Expand All @@ -109,29 +108,67 @@ <h1>ZenBlog</h1>
<div class="col-md-9 post-content" data-aos="fade-up">

<!-- ======= Single Post Content ======= -->
<div class="single-post">
<div class="post-meta"><span class="date">Business</span> <span class="mx-1">&bullet;</span> <span>Jul 5th '22</span></div>
<h1 class="mb-5">13 Amazing Poems from Shel Silverstein with Valuable Life Lessons</h1>
<p><span class="firstcharacter">L</span>orem 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.</p>

<figure class="my-4">
<img src="assets/img/post-landscape-1.jpg" alt="" class="img-fluid">
<figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, odit? </figcaption>
</figure>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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?</p>
<p>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.</p>
<figure class="my-4">
<img src="assets/img/post-landscape-5.jpg" alt="" class="img-fluid">
<figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, odit? </figcaption>
</figure>
<p>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.</p>
<p>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.</p>
<p>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!</p>
<p>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.</p>
</div><!-- End Single Post Content -->
<div class="single-post">
<div class="post-meta"><span class="date"><em><strong>山岳類別</strong></em></span> <span class="mx-1">&bullet;</span> <span>Jul 5th '22</span></div>
<h1 class="mb col-10">路線名稱</h1>
<h2>&#9733; 詳細行程</h2>

<figure class="my-4">
<img src="https://lh7-us.googleusercontent.com/yjt17emo1ct3lU9W_RBNsmUySougDrhtTK2o7bZBENkWy4sZzy8DL3AUJg-2me8jt4UFWdJwIN6_RRowWBJ6r8cnSuwuxKQqsUJ7mtIl_sHAICi4hmJAJocEorQwYpFQ0rh2-BRHtTx--ouSkDyPvCJriNY2bw" alt="Description of the image content" class="img-fluid" style = "max-width :900px ; height : auto;" >
<figcaption>這是描述照片的內容1</figcaption>
</figure>

<h2>&#9733 行程費用</h2>
<p>12345</p>
<figure class="my-4">
<img src="" alt="" class="img-fluid">
<figcaption>這是描述照片的內容2</figcaption>
</figure>
<h2>&#9733; 特色介紹</h2>
<p>12345</p>
<h2>時間安排</h2>
<style>
/* Optional: Example of CSS styling for table */
.styled-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 16px;
}
.styled-table th, .styled-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.styled-table th {
background-color: #f2f2f2;
}
.styled-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>

<table class="styled-table">
<thead>
<tr>
<th>報名截止時間</th>
<th>公佈錄取時間</th>
<th>行前會議時間</th>
<th>鳥隊時間</th>
</tr>
</thead>
<tbody>
<tr>
<td>date</td>
<td>date</td>
<td>date</td>
<td>date</td>
</tr>
</tbody>
</table>

</div>
<!-- end header-->

<!-- ======= Comments ======= -->
<div class="comments">
Expand Down Expand Up @@ -556,4 +593,4 @@ <h3 class="footer-heading">Recent Posts</h3>

</body>

</html>
</html>
43 changes: 43 additions & 0 deletions app/Http/Livewire/JudgementComponent/temp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
109 changes: 109 additions & 0 deletions public/assets/css/tripDetail.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
/*滾動效果*/
html{
scroll-behavior: smooth;
}
/*目次導引調整*/
.content-adjust{
scroll-margin-top: 85px;
}
/*內容區域*/
.content{
width: auto;
/*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;
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;
}



Loading