<!doctype html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Etkinlik Arşivi Girişi</title>

<style>
* {
  box-sizing: border-box;
}
  
        table {
          border-collapse: collapse;
          width: 90%;
          border: 1px solid #ddd;
        }
        input[type=text],[type=date],[type=time], select, textarea {
          width: 100%;
          padding: 12px;
          border: 1px solid #ccc;
          border-radius: 4px;
          resize: vertical;
        }        
        th, td {
          text-align: left;
          padding: 8px;
        }
        
        tr:nth-child(even){background-color: #f2f2f2}
        
input[type=text],[type=date], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  margin-top:5px;

}

input[type=submit]:hover {
  background-color: #45a049;
}

.ana {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.satir:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 5px;
  }
}
</style>
</head>


<body>
    <?php include 'menu.php';?>
    <?php include 'baglanti.php';?>
<h1 align="center">Etkinlik Arşivi Girişi</h1>
<p>Girmiş olduğunuz etkinlik için paylaştığınız detaylar ilerde çok daha kolay yapmanızı sağlayacaktır.</p>
<div class="ana">





    <form style="align-content:center" method="POST" action="etkinlikarsivkayit.php">

    Etkinlik Adı:
        <div class="satir">
            <input type="text" name="etkinlikadi">
        </div>
        
    Etkinlik Açıklaması:
        <div class="satir">
            <textarea id="aciklama" name="aciklama" rows="4" cols="50"></textarea><br>
        </div>
        
    Etkinliğin Örnek Linki:
        <div class="satir">
            <input type="text" name="link" ><br>
        </div>
        
    Yaş Grubu:
        <div class="satir">
        <select  id="ekleyen" name="yas">
          <option ></option>
          <option value="2-6 Yaş">2-6 Yaş</option>
          <option value="2-4 Yaş">2-4 Yaş</option>
          <option value="3-4 Yaş">3-4 Yaş</option>
          <option value="4-6 Yaş">4-6 Yaş</option>
          <option value="6+ Yaş">6+ Yaş</option>
        </select>
        </div>        

        
    Etkinlik Kategorisi:
        <div class="satir">
            
        <select onchange="belirligunler()" id="kategori" name="kategori">
          <option ></option>
          <option value="Günlük Yaşam Becerileri">Günlük Yaşam Becerileri</option>
          <option value="Montessori">Montessori</option>
          <option value="Sanat Etkinliği">Sanat Etkinliği</option>
          <option value="Şarkı">Şarkı</option>
          <option value="Parmak Oyunu">Parmak Oyunu</option>
          <option value="Eğlenceli Aktiviteler">Eğlenceli Aktiviteler</option>
          <option value="Kendin Yap Etkinlikleri">Kendin Yap Etkinlikleri</option>
          <option value="Matematik Etkinlikleri">Matematik Etkinlikleri</option>
          <option value="Deney Etkinlikleri">Deney Etkinlikleri</option>
          <option value="Belirli Gün ve Haftalar">Belirli Gün ve Haftalar</option>
        </select>
        
        </div>
        

    
    
        <div style="display:none;" id="belirligunler" class="satir">
         Etkinlik Alt Kategorisi:   
        <select  name="belirligunler">
          <option ></option>
          <option value="23 Nisan">23 Nisan</option>
          <option value="19 Mayıs">19 Mayıs</option>
          <option value="Anneler Günü">Anneler Günü</option>
        </select>
        
        </div>        


   Ekleyen:
        <div class="satir">
            
        <select  id="ekleyen" name="ekleyen">
          <option ></option>
          <option value="Ayşe Betül Tüysüzoğlu">Ayşe Betül Tüysüzoğlu</option>
          <option value="Seher Pehlivan">Seher Pehlivan</option>
          <option value="Gamze Nur Sarı">Gamze Nur Sarı</option>
          <option value="Muhammet Selman Ayas">Muhammet Selman Ayas</option>
          <option value="Tuğba Gemici">Tuğba Gemici</option>
          <option value="Zeynep Yangöz">Zeynep Yangöz</option>
          <option value="Burcu Kuvvet">Burcu Kuvvet</option>
          <option value="Beril Tandoğan">Beril Tandoğan</option>
        </select>
        
        </div>
        
   Sosyal Medya:
        <div class="satir">
            
        <select  id="sosyalmedya" name="sosyalmedya">
          <option value="Hiçbiri">Hiçbiri</option>
          <option value="İnstagram">İnstagram</option>
          <option value="Youtube">Youtube</option>
          <option value="İnstagram ve Youtube">İnstagram ve Youtube</option>
        </select>
        
        </div>
        
        
        <div class="satir">
            <input type="submit" value="Kaydet">
        </div>
    </form>
    
    
</div>

 </table>
    <p align="center" style=" padding-top:150px;">Güç İçinde!</p>
</div>

<script>
function belirligunler() {
      
      var x = document.getElementById("belirligunler").value;
      
    if (x ==="Belirli Gün ve Haftalar") {
      document.getElementById("belirligunler").style.display = "block";
    }  else {    
        document.getElementById("belirligunler").style.display = "none";
    }
    
}
</script>

</body>
</html>
