QuoteConvertor/index.html at master · lolo-bc/QuoteConvertor · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="./assets/css/materialize.css" media="screen,projection" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="./assets/css/style.css">

    <!-- fonts for the translations  -->
    <link
        href="https://fonts.googleapis.com/css2?family=Lacquer&family=Pinyon+Script&family=Pirata+One&family=Sancreek&family=UnifrakturMaguntia&display=swap"
        rel="stylesheet">

    <!-- font for main body -->
    <link href="https://fonts.googleapis.com/css2?family=NTR&family=Rajdhani:wght@500&display=swap" rel="stylesheet">

    <!-- Materialize Links -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Big+Shoulders+Text|Girassol&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>

    <title>Fancy Text Translator</title>
</head>

<body>
    <!-- the main HTML body -->
    <div class="container">

        <!-- floaters on the left and right of the page -->
        <div class="row">
            <!-- countdown timer for number of translates user can perform  -->
            <div class="col s12 m3">
                <div id="translateCounterText">
                    <p data-target="countdownModal" class="modal-trigger indigo-text text-lighten-3">Translates left:
                        <span id="translateCounter"> 5</span> </p>
                </div>
            </div>

            <!-- empty div to separate the the text -->
            <div class="col s12 m5"></div>

            <!-- Translated Text Modal button -->
            <div class="col s12 m3">
                <div id="translatedModal">
                    <a data-target="modal1"
                        class="waves-effect waves-light modal-trigger  indigo-text text-lighten-3">Your Translations</a>
                </div>
            </div>
        </div>

        <!-- Modal for translated text Structure -->
        <div id="modal1" class="modal bottom-sheet">
            <div class="modal-content">
                <h4 class="purpText">YOUR TRANSLATIONS:</h4>
                <ul class="indigo-text indigo-lighten-3" id="modalText"></ul>
            </div>
            <div class="modal-footer">
                <a class="modal-close waves-effect btn-flat">Close</a>
                <a id="clearQuotesBtn" class="waves-effect btn-flat">Clear Quotes</a>
            </div>
        </div>

        <!-- Countdown Modal Structure -->
        <div id="countdownModal" class="modal">
            <div class="modal-content">
                <h4>
                    To use this site, you can only generate 5 translations per hour. At the end of the hour the counter will
                    reset and you can generate quotes and translate again!
                    <br>
                    <br>
                    You can revisit your previous translations anytime by clicking "Your Translations" in the top right corner.
                </h4>
            </div>
            <div class="modal-footer">
                <a class="modal-close waves-effect waves-green btn-flat">OK</a>
            </div>
        </div>


        <!-- This row is site header  -->
        <div class="row">
            <h1 class="blue-text text-lighten-3" id="title">FANCY TEXT TRANSLATOR</h1>
        </div>


        <!-- This row is for the text area  -->
        <div class="row">


            <div class="row">
                <div id="quoteArea" class="col s12 m6  indigo lighten-1" 2>
                    <button id="getRandomQuote" class='blue-grey darken-3 btn'> Get Quote</button><br>
                    <textarea placeholder="type text here or select Get Quote" id="randomQuote"></textarea>
                    <br><br>
                </div>

                <div id="convertedTextArea" class="col s12 m6 blue lighten-3">
                    <!-- Dropdown Trigger -->

                    <a id="dropdown-menu" class='dropdown-trigger blue-grey darken-3  btn'
                        data-target='dropdown1'>Choose a language</a>

                    <ul id='dropdown1' class='dropdown-content'>
                        <li id="pirateTranslation">Pirate</li>
                        <li id="cockneyTranslation">Cockney</li>
                        <li id="chefTranslation">Chef</li>
                        <li id="oldEnglishTranslation">Old English</li>
                        <li id="fuddTranslation">Elma Fudd</li>
                    </ul>
                    <div id="translated">
                        <!-- error message that only pops up if user tries to click more than 5 times in an hour -->
                        <span id="badRequestPopup">
                            <h5>Uh oh! Too many Translations! Try again in 1 hour.</h5>
                        </span>
                    </div>
                </div>
            </div>

            <!-- empty area to display translated text at bottom of the screen when on mobile instead of on a modal  -->
            <div id="translationsMobileRow" class="row">
                <h4 class="purpText">YOUR TRANSLATIONS:</h4>
                <ul id="translationsMobile">

                </ul>
                <a id="clearQuotesBtn2" class="waves-effect purpText btn-flat">Clear Quotes</a>
            </div>
            <!-- end of container -->
        </div>

        <footer>
            <p id="attribute-site"></p>
        </footer>

    </body>
    <!-- Include a link to our JQuery and JavaScript-->
    <!-- <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>   -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!--JavaScript at end of body for optimized loading-->
    <script type="text/javascript" src="./assets/css/materialize.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>"
    <script src="./assets/script/script.js"></script>
</html>