index.html 5.39 KB
Newer Older
Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
1
2
<!DOCTYPE html>
<html>
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<head>
  <meta charset="utf-8">
  <meta name="generator" content="GitLab Pages">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="topbar">
    <div id="menu" class="navbar"></div>
  </div>

  <div class="content">
    <header>
      <h1 id='projectname'></h1>
    </header>
    <!--Projektname kommt aus settings.js, hier nichts einfügen-->

Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
22
    <!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
23

Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
24
    <!-- TODO Blindtext anpassen: -->
25
26
27
28
29
30
31
32

    <section class="wrapper">
      <section class="inner">
        <div>
          <div class="title">
            <h3>Please select an option</h3>
          </div>
          <div>
33
34
            <input onclick="handleTextRadioClick()" type="radio" id="manual" name="text-input-option" value="manual"
              checked>
35
            <label for="manual">I will insert the text manually.</label></div>
36
          <div>
37
38
39
            <input onclick="handleTextRadioClick()" type="radio" id="calculated" name="text-input-option"
              value="calculated">
            <label for="calculated">I have already calculated the text length.</label>
40
41
42
43
44
          </div>
          <div id="character-calculation-wrapper">
            <div>
              <textarea oninput="handleTextAreaChange()" placeholder="Enter text here..." class="box-input"
                name="textarea" id="manual-text-entry" cols="90" rows="5" value=""></textarea>
45
              <div id="textarea-validation" class="error-message">Please enter the text.</div>
46
47
            </div>
            <div>
48
              <label for="calculatedTextCharacters">Total character count in the text: </label>
49
50
51
52
53
54
55
56
              <input class="box-input" type="number" id="calculatedTextCharacters" name="calculatedTextCharacters"
                value="" disabled>
            </div>
          </div>
          <div id="manual-character-input" style="display: none;">
            <label for="inputTextCharacters">Enter number of characters: </label>
            <input oninput="handleCharacterInputChange()" placeholder="e.g. 120" class="box-input" type="number"
              id="inputTextCharacters" name="inputTextCharacters" value="">
57
            <div id="textCharacters-validation" class="error-message">Please enter number the of characters.</div>
58
59
60
          </div>
        </div>
        <div>
61
62
          <label for="schoolLevel">School Level:</label>
          <select class="box-input" id="schoolLevel" onchange="schoolLevelChangeEvent(event)">
63
            <option value="0">Select level</option>
64
65
66
67
            <option value="1">First Year</option>
            <option value="2">Second Year</option>
            <option value="3">Third Year</option>
            <option value="4">Fourth Year</option>
68
          </select>
69
          <div id="schoolLevel-validation" class="error-message">Please select the school level.</div>
70
71
        </div>
        <div>
72
73
          <label for="category">Category:</label>
          <select class="box-input" id="category" onchange="categoryChangeEvent(event)">
74
            <option value="0">Select category</option>
75
76
77
78
            <option value="1">Mixed-ability group</option>
            <option value="2">High-ability group</option>
            <option value="3">Good-ability group</option>
            <option value="4">Average-ability group</option>
79
80
            <option value="5">Low-ability group</option>
            
81
          </select>
82
          <div id="category-validation" class="error-message">Please select the category.</div>
83
84
85
86
87
        </div>
        <div>
          <div>
            <button onclick="calculateReadingTime()">Calculate</button>
          </div>
88
89
          <div id="calculate-time-element" style="display: none;">
            <div class="title">
90
              <h2>Estimated Reading Time: <span id="reading-time-element"></span> min</h2>
91
            </div>
92
93
94
95
            <div>
              Send your feedback on: ybehira@yahoo.com
              <button onclick="showFeedbackForm()">Feedback</button>
            </div>
96
          </div>
97

Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
98
        </div>
99
        <div id="feedback-form" style="display: none;">
100
          <div class="title" style="padding-bottom: 12px; border-bottom: 1px solid #dddddd; margin-bottom: 10px;">
101
            <h3>Feedback Form</h3>
102
103
          </div>
          <div>
104
            <form action="mailto:ybehira@yahoo.com" method="GET" target="_blank">
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
              <div class="field">
                <div>
                  <label class="label" for="subject">Email Subject</label>
                </div>
                <div>
                  <input class="box-input full-width" name="subject" id="subject" type="text" class="input"
                    placeholder="Enter email subject here...">
                </div>
              </div>
              <div class="field">
                <div>
                  <label class="label" for="body">Email Body</label>
                </div>
                <div>
                  <textarea class="box-input full-width" cols="90" rows="5" class="textarea" name="body" id="body"
                    placeholder="Enter email body here..."></textarea>
                </div>
              </div>
              <div>
                <button type="submit">Create Email</button>
              </div>
            </form>
          </div>
        </div>
      </section>
    </section>

132
133
    <script src="index.js" type="text/javascript"> </script>

134
135
136
    <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
    <script src="settings.js"> </script>
</body>
Ratnadeep Rajendra Kharade's avatar
Ratnadeep Rajendra Kharade committed
137

138
</html>