Lab2/index.html at 256f01a945f31bc9fa0efb0fdb192a157373977d · CSE110-SP21/Lab2 · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Framework Laptop Review Meeting:</title>
    <meta charset="utf-8" />
    <link
      rel="shortcut icon"
      href="images/favicon-192x192.png"
      type="image/x-icon"
    />
  </head>
  <body>
    <header>CSE110 Lab2</header>
    <main>
      <div id="UselessDiv"></div>
      <div id="UselessSpan"></div>
      <h1>Framework Laptop Review Meeting</h1>
      <h2>10/02/2021</h2>
      <hr />
      <center><img src="images/framework.jpeg" width="60%" /></center>
      <nav>
        <ul>
          <li>
            <a href="http://frame.work/">Framework laptop official website</a>
          </li>
          <li><a href="#AttendanceList">Attendance List</a></li>
          <li><a href="#Agenda List">Agenda List</a></li>
        </ul>
      </nav>
      <hr />

      <section>
        <h3 id="AttendanceList">Attendance List</h3>
        <ul>
          <li><b>Yibo Wei</b></li>
          <li>Lorem Ipsum</li>
          <li>Dolor Sit</li>
          <li>Amet Consectetur</li>
          <li>Adipisicing Eit</li>
        </ul>
      </section>

      <section>
        <h3 id="AgendaList">Agenda List</h3>
        <ol>
          <li>Discuss about Framework's visions, missions, and promises</li>
          <li>Teardown and review on the DIY experiece</li>
          <li>
            Testing the build quality, hardware, software, and performance
          </li>
          <li>Give the framework laptop a fair rating</li>
        </ol>
      </section>

      <section>
        <h3 id="MeetingNotes">Meeting Notes</h3>
        <p>
          All of us highly appreciate the visions and missions of framework,
          which emphasize the users' right to repair.
        </p>
        <center><img src="images/teardown.jpg" width="60%" /></center>
        <p>This is the teardown video of the Framework laptop:</p>
        <center>
          <video controls width="60%">
            <source src="videos/teardown.mp4" type="video/mp4" />
          </video>
        </center>
        <p>
          In the middle of the meeting, Yibo decided to show us a piece of music
          that he composed.
        </p>
        <center>
          <audio controls>
            <source src="audios/Wind Ensemble Demo.mp3" type="audio/mp3" />
          </audio>
        </center>
      </section>

      <form>
        <p>How do you like the Framework Laptop?</p>
        <fieldset>
          <input type="radio" id="verygood" />
          <label for="verygood">Very good</label> <br />
          <input type="radio" id="good" />
          <label for="good">Good</label> <br />
          <input type="radio" id="average" />
          <label for="average">Average</label> <br />
          <input type="radio" id="bad" />
          <label for="bad">Bad</label> <br />
          <input type="radio" id="verybad" />
          <label for="verybad">Very bad</label> <br />
        </fieldset>
        <p>What's your favorite part about Framework?</p>
        <fieldset>
          <input type="checkbox" id="upgradable" />
          <label for="upgradable">Upgradable</label> <br />
          <input type="checkbox" id="repairable" />
          <label for="repairable">Repairable</label> <br />
          <input type="checkbox" id="thinlight" />
          <label for="thinlight">Thin and Light</label> <br />
          <label for="other">Other:</label> <br />
          <textarea name="other" id="other" cols="90" rows="10"></textarea>
          <br />
          <button>Save</button>
        </fieldset>
        <fieldset>
          <label for="purchased">Did you purchased a Framework Laptop?</label>
          <select name="purchased" id="purchased">
            <option value="no">No</option>
            <option value="yes">Yes</option>
          </select>
          <br />

          <label for="choice">If no, what laptop are you using now? </label>
          <input list="brands" id="choice" name="choice" />

          <datalist id="brands">
            <option value="Apple"></option>
            <option value="Microsoft"></option>
            <option value="Dell"></option>
            <option value="HP"></option>
            <option value="Lenovo"></option>
            <option value="Acer"></option>
            <option value="Asus"></option>
            <option value="LG"></option>
            <option value="Samsung"></option>
            <option value="Other"></option>
          </datalist>
          <br />
          <label for="date">If yes, when did you order the laptop?</label>
          <input type="date" />
        </fieldset>

        <label for="email"
          >Enter your Email to share your thoughts with us!</label
        >
        <input
          type="Email:"
          id="email"
          name="email"
          placeholder="abc@example.com"
        /><button>Submit</button>
      </form>
    </main>
    <footer>
      <p>
        <strong>Contact Email:</strong><br /><em>david_wyb2001@outlook.com</em>
      </p>
    </footer>
  </body>
</html>