class-website/tools.html at main · Evozone/class-website · 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html>
<html lang="en" dir="ltr" data-theme="dark">

<head>
  <!-- Meta Data -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="color-scheme" content="light dark">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"
    defer></script>

  <!-- Stylesheets -->
  <link rel="stylesheet" href="styles/master.css">

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;700&family=Work+Sans:wght@300;400;500;600;700;800&display=swap"
    rel="stylesheet">

  <!-- Fontawesome -->
  <script src="https://kit.fontawesome.com/180bb0a7e4.js" crossorigin="anonymous"></script>

  <!-- Favicon -->
  <link rel="shortcut icon" href="favicon.ico">

  <title>Class B | Home</title>
</head>

<body class="lgtr-dark">
  <!-- Template for Navbar -->
  <template id="nav-template">
    <!-- TODO: Test the behavior of navbar if container fluid is in nav element instead of a nested div element  -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top container-fluid lgtr"  id="nav-scroll">
      <!-- Navbar Logo -->
      <div class="brand-img me-3" v-if="width > 972">
        <img class="brand-logo" src="images/brand-logo.svg" alt="Brand">
      </div>

      <!-- Navbar Name -->
      <a class="navbar-brand brand-name fs-1" href="index.html">Memengineers</a>

      <!-- This Toggler only appears for small screens -->
      <a class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <div class="brand-img me-3" v-if="972 > width">
          <img class="brand-logo" src="images/brand-logo.svg" alt="Brand">
        </div>
      </a>

      <!-- Navbar Page links -->
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link fs-3 me-2" @click="setFocusHome"
            href="javascript:void(0);">Home</a>
          <a class="nav-link fs-3 me-2 active" @click="setFocusTools"
            href="javascript:void(0);">Tools</a>
          <a class="nav-link fs-3 me-2" @click="setFocusTimeline"
            href="javascript:void(0);">Timeline</a>
        </div>
      </div>

    </nav>
  </template>

  <!-- Template for Tools Card -->
  <template id="tool-card">
    <div class="tool-panel card text-center p-2 m-2">
      <img class="tool-img" :src="`${imageLink}`" alt="evozone">
      <div class="tool-content">
        <h3 class="tool-title">
          {{title}}
        </h3>
        <div class="tool-desc">
          {{desc}}
        </div>
      </div>
      <a :href="`${link}`" target="_blank"><span class="clickable-div"></span></a>
    </div>
  </template>

  <!-- Template For Footer Icon -->
  <template id="footer-icon">
    <div class="p-2 text-center grid-item">
      <a :href="link" target="_blank"><i :class="imgSrc"></i></a>
    </div>
    <div class="p-2 text-center">
      {{name}}
    </div>
  </template>

  <!-- Template for Sign in Section -->
  <template id="sign-in">
    <div class="sign-in-container container">
      <!-- A button to expand sign in form -->
      <button v-if="!userPresent" class="btn btn-outline-info btn-block" @click="expandSignInForm">Sign In &nbsp;<i
          :class="arrow"></i>
      </button>

      <!-- A message that shows which user is present -->
      <div v-if="userPresent" class="text-center">
        <h4 class="comfortaa footer-content opacity-50">Welcome, {{admin.name}}</h3>
          <button class="btn btn-outline-danger btn-block" @click="signOutUser">Sign Out</button>
      </div>

      <!-- The expandable form -->
      <div v-if="showForm && !userPresent" class="sign-in-form" id="sign-in-form">

        <!-- The form with properly padded fields and buttons -->
        <form @submit.prevent="SignIn">
          <div class="form-group py-3">

            <!-- Username input -->
            <label for="username" class="footer-content">Username</label>
            <input type="text" class="form-control my-2" id="username" v-model="username" placeholder="Enter username">

            <!-- Add password with quick viewer -->
            <label for="password" class="footer-content">Password</label>
            <input type="password" class="form-control my-2" id="password" v-model="password"
              placeholder="Enter password">

            <!-- Forgot Password -->
            <!-- Call forgotPassword link -->
            <a href="#" class="d-block my-3 frgt-pass" @click.prevent="forgotPassword">Forgot
              Password?</a>
            <!-- Confirm that email was sent -->
            <div v-if="forgotPasswordEmailSent" class="alert alert-danger" role="alert">
              <p class="m-0">An email has been sent to {{username}}</p>
            </div>

            <!-- The submit button -->
            <button type="submit" class="btn btn-primary btn-block my-2 border-0 shadow" @click="sendLoginDetails">Sign
              In</button>

          </div>
        </form>

        <!-- The error message -->
        <div v-if="error" class="alert alert-danger" role="alert">
          {{error}}
        </div>

      </div>
    </div>
  </template>

  <!-- Start of the page -->
  <div v-scope="Navbar()" @vue:mounted="mounted">
    <!-- Render Tools Page -->
    <section>
      <div class=" container tool-top pt-1">
        <div class="row gx-4">
          <div v-scope="Tool({
            title:'Excalidraw',
            desc:'Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.',
            link:'https://excalidraw.com/',
            imageSrc:'images/excalidraw.svg'
          })" class="col-12 col-md-6 col-lg-4">
          </div>

          <div v-scope="Tool({
            title:'Replit',
            desc:'Replit is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages.',
            link:'https://replit.com/~',
            imageSrc:'images/replit.svg'
          })" class="col-12 col-md-6 col-lg-4">
          </div>

          <div v-scope="Tool({
            title:'Github',
            desc:'GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.',
            link:'https://github.com/',
            imageSrc:'images/github.svg'
          })" class="col-12 col-md-6 col-lg-4">
          </div>

          <div v-scope="Tool({
            title:'Udemy',
            desc:'Udemy is an online learning and teaching marketplace with over 183000 courses and 40 million students. Learn programming, marketing, data science and more.',
            link:'https://www.udemy.com/',
            imageSrc:'images/udemy.svg'
          })" class="col-12 col-md-6 col-lg-4">
          </div>

          <div v-scope="Tool({
            title:'Wolfram Alpha',
            desc:'Wolfram Alpha is a unique engine for computing answers and providing knowledge. It works by using its vast store of expert-level knowledge and algorithms to automatically answer questions, do analysis and generate reports.',
            link:'https://www.wolframalpha.com/',
            imageSrc:'images/wolfram-alpha.svg'
          })" class="col-12 col-md-6 col-lg-4">
          </div>

          <div v-scope="Tool({
            title:'Fireship.io',
            desc:'Fireship.io is a gateway drug for developers who want to build awesome web & mobile apps.',
            link:'https://www.geogebra.org/?lang=en',
            imageSrc:'images/fireshipio.svg'
          })" class="col-12 col-md-6 col-lg-4">
          </div>

        </div>
      </div>

    </section>
  </div>

  <!--Footer -->
  <footer id="id-footer" class="position-relative p-5 mt-3 lgtr-black">
    <div class="footer-content row">
      <div class="mb-2 col-lg-6">
        <h3 class="footer-header">About Terna Engineering College</h3>
        <p>Terna Engineering College is part of the
          Terna Public Charitable Trust's Group of Institutions,
          whose mission is to provide an environment of academic
          excellence and to adopt appropriate teaching - learning
          processes to produce competent and skilled engineers
          ready to meet global challenges.
        </p>
        <br>
        <p class="abt-desc">
          Their vision has always been to deliver value added
          quality education to the aspiring students, meeting
          stringent requirements of the changing technology,
          industry, business and society as a whole.
        </p>
      </div>
      <div class="mb-2 col-lg-6">
        <h3 class="footer-header">Follow College Clubs at:</h3>
        <!-- Another Grid -->
        <div class="row g-3">
          <div :class="className"
            v-scope="Footer({img:'fa-brands fa-discord fa-3x',name:'Evozone', link:'https://discord.gg//ZSGjsDYy5n'})">
          </div>
          <div :class="className"
            v-scope="Footer({img:'fa-brands fa-github fa-3x',name:'Evozone Github', link:'https://github.com/Evozone'})">
          </div>
          <div :class="className"
            v-scope="Footer({img:'fa-brands fa-instagram fa-3x',name:'Resorang', link:'https://www.instagram.com/resorang_tec/'})">
          </div>
          <div :class="className"
            v-scope="Footer({img:'fa-brands fa-instagram fa-3x',name:'E-cell Terna', link:'https://www.instagram.com/e_cell_terna/'})">
          </div>
          <div :class="className"
            v-scope="Footer({img:'fa-brands fa-instagram fa-3x',name:'Terna Engineering College', link:'https://www.instagram.com/ternaengg/'})">
          </div>
          <div :class="className"
            v-scope="Footer({img:'fa-solid fa-globe fa-3x',name:'TEC Website', link:'https://ternaengg.ac.in/'})">
          </div>
          <div :class="className"
            v-scope="Footer({img:'fa-brands fa-instagram fa-3x',name:'IEEE Terna', link:'https://www.instagram.com/ieeeterna/'})">
          </div>
          <div :class="className"
            v-scope="Footer({img:'fa-brands fa-instagram fa-3x',name:'CSI Terna', link:'https://www.instagram.com/csi_terna/'})">
          </div>
        </div>
      </div>
    </div>
    <hr class="footer-bg">

    <!-- Sign in section -->
    <div v-scope="SignIn()" class="py-3" @vue:mounted="mounted"></div>

    <h6 class="footer-trademark position-absolute bottom-0 start-50 translate-middle-x mt-4">An Evozone Project, 2022
    </h6>

  </footer>
  <!--Footer -->

  <!-- This script module contains the code for Firebase and Petite vue -->
  <script type="module" src="scripts/tools.js"></script>
</body>

</html>