<template>
    <main class="introduction-container">

        <div class="introduction">

            <img src="@/assets/images/cfp/Ellipse 5.svg" class="ellipse"/>
            <img src="@/assets/images/cfp/Group 10.svg" class="sitcon-icon"/>
            <img src="@/assets/images/cfp/Path 733.svg" class="sitcon-pic-2021"/>
            <img src="@/assets/images/cfp/Path 734.svg" class="sitcon-title-zh"/>
            <img src="@/assets/images/cfp/Path 735.svg" class="sitcon-topic"/>
            <img src="@/assets/images/cfp/Path 736.svg" class="sitcon-date"/>
            <img src="@/assets/images/cfp/Path 737.svg" class="sitcon-place"/>
            <img src="@/assets/images/cfp/Path 738.svg" class="sitcon-qeury"/>
            <!-- ../../assets/images/cfp/Mobile/Mobile-background.svg -->
            <img src="@/assets/images/cfp/Background.svg" class="background"/>
            <!-- src="@/assets/images/cfp/Background.svg" -->
            <!-- first part -->
            <img src="@/assets/images/cfp/Path 740.svg" class="SITCON-text-path"/>
            <svg width="890" height="900" class="first-box">
              <rect width="1000" height="1000" style="fill:#ffffff;" />
            </svg>
            <div class="box-back">
                <h1>關於 SITCON</h1>
                <div class="about-section">
                    <p class="context">
                        學生計算機年會（SITCON）自 2013
                        年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
                    </p>
                </div>

                <h2>歷屆年會網站</h2>
                <div class="thumbnails">
                    <table class="img-table">
                        <tr>
                            <td class="td-width">
                                <img class="cfp-img" src="@/assets/images/cfp/2020.png" />
                                <p class="tag">SITCON 2020<br /></p>
                                <p class="tag sub">#define</p>
                            </td>
                            <td class="td-width">
                                <img class="cfp-img" src="@/assets/images/cfp/2019.png" />
                                <p class="tag">SITCON 2019<br /></p>
                                <p class="tag sub">開箱演算法</p>
                            </td>
                            <td class="td-width">
                                <img class="cfp-img" src="@/assets/images/cfp/2018.png" />
                                <p class="tag">SITCON 2018<br /></p>
                                <p class="small-tag">POPULAR COMPUTER SCIENCE</p>
                            </td>
                        </tr>
                    </table>
                </div>
                <h2>參與討論！</h2>
                <div class="discuss-section">
                    <p class="context">
                        SITCON 是個開放的社群，許多籌備的相關事項都會在公開的 Mailing list
                        上進行<br />
                        討論，如果有興趣參與，歡迎訂閱 SITCON 的 Mailing list
                        並貢獻你的想法！
                    </p>
                    <p class="context" style="margin-top: 22px; margin-bottom: 22px">
                        若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
                        的會議記錄。
                    </p>
                </div>
                <div>
                    <button class="buttons"><h3>SITCON 論壇</h3></button>
                    <button class="buttons"><h3>會議記錄</h3></button>
                </div>
            </div>
            
            <!-- first part -->
            <!-- second part -->
            <img src="@/assets/images/cfp/Path_762.svg" class="des-text-path"/> <!---->
            <svg width="1500" height="1500" class="second-box">
              <rect width="1500" height="1500" style="fill:#ffffff;" />
            </svg>
            <svg width="2000" height="350" class="des-blue-bar">
              <rect width="2000" height="350" style="fill:#226BB4;" />
            </svg>
            <svg width="1500" height="900" class="hiden-box">
              <rect width="1500" height="900" style="fill:#ffffff;" />
            </svg>
            <div class="box-back2" style="margin-top: 1000px;">
                <div class="topic-intro">
                    <h1 class="right">2021 年會主題</h1>
                    <h1 class="right">
                        <span class="enlarge">算盤的後裔</span>
                    </h1>
                    <p class="context">
                        千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步發展為隨處可見的智慧型裝置。俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
                    </p>
                    <p class="context">
                        人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海。奠基於科技的現有成果，對科技的未來持續做出貢獻的我們，都是「算盤的後裔」。
                    </p>
                    <img src="@/assets/images/cfp/paper/paper.png" class="paper-image" />
                    <h2>徵稿時間</h2>
                    <div>
                        <h2 class="date">01/15 ~ 02/22</h2>
                        <p class="detail">
                            詳細時程請見
                        </p>
                        <div class="button-post">
                            <button class="buttons"><h3>投稿資訊</h3></button>
                            <!-- NOTE: this button's hover won't work because paper.png is too big -->
                            <button class="buttons"><h3>不用說了，快讓我投稿！</h3></button>
                        </div>
                    </div>
                </div>
                
                <div class="last-part">
                    <h3>最後...</h3>
                    <h1>SITCON 贊助徵求</h1>
                    <!--style="margin-top:-30px;"-->
                    <p class="context">
                        SITCON 的舉辦，除了有賴眾多志工的努力，也需要金錢的支持。<br />
                        如果您認同 SITCON 的理念，歡迎以行動支持 SITCON
                        的運作，讓更多交流產生！
                    </p>
                    <p class="context">
                        企業合作歡迎聯繫
                        <a class="context-hyperlink" href="mailto:contact@sitcon.org">contact@sitcon.org</a>
                    </p>
                    <div>
                        <button class="buttons"><h3>個人贊助方案</h3></button>
                    </div>
                </div>
                <!-- second part -->
            </div>
            
        </div>
    </main>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class IntrodContainer extends Vue {}
</script>

<style lang="scss">
@import '@/assets/scss/CFP/intro';
</style>
