scriptskit/jenaplan-eclipse-replica
0
1<!DOCTYPE html>2<html lang="de" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Downloads - Jenaplanschule Erfurt</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10</head>11<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">12 <!-- Header (same as index.html) -->13 <header class="bg-gray-800 shadow-lg">14 <div class="container mx-auto px-4 py-6">15 <div class="flex flex-col md:flex-row justify-between items-center">16 <div class="flex items-center mb-4 md:mb-0">17 <img src="http://static.photos/education/200x200/1" alt="Schullogo" class="h-16 mr-4">18 <h1 class="text-2xl font-bold text-primary">Jenaplanschule Erfurt</h1>19 </div>20 <nav aria-label="Hauptnavigation">21 <ul class="flex flex-wrap justify-center gap-6">22 <li><a href="index.html" class="text-white hover:text-primary transition">Startseite</a></li>23 <li><a href="ueber-uns.html" class="text-white hover:text-primary transition">Über uns</a></li>24 <li><a href="schulorganisation.html" class="text-white hover:text-primary transition">Schulorganisation</a></li>25 <li><a href="#" class="text-white hover:text-primary transition font-bold">Downloads</a></li>26 <li><a href="#" class="text-white hover:text-primary transition">Rechtliches</a></li>27 <li><a href="#" class="bg-primary px-4 py-2 rounded-lg hover:bg-opacity-90 transition">Login</a></li>28 </ul>29 </nav>30 </div>31 </div>32 </header>33 34 <!-- Main Content -->35 <main class="flex-grow container mx-auto px-4 py-8">36 <h1 class="text-3xl font-bold text-primary mb-8">Downloads</h1>37 38 <!-- Project Work PDFs -->39 <section class="mb-12">40 <h2 class="text-2xl font-bold text-primary mb-6">Projektarbeiten</h2>41 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">42 <!-- PDF Item -->43 <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition">44 <div class="flex items-start mb-4">45 <div class="bg-primary bg-opacity-20 p-3 rounded-lg mr-4">46 <i data-feather="file-text" class="text-primary"></i>47 </div>48 <div>49 <h3 class="font-semibold">Projekthandbuch 2024</h3>50 <p class="text-sm text-gray-400">PDF • 2.4 MB</p>51 </div>52 </div>53 <a href="#" class="inline-flex items-center text-secondary hover:underline">54 <i data-feather="download" class="mr-2"></i>55 Herunterladen56 </a>57 </div>58 <!-- PDF Item -->59 <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition">60 <div class="flex items-start mb-4">61 <div class="bg-primary bg-opacity-20 p-3 rounded-lg mr-4">62 <i data-feather="file-text" class="text-primary"></i>63 </div>64 <div>65 <h3 class="font-semibold">Themenliste Projekte</h3>66 <p class="text-sm text-gray-400">PDF • 1.1 MB</p>67 </div>68 </div>69 <a href="#" class="inline-flex items-center text-secondary hover:underline">70 <i data-feather="download" class="mr-2"></i>71 Herunterladen72 </a>73 </div>74 <!-- PDF Item -->75 <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-750 transition">76 <div class="flex items-start mb-4">77 <div class="bg-primary bg-opacity-20 p-3 rounded-lg mr-4">78 <i data-feather="file-text" class="text-primary"></i>79 </div>80 <div>81 <h3 class="font-semibold">Bewertungskriterien</h3>82 <p class="text-sm text-gray-400">PDF • 0.8 MB</p>83 </div>84 </div>85 <a href="#" class="inline-flex items-center text-secondary hover:underline">86 <i data-feather="download" class="mr-2"></i>87 Herunterladen88 </a>89 </div>90 </div>91 </section>92 93 <!-- Newsletter Archive -->94 <section>95 <h2 class="text-2xl font-bold text-primary mb-6">Newsletter Archiv</h2>96 <div class="bg-gray-800 rounded-xl overflow-hidden">97 <!-- 2024 -->98 <details class="group" open>99 <summary class="flex justify-between items-center p-6 bg-gray-850 cursor-pointer hover:bg-gray-750 transition">100 <h3 class="text-xl font-semibold">2024</h3>101 <i data-feather="chevron-down" class="transform group-open:rotate-180 transition"></i>102 </summary>103 <div class="p-6 pt-0 grid grid-cols-1 md:grid-cols-2 gap-4">104 <a href="#" class="flex items-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">105 <i data-feather="mail" class="text-primary mr-3"></i>106 <span>Newsletter Juni 2024</span>107 </a>108 <a href="#" class="flex items-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">109 <i data-feather="mail" class="text-primary mr-3"></i>110 <span>Newsletter Mai 2024</span>111 </a>112 <a href="#" class="flex items-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">113 <i data-feather="mail" class="text-primary mr-3"></i>114 <span>Newsletter April 2024</span>115 </a>116 <a href="#" class="flex items-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">117 <i data-feather="mail" class="text-primary mr-3"></i>118 <span>Newsletter März 2024</span>119 </a>120 </div>121 </details>122 <!-- 2023 -->123 <details class="group">124 <summary class="flex justify-between items-center p-6 bg-gray-850 cursor-pointer hover:bg-gray-750 transition">125 <h3 class="text-xl font-semibold">2023</h3>126 <i data-feather="chevron-down" class="transform group-open:rotate-180 transition"></i>127 </summary>128 <div class="p-6 pt-0 grid grid-cols-1 md:grid-cols-2 gap-4">129 <a href="#" class="flex items-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">130 <i data-feather="mail" class="text-primary mr-3"></i>131 <span>Newsletter Dezember 2023</span>132 </a>133 <a href="#" class="flex items-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">134 <i data-feather="mail" class="text-primary mr-3"></i>135 <span>Newsletter November 2023</span>136 </a>137 <a href="#" class="flex items-center p-3 bg-gray-700 rounded-lg hover:bg-gray-600 transition">138 <i data-feather="mail" class="text-primary mr-3"></i>139 <span>Newsletter Oktober 2023</span>140 </a>141 </div>142 </details>143 </div>144 </section>145 </main>146 147 <!-- Footer (same as index.html) -->148 <footer class="bg-gray-800 py-8">149 <div class="container mx-auto px-4">150 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">151 <div>152 <h3 class="text-lg font-semibold mb-4">Kontakt</h3>153 <address class="text-gray-300 not-italic">154 Jenaplanschule Erfurt<br>155 Musterstraße 1<br>156 99085 Erfurt157 </address>158 </div>159 <div>160 <h3 class="text-lg font-semibold mb-4">Rechtliches</h3>161 <ul class="space-y-2">162 <li><a href="#" class="text-gray-300 hover:text-primary transition">Impressum</a></li>163 <li><a href="#" class="text-gray-300 hover:text-primary transition">Datenschutz</a></li>164 </ul>165 </div>166 <div>167 <h3 class="text-lg font-semibold mb-4">Social Media</h3>168 <div class="flex space-x-4">169 <a href="#" class="text-gray-300 hover:text-primary transition"><i data-feather="facebook"></i></a>170 <a href="#" class="text-gray-300 hover:text-primary transition"><i data-feather="instagram"></i></a>171 <a href="#" class="text-gray-300 hover:text-primary transition"><i data-feather="twitter"></i></a>172 </div>173 </div>174 </div>175 <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400">176 <p>© 2024 Jenaplanschule Erfurt. Alle Rechte vorbehalten.</p>177 </div>178 </div>179 </footer>180 181 <script>182 feather.replace();183 </script>184</body>185</html>186