practice-sql/template.ejs at main · brdgb/practice-sql · 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
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Ginkgo Mail</title>
    <link rel="icon" href="/img/favicon.svg">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <div class="side-mail-wrapper">
      <div class="sidebar">
        <img
          src="img/GinkgoMail_logo.svg"
          alt="Hacker mail logo"
          class="header_logo"
        />
        <% let allMailBG = '#e4ecf7'; let searchMailBG = '#fcfcfc';
        if(queryFrom!=undefined) { allMailBG = '#fcfcfc'; searchMailBG
        ='#e4ecf7'; } %>
        <div class="side-selector" style="background-color: <%= allMailBG %>">
          <img
            src="img/all_mail_icon.svg"
            alt="all_mail_icon"
            class="side_selector_icon"
          /><a href="/">全てのメール</a>
        </div>
        <div
          class="side-selector"
          style="background-color: <%= searchMailBG %>"
        >
          <img
            src="img/search_mail_icon.svg"
            alt="search_mail_icon"
            class="side_selector_icon"
          />
          <label for="from"> 差出人で絞り込み </label>
        </div>
      </div>
      <div class="mail-wrapper">
        <div class="mail-header">
          <form class="search-bar-wrapper">
            <input
              name="from"
              id="from"
              class="search-bar"
              placeholder="差出人を入力"
              value="<%= queryFrom %>"
            />
            <div class="search-button-wrapper">
              <button type="submit" class="search-button">検索</button>
            </div>
          </form>
          <div class="mail-header-user">
            <img
              src="img/user_icon.svg"
              alt="user_icon"
              class="mail-header-user-icon"
            />
            駒場 優
          </div>
        </div>
        <% if (isError) { %>
          <p>不正なSQL文です。</p>
        <% } %>
        <% if (!isError && mails.length == 0) { %>
          <p>メールはありません。</p>
        <% } %>
        <% for (const mail of mails) { %>
        <div class="mail-container">
          <div class="mail-subject-date-container">
            <h2 class="mail-subject"><%= mail.subject %></h2>
            <p class="mail-date"><%= mail.date %></p>
          </div>
          <h3 class="mail-sender"><%= mail.from %></h3>
          <p class="mail-receiver"><%= mail.toType %>: <%= mail.to %></p>
          <p class="mail-content"><%- mail.content %></p>
        </div>
        <% } %>
      </div>
    </div>
  </body>
</html>