PrismRealm/JMuseum
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Upload All

Browse Source
This commit is contained in:
Alan
2018-02-26 14:09:18 +08:00
parent 42d3a3fc46
commit 46257f08b0
1024 changed files with 204324 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
views/change_password.pug Normal file
View File

@ -0,0 +1,27 @@
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
.container-fluid.relative
.row
.col-lg-4.col-lg-push-4.col-md-6.col-md-push-3.col-sm-8.col-sm-push-2.col-xs-12
form.form-horizontal(action="/newpw", method="POST")
h2.form-signin-heading.text-center 更變密碼
.form-group
label.col-sm-3.control-label(for="txtOldPassword") 舊密碼
.col-sm-9
input#txtOldPassword.form-control(type="password", name="oldpw", placeholder="Old Password", required)
.form-group
label.col-sm-3.control-label(for="txtNewPassword") 新密碼
.col-sm-9
input#txtNewPassword.form-control(type="password", name="newpw", placeholder="New Password", required)
.form-group
label.col-sm-3.control-label(for="txtConfirmNewPassword") 確認新密碼
.col-sm-9
input#txtConfirmNewPassword.form-control(type="password", name="newpw_confirm", placeholder="Confirm New Password", required)
if datas.errorMessage
.alert.alert-danger #{datas.errorMessage}
button#btnSubmit.btn.btn-lg.btn-primary.btn-block(type="submit") 提交
include layout/footer.pug

199
views/drawing.pug Normal file
View File

@ -0,0 +1,199 @@
//- 畫作的命名、敘述面板
mixin namingPanel(name, description)
.panel.panel-default
.panel-body
.input-group
.input-group-addon 畫作名稱
input#txtName.form-control(name="txtName", type="text", value= name, placeholder="至少1字、至多64字", required)
.form-group
label(for="txtDescription")
textarea#txtDescription.form-control(rows="5", placeholder="敘述至少1字、至多300字", required)= description
//- 設定提示訊息
mixin setAlertMessage(isLocked, isFinished, activity)
if isLocked
.alert.alert-danger.text-center 此畫作已被鎖定，無法再更改任何資料。
else
if isFinished
.alert.alert-warning.text-center 此作品已經完成，無法在對畫作內容有任何的更改。
if activity
.alert.alert-warning.text-center 此畫作已參加公開的活動，因此「訪問權限」鎖定在「公開」的權限之下，無法變更。
//- 畫作相關設定、資訊版面
mixin settingsDiv(painting, userTags, isAutoSave)
.panel.panel-default
.panel-body
.col-xs-12
label 標籤:
#tagPanel.panel.panel-default
+setTags(userTags, painting.tags)
.col-xs-3.view-authority
label 訪問權限:
+paintingAuthorityPanel(painting.viewAuthority)
.col-xs-5
label 資訊:
+paintingInfoPanel(painting.createdTime, painting.lastModified, painting.activity, painting.isFinished, painting.isLocked)
.col-xs-4
label 動作:
+paintingActionPanel(painting.isFinished, painting.isLocked, isAutoSave)
//- 設置畫作標籤
mixin setTags(userTags, paintingTags)
- for (var i = 0; i < userTags.length; i++)
.labelTag(class= (paintingTags.indexOf(userTags[i]) > -1 ? "active" : "")) #{userTags[i]}
//- 畫作的瀏覽權限面板
mixin paintingAuthorityPanel(authority)
.panel.panel-default
.panel-body
.btn-group(data-toggle="buttons")
label#rdoPrivate.btn.btn-danger(class= (authority==2) ? "active" : "")
input(type="radio", autocomplete="off", checked= (authority==2))
| 私人
label#rdoHalfPublic.btn.btn-warning(class= (authority==1) ? "active" : "")
input(type="radio", autocomplete="off", checked= (authority==1))
| 半公開
label#rdoPublic.btn.btn-success(class= (authority==0) ? "active" : "")
input(type="radio", autocomplete="off", checked= (authority==0))
| 公開
//- 畫作資訊面板
mixin paintingInfoPanel(createdTime, lastModified, activity, isFinished, isLocked)
.panel.panel-default
.panel-body
table.table
tbody
tr
th(scope="row") 建立日期:
td#tdCreatedTime #{createdTime instanceof Date ? createdTime.toLocaleString() : createdTime}
tr
th(scope="row") 最後修改:
td#tdLastModified #{lastModified instanceof Date ? lastModified.toLocaleString() : lastModified}
tr
th(scope="row") 參與主題:
if activity
td= "參與了第" + activity.nthSeason + "季的主題: " + activity.themeName
else
td 未參與任何活動、主題
tr
th(scope="row") 畫作狀態:
if isFinished
td 已完成
else if isLocked
td 鎖定
else
td 未完成
//- 畫作的動作面板
mixin paintingActionPanel(isFinished, isLocked, isAutoSave)
.panel.panel-default
.panel-body
button#btnSavePainting.btn.btn-default.mr-20(type="button") 儲存畫作
label.checkbox-inline
input#chkAutoSave(type="checkbox", checked= isAutoSave, data-toggle="toggle", data-size="normal")
| 自動儲存
br
button#btnFinish.btn.btn-success.mt-10(type="button", disabled= (isFinished || isLocked)) 完成畫作
buttin#btnPreDelete.btn.btn-danger.mt-10.ml-10(type="button", disabled= !painting.id) 刪除畫作
//- 提醒訪客註冊或登入的屏障訊息
mixin guestBarrier(hasLogin)
if !hasLogin
.barrierPanel
.container.mt-20
.panel.panel-default
.panel-heading.text-largetext.text-center 請登入或註冊
.panel-body.text-normal.text-center
h2.mtb-10 加入我們吧!
| 我們提供使你放鬆的網站、能揮灑創意的繪圖板，還有與其他繪友一起討論的空間，你還在等什麼呢，登入JMuseum或來註冊加入我們吧!!
.panel-footer.text-center
a.btn.btn-primary(href="/signup") 註冊
|
a.btn.btn-primary(href="/login") 登入
//- 主頁面 -//
doctype html
html
head
include layout/head.pug
link(rel="stylesheet", href="/css/bootstrap-toggle.min.css")
script(src="/js/p5/p5.min.js")
body
include layout/navbar.pug
- let painting = datas.painting;
.container-fluid.relative
//- Page Title
.container-fluid.container-table.text-shadow.color-white.layout-title
.row.text-center.align-items-center.vertical-center-row
.col
h1.text-bigtitle.pb-20 繪圖創作
//- Drawing Board
.container
//- Naming
.row
+namingPanel(painting.paintingName, painting.description)
//- Drawing Area
.row
.panel.panel-default.whiteTransparent
.row
#divAlert
.col-xs-10.col-xs-push-1
.panel.panel-default.tool-bars
input#resetCanvas.myBtn(type="button", value="重置")
|
.main-color-picker 填充色
input#mainColorPicker.color-btn.vertical-center-row(type="color")
|
.sub-color-picker 筆刷色
input#subColorPicker.color-btn.vertical-center-row(type="color")
|
.size-group
input#sizeDown10(type="button", value="-")
input#sizeDown(type="button", value="-")
label#sizeGroupText 填色大小 16
input#sizeUp(type="button", value="+")
input#sizeUp10(type="button", value="+")
|
.size-group
input#strokeSizeDown10(type="button", value="-")
input#strokeSizeDown(type="button", value="-")
label#strokeSizeGroupText 筆刷粗細 1
input#strokeSizeUp(type="button", value="+")
input#strokeSizeUp10(type="button", value="+")
|
.brush-group
.brush-caption 筆刷模式
input#normalBrush.active(type="button", value="筆刷")
input#slideBrush(type="button", value="滑筆")
input#featherBrush(type="button", value="燕筆")
input#furBrush(type="button", value="刺筆")
input#stampBrush(type="button", value="印筆")
#canvasContainer.panel-body.text-center
canvas#cvsCanvas(width="800", height="450")
| 您的瀏覽器並不支援&ltcanvas&gt標籤。
//- Message Alert
#divMessage.row
+setAlertMessage(painting.isLocked, painting.isFinished, painting.activity)
//- Settings
.row
+settingsDiv(painting, datas.userTags, datas.isAutoSave)
//- Message Dialog
#msgDialog.modal.fade(role="dialog")
.modal-dialog
.modal-content
.modal-header
button.close(type="button", data-dismiss="modal") &times;
h4#msgDialog_title.modal-title 訊息
.modal-body
p#msgDialog_message Message
.modal-footer
button#btnDelete.btn.btn-danger(type="button", data-dismiss="modal") 刪除
button#btnClose.btn.btn-default(type="button", data-dismiss="modal") 關閉
+guestBarrier(hasLogin)
//- Footer
include layout/footer.pug
//- Javascript
script(src="/js/bootstrap-toggle.js")
if hasLogin
script
| let autoSaveEnable = #{datas.isAutoSave};
| let isFinished = #{painting.isFinished};
| let paintingId =
if painting.id
| "#{painting.id}";
else
| null;
script(src="/js/drawing_tools.js")
script(src="/js/drawing_page.js")

