teachersDashboard/index.html at main · LeoCode0/teachersDashboard · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Education dashboard">
    <link rel="stylesheet" href="./src/css/styles.css">
    <title>Dashboard - LC0</title>
</head>

<body>
    <div class="dashboard">

        <nav class="nav">
            <ul class="nav__list">
                <li><i class="fas fa-home"></i> <span>Home</span> </li>
                <li><i class="fas fa-user"></i> <span>Perfil</span> </li>
                <li><i class="fas fa-comments"></i> <span>Chat</span> </li>
                <li><i class="fas fa-book"></i> <span>Blog</span> </li>
                <li><i class="fas fa-bullhorn"></i> <span>Foro</span> </li>
                <li><i class="fas fa-tv"></i> <span>Live</span> </li>
            </ul>
            <button class="nav__close"><i class="far fa-window-close"></i></button>

        </nav>
        <header class="header">
            <div class="header__container">
                <h2 class="header__title">Dashboard</h2>
                <input required type="text" class="header__search" placeholder="Search">
            </div>
            <div class="header__container user">
                <div class="header__notification">
                    <i class="fas fa-bell"></i>
                </div>
                <div class="header__user">
                    <img src="https://picsum.photos/200" alt="User" class="user__img">
                    <p class="user__name">LeoCode0</p>
                    <span class="header__nav">

                        <i class="fas fa-bars"></i>
                    </span>
                </div>
            </div>
        </header>
        <main class="main">
            <section class="teachers">
                <div class="teachers__header">
                    <h2 class="teachers__title">Encuentra a tu profesor</h2>
                    <div class="teachers__container">
                        <button class="teachers__button" type="button">
                            +
                        </button>
                        <select name="teachers" id="teachers" class="teachers__select" value="english">
                            <option value="progrmación">Programación</option>
                            <option value="seguridad">seguridad informatica</option>
                            <option value="inglés">Inglés</option>
                            <option value="crecimiento">Crecimiento profesional</option>
                        </select>
                    </div>
                </div>
                <ul class="teachers__list">
                    <li>
                        <my-teacher img="https://static.platzi.com/media/teachers/diego-de-granda.jpg"
                            name="Diego De Granda" courses="12" students="19868"
                            experience="Google Developer Expert, Foundation Layer y Frontend Engineer Mentor en Platzi"
                            twitter="https://twitter.com/degranda10"></my-teacher>
                    </li>

                    <li>
                        <my-teacher img="https://static.platzi.com/media/teachers/estefany-aguilar.jpg"
                            name="Estefany Aguilar" courses="3" students="6408"
                            experience="Desarrolladora Frontend en La Haus" twitter="https://twitter.com/teffcode">
                        </my-teacher>
                    </li>
                    <li>
                        <my-teacher img="https://pbs.twimg.com/profile_images/1243234951266525186/nJT7hsWp_400x400.jpg"
                            name="Jonathan Alvarez" courses="3" students="658"
                            experience="Senior Web Software Engineer en InterNations"
                            twitter="https://twitter.com/jonalvarezz"></my-teacher>
                    </li>
                    <li>
                        <my-teacher img="https://static.platzi.com/media/teachers/teachers/197-ricardo-celis"
                            name="Ricardo Celis" courses="18" students="13723"
                            experience="Director de la Facultad de Computer Science"
                            twitter="https://twitter.com/celismx"></my-teacher>
                    </li>
                </ul>
            </section>
            <section class="teacherInfo__col">
                <h2 class="teacherInfo__title">
                    Información del profesor
                </h2>
                <div class="teacherInfo">

                    <single-teacher img="https://pbs.twimg.com/profile_images/1243234951266525186/nJT7hsWp_400x400.jpg"
                        name="Jonathan Alvarez" experience="Senior Web Software Engineer en InterNations"
                        twitter="https://twitter.com/jonalvarezz">
                    </single-teacher>
                    <ul class="teacherInfo__courses">
                        <li>
                            <course-teacher
                                logo="https://static.platzi.com/media/achievements/badge-nextjs-2259fc68-f86b-486e-bc09-95311a887985.png"
                                level="Básico" name="Curso de Next.js">
                            </course-teacher>
                        </li>
                        <li>
                            <course-teacher
                                logo="https://static.platzi.com/media/achievements/badge-optimizacion-web-183eef1c-d7e3-4f43-b680-f12f428c6484.png"
                                level="Avanzado" name="Curso de Optimización Web">
                            </course-teacher>
                        </li>
                        <li>
                            <course-teacher
                                logo="https://static.platzi.com/media/achievements/badge-manipulacion-dom-js-68f056c0-11d4-4533-8c75-693db60d85f8.png"
                                level="Básico" name="Curso de Manipulación del DOM">
                            </course-teacher>
                        </li>

                    </ul>
                </div>

            </section>
            <section class="courses">
                <h2 class="courses__title">
                    Mis cursos <button class="courses__button" type="button">Agregar curso</button>
                </h2>
                <div class="courses__list">
                    <my-course name="Curso de Manipulación del DOM"
                        image="https://static.platzi.com/media/achievements/badge-manipulacion-dom-js-68f056c0-11d4-4533-8c75-693db60d85f8.png"
                        classes="28"></my-course>
                    <my-course name="Curso Básico de Web Components con JavaScript"
                        image="https://static.platzi.com/media/achievements/web-comps-vanilla-js_badge-5fe6800c-b08a-4d6d-8c08-c07dd697f94f.png"
                        classes="22"></my-course>
                    <my-course name="Curso de Frontend Developer"
                        image="https://static.platzi.com/media/achievements/badge-frontend-developer-8a49e681-3e22-408d-b886-2f47dfc9953a.png"
                        classes="43"></my-course>
                    <my-course name="Router para Single Page App con JavaScript"
                        image="https://static.platzi.com/media/achievements/badge-router-single-page-app-js-ac0b8cfa-7bc8-4010-a9df-7500e5c1e078.png"
                        classes="12"></my-course>
                    <my-course name="Curso de Diseño Web con CSS Grid y Flexbox"
                        image="https://static.platzi.com/media/achievements/badge-diseno-cssgrid-flexbox-bc1271cc-86d0-480d-b130-b90846840af9.png"
                        classes="28"></my-course>
                    <my-course name="Curso de CSS Grid Layout"
                        image="https://static.platzi.com/media/achievements/css-grid-layout_badge-c3e2a26a-dce8-42e2-86b3-aa4c01e801e4.png"
                        classes="28"></my-course>
                    <my-course name="Curso de Debugging con Chrome DevTools"
                        image="https://static.platzi.com/media/achievements/badge-debugging-chrome-devtools-c75256bb-2a2f-4954-b2c0-9c946494ac37.png"
                        classes="22"></my-course>
                </div>
                <div class="courses__progress">
                    <h3 class="courses__title">
                        Mi progreso
                    </h3>
                    <p class="courses__num">
                        45%
                    </p>
                    <div class="courses__bar">
                        <p>Progreso</p>
                        <div class="bar">
                            <div class="bar__progress"></div>
                        </div>
                    </div>
                </div>
            </section>
    </div>

    </main>
    <div class="modal" id="modal">
        <div class="modalContainer">
            <form class="modal__form">
                <label for="course">Nombre del curso</label>
                <input required type="text" name="course" id="course">
                <label for="classes">Numero de clases</label>
                <input required type="number" name="classes" id="classes" min="0" max="50">
                <label for="image">URL de la imagen</label>
                <input required type="text" name="image" id="image">
                <button class="modal__button" type="submit">Agregar curso</button>
            </form>
            <button class="modal__close"><i class="far fa-window-close"></i></button>
        </div>
    </div>

    <div class="addTeacherModal">
        <div class="addTeacherModal__container">

            <form class="addTeacherModal__form">
                <label for="imgTeacher">URL de la imágen del profesor </label>
                <input type="text" name="imgTeacher" id="imgTeacher" required>
                <label for="nameTeacher">Nombre del profesor</label>
                <input type="text" name="nameTeacher" id="nameTeacher">
                <label for="coursesTeacher">Número de cursos del profesor</label>
                <input type="number" name="coursesTeacher" id="coursesTeacher">
                <label for="studentsTeacher">Número de estudiantes del profesor</label>
                <input type="number" name="studentsTeacher" id="students">
                <button id="formTeacher__button" type="submit" type="submit">Agregar profesor</button>
            </form>
            <button class="addTeacherModal__button"><i class="far fa-window-close"></i></button>
        </div>

    </div>
    <script type="module" src="./src/app.js"></script>
    <script src="https://kit.fontawesome.com/1db2702c51.js" crossorigin="anonymous"></script>
</body>

</html>