---
# System prepended metadata

title: '**卡牌之神網站企劃書**'

---

# **卡牌之神網站企劃書**
https://2f019e90a7d0ed1c79869fe04388e5a60.ordinarymushroo.repl.co    
## 一、網頁各部分編寫部分 
**1.網頁架構設計**: 
 現時的架構: 主頁, 新聞, 抽卡, 卡牌庫, 圖鑒, 社群, 支援, 戰鬥(計劃中)
 計劃與及未來架: 主頁, 新聞, 抽卡, 商店, 卡牌庫, 圖鑒, 社群, 支援, 戰鬥, 卡牌製作員專區, 管理員專區
 
### 1.1 **主頁**
 (用家一開始登入的地方,  把網站的重要資訊放在這裏)
* **最新消息** 
(可以在這個區域得知整個遊戲的最新消息(維護, 節日活動, 普通更新等消息)都可以在這裏得知)

  內容 : 顯示最近的消息, 訊息上面需要包括分類 ( 維護公告 / 節日活動 /  網站更新 / 機械人更新 / 雀可美特討論區特別公告 / 其他 ), 訊息標題, 發出人, 日期
 
  效果 : 把滑鼠放在放在訊息的上面, 訊息會稍為向下展開一點, 顯示多一點詳情. 如果直接按下去將會跳到詳細版面 (新聞的版面)
  