51
views/edit_personal_info.pug Normal file
View File

@ -0,0 +1,51 @@
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
.container
.panel.panel-default
.panel-body
h2.text-center.mtb-10 編輯個人資料
.row
.col-xs-3
.thumbnail
img#imgUserImg(src= datas.photo, alt="UserImage")
.caption
h4.text-center 個人圖像
input#btnUploadImg.hidden(name="userImage", type="file")
label.btn.btn-primary.btn-block.btn-sm(for="btnUploadImg") 更變個人圖像
.col-xs-9
.row
.col-xs-6
.input-group
span#addonLastName.input-group-addon 姓
input#txtLastName.form-control(name="lastName", type="text", value= datas.lastName, placeholder="Last Name", aria-describedby="addonLastName")
.col-xs-6
.input-group
span#addonFirstName.input-group-addon 名
input#txtFirstName.form-control(name="firstName", type="text", value= datas.firstName, placeholder="First Name", aria-describedby="addonFirstName")
.input-group.mt-10
span#addonEmail.input-group-addon Email
input#txtEmail.form-control(type="text", value= datas.email, placeholder="Email", aria-describedby="addonEmail", disabled)
.input-group.mt-10
span#addonUsername.input-group-addon 帳號
input#txtUsername.form-control(type="text", value= username, placeholder="Username", aria-describedby="addonUsername", disabled)
.input-group.mt-10
span#addonPassword.input-group-addon 密碼
input#txtPassword.form-control(type="password", value="************", placeholder="Password", aria-describedby="addonPassword", disabled)
.input-group-btn
a.btn.btn-warning(href="/newpw") 更變密碼
hr
.input-group.mt-10
span#addonNickname.input-group-addon 暱稱
input#txtNickname.form-control(name="nickname", type="text", value= datas.nickname, placeholder="輸入1~16字間的暱稱，若無暱稱則直接顯示帳號名稱", aria-describedby="addonNickname")
.input-group.mt-10
span#addonMotto.input-group-addon 短言
input#txtMotto.form-control(name="motto", type="text", value= datas.motto, placeholder="輸入1~32字間的個人短言，若無短言則不會顯示在個人頁面上", aria-describedby="addonMotto")
#divAlert
.text-right.mt-10
button#btnSave.btn.btn-primary 儲存更變
include layout/footer.pug
script(src="/js/edit_personal_info_page.js")

69
views/feedback.pug Normal file
View File

@ -0,0 +1,69 @@
//- 使用者已經在一個月內回饋 且 回饋的訊息尚在處理中
mixin hasPostBarrier(hasPostFeedback)
if hasPostFeedback
.barrierPanel
.container.mt-20
.panel.panel-default
.panel-heading.text-largetext.text-center 您的上一個回饋訊息正在處理中!
.panel-body.text-normal.text-center
h2.mtb-10 很抱歉!
| 很高興您為JMuseum著想，積極地提出您寶貴的意見，愧於我們正在忙碌、處理您以及其他人的回饋訊息或是其他作業，請等待一個月左右再發送另一個回饋訊息。
.panel-footer.text-center
a.btn.btn-primary(onclick="window.history.back();") 返回上頁
//- 訪客為登入時的屏障
mixin guestBarrier(isLogin)
if !isLogin
.barrierPanel
.container.mt-20
.panel.panel-default
.panel-heading.text-largetext.text-center 請登入或註冊
.panel-body.text-normal.text-center
h2.mtb-10 加入我們吧!
| 我們提供使你放鬆的網站、能揮灑創意的繪圖板，還有與其他繪友一起討論的空間，你還在等什麼呢，登入JMuseum或來註冊加入我們吧!!
.panel-footer.text-center
a.btn.btn-primary(href="/signup") 註冊
|
a.btn.btn-primary(href="/login") 登入
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
//- Feedback
.container-fluid.relative
.row
.col-xs-10.col-xs-push-1
.panel.panel-default
.panel-heading.text-largetext.text-center 意見回饋
.panel-body.text-normal.text-center
p: label.text-subbigtext - 站長的話 -
p 這是一個為了使大家能透過畫圖來放鬆、互相交流的網站，成立至今不到一載，無論是繪圖板、個人空間或是整題運作，仍有很大的改善、進步空間。
p 若你在使用這個網站中有遇到什麼問題、或想要什麼改善，又或是想要給予我們什麼樣的建議或鼓勵，都可以在下方留言喔!
div.panel.panel-default
.panel-body
.col-xs-8.col-xs-push-2.text-left
table.table.table-condensed
thead: tr: th.text-center(colspan="2") - 回饋資料 -
tbody
tr
th(scope="row") 會員 ID:
td= (username ? username : "*訪客")
tr
th(scope="row") 撰寫日期:
td #{datas.currentDate}
.input-group
span.input-group-addon 主旨
input#txtSubject.form-control(name="txtSubject", type="text", placeholder="請輸入至少1字至64字間的主旨", minlength="1", maxlength="64")
.form-group.mt-20
label(for="txtaContent") 內容:
textarea#txtaContent.form-control(rows="15", placeholder="請輸入至少16字至1000字間的內容", minlength="16", maxlength="1000")
.panel-footer.text-right
button#btnFeedback.btn.btn-primary(type="button") 提交回饋
+hasPostBarrier(hasLogin && datas.hasPostFeedback)
+guestBarrier(hasLogin)
//- Footer
include layout/footer.pug
//- Javascript
if (hasLogin && !datas.hasPostFeedback)
script(src="js/feedback_page.js")

