Adiciona programação

html/assets/css/style.css

@@ -39,3 +39,10 @@
   resize: both;
   border-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48c3R5bGU+QGtleWZyYW1lcyBzdHJva2V7MCV7c3Ryb2tlLWRhc2hhcnJheTo3MCwzNTA7c3Ryb2tlLWRhc2hvZmZzZXQ6MH0xJXtzdHJva2UtZGFzaGFycmF5OjU1LDM1MDtzdHJva2UtZGFzaG9mZnNldDowfTUle3N0cm9rZS1kYXNoYXJyYXk6NTAsMzUwO3N0cm9rZS1kYXNob2Zmc2V0OjB9OSV7c3Ryb2tlLWRhc2hhcnJheToxNSwzNTAsMzA7c3Ryb2tlLWRhc2hvZmZzZXQ6MH10b3tzdHJva2UtZGFzaG9mZnNldDo3NzZ9fTwvc3R5bGU+PGxpbmVhckdyYWRpZW50IGlkPSJwcmVmaXhfX2ciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDU4ZDU5IiBzdG9wLW9wYWNpdHk9Ii41Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNjcyNmZmIiBzdG9wLW9wYWNpdHk9Ii44Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBkPSJNMS41IDEuNWg5N3Y5N2gtOTd2LTk3IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2U9InVybCgjcHJlZml4X19nKSIgc3Ryb2tlLXdpZHRoPSIxMCIgc3Ryb2tlLWRhc2hhcnJheT0iNTAgNzc2IiBzdHlsZT0iYW5pbWF0aW9uOnN0cm9rZSAxLjVzIGxpbmVhciBpbmZpbml0ZSIvPjwvc3ZnPg==") 1;
 }
