Vieworthy/index.html at main · tommycbird/Vieworthy · 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
149
150
151
152
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="src/css/style.css" />
    <link rel="icon" type="image/x-icon" href="src/img/favicon.png" />
    <link
      href="https://fonts.cdnfonts.com/css/open-sauce-one"
      rel="stylesheet"
    />
    <script src="src/js/script.js" defer></script>
    <style>
      @import url("https://fonts.cdnfonts.com/css/open-sauce-one");
    </style>
  </head>

  <body>
    <!-- Tabs for navigation -->
    <div class="tabs">
        <button id="home-tab" onclick="showPage('home')">Home</button>
        <button id="install-tab" onclick="showPage('install')">Install</button>
        <button id="instruct-tab" onclick="showPage('instruct')">Instructions</button>
    </div>

    <!--====================== Home page  ======================-->
    <div id="home" class="page-content">
      <div class="icon-text-container">
        <a href="#">
          <div class="icon">
            <img src="src/img/logo_light.png" alt="Icon" />
          </div>
        </a>
        <div class="text">
          <div class="big-text">Vieworthy</div>
          <div class="small-text">Never waste a click</div>
        </div>
      </div>

      <!-- YouTube URL Input -->
      <div id="input" class="active-element">
        <div class="main">
          <div class="form-group">
            <textarea
              id="url"
              class="form"
              placeholder="Video URL..."
            ></textarea>
            <button onclick="computeWeb()" class="summarize-button">GO</button>
          </div>
        </div>
      </div>

      <!-- Pop-up -->
      <div id="chatbox" class="active-element" style="display: none">
        <div class="popup">
          <div id="spinner-wrapper" style="display: none">
            <div class="loader"></div>
            <p id="status-text">Loading...</p>
          </div>
          <div class="video-score">9.5</div>
          <button class="close-button" onclick="toggleDisplay('input')">
            X
          </button>
          <div class="chat-container">
            <div class="prompt-container">
              <div class="prompt">
                <span
                  >When was the first time in the video that the NumPy library
                  was mentioned?</span
                >
              </div>
              <div class="prompt">
                <span
                  >Tell me about the reliability and accuracy of this
                  video?</span
                >
              </div>
              <div class="prompt">
                <span>What is the like to dislike ratio on this video?</span>
              </div>
            </div>
            <div class="gpt-message typing-indicator">
              <span></span><span></span><span></span>
            </div>
            <div class="gpt-message">
              <span class="message-content"></span>
            </div>
            <div class="user-message">
              <span class="message-content"></span>
            </div>
          </div>
          <div class="input-container">
            <textarea placeholder="Type your message..."></textarea>
            <button onclick="handleChatSubmit()">Submit</button>
          </div>
        </div>

    </div>
    </div>

    <!--====================== Install page  ======================-->
    <div id="install" class="page-content hidden">
      <div class="install-block">
        <div class="install-left">
          <h2>Get Vieworthy for Chrome!</h2>
          <p>
            Discover the power of our Chrome extension, which allows you to
            assess any video on the youtube at the click of a button. Not sure
            if that 60 Minute video is worth your hour? No problem! Vieworthy
            will assess it for you in a matter of seconds.
          </p>
          <button class="install-button">Install Now</button>
        </div>
        <div class="install-right">
          <img
            src="src/img/extension_preview.png"
            alt="Chrome Extension Preview"
            class="extension-image"
          />
        </div>
      </div>
    </div>

    <!--====================== Instructions Page  ======================-->
    <div id="instruct" class="page-content hidden">
        <div class = "instruct-block">
            <p>
                To use Vieworthy, just paste the URL of the video you want to assess into the text box on the home page and click GO. For the chrome extension,
            just click on the assess button under the video and ask GPT any questions you may have!
            </p>

        </div>
    </div>

    <!--====================== Footer  ======================-->
    <div class="ghub-button">
      <a href="https://github.com/tommycbird/Vieworthy">
        <img src="src/img/ghub.png" class="ghub-img"/>
      </a>
    </div>

    <script>
      // To switch tabs
      function showPage(pageId) {
        var pages = document.getElementsByClassName("page-content");
        for (var i = 0; i < pages.length; i++) {
          pages[i].classList.add("hidden");
        }
        document.getElementById(pageId).classList.remove("hidden");
      }
    </script>
  </body>
</html>