122
views/gallery.pug Normal file
View File

@ -0,0 +1,122 @@
//- 以下的mixin部分在「- 上一季的排行名單 -」區中
mixin lastSeasonDiv(nth, themes)
ul.nav.nav-pills
- for (let i = 0; i < themes.length; i++)
li(class= (i==0 ? "active" : ""))
a(data-toggle="pill", href="#LA-" + themes[i].order) #{themes[i].title}
.hr-line
.tab-content.rankingList
- for (let i = 0; i < themes.length; i++)
+lastSeasonDiv_ThemeContent(nth, themes[i], i==0)
mixin lastSeasonDiv_ThemeContent(nth, theme, isActive)
.tab-pane.fade(id="LA-" + theme.order, class= (isActive ? "in active" : ""))
.list-group
- let members = theme.participants;
- for (let i = 0; i < members.length; i++)
- let info = members[i];
- let urlLink = "/showcase/activity/" + nth + "/" + theme.title + "/" + info.artist;
a.list-group-item(href= urlLink)
span.rank #{info.rank}
span.artist #{info.artist}
| #{info.paintingName}
span.postTime #{info.postTime}
//- 以下的mixin部分在「- 歷屆的排行名單 -」區中
//- 第nth季中的內容, themes為活動, isActive為是否顯示這部分的內容
mixin prevSeasonTabContent(nth, themes, isActive)
div(id="S" + nth, class="tab-pane fade" + (isActive ? " in active" : ""))
ul.nav.nav-pills
- for (let i = 0; i < themes.length; i++)
+prevSeasonContent_Pills(nth, themes[i], i==0)
.hr-line
.tab-content
- for (let i = 0; i < themes.length; i++)
+prevSeason_ThemeContent(nth, themes[i], i==0)
//- 第nth季中的內容中，選擇主題的按鈕。
mixin prevSeasonContent_Pills(nth, theme, isActive)
li(class= (isActive ? "active" : ""))
a(data-toggle="pill", href="#S" + nth + "-" + theme.order) #{theme.title}
//- 第nth季中的內容中，右側顯示的主題排行情單
mixin prevSeason_ThemeContent(nth, theme, isActive)
div(id="S" + nth + "-" + theme.order, class="tab-pane fade" + (isActive ? " in active" : ""))
.list-group
- let members = theme.participants;
- for (let i = 0; i < members.length; i++)
a.list-group-item(href="/showcase/activity/" + nth + "/" + theme.title + "/" + members[i].artist)
span.rank #{members[i].rank}
span.artist #{members[i].artist}
| #{members[i].paintingName}
span.postTime #{members[i].postTime}
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
//- Title
.container-fluid.container-table.text-shadow.color-white.layout-title
.row.text-center.align-items-center.vertical-center-row
.col
h1.text-bigtitle 傑作藝廊
p.text-bigtext 來看一看這些被選出來的高手、大師的傑作吧!
//- Master Carousel
.container-fluid.masterCarousel
.row
h1.text-center.color-white.carouselSubtitle 前一季第一名的作品!!
.row
.col-lg-8.col-lg-push-2.col-md-10.col-md-push-1.col-xs-12
#myCarousel.carousel.slide(data-ride="carousel")
- var paintings = datas.paintings;
ol.carousel-indicators
li.active(data-target="#myCarousel" data-slide-to="0")
- for (var i = 1; i < paintings.length; i++)
li(data-target="#myCarousel" data-slide-to= i)
.carousel-inner
.item.active
img(src= paintings[0].links, alt= paintings[0].name, style="width:100%;")
.carousel-caption
h3= paintings[0].name
p Artist - #{paintings[0].artist}
- for (var i = 1; i < paintings.length; i++)
.item
img(src= paintings[i].links, alt= paintings[i].name, style="width:100%;")
.carousel-caption
h3= paintings[i].name
p Artist - #{paintings[i].artist}
a.left.carousel-control(href="#myCarousel", data-slide="prev")
span.glyphicon.glyphicon-chevron-left
span.sr-only Previous
a.right.carousel-control(href="#myCarousel", data-slide="next")
span.glyphicon.glyphicon-chevron-right
span.sr-only Next
//- Prev Ranking
- let seasons = datas.seasons;
.container-fluid.rankingGroup
.row
h2.rankingSubtitle - 前一季的排行名單 -
.col-md-10.col-md-push-1.col-xs-12
.panel.panel-default
.panel-body
.col-md-10.col-md-push-1.col-xs-12
+lastSeasonDiv(seasons[0].nth, seasons[0].themes)
//- Prev Seasons
.container-fluid.bg-sunset
.row
h2.previouslySubtitle.text-shadow - 歷屆的排行名單 -
.col-md-10.col-md-push-1.col-xs-12
.panel.panel-default
.panel-body
.col-xs-3
ul.nav.nav-pills.nav-stacked.seasonList
- for (let i = 1; i < seasons.length; i++)
li.prevSeasonBtn(class= (i==1 ? "active" : ""))
a(data-toggle="pill", href="#S" + seasons[i].nth) 第#{seasons[i].nth}季
.col-xs-9
.tab-content.previouslyList
- for (let i = 1; i < seasons.length; i++)
+prevSeasonTabContent(seasons[i].nth, seasons[i].themes, i==1)
//- Footer
include layout/footer.pug

101
views/index.pug Normal file
View File