* **最新卡牌** 
(可以在這個區域得知遊戲的最新卡牌, 可以透過管理員專區選擇顯示的卡牌)

  內容 : 透過管理員專區所選擇的卡牌, 顯示在這區域上面
  
  效果 : 盡量原用以及美化現在的設計, 就是有7張卡牌可以交替顯示 (https://shoob.gg/  可以參考 latest card 的部份)
  
  *現時的最新卡牌版面,  可作參考*
  ![](https://i.imgur.com/AA00WDL.jpg)

  
* **卡池**
(可以在這個區域得知遊戲的卡池, 不論是節日活動, 特別活動, 還是普通卡池, 都可以在這裏顯示)

  內容 : 顯示所有卡池, 建議直接使用卡池的圖片

  效果 : 盡量原用以及美化現在的設計, 就是卡池可以交替顯示(https://shoob.gg/  可以參考 latest card 的部份, 不過換成垂直)
  
  *現時的卡池版面,  可作參考*
  ![](https://i.imgur.com/vwO3bn1.png)
  
* **機械人介紹**
(介紹機械人的特色以及創作理念)
  
  內容 : 將會交由雀可打雜組的管理員編寫遊戲簡介, 並會加入圖片
  
  效果 : 沒有特別要求
  
* **主伺服器介紹**
(介紹機械人的主伺服器)

  內容 : 將會交由雀可打雜組的管理員編寫遊戲簡介, 並會加入圖片

  效果 : 沒有特別要求
  
### 1.2 **新聞**
 (這個版面收藏了所有有關卡牌之神的公告以及新聞, (包括維護公告 / 節日活動 /  網站更新 / 機械人更新 / 雀可美特討論區特別公告 / 其他 ), 主要會顯示每個新聞的標題以及一點資訊, 可以通過點擊新聞跳到詳細版面.)
 * **新聞分類** 
(每一篇新聞都有分類)
 維護公告
 最新卡牌消息
  節日活動
  網站更新
  機械人更新
  雀可美特討論區特別公告
  其他
  
    效果 : 希望每個分類可以有專屬的 icon ( https://fontawesome.com/ )
  
  * **新聞搜尋**
(serach bar, 可以透過keyword, 新聞分類, 日期, 等方法搜尋以及分類新聞)

    內容 : serach bar包括透過keyword進行搜尋。 亦可以透過調整分類或日期並進行篩選。
    
    效果 : Serach Bar, 效果沒有特別要求 ( serach bar 雀可管理員技術組將由負責 )
    
    
  
  * **新聞(簡短版本)**
(點擊新聞之前所顯示的簡短版本, 只會顯示標題，分類，日期，及少量資訊)

    內容 : 標題, 分類，日期及少量資訊

    效果 : 點擊後進入詳細版面, 效果沒有特別要求

    現時的新聞版面,  可作參考
    ![](https://i.imgur.com/3Vkj6cH.png)
    ![](https://i.imgur.com/F4sSNGv.png)
    
### 1.3 **抽卡**
(在這分頁上進行抽卡)

*現時的抽卡版面,  可作參考*
![](https://i.imgur.com/EKgbVHh.jpg)

* **卡池**
(可以通過點擊不同圖片/banner切換卡池)


    內容 : 每個卡池有對應的圖片/banner

    效果 : 通過點擊對應的圖片/banner切換卡池, 希望當滑鼠放在圖片上的時候會稍為放大, 其餘效果沒有特別要求
    ( .content-container .events img:hover {transform: scale(1.1)})
    
* **卡池卡牌顯示**
(會在這裏顯示該卡池的特別卡牌)

  內容 : 根據卡池的切換, 所顯示的卡牌也會改變, 會顯示該卡池的特別卡牌

    效果 : 與主頁的最新卡牌類似, 分別在於這裏只會顯示該卡池的特別卡牌, 大約顯示數目為4張卡牌 (https://shoob.gg/  可以參考 latest card 的部份)
    
* **卡池介紹**
(這裏包括卡池名稱, 活動時間, 簡介與及機率, 並有單抽及10抽兩個按鈕)

    內容 : 由上而下先顯示卡池名稱, 簡介, 活動時間與及機率, 並有單抽及10抽兩個按鈕

    效果 : 通過點擊單抽及10抽按鈕, 並播放抽卡片段 ( 素材已經放在 discord channel ), 之後會顯示所得到的卡牌. ( 建議抽卡過程盡量維持現有的狀況 )( 抽卡將由雀可管理員技術組將由負責 )

![](https://i.imgur.com/pvYt0rx.jpg)


### 1.4 **卡牌庫**
(這裏存放玩家所抽取並擁有的卡牌)

* **serach bar** 
(可以透過 search bar對所擁有的卡牌進行分類)

   內容 : 可以透過名字, 所屬的動漫系列, 級數, 獲得日期進行篩選

   效果 : search bar 實際功能將由雀可管理員技術組將由負責, 麻煩設計組預留位置
   
   *現在search bar的設計*
   ![](https://i.imgur.com/PTAbJZZ.png)
   
* **卡牌** 
(這裏存放玩家所抽取並擁有的卡牌)

    內容 : 麻煩使用 Discord channel 的樣板卡牌進行排版
    
    效果 : 實際功能將由雀可管理員技術組將由負責

    *現在卡牌排版的設計*
    ![](https://i.imgur.com/Kozb1Tx.jpg)

### 1.5 **圖鑒**
-----同上------

### 1.6 **社群**
(這裏會顯示主要discord server以及早期支持者的簡介)
*現在社群的設計*
![](https://i.imgur.com/JWzinMB.jpg)

* **內容** 
顯示的是server包括 : 雀可美特討論區 (主伺服器), 2D2C (早期支持者), 虛擬交流基地 (早期支持者), Meowクラウド蛋糕店 (早期支持者)
麻煩在伺服器名字下面預留一定位置填寫宣傳文

* **特效** 
預留加入伺服器的按鈕, 其餘效果沒有特別要求


### 1.7 **支援**  
(這裏會顯示整個網頁以及機械人的詳細資料, 亦會為玩家提供聯絡渠道)

* **提交問題** 
(玩家可以在這裏提出問題與及聯絡管理員)

   內容 : 玩家可以在這裏提出問題與及聯絡管理員，管理員亦可以通過管理員專區的位置進行回覆, 此位置需要包括填寫玩家名字, 來自的伺服器, 提出的問題.
   
   效果 : 管理員可以通過管理員專區的位置進行回覆, 實際功能將由雀可管理員技術組將由負責, 麻煩設計組預留位置
   
* **聯絡資料** 
( 有關於網頁的聯絡資料)
   
   內容 : 內容包括主伺服器(雀可discord), 協助編寫伺服器 (2D2C), 開發人員, 版本, 更新日期, 使用的program language
   
    效果 : 效果沒有特別要求
    
* **雀可相關資訊** 
(有關雀可相關資料)

   內容 : discord, youtube channel, facebook, instagram
   
   效果 : 效果沒有特別要求
   
* **版權** 
(包括版權&免責聲明)

  內容 : 需要包括免責聲明與及版權聲明, 文字將會放在 discord channel
  
  效果 : 效果沒有特別要求
  
*現在支援的設計*
![](https://i.imgur.com/yFydHZw.jpg)
![](https://i.imgur.com/TEUH90I.jpg)

   
### 1.8 **管理員專區**  

----將由雀可管理員技術組將由負責----

### 1.9 **navigation bar**  
(顯示1.1-1.8)

* **內容** 
    可以點擊按鈕到達以上所有的分頁, 請預留位置登入discord
    
* **效果**     
    效果沒有特別要求

*現在navigation bar的設計*
![](https://i.imgur.com/Y9LcMEb.png)

### 1.9 **footer**  
(包含網站的一些基本資訊)

* **內容** 
包括機械人文字, 機械人基本資料, 分頁的捷徑, copyright, 免責聲明

* **內容** 
效果沒有特別要求, 但建議可以參照現在footer的顏色

*現在footer的設計*   
![](https://i.imgur.com/dY9jZw0.jpg)


---

## 二、進度規畫
**1.完成部分**: 大致上有關背後的code 已經完成, 重點需要完善管理員選區的程式與及系統
**2.目前進度**: 正在構思戰鬥系統以及管理員專區的程式
**3.未來進度**:網頁外觀設計, 網頁Code搭配上封面,戰鬥系統出產,動畫改善,

## 三、參與人員
---
### 行政組
**雀可管理員**:路哥(綾小路清隆#4651), EFun(EFunLee#7777)
**2D2C**:ChienHS
### 多媒體組
**雀可管理員**:雪音(mainkakao), 佐倉(tos.squid#4931), ,
**2D2C**:裕子,迷離夢,老巫,溺水,天音
### 技術組
**雀可管理員**:shr00m(shr00m#7911), EFun(EFunLee#7777), 有紀(からくりピエロ#0831)
**2D2C**:Magi,ChienHS,Jerry,Arce,小明
### 打雜組
**雀可管理員**:雪音(mainkakao), 啊方啦(AFangLAH#2947), 走路草 (打牌靠賽#3259)
**2D2C**:死神,YoYa


