<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="#">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/boxicons@2.1.2/dist/boxicons.js"></script>
    <link rel="stylesheet" href="css/member.css"/>     
    <title>MotiveTag</title>
</head>
<body>
    <div class="mask" id="mask"></div>
    <div class="user_info_sq" id="user_info_sq">
        <div class="popup_header">
            <div class="popup_header_inner">
                <img id="popup_avatar" class="block_avatar">
                <div id="pop_account" class="pop_account"></div>
            </div>
                <img class="pop_close" onclick="close_pop()" src="/img/x.png">
        </div>
        <div class="popup_body">
            <div class="pop_items">
                <p class="pop_title">生日日期 :</p><p id="pop_birthday"></p>
            </div>
            <div class="pop_items">
                <p class="pop_title">首次登入 :</p><p id="pop_first"></p>
            </div>
            <div class="pop_items">
                <p class="pop_title">上次上線 :</p><p id="pop_last"></p>
            </div>
            <div class="pop_items">
                <p class="pop_title">目前等級 :</p><p id="pop_level"></p>
            </div>
            <div class="pop_items">
                <p class="pop_title">今天心情 :</p><p id="pop_mood"></p>
            </div>
        </div>
        <div class="pop_interact">
            <button id="pop_add" class="pop_friend">加好友</button>
        </div>
    </div>
    <div class="talent_sq" id="talent_sq">
        <div class="talent_attack">(Passive:Comments get additional exp)
            <div>
                <div>你的爛獲得額外經驗，且傷害更高(0/5)</div>
            </div>
            <div>所有傷害1.5倍</div>
        </div>
        <div class="talent_defence">(Passive:Reduce all damage by 50%)
            <div>
                <div>你的讚獲得額外經驗，且給對方加成更高(0/5)</div>
            </div>
            <div>你的文章Tag將產生影響力，且對於排行影響+5</div>
        </div>
        <div class="talent_support">(Passive:Increase all exp get)
            <div></div>
            <div></div>
        </div>
        <div onclick="close_talent()">x</div>
    </div>
    <nav class="top_bar">
        <div class="top_left">
            <div class="top_left_inner">
                
                <input onclick="window.location.reload();" type="image" src="/img/title_member.png" class="mark">
            </div>
        </div>

        <box-icon class="refresh" name='revision' color='#1cbfff' id="windowed"  onclick="search_build_blocks(this.id)"></box-icon>

        <div class="observer_holder">
            <input type="text" class="tag_observer" placeholder="Tag of Interest" id="tag_observer"><img src="/img/search-regular-24.png" id="observer_btn" class="observer_btn" onclick="observe()"></img>
        </div>
        <div class="top_right">
            <div id="unread_notifis" class="unread_notifis"></div>
            <box-icon class="notifi" id="notifi_bell" name='bell' color="#1cbfff" style="cursor:pointer"></box-icon>
            <!-- <button class="signout_btn" id="signout">SignOut</button> -->
            <box-icon name='log-out' class="logout" color="#1cbfff" id="signout" style="cursor:pointer"></box-icon>
        </div>
        <div class="notifi_list" id="notifi_list"></div>
    </nav>
    <section class="main_frame">
        <div class="member_functions">
            <div class="m_f_mytags">
                <div class="my_tags_search">
                    <input class="tag_searcher" type="text" id="tag_searcher" placeholder="TAG Append">                    
                </div>
                <button class="tag_search_btn" id="tag_search_btn">MotiveTag</button>
                <div class="tag_box" id="tag_box">
                    <!-- tag put here -->
                </div>
            </div>
            <div class="m_f_hottags">
                <div class="hot_holder"><p>Trend</p></div>
                <div class="hot_box" id="hot_box"></div>
            </div>
                <section class="m_f_me">
        <div class="bottom_inner">
            <div class="block_creator">
                <div class="block_user">
                    <div>
                        <img class="user_icon" id="user_main_avatar" src="img/user-regular-24.png">
                    
                     <div class="image-upload">
                        <label for="upload_user_avatar">
                            <img style="width: 15px;cursor: pointer;" src="img/upload-regular-24.png"/>
                        </label>
                        <input id="upload_user_avatar" onchange="upload_user_img()" type="file" style="display:none;" />
                    </div>
                    </div>


              
                    <div class="user_info">
                        <div id="user_account" class="user_info_in"><box-icon name='game' color='#1cbfff' ></box-icon></div>
                        <div id="user_mail" class="user_info_in"><box-icon name='envelope' color='#1cbfff' ></box-icon></div>
                        <div id="user_firstday" class="user_info_in"><box-icon name='calendar-star' color='#1cbfff' ></box-icon></div>
                        <!-- <box-icon type='logo' name='steam' color='#1cbfff'></box-icon> -->
                    </div>
                    <div class="leveler">
                        <span>Level</span><span id="level_display" class="level_display"></span>
                        <div class="level">
                            <div class="level_bar" id="progress_display"></div>
                        </div>
                    </div>
                    <div class="user_control">
                        <!-- <div class="skill" onclick="open_skill()">技能</div>
                        <div class="talent" onclick="open_talent()">天賦</div> -->
                        <div id="user_mood" onclick="change_mood()">
                            <p id="mood_text"></p>
                            <input class="mood_input" type="text" id="mood_input">
                        </div>
                    </div>
                    
                </div>

            </div>
        </div>
    </section>
        </div>




        <div class="member_blocks" id="member_blocks">
                        <div class="blockor">

                <div class="blockor_inner" id="blockor_inner">
                    <div class="block_title">
                        <select class="block_submit_btn" id="blockor_type" placeholder="Type">
                            <option>PUBLIC</option>                      
                            <option>SECRET</option>
                        </select>
                    </div>
                    <textarea class="blockor_content" id="blockor_content" type="text" placeholder="Any thoughts?"></textarea>
                    <div class="block_submit">
                        <button class="block_submit_btn" id="block_submit_btn">Build</button>
                    </div>
                </div>
                <div class="block_guard" id="block_guard" onclick="bye_guard(this.id)"></div>
                <div class="voter" id="voter">
                    <div class="vote_header"><p>投票設定(至多五項)</p><img id="del_vote" class="del_vote" src="/img/x.png"></div>
                        <div class="vote_holder" id="vote_holder">
                            <div class="a_option"><input class="option_input" type="text" placeholder="選項"></div>
                            <div class="a_option"><input class="option_input" type="text" placeholder="選項"></div>
                        </div>
                        <div><img class="more_option" onclick="more_options()" src="/img/plus.png"></div>
                </div>
                <div class="img_pre_box" id="img_pre_box">
                    <img src="#" id="upload_preview" class="upload_img_preview">
                    <p onclick="cancel_upload()">取消</p>
                </div>
                <div class="block_tools">
                    <div class="block_tools_inner">
                        <box-icon name='mask' id="mask" color='#e20cfc' onclick="anonymous_mode()"></box-icon>
                        <div>
                            <label for="upload_block_img">
                                <box-icon name='image-alt' color="#09ed5b" for="upload_user_avatar"></box-icon>
                            </label>
                            <input id="upload_block_img" onchange="upload_block_img_preview()" type="file" style="display: none;"/>
                        </div>
                        <box-icon name='poll' color="#ed096d" onclick="start_poll()"></box-icon>
                        <!-- <box-icon name='face' type='solid' color='#e9ed09' ></box-icon>
                        <box-icon name='location-plus' color='#fcb00c' ></box-icon> -->
                    </div>
                </div>
            </div>
            <div class="block_box" id="block_box">
                <!-- <div class="a_block">我是一個block!</div>
                <div class="a_block">我是一個block!</div>
                <div class="a_block">我是一個block!</div> -->
            </div>
            <box-icon name='loader-alt' rotate='90' id="loading" animation='spin' color='#1cbfff' style="margin: 0 auto;" ></box-icon>
        </div>
        <div class="member_chats">
            <div class="m_f_mytags">
                <div class="my_tags_search">
                    <input class="tag_searcher" id="friend_searcher" type="text" placeholder="Who to find?">                    
                </div>
                <button class="tag_search_btn" id="friend_search_btn">Request a friend</button>
            </div>
            <div class="member_list">
                <div  class="friend_list" id="friend_list">
                    <p class="friend_in">Friends</p>
                </div>
                <div class="request_list" id="request_list">
                    <p class="friend_in">Request</p>

                </div>
                <div class="waiting_list" id="waiting_list">
                    <p class="friend_in">Waiting</p>

                </div>
            </div>
            <!-- <div class="chat_holder" id="chat_holder">

            </div> -->
        </div>         
    </section>
    <!-- <div class="chat_holder" id="chat_holder"></div> -->


    <footer class="footer">
        <div class="chat_holder" id="chat_holder"></div>
    </footer>

<script type="text/javascript" src="js/member.js"></script>
<script type="text/javascript" src="js/block.js"></script>
<script type="text/javascript" src="js/tag.js"></script>
<script type="text/javascript" src="js/friend.js"></script>
<script type="text/javascript" src="js/notifi.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<script type="text/javascript" src="js/vote.js"></script>
<script type="text/javascript" src="js/level.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</body>
</html>