@ -0,0 +1,101 @@
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
//- "Hot" Paintings
.container
.row
.col-xs-12
h1.text-center 來看看大家的作品吧!
.row
.col-xs-12
//- Carousel
- var paintings = datas.paintings;
#myCarousel.carousel.slide(data-ride="carousel")
ol.carousel-indicators
li.active(data-target="#myCarousel", data-slide-to="0")
- for (var i = 1; i < paintings.length; i++)
li(data-target="#myCarousel", data-slide-to= i)
.carousel-inner
.item.active
img(src= paintings[0].links, alt= paintings[0].name, style="width:100%;")
.carousel-caption
h3= paintings[0].name
p Artist - #{paintings[0].artist}
- for (var i = 1; i < paintings.length; i++)
.item
img(src= paintings[i].links, alt= paintings[i].name, style="width:100%;")
.carousel-caption
h3= paintings[i].name
p Artist - #{paintings[i].artist}
a.left.carousel-control(href="#myCarousel", data-slide="prev")
span.glyphicon.glyphicon-chevron-left
span.sr-only Previous
a.right.carousel-control(href="#myCarousel", data-slide="next")
span.glyphicon.glyphicon-chevron-right
span.sr-only Next
//- Features
.container-fluid.bg-whaleBlue.mt-20.pb-20
.row
.col-xs-12
h2.text-center.text-bigtitle JMuseum
p.text-center.text-bigtext 不需要是高手，也不需要很厲害的繪圖技巧，只要你有心、對繪圖懷抱著些興趣，無論是正經或搞笑，這裡都歡迎你!
.row.mt-20
.col-md-4.col-xs-12.text-center
.thumbnail.thumbnail-feature
img.mt-20(src="images/point/LightBulb.png", alt="LightBulb")
.caption
h3.text-center 靈感!
p.text-center.text-normal 把你所想到的靈感，用圖畫分享給大家!
.col-md-4.col-xs-12.text-center
.thumbnail.thumbnail-feature
img.mt-20(src="images/point/PaintPalette.png", alt="PaintPalette")
.caption
h3.text-center 創作!
p.text-center.text-normal 不需要多高超的繪圖技巧，只要是你想創作的東西，就畫下去吧!
.col-md-4.col-xs-12.text-center
.thumbnail.thumbnail-feature
img.mt-20(src="images/point/Community.png", alt="Community")
.caption
h3.text-center 分享!
p.text-center.text-normal 不僅僅是你自己欣賞，你還可以與社群上的朋友一起分享!
//- Comment
.container-fluid.bg-image-paint.pt-20.pb-20
.row
.col-xs-8.col-xs-push-2.text-shadow-white
.row.pt-20.pb-20
.col-xs-2
img.blockShadow(src="images/HeadshotMan1.png")
.col-xs-10
blockquote.blockquote.bg-transparent-lightRed
p.mb-0 這裡不只可以增強你的畫畫技巧，還可以與你的好友互相切磋，真是很棒。
footer.blockquote-footer 美國洛杉磯的
cite(title="Source Title") 洛力克．艾德爾
.row.pt-20.pb-20
.col-xs-10
blockquote.blockquote-reverse.bg-transparent-lightOrange
p.mb-0 雖然我只是一位與繪圖毫無相關的外交官員，但透過這個網站來繪圖、交流，真的讓我放鬆了身心。
footer.blockquote-footer 波蘭華沙的
cite(title="Source Title") 佛洛斯垂特．霍福
.col-xs-2
img.blockShadow(src="images/HeadshotMan2.png")
.row.pt-20.pb-20
.col-xs-2
img.blockShadow(src="images/HeadshotMan3.png")
.col-xs-10
blockquote.blockquote.bg-transparent-lightGreen
p.mb-0 這個地方光是可以分享繪圖就很棒了，而且還可以來做惡搞東西!
footer.blockquote-footer 知名貼圖繪圖家的
cite(title="Source Title") 楊
.row.pt-20.pb-20
.col-xs-10
blockquote.blockquote-reverse.bg-transparent-dodgeBlue
p.mb-0 反正就是超棒就對了!
footer.blockquote-footer 第一個測試版的使用者
cite(title="Source Title") LostInSea
.col-xs-2
img.blockShadow(src="images/HeadshotMan4.png")
//- Footer
include layout/footer.pug

6
views/index_test.pug Normal file
View File

@ -0,0 +1,6 @@
doctype html
html
head
include layout/head.pug
body
p Test

13
views/layout/footer.pug Normal file
View File

@ -0,0 +1,13 @@
//- footer.pug
footer.footer
.container-fluid.bg-grassGreen
.row.mt-20
.col-xs-8.col-xs-push-2
ul.nav.nav-pills
li.nav-item(class= source=="gallery" ? "active" : ""): a.color-white(href="/gallery") 傑作藝廊
li.nav-item(class= source=="theme" ? "active" : ""): a.color-white(href="/theme") 畫作主題
li.nav-item(class= source=="drawing" ? "active" : ""): a.color-white(href="/drawing") 繪圖創作
li.nav-item(class= source=="feedback" ? "active" : ""): a.color-white(href="/feedback") 意見回饋
p.text-center.color-white Copyright &copy; 2017 by Nebula3122. All rights reserved.
script(src="/js/bootstrap.min.js")

9
views/layout/head.pug Normal file
View File

@ -0,0 +1,9 @@
//- main.pug
title= title
meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1")
link(rel="stylesheet", href="/css/bootstrap.min.css")
link(rel="stylesheet", href="/css/bootstrap-theme.min.css")
link(rel="stylesheet", href="/css/custom_styles.css")
link(rel="stylesheet", href="/css/" + extendedStyle)
script(src="/js/jquery-3.2.1.min.js")

26
views/layout/navbar.pug Normal file
View File

@ -0,0 +1,26 @@
//- navbar.pug
nav.navbar.navbar-default
div.container-fluid
div.navbar-header
a.navbar-brand(href="/index") JMuseum
ul.nav.navbar-nav
li(class= source=="gallery" ? "active" : ""): a(href="/gallery") 傑作藝廊
li(class= source=="theme" ? "active" : ""): a(href="/theme") 畫作主題
li(class= source=="drawing" ? "active" : ""): a(href="/drawing") 繪圖創作
li(class= source=="feedback" ? "active" : ""): a(href="/feedback") 意見回饋
if haveSubmitThemeEvent
li(class= source=="submit_theme" ? "active" : "")
a.color-deepOrange(href="/newtheme") 投稿主題
if haveVoteThemeEvent
li(class= source=="vote_theme" ? "active" : "")
a.color-deepOrange(href="/votetheme") 主題票選
ul.nav.navbar-nav.navbar-right
if hasLogin
li: a 你好! #{username}
li(class= (source=="personal_page" && datas.username == username) ? "active" : "")
a(href= "/home/" + username) 我的主頁
span.badge #{notices}
li: a(href="/signout") 登出
else
li(class= source=="signup" ? "active" : ""): a(href="/signup") 註冊
li(class= source=="login" ? "active" : ""): a(href="/login") 登入

27
views/login.pug Normal file
View File

@ -0,0 +1,27 @@
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
.container-fluid.relative
form.form-signin(action="/login", method="post", enctype="application/json")
h2.form-signin-heading 登入 - Sign In
label.sr-only(for="txtUsername") 帳號
input#txtUsername.form-control(name="username", type="text", placeholder="帳號", required, autofocus)
label.sr-only(for="txtPassword") 密碼
input#txtPassword.form-control(name="password", type="password", placeholder="密碼", required)
.signInOptions
.checkbox.inlineCheckbox
label
input(name="rememberMe", type="checkbox", value="keep-signin-state")
| 保持登入狀態(不建議在公用電腦上)
a.forgetPassword(href="#") 忘記密碼?
if datas.isLoginFailed
.alert.alert-danger
| #{datas.loginMessage}
button.btn.btn-lg.btn-primary.btn-block(type="submit") 登入
//- Footer
include layout/footer.pug
//- Javascript
script(src="js/login_page.js")

21
views/message_form.pug Normal file
View File

@ -0,0 +1,21 @@
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
.container
.col-lg-8.col-lg-push-2.col-sm-10.col-sm-push-1.col-xs-12
.panel.panel-default
.panel-body
h2 #{datas.title}
p #{datas.content}
hr
.text-right
if datas.button1
button#btnAction1.btn.btn-primary #{datas.button1}
if datas.button2
|
button#btnAction2.btn.btn-primary #{datas.button2}
include layout/footer.pug
script(type="text/javascript")!= datas.script

157
views/personal_page.pug Normal file
View File

@ -0,0 +1,157 @@
//- 好友清單
mixin friendList(list)
- for (let i = 0; i < list.length; i++)
a.list-group-item(href="/home/" + list[i]) #{list[i]}
//- ==================== 訊息主頁 ==================== -//
mixin mainInfoDiv(siteMsg, pageUser, visitor)
#home.tab-pane.fade.in.active(role="tabpanel")
- for (let i = 0; i < siteMsg.length; i++)
+mainInfo_Panel(siteMsg[i])
//- 訊息主頁中的訊息面板
mixin mainInfo_Panel(message)
.panel.panel-default
.panel-heading: h3.panel-title #{message.title}
.panel-body!= message.content
//- ==================== 個人藝廊 ==================== -//
mixin myGalleryDiv(paintings, userTags)
#mygallery.tab-pane.fade(role="tabpanel")
.row.withFlex-1
.col-xs-3
.tag-list
h3.text-center - 標籤 -
ul.nav.nav-pills.nav-stacked
li.active: a(href="#tag-_ALL_", aria-controls="tag-_ALL_", role="tab", data-toggle="tab") 所有標籤
+tagList(userTags)
.col-xs-9
.tab-content.tab-panel
+tagContentPanel(paintings, "_ALL_", true)
- for (let i = 0; i < userTags.length; i++)
+tagContentPanel(paintings, userTags[i], false)
//- 標籤清單
mixin tagList(userTags)
- for (let i = 0; i < userTags.length; i++)
li: a(href="#tag-" + userTags[i], aria-controls="tag-" + userTags[i], role="tab", data-toggle="tab") #{userTags[i]}
//- 所選標籤的版面內容
mixin tagContentPanel(paintings, tagName, isActive)
.tab-pane.fade(id="tag-" + tagName, class= (isActive ? "in active" : ""), role="tabpanel")
- for (let i = 0; i < paintings.length; i++)
if (tagName=="_ALL_" || paintings[i].tags.indexOf(tagName) > -1)
+paintingPanel(paintings[i], tagName)
//- 畫作版面
mixin paintingPanel(painting, tagName)
.panel.panel-default
.panel-heading: h3.panel-title #{painting.name}
.panel-body
img.img-thumbnail(src= painting.links, alt= painting.name)
label.mt-20 敘述:
p #{painting.description}
hr
p.state: +viewAuthorityTag(painting.viewAuthority)
p.tag: +tagListOfPainting(painting.tags)
.panel-footer
- let workShowcaseURL = "/showcase/personal/" + datas.username + "/" + painting.id + (tagName=="_ALL_" ? "" : "/" + tagName);
a.btn.btn-info.btn-sm(href= workShowcaseURL) 瀏覽作品
|
if datas.isOwner
a.btn.btn-primary.btn-sm(href="/drawing/" + painting.id) 編輯作品
//- 作品的公開權限標籤
mixin viewAuthorityTag(authority)
if (authority==0)
span.label.label-success 公開
else if (authority==1)
span.label.label-warning 半公開
else if (authority==2)
span.label.label-danger 私人
else
span.label.label-default 錯誤
//- 畫作上的標籤清單
mixin tagListOfPainting(tags)
- for (let i = 0; i < tags.length; i++)
span.label.label-info #{tags[i]}
|
//- ==================== 站內訊息 ==================== -//
mixin siteEmailDiv(siteMail)
#messages.tab-pane.fade(role="tabpanel")
- for (let i = 0; i < siteMail.length; i++)
+emailPanel(siteMail[i])
//- 站內信的面板
mixin emailPanel(email)
.panel.panel-default
.panel-heading: h3.panel-title #{email.title}
.panel-body #{email.content}
.panel-footer: .row
.col-xs-6
p
label 寄件者:
| #{email.sender}
.col-xs-6.text-right
p #{email.sendTime.toLocaleString()}
//- ==================== 設定 ==================== -//
mixin settingDiv(isOwner, autoSaveEnable)
if isOwner
#settings.tab-pane.fade(role="tabpanel")
p: label.checkbox-inline
input#chkAutoSaveEnable(type="checkbox", data-toggle="toggle", checked= autoSaveEnable)
| 自動啟用繪圖「自動儲存」
button#btnSaveSettings.btn.btn-primary.saveSettingBtn(type="button") 儲存設定
hr
button#btnDeleteAccount.btn.btn-danger(type="button") 刪除帳號
//- ==================== 主文件 ==================== -//
doctype html
html
head
include layout/head.pug
link(rel="stylesheet", href="../css/bootstrap-toggle.min.css")
body
include layout/navbar.pug
.container
.row.withFlex-1
.col-xs-3
.panel.panel-default.personal-info-panel
.panel-body
.thumbnail.personalInfo
img(src= datas.userPhotoURL, alt="UserPhoto")
.caption
h3.mtb-10 #{datas.nickname || datas.username}
if datas.motto
p #{datas.motto}
if datas.isOwner
.withFlex-1
a.btn.btn-primary.btn-ms.flex-1(href="/edit_personal_info") 編輯個人資料
a.btn.btn-primary.btn-ms.flex-1(href="/write_message") 撰寫站內訊息
h4.text-center - 好友清單 -
.list-group.friendList
+friendList(datas.friendList)
.col-xs-9
.panel.panel-default.mainPanel
.panel-body
ul.nav.nav-tabs(role="tablist")
li.active(role="presentation"): a(href="#home", aria-controls="home", role="tab", data-toggle="tab", aria-expanded="true") 訊息主頁
li(role="presentation"): a(href="#mygallery", aria-controls="mygallery", role="tab", data-toggle="tab", aria-expanded="false") 個人藝廊
li(role="presentation"): a(href="#messages", aria-controls="messages", role="tab", data-toggle="tab", aria-expanded="false") 站內訊息
if datas.isOwner
li(role="presentation"): a(href="#settings", aria-controls="settings", role="tab", data-toggle="tab", aria-expanded="false") 設定
.row
.col-xs-12
.tab-content.tab-panel
+mainInfoDiv(datas.siteMsg)
+myGalleryDiv(datas.paintings, datas.userTags)
+siteEmailDiv(datas.siteMail)
+settingDiv(datas.isOwner, datas.autoSaveEnable)
//- Footer
include layout/footer.pug
//- Javascript
script(src="/js/bootstrap-toggle.js")
script(src="/js/personal_page.js")

151
views/showcase.pug Normal file
View File

