RicePaper/index.html at master · Mooner510/RicePaper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<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, maximum-scale=1, minimum-scale=1">
    <title>RicePaper Discord Bot</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="images/icon2.ico">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <style>
        .container{
            padding-top: 1px;
            background-repeat : no-repeat;
            background-size : cover;
            width: 100%;
            height: 120vh;
            margin: 0 auto;
            background-position: center center;
            background-image: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url("images/background.jpg");
        }
    </style>
</head>
<body style="overflow-x: hidden; image-rendering: -webkit-optimize-contrast;">
    <header style="width: 100%;">
        <div class="top">
                <img src="images/load.png" alt="" data-animated="images/loading.gif" data-static="images/load.png" id="discord" class="image">
                <!-- <img class="image" src="images/load.png" style="z-index: 1; background-color: black;">
                <img class="image"  id="topImage" src="images/loading.gif" style="z-index: 2;"> -->
                <img class="db" src="images/DB.png">
        </div>
    </header>
    <img src="images/icon2.png" style="display: none;">
    <div class="container">

        <div class="main">
            <img src="images/image.png">
            <!-- <img src="DB.png" style="height: 30px;"> -->
            <!-- <h1>
                <img src="rice.png" style="height: 50px; margin-top: 26px;">
            </h1> -->
            <h1>Find your school lunch in<br>your Discord server for free</h1>
            <button class="link" id="h" onclick="window.open('https://discord.com/api/oauth2/authorize?client_id=969015519875325992&permissions=139586824256&scope=bot%20applications.commands')">
                Click to Invite RicePaper
            </button>
        </div>
        <div class="bottom">
            <a id="j" href="https://resolute-output-c20.notion.site/2022-C-612ab3224acd426991a6c12171b019c2">Idea from&emsp;정은진티처</a><br>
            <a id="k" href="https://github.com/pokabook">Idea & Bot Developer&emsp;poka</a><br>
            <a id="k" href="https://github.com/Mooner510">Bot Developer&emsp;Mooner510</a><br>
            <a id="k" href="https://github.com/wjknnn">Frontend&emsp;𝓒𝓱𝓮𝓬𝓴𝓲𝓷𝓰</a>
        </div>
    </div>
    <div class="explanation" style="width: 100%;">
        <div class="animate" id="animation1">
            <img src="images/설명1.png">
            <div class="one" id="tracking-in-expand">
                <p class="out">/rice [SchoolName]</p>
                <p class="in">오늘의 급식을 보여줘요.<br><br>버튼을 클릭해 날짜를 하루씩 변경할 수 있어요.<br>또는 선택메뉴를 이용해 ±12일까지 빠르게 검색할 수 있답니다.</p>
            </div>
        </div>
        <div class="animate" id="animation2">
            <img src="images/설명2.png">
            <div class="one">
                <p class="out">/setschool [학교명]</p>
                <p class="in">자신의 학교를 설정해요.<br><br>학교명을 입력하지 않아도 /rice명령어를 사용할 수 있게 되요.<br>또한 선택한 학교의 알림도 받으실 수 있게 된답니다.<br>설정해두면 매우 편리하겠죠?</p>
            </div>
        </div>
        <div class="animate" id="animation3">
            <img src="images/설명3.png">
            <div class="one">
                <p class="out">/setnotify [켜기|끄기]</p>
                <p class="in">알림을 받을지 설정해요.<br><br>조식, 중식, 석식을 일정 시간마다 알려드려요.<br>구지 /rice명령어를 쓰지 않아도 알려드린다구요!</p>
            </div>
        </div>
        <div class="trigger"></div>
    </div>
    <div class="help">
        <img src="images/그림6.png">
        <p>더 자세한 사항은 봇을 추가하여 알아보세요!</p>
        <button class="link" id="h" onclick="window.open('https://discord.com/api/oauth2/authorize?client_id=969015519875325992&permissions=139586824256&scope=bot%20applications.commands')">
            Click to Invite RicePaper
        </button>
        <div class="tjfaud">
            <div class="tjf">
                <img src="images/github.png">
                <h3>Github</h3><br><br>
                <p>Ricepaper<br>의 깃허브</p>
                <a href="https://github.com/Mooner510/RicePaper">
                    <button>Link</button>
                </a>
            </div>
            <div class="tjf">
                <img src="images/load.png">
                <h3>Discord Bot</h3><br><br>
                <p>Discord Bot 들이<br>모여있는 곳</p>
                <a href="#">
                    <button>Link</button>
                </a>
            </div>
        </div>
    </div>
    <div class="naeyong" style="width: 100%;">
        <a href="test.html" class="egg">EGG</a>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="js/scrollmagic.js"></script>
</body>
</html>