+
+.grade {
+  grid-template-columns: 7rem 1fr 1fr 1fr 1fr;
+  grid-template-rows: repeat(auto-fit, 25px);
+  background:
+    repeating-linear-gradient(to bottom,transparent 0 25px,#000 0 26px);
+}

html/index.html

@@ -59,29 +59,30 @@
         class="pt-1 pb-2 z-10 sticky top-0 flex h-[5vh] items-center justify-center bg-fixed bg-center bg-cover text-sm font-medium text-center text-gray-500 dark:text-gray-400 flex-wrap"
       >
         <a
-          href="#"
+          href="#oquee"
           class="z-20 borda-colorida inline-block py-3 px-4 text-white rounded-lg active"
           aria-current="page"
         >
           O que é
         </a>
         <a
-          href="#"
+          href="#oficinas"
           class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
           >Oficinas</a
         >
         <a
-          href="#"
+          href="#palestrantes"
           class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
           >Palestrantes</a
         >
         <a
-          href="#"
+          href="#competicoes"
           class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
           >Competições</a
         >
         <a
-          class="inline-block py-3 px-4 text-gray-400 cursor-not-allowed dark:text-gray-500"
+          href="#programacao"
+          class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
           >Programação</a
         >
       </nav>
@@ -149,5 +150,275 @@
         </div>
       </div>
     </section>
+
+    <section id="programacao" class="p-10 bg-white">
+      <h2 class="text-2xl">Programação</h2>
+      <div class="py-5">
+        <h3 class="text-xl">Quarta-feira (30/11)</h3>
+        <div class="flex p-2">
+          <div class="flex items-center">
+            <div class="m-1 bg-green-200 w-5 h-5"></div>
+            <span class="p-1">Palestra</span>
+          </div>
+          <div class="flex items-center">
+            <div class="m-1 bg-blue-200 w-5 h-5"></div>
+            <span class="p-1">Oficina</span>
+          </div>
+        </div>
+        <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
+          <div class="bg-white text-center font-bold">Horário</div>
+          <div class="bg-white text-center font-bold">Hall do DINF</div>
+          <div class="bg-white text-center font-bold">Auditório DINF</div>
+          <div class="bg-white text-center font-bold">Laboratório DINF 1-2</div>
+          <div class="bg-white text-center font-bold">CAAD</div>
+
+          <div class="bg-white text-center col-start-1">09h30~10h00</div>
+          <div class="bg-white col-start-3 bg-green-200 text-center flex justify-center items-center row-span-3">
+            Segurança em Redes IoT
+          </div>
+          <div class="bg-white text-center col-start-1">10h00~10h30</div>
+          <div class="bg-white text-center col-start-1">10h30~11h00</div>
+          <div class="bg-white text-center col-start-1">11h00~11h30</div>
+          <div class="bg-white text-center col-start-1">11h30~12h00</div>
+          <div class="bg-white col-span-3 row-span-4 bg-pink-200 text-center flex justify-center items-center">
+            Almoço
+          </div>
+          <div class="bg-white text-center col-start-1">12h00~12h30</div>
+          <div class="bg-white text-center col-start-1">12h30~13h00</div>
+          <div class="bg-white text-center col-start-1">13h00~13h30</div>
+          <div class="bg-white text-center col-start-1">13h30~14h00</div>
+          <div class="col-start-4 flex justify-center items-center text-center bg-blue-200 row-span-4">
+            Técnicas de Programação Competitiva
+          </div>
+          <div class="bg-white text-center col-start-1">14h00~14h30</div>
+          <div class="col-start-3 flex justify-center items-center text-center bg-green-200 row-span-3">
+            Empregando Estruturas de Redes Oportunistas em Ambientes Urbanos Externos para Apoiar Pessoas em Situação Emergencial de Saúde
+          </div>
+          <div class="bg-white text-center col-start-1">14h30~15h00</div>
+          <div class="bg-white text-center col-start-1">15h00~15h30</div>
+          <div class="col-start-2 flex justify-center items-center text-center bg-pink-200 row-span-2">
+            Coffee Break
+          </div>
+          <div class="bg-white text-center col-start-1">15h30~16h00</div>
+          <div class="bg-white text-center col-start-1">16h00~16h30</div>
+          <div class="col-start-3 flex justify-center items-center text-center bg-green-200 row-span-2">
+            Conversa sobre a Batalha do Politécnico
+          </div>
+          <div class="bg-white text-center col-start-1">16h30~17h00</div>
+          <div class="bg-white text-center col-start-1">17h00~17h30</div>
+          <div class="col-start-3 flex justify-center items-center text-center bg-green-200 row-span-4">
+            Cine Debate: O Menino da Internet
+          </div>
+          <div class="bg-white text-center col-start-1">17h30~18h00</div>
+          <div class="bg-white text-center col-start-1">18h00~18h30</div>
+          <div class="bg-white text-center col-start-1">18h30~19h00</div>
+        </div>
+      </div>
+      <div class="py-5">
+        <h3 class="text-xl">Quinta-feira (01/12)</h3>
+        <div class="flex p-2">
+          <div class="flex items-center">
+            <div class="m-1 bg-green-200 w-5 h-5"></div>
+            <span class="p-1">Palestra</span>
+          </div>
+          <div class="flex items-center">
+            <div class="m-1 bg-blue-200 w-5 h-5"></div>
+            <span class="p-1">Oficina</span>
+          </div>
+        </div>
+        <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
+          <div class="bg-white text-center font-bold">Horário</div>
+          <div class="bg-white text-center font-bold">Hall do DINF</div>
+          <div class="bg-white text-center font-bold">Auditório DINF</div>
+          <div class="bg-white text-center font-bold">Laboratório DINF 1-2</div>
+          <div class="bg-white text-center font-bold">CAAD</div>
+
+          <div class="bg-white text-center col-start-1">09h30~10h00</div>
+          <div class="bg-white col-start-4 bg-blue-200 text-center flex justify-center items-center row-span-4">
+            Paralelização usando OpenMP e OpenACC em CPU e GPU
+          </div>
+          <div class="bg-white text-center col-start-1">10h00~10h30</div>
+          <div class="bg-white text-center col-start-1">10h30~11h00</div>
+          <div class="bg-white text-center col-start-1">11h00~11h30</div>
+          <div class="bg-white text-center col-start-1">11h30~12h00</div>
+          <div class="bg-white col-span-3 row-span-4 bg-pink-200 text-center flex justify-center items-center">
+            Almoço
+          </div>
+          <div class="bg-white text-center col-start-1">12h00~12h30</div>
+          <div class="bg-white text-center col-start-1">12h30~13h00</div>
+          <div class="bg-white text-center col-start-1">13h00~13h30</div>
+          <div class="bg-white text-center col-start-1">13h30~14h00</div>
+          <div class="col-start-3 flex justify-center items-center text-center bg-green-200 row-span-3">
+            Meninas++
+          </div>
+          <div class="bg-white text-center col-start-1">14h00~14h30</div>
+          <div class="bg-white text-center col-start-1">14h30~15h00</div>
+          <div class="bg-white text-center col-start-1">15h00~15h30</div>
+          <div class="col-start-2 flex justify-center items-center text-center bg-pink-200 row-span-2">
+            Coffee Break
+          </div>
+          <div class="bg-white text-center col-start-1">15h30~16h00</div>
+          <div class="bg-white text-center col-start-1">16h00~16h30</div>
+          <div class="col-start-4 flex justify-center items-center text-center bg-blue-200 row-span-4">
+            Arduino
+          </div>
+          <div class="bg-white text-center col-start-1">16h30~17h00</div>
+          <div class="bg-white text-center col-start-1">17h00~17h30</div>
+          <div class="bg-white text-center col-start-1">17h30~18h00</div>
+          <div class="col-start-3 flex justify-center items-center text-center bg-green-200 row-span-3">
+            Carreiras Além do Desenvolvimento
+          </div>
+          <div class="bg-white text-center col-start-1">18h00~18h30</div>
+          <div class="bg-white text-center col-start-1">18h30~19h00</div>
+        </div>
+      </div>
+      <div class="py-5">
+        <h3 class="text-xl">Sexta-feira (02/12)</h3>
+        <div class="flex p-2">
+          <div class="flex items-center">
+            <div class="m-1 bg-green-200 w-5 h-5"></div>
+            <span class="p-1">Palestra</span>
+          </div>
+          <div class="flex items-center">
+            <div class="m-1 bg-blue-200 w-5 h-5"></div>
+            <span class="p-1">Oficina</span>
+          </div>
+        </div>
+        <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
+          <div class="bg-white text-center font-bold">Horário</div>
+          <div class="bg-white text-center font-bold">Hall do DINF</div>
+          <div class="bg-white text-center font-bold">Auditório DINF</div>
+          <div class="bg-white text-center font-bold">Laboratório DINF 1-2</div>
+          <div class="bg-white text-center font-bold">CAAD</div>
+
+          <div class="bg-white text-center col-start-1">09h30~10h00</div>
+          <div class="bg-white col-start-4 bg-blue-200 text-center flex justify-center items-center row-span-4">
+            Introdução à Vue.js
+          </div>
+          <div class="bg-white text-center col-start-1">10h00~10h30</div>
+          <div class="bg-white text-center col-start-1">10h30~11h00</div>
+          <div class="bg-white text-center col-start-1">11h00~11h30</div>
+          <div class="bg-white text-center col-start-1">11h30~12h00</div>
+          <div class="bg-white col-span-3 row-span-4 bg-pink-200 text-center flex justify-center items-center">
+            Almoço
+          </div>
+          <div class="bg-white text-center col-start-1">12h00~12h30</div>
+          <div class="bg-white text-center col-start-1">12h30~13h00</div>
+          <div class="bg-white text-center col-start-1">13h00~13h30</div>
+          <div class="bg-white text-center col-start-1">13h30~14h00</div>
+          <div class="col-start-3 flex justify-center items-center text-center bg-yellow-200 row-[span_10]">
+            Maratona
+          </div>
+          <div class="bg-white text-center col-start-1">14h00~14h30</div>
+          <div class="bg-white text-center col-start-1">14h30~15h00</div>
+          <div class="bg-white text-center col-start-1">15h00~15h30</div>
+          <div class="col-start-2 flex justify-center items-center text-center bg-pink-200 row-span-2">
+            Coffee Break
+          </div>
+          <div class="bg-white text-center col-start-1">15h30~16h00</div>
+          <div class="bg-white text-center col-start-1">16h00~16h30</div>
+          <div class="col-start-5 flex justify-center items-center text-center bg-yellow-200 row-span-5">
+            Brasil x Sérvia
+          </div>
+          <div class="bg-white text-center col-start-1">16h30~17h00</div>
+          <div class="bg-white text-center col-start-1">17h00~17h30</div>
+          <div class="bg-white text-center col-start-1">17h30~18h00</div>
+          <div class="bg-white text-center col-start-1">18h00~18h30</div>
+          <div class="bg-white text-center col-start-1">18h30~19h00</div>
+        </div>
+      </div>
+      <div class="py-5">
+        <h3 class="text-xl">Sábado (03/12)</h3>
+        <div class="flex p-2">
+          <div class="flex items-center">
+            <div class="m-1 bg-green-200 w-5 h-5"></div>
+            <span class="p-1">Palestra</span>
+          </div>
+          <div class="flex items-center">
+            <div class="m-1 bg-blue-200 w-5 h-5"></div>
+            <span class="p-1">Oficina</span>
+          </div>
+        </div>
+        <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2" style="grid-template-columns: 7rem 1fr 1fr">
+          <div class="bg-white text-center font-bold">Horário</div>
+          <div class="bg-white text-center font-bold">Maratona de Alto Desempenho</div>
+          <div class="bg-white text-center font-bold">Sala 1</div>
+
+          <div class="bg-white text-center col-start-1">00h00~09h30</div>
+          <div class="bg-white text-center col-start-1">09h30~10h00</div>
+          <div class="bg-white text-center col-start-1">10h00~10h30</div>
+          <div class="bg-white text-center col-start-1">10h30~11h00</div>
+          <div class="bg-white text-center col-start-1">11h00~11h30</div>
+          <div class="bg-white text-center col-start-1">11h30~12h00</div>
+          <div class="bg-white text-center col-start-1">12h00~12h30</div>
+          <div class="bg-white text-center col-start-1">12h30~13h00</div>
+          <div class="bg-white text-center col-start-1">13h00~13h30</div>
+          <div class="bg-white text-center col-start-1">13h30~14h00</div>
+          <div class="col-start-2 flex justify-center items-center text-center bg-yellow-200 row-[span_12]">
+            Maratona de Alto Desempenho
+          </div>
+          <div class="bg-white text-center col-start-1">14h00~14h30</div>
+          <div class="col-start-3 flex justify-center items-center text-center bg-blue-200 row-span-4">
+            Oficina de Pixel Art (Crowno)
+          </div>
+          <div class="bg-white text-center col-start-1">14h30~15h00</div>
+          <div class="bg-white text-center col-start-1">15h00~15h30</div>
+          <div class="bg-white text-center col-start-1">15h30~16h00</div>
+          <div class="bg-white text-center col-start-1">16h00~16h30</div>
+          <div class="bg-white text-center col-start-1">16h30~17h00</div>
+          <div class="bg-white text-center col-start-1">17h00~17h30</div>
+          <div class="bg-white text-center col-start-1">17h30~18h00</div>
+          <div class="bg-white text-center col-start-1">18h00~18h30</div>
+          <div class="bg-white text-center col-start-1">18h30~19h00</div>
+          <div class="bg-white text-center col-start-1">19h00~00h00</div>
+        </div>
+      </div>
+      <div class="py-5">
+        <h3 class="text-xl">Domingo (04/12)</h3>
+        <div class="flex p-2">
+          <div class="flex items-center">
+            <div class="m-1 bg-green-200 w-5 h-5"></div>
+            <span class="p-1">Palestra</span>
+          </div>
+          <div class="flex items-center">
+            <div class="m-1 bg-blue-200 w-5 h-5"></div>
+            <span class="p-1">Oficina</span>
+          </div>
+        </div>
+        <div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2" style="grid-template-columns: 7rem 1fr 1fr">
+          <div class="bg-white text-center font-bold">Horário</div>
+          <div class="bg-white text-center font-bold">Maratona de Alto Desempenho</div>
+          <div class="bg-white text-center font-bold">Sala 1</div>
+
+          <div class="bg-white text-center col-start-1">00h00~09h30</div>
+          <div class="col-start-2 flex justify-center items-center text-center bg-yellow-200 row-[span_20]">
+            Maratona de Alto Desempenho
+          </div>
+          <div class="bg-white text-center col-start-1">09h30~10h00</div>
+          <div class="bg-white text-center col-start-1">10h00~10h30</div>
+          <div class="bg-white text-center col-start-1">10h30~11h00</div>
+          <div class="bg-white text-center col-start-1">11h00~11h30</div>
+          <div class="bg-white text-center col-start-1">11h30~12h00</div>
+          <div class="bg-white text-center col-start-1">12h00~12h30</div>
+          <div class="bg-white text-center col-start-1">12h30~13h00</div>
+          <div class="bg-white text-center col-start-1">13h00~13h30</div>
+          <div class="bg-white text-center col-start-1">13h30~14h00</div>
+          <div class="bg-white text-center col-start-1">14h00~14h30</div>
+          <div class="bg-white text-center col-start-1">14h30~15h00</div>
+          <div class="bg-white text-center col-start-1">15h00~15h30</div>
+          <div class="bg-white text-center col-start-1">15h30~16h00</div>
+          <div class="bg-white text-center col-start-1">16h00~16h30</div>
+          <div class="bg-white text-center col-start-1">16h30~17h00</div>
+          <div class="bg-white text-center col-start-1">17h00~17h30</div>
+          <div class="col-start-3 flex justify-center items-center text-center bg-green-200 row-span-2">
+            Carreiras na Computação com Dev Soutinho
+          </div>
+          <div class="bg-white text-center col-start-1">17h30~18h00</div>
+          <div class="bg-white text-center col-start-1">18h00~18h30</div>
+          <div class="bg-white text-center col-start-1">18h30~19h00</div>
+          <div class="bg-white text-center col-start-1">19h00~00h00</div>
+        </div>
+      </div>
+    </section>
   </body>
 </html>