@ -0,0 +1,151 @@
//- ========== 作品展示框 ========== -//
mixin displayStandDiv(paintings)
.row.displayStand
.col-lg-8.col-lg-push-2.col-sm-10.col-sm-push-1.col-xs-12
#theCarousel.carousel.slide(data-ride="carousel")
.carousel-inner
- for (let i = 0; i < paintings.length; i++)
+displayStand_Painting(paintings[i].links, paintings[i].name, i, i==0)
button.btn.left(type="button", href="#theCarousel", data-slide="prev")
span.glyphicon.glyphicon-chevron-left
button.btn.right(type="button", href="#theCarousel", data-slide="next")
span.glyphicon.glyphicon-chevron-right
.well.well-sm.pagerWall
nav(aria-label="Page navigation")
ul.pagination.pager-ul
- for (let i = 0; i < paintings.length; i++)
+displayStand_Pagination(i, i==0)
//- 展示框的所有作品
mixin displayStand_Painting(links, paintingName, index, isActive)
.item(class= (isActive ? "active" : ""), data-works-index= index)
img(src= links, alt= paintingName, style="width:100%;")
//- 展示框之下的畫作序按鈕
mixin displayStand_Pagination(index, isActive)
li(class= (isActive ? "active" : ""), data-target="#theCarousel", data-slide-to= index): a #{index + 1}
//- ========== 作者與作品資訊版面 ========== -//
mixin informationSectionDiv(paintings, isActivity, userPhotoURL)
.row.informationSection
.col-md-10.col-md-push-1.col-xs-12
//- 作者 與 作品敘述
+informationSectionDiv_Info(paintings, isActivity)
//- 評論區
+informationSection_CommentArea(paintings, userPhotoURL)
//- ===== 作者與作品敘述 ===== -//
mixin informationSectionDiv_Info(paintings, isActivity)
.panel.panel-default
.panel-body
.row
.col-lg-3.col-md-4.col-xs-4
//--if isActivity
- for (let i = 0; i < paintings.length; i++)
+informationSection_ArtistInfo(paintings[i].artistInfo, i)
//--else
//-- +informationSection_ArtistInfo(paintings[i].artistInfo, false)
.col-lg-9.col-md-8.col-xs-8
- for (let i = 0; i < paintings.length; i++)
+informationSection_WorksInfo(paintings[i].name, paintings[i].description, paintings[i].userScore, paintings[i].totalScore, i)
//- 作者資訊方塊
mixin informationSection_ArtistInfo(info, index)
.thumbnail(data-artist-thumbnail= index)
a(href= "/home/" + info.name): img(src= info.photoURL, alt= info.name)
.caption
label 作者
h4 #{info.name}
//- 作品名稱與敘述區塊
mixin informationSection_WorksInfo(artName, description, userScore, totalScore, index)
.panel.panel-default.panel-info(data-works-info= index)
.panel-heading: h3.panel-title #{artName}
.panel-body #{description}
.panel-footer
.row
.col-xs-6
if hasLogin
label.control-label(for="ratingBar-" + index) 你的評分:
input.rating.rating-loading(id="ratingBar-" + index, name="ratingBar-" + index, value= userScore, data-min="0", data-max="5", data-step="1", data-size="xs")
.col-xs-6
label.control-label(for="avgRatingBar-" + index) 目前平均分數: #{totalScore}
input.rating.rating-loading.staticStars(id="avgRatingBar-" + index, name="avgRatingBar-" + index, value= totalScore, data-min="0", data-max="5", data-step="0.1", data-size="xs", fixed)
//- ===== 評論區 ===== -//
mixin informationSection_CommentArea(paintings, userPhotoURL)
.panel.panel-default
.panel-body
+informationSectionDiv_LeaveComment(userPhotoURL, paintings[0].id)
+informationSectionDiv_OtherComments(paintings)
//- 寫下留言區
mixin informationSectionDiv_LeaveComment(photoURL, firstPaintingId)
if hasLogin
.row
.col-xs-12
.media
.media-left
a: img.media-object.img-responsive.img-thumbnail(src= photoURL, alt= username)
.media-body
h4.media-heading #{username} 評論:
textarea#txtaComment.form-control(rows="4", placeholder="請輸入1~300字間的評論")
.media-button
button#btnSendComment.btn.btn-primary(type="button") 送出
hr
//- 其他使用者留言
mixin informationSectionDiv_OtherComments(paintings)
.row
.col-xs-12
h3.comment-group-title - 評論 -
- for (let i = 0; i < paintings.length; i++)
div(data-comment-group-index= i)
- let comments = paintings[i].comments;
- for (let j = 0; j < comments.length; j++)
+informationSectionDiv_Comment(comments[j])
//- 單位留言區塊
mixin informationSectionDiv_Comment(comment)
.comment-item
img.img-responsive.img-thumbnail.userImage(src= comment.photo, alt= comment.username)
.userComment
h4 #{comment.username} 的評論:
p #{comment.comment}
label.commentTime
a.report(href="#") 舉報
| #{comment.time.toLocaleString()}
//- ========== 文件起始 ========== -//
doctype html
html
head
include layout/head.pug
link(rel="stylesheet", href="/css/star-rating.min.css")
body
include layout/navbar.pug
.container-fluid.relative
.row
.col-xs-12.titleBackground
if datas.isActivity
h1.themeTitle #{datas.themeTitle}
h4.originator 發起人 - #{datas.themeOriginator}
else
h1.themeTitle #{datas.artist} 的個人藝廊
h4.originator= (datas.tag ? "標籤: " + datas.tag : "所有作品")
+displayStandDiv(datas.paintings)
+informationSectionDiv(datas.paintings, datas.isActivity, datas.photoURL)
//- Message Dialog
#msgDialog.modal.fade(tabindex="-1", role="dialog")
.modal-dialog(role="document")
.modal-content
.modal-header
h5#msgDialogTitle.modal-title Title
.modal-body
p#msgDialogContent Content
.modal-footer
button.btn.btn-default(type="button", data-dismiss="modal") Close
//- Footer
include layout/footer.pug
script
- let paintings = datas.paintings;
- let length = paintings.length;
| let isActivity = #{datas.isActivity};
if datas.isActivity
| let nthSeason = #{datas.nthSeason};
| let themeOrder = #{datas.themeOrder};
| let idList = ["#{paintings[0].id}"
- for (let i = 1; i < length; i++)
| ,"#{paintings[i].id}"
| ];
script(src="/js/showcase_page.js")
script(src="/js/star-rating.min.js")

80
views/signup.pug Normal file
View File

@ -0,0 +1,80 @@
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
.container-fluid.relative
//- Sign up form
form.form-signin(action="")
h2.form-signin-heading 註冊 - Sign Up
hr
.row
.col-xs-6
.input-group
span.input-group-addon 姓
input#txtLName.form-control(type="text", placeholder="Last Name", aria-label="Last Name", aria-describedby="basic-addon1", tabindex="1", required)
.col-xs-6
.input-group
span.input-group-addon 名
input#txtFName.form-control(type="text", placeholder="First Name", aria-label="First Name", aria-describedby="basic-addon1", tabindex="2", required)
.row.mt-20
.col-xs-12
.input-group
span.input-group-addon: i.glyphicon.glyphicon-envelope
input#txtEmail.form-control(type="email", placeholder="Email", aria-label="Email", aria-describedby="basic-addon1", tabindex="3", required)
.row.mt-20
.col-xs-12
.input-group
span.input-group-addon: i.glyphicon.glyphicon-user
input#txtUsername.form-control(type="text", placeholder="Username", aria-label="Username", aria-describedby="basic-addon1", tabindex="4", required)
.row.mt-20
.col-xs-12
.input-group
span.input-group-addon: i.glyphicon.glyphicon-lock
input#txtPassword.form-control(type="password", placeholder="Password", aria-label="Password", aria-describedby="basic-addon1", tabindex="5", required)
.row.mt-20
.col-xs-12
.input-group
span.input-group-addon: i.glyphicon.glyphicon-lock
input#txtConPassword.form-control(type="password", placeholder="Confirm Password", aria-label="Confirm Password", aria-describedby="basic-addon1", tabindex="6", required)
.row.mt-20
.col-xs-6
label.checkbox-inline
input#chkJMuseumTerms(type="checkbox")
| 我願意遵守JMuseum 條款
.col-xs-6.relative
a.rightSideText.text-normal(herf="#", data-toggle="modal", data-target="#myModal") JMuseum 條款
hr
#divErrorMessages
button#btnSubmit.btn.btn-lg.btn-primary.btn-block(type="submit", tabindex="7") 註冊
//- "JMuseum Terms" Dialog
#myModal.modal.fade(tabindex="-1", role="dialog", aria-labelledby="exampleModalLabel", aria-hidden="true")
.modal-dialog.modal-lg(role="document")
.modal-content
.modal-header
h3#exampleModalLabel.modal-title JMuseum 條款
.modal-body
i 最後修改日期: 2017/7/30
h4 歡迎使用JMuseum服務!
p 在我們為您提供自由自在的繪圖空間、與好友盡興地討論畫作之前，為了維護您、我與其他使用JMuseum的成員們之權益，您必須遵守以下幾項規則(JMuseum服務以下簡稱「服務」)
p 請勿濫用「服務」。舉例來說，您不應干擾「服務」運作，亦不得試圖透過我們所提供的介面和操作說明以外的方法存取「服務」。您僅可於法律 (包括適用的出口及再出口管制法律和法規) 允許範圍內使用「服務」。如果您未遵守我們的條款或政策，或是如果我們正在調查疑似違規行為，我們可能會暫停或終止向您提供「服務」。
p 使用「服務」並不會將「服務」或您所存取內容的任何智慧財產權授予您。除非相關內容的擁有者同意或法律允許，否則您一律不得使用「服務」中的內容。本條款並未授權您可使用「服務」中所採用的任何品牌標示或標誌。請勿移除、遮蓋或變造「服務」所顯示或隨附顯示的任何法律聲明。
p 「服務」中顯示的部分內容並非 JMuseum 所有，這類內容應由其提供實體承擔全部責任。我們可對內容進行審查，以判斷其是否違法或違反 JMuseum 政策，並可移除或拒絕顯示我們合理確信違反 我們政策或法律的內容。不過，這不表示我們一定會對內容進行審查，因此請勿如此認定。
p 有關您對「服務」的使用，我們會向您發送服務公告、行政管理訊息和其他資訊；您可取消接收其中某些通訊內容。
p JMuseum 的部分「服務」可以在行動裝置上使用。但請勿在會分散注意力的情況下使用這些「服務」，以免違反交通或安全法規。
h4 您儲存在「服務」中的內容
p 部分「服務」可讓您上傳、提交、儲存、傳送或接收內容；您仍保有相關內容中您擁有的智慧財產權。簡而言之，屬於您的依舊是您的。
p 當您將內容上載、提交、儲存或傳送到「服務」，或在「服務」接收內容，或透過「服務」進行以上操作時，即表示您授予 JMuseum (及我們的合作夥伴) 全球通用的授權，可使用、代管、儲存、重製、修改、製作衍生作品、傳播、發佈、公開操作、公開展示與散佈這類內容。您於本項授權授予的權利僅限用於營運、宣傳與改善「服務」，以及開發新的服務。即使您停止使用「服務」，本項授權仍持續具有效力。部分「服務」可讓您存取與移除先前提交至該「服務」的內容。此外，某些「服務」會有條款或設定縮限我們對提交至該類「服務」之內容的使用範圍。請確認您擁有必要權利，可就您提交至「服務」的任何內容授予我們本項授權。
p 我們的自動系統會分析您的內容 (包括電子郵件)，以提供與您個人相關的產品功能，例如自訂搜尋結果、個人化廣告，以及垃圾內容與惡意軟體偵測功能。當您使用我們的系統傳送、接收及儲存內容時，系統就會進行分析。
p 如果您擁有 JMuseum 帳戶，我們可能會在 JMuseum 的「服務」(包括廣告和其他商業內容) 中顯示您的個人資料名稱和相片，以及您在 JMuseum 或您的 JMuseum 帳戶所連結的第三方應用程式中的動態 (例如 +1、您撰寫的評論以及您發表的留言)。我們會尊重您在 JMuseum 帳戶中選擇的分享或公開程度設定。舉例來說，您可以設定不在廣告中顯示自己的名稱和相片。
p 如要進一步瞭解 JMuseum 使用與儲存內容的方式，請參閱相關「服務」的隱私權政策或附加條款。如果您就「服務」提供意見或建議，我們可使用您的意見或建議，對您不負任何義務。
h4 在您同意本條款並開始使用本服務之後..
p 只要您使用「服務」，即表示您同意本條款，故請詳閱本條款內容。
p 由於「服務」種類繁多，因此某些「服務」可能會有附加條款或產品規定 (包括年齡限制)。附加條款將與相關「服務」一併提供；當您使用該「服務」時，該等附加條款即成為您與我們所訂協議的一部分。
.modal-footer
button.btn.btn-default(type="button", data-dismiss="modal") Close
//- Footer
include layout/footer.pug
//- Javascript
script(src="js/signup_page.js")

40
views/submit_theme.pug Normal file
View File

@ -0,0 +1,40 @@
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
.container
h1.text-center 投稿主題
.panel.panel-default
.panel-body
.row
.col-xs-3
.thumbnail
img#imgThemeImage(src= "images/Example.png", alt="ThemeImage")
.caption
h4.text-center 圖示
p 請上傳小於128KB的正方圖示，檔案種類限png或jpg
input#btnUploadImg(type="file")
label.btn.btn-block.btn-primary.btn-sm(for="btnUploadImg") 上傳圖片
.col-xs-9
form.form-horizontal
.form-group
label.col-sm-2.control-label 發起人
.col-sm-10
p.form-control-static #{username}
.form-group
label.col-sm-2.control-label(for="txtTheme") 主題名稱
.col-sm-10
input#txtTheme.form-control(type="text", placeholder="請輸入1~32字的主題名稱", minlength="1", maxlength="32", required)
.textarea-group
label(for="txtaNarration") 敘述
textarea#txtaNarration.form-control(rows="3", placeholder="請輸入8~100字間的主題敘述 (注意，換行符號將會被忽略)", minlength="8", maxlength="100", required)
.alert.alert-warning.mt-20
strong 請注意!
| 不準確、攻擊性、不雅或不愉快，以及違反著作財產權的主題內容是不被允許的。 另外，主題縮圖可以使用預設圖示，若您要更換圖示，則請切合您所設定的主題內容。
#divAlert
.button-group.text-right.mt-10
button#btnSubmit.btn.btn-primary(type="button") 提交主題
include layout/footer.pug
script(src="/js/submit_theme_page.js")

76
views/theme.pug Normal file
View File

@ -0,0 +1,76 @@
//- 「活動中的主題區」的版面
mixin currentThemesDiv(nth, themes)
.row
.col-xs-12
+themePanel(nth, themes[0], true)
- for (var i = 1; i < themes.length; i += 2)
.row.row-eq-height
.col-sm-6.col-xs-12
+themePanel(nth, themes[i], false)
if themes[i + 1]
.col-sm-6.col-xs-12
+themePanel(nth, themes[i + 1], false)
//- 當前主題區的主題面板
mixin themePanel(nth, theme, isFirst)
.panel.panel-default
.panel-heading.text-subbigtext.text-center #{theme.title}
.panel-body.text-normal(class= (isFirst ? "popular-theme" : ""))
.row
div(class= (isFirst ? "col-xs-2" : "col-xs-3")): img(src= theme.imageURL)
div(class= (isFirst ? "col-xs-10" : "col-xs-9"))
h3
label 發起人:
| #{theme.originator}
label 描述:
p #{theme.narrative}
.panel-footer
.row
.col-xs-1: a.btn.btn-primary(href= "/showcase/activity/" + nth + "/" + theme.title) 瀏覽
.col-xs-11.text-right
label
span.glyphicon.glyphicon-comment(aria-hidden="true" title="討論人數")
| #{theme.commentCount}
| |
label
span.glyphicon.glyphicon-arrow-up(aria-hidden="true" title="參與人數")
| #{theme.participantCount}
| |
label
span.glyphicon.glyphicon-eye-open(aria-hidden="true" title="觀看人數")
| #{theme.views}
//- 「上一季的主題區」的版面
mixin lastSeasonThemesDiv(nth, themes, endTime)
.col-md-8.col-sm-10.col-md-push-2.col-sm-push-1
.list-group.finished-list
- for (var i = 0; i < themes.length; i++)
a.list-group-item(href= "/showcase/activity/" + nth + "/" + themes[i].title)
label.author(title="發起人") #{themes[i].originator}
| #{themes[i].title}
label.to-right(title="結束時間") #{endTime}
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
- let currentSeason = datas.currentSeason;
- let lastSeason = datas.lastSeason;
//- Page Title
.container-fluid.container-table.text-shadow.color-white.layout-title
.row.text-center.align-items-center.vertical-center-row
.col
h1.text-bigtitle 畫作主題
p.text-bigtext 無論你是有靈感、沒靈感，在下方選一個主題來繪圖吧!
//- Themes of current season
.container-fluid.bg-themes
.col-xs-10.col-xs-push-1
section.row
h2.text-shadow.color-white.text-center - 活動中的主題 -
+currentThemesDiv(currentSeason.nth, currentSeason.themes)
//- Themes of last season
.container-fluid.bg-finishedThemes
.row
h2.text-shadow.color-white.text-center - 上一季的主題 -
+lastSeasonThemesDiv(lastSeason.nth, lastSeason.themes, lastSeason.endTime)
//- Footer
include layout/footer.pug

34
views/vote_theme.pug Normal file
View File

@ -0,0 +1,34 @@
mixin collapsePanel(theme)
.panel.panel-default
.panel-heading
h4.panel-title(data-toggle="collapse" data-parent="#accordion" href="#collapse" + theme.id)
a.themeTitle #{theme.title}
input.btn.btn-primary.btn-sm.btn-selection(type="button", id="theme" + theme.id, name="theme" + theme.id, value="投票", data-index= theme.id)
.panel-collapse.collapse(id="collapse" + theme.id)
.panel-body
.col-md-2.col-xs-3
img.img-thumbnail.img-responsive(src= theme.imageURL, alt= theme.title)
.col-md-10.col-xs-9
.originator 發起者:
span.originator #{theme.originator}
label 敘述:
p #{theme.narrative}
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
h1.text-center.title #{datas.title}
.container
.alert.alert-info.text-center(role="alert") 在這一季票選中，每位會員都有#{datas.voteCount}個投票選擇。
#accordion.panel-group
- let themes = datas.themes;
- for (let i = 0; i < themes.length; i++)
+collapsePanel(themes[i])
#divAlert
input#btnSubmit.btn.btn-block.btn-primary.mt-20(type="submit", value="提交")
include layout/footer.pug
script(src="js/vote_theme_page.js")
script
| let maxSel = #{datas.voteCount};

42
views/write_message.pug Normal file
View File

@ -0,0 +1,42 @@
doctype html
html
head
include layout/head.pug
body
include layout/navbar.pug
.container
.row
.col-xs-12
.panel.panel-default
.panel-body
h2.text-center.mtb-10 撰寫站內訊息
form.form-horizontal.col-xs-10.col-xs-push-1
.form-group
label.col-sm-2.control-label(for="txtSender") 寄件者
.col-sm-10
input#txtSender.form-control(type="text", value= username, disabled)
.form-group
label.col-sm-2.control-label(for="txtRecipient") 收件者
.col-sm-10
button.btn.btn-default.dropdown-toggle(data-toggle="dropdown", aria-haspopup="true", aria-expanded="false")
| 快速選擇
span.caret
input#txtRecipient.form-control.dropdown-textbox(type="text", value= datas.recipient)
ul#friendList.dropdown-menu
- for (let i = 0; i < datas.friendList.length; i++)
li: a #{datas.friendList[i]}
.form-group
label.col-sm-2.control-label(for="txtSubject") 主旨
.col-sm-10
input#txtSubject.form-control(type="text", value="", placeholder="請輸入1~32字間的主旨", minlength="1", maxlength="32")
.form-group
label(for="txtaContent") 內文:
textarea#txtaContent.form-control(rows="10", placeholder="請輸入8~500字間的內文", minlength="8", maxlength="500")
#alertMessage.row
.text-right
label.checkbox-inline(title="若此項勾選，則此訊息只會使收件者看得到")
input#chkPrivate(type="checkbox", value="")
| 私密訊息
button#btnSend.btn.btn-primary(type="button") 寄送訊息
include layout/footer.pug
script(src="js/write_message_page.js")