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>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 <script>11 tailwind.config = {12 darkMode: 'class',13 theme: {14 extend: {15 colors: {16 primary: '#4f46e5',17 secondary: '#10b981'18 }19 }20 }21 }22 </script>23 <style>24 [x-cloak] { display: none !important; }25 .dark .invert-dark { filter: invert(1); }26 </style>27</head>28<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">29 <!-- Header -->30 <header class="bg-gray-800 shadow-lg">31 <div class="container mx-auto px-4 py-6">32 <div class="flex flex-col md:flex-row justify-between items-center">33 <div class="flex items-center mb-4 md:mb-0">34 <img src="http://static.photos/education/200x200/1" alt="Schullogo" class="h-16 mr-4">35 <h1 class="text-2xl font-bold text-primary">Jenaplanschule Erfurt</h1>36 </div>37 <nav aria-label="Hauptnavigation">38 <ul class="flex flex-wrap justify-center gap-6">39 <li><a href="#" class="text-white hover:text-primary transition">Startseite</a></li>40 <li><a href="#" class="text-white hover:text-primary transition">Über uns</a></li>41 <li><a href="#" class="text-white hover:text-primary transition">Schulorganisation</a></li>42 <li><a href="#" class="text-white hover:text-primary transition">Downloads</a></li>43 <li><a href="#" class="text-white hover:text-primary transition">Rechtliches</a></li>44 <li><a href="#" class="bg-primary px-4 py-2 rounded-lg hover:bg-opacity-90 transition">Login</a></li>45 </ul>46 </nav>47 </div>48 </div>49 </header>50 51 <!-- Main Content -->52 <main class="flex-grow container mx-auto px-4 py-8">53 <!-- News Banner -->54 <section class="mb-12">55 <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition cursor-pointer">56 <h2 class="text-xl font-bold text-primary mb-2">Aktuelle Informationen</h2>57 <p>Die nächsten Schulferien beginnen am 15. Juli 2024. Bitte beachten Sie die geänderten Öffnungszeiten während der Ferien.</p>58 <div class="mt-4 flex items-center text-secondary">59 <i data-feather="calendar" class="mr-2"></i>60 <span>Veröffentlicht am: 10.06.2024</span>61 </div>62 </div>63 </section>64 65 <!-- Widget Grid -->66 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">67 <!-- Termin Widget -->68 <section class="bg-gray-800 rounded-xl p-6">69 <h2 class="text-xl font-bold text-primary mb-4">Nächste Termine</h2>70 <div class="space-y-4">71 <div class="bg-gray-700 p-4 rounded-lg">72 <h3 class="font-semibold">Elternabend</h3>73 <p class="text-sm text-gray-300">20.06.2024, 18:00 Uhr</p>74 </div>75 <div class="bg-gray-700 p-4 rounded-lg">76 <h3 class="font-semibold">Projektwoche</h3>77 <p class="text-sm text-gray-300">01.07.2024 - 05.07.2024</p>78 </div>79 </div>80 <button class="mt-4 bg-primary px-4 py-2 rounded-lg hover:bg-opacity-90 transition">Alle Termine anzeigen</button>81 </section>82 83 <!-- Sdui Info -->84 <section class="bg-gray-800 rounded-xl p-6 border border-secondary">85 <h2 class="text-xl font-bold text-primary mb-4">Schulkommunikation mit Sdui</h2>86 <p>Unsere Schule nutzt Sdui für die digitale Kommunikation zwischen Lehrern, Schülern und Eltern.</p>87 <div class="mt-4 flex items-center">88 <img src="http://static.photos/technology/120x120/1" alt="Sdui Logo" class="h-12 mr-4">89 <a href="#" class="bg-secondary text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition">Mehr erfahren</a>90 </div>91 </section>92 </div>93 94 <!-- Contact Blocks -->95 <section class="mb-12">96 <h2 class="text-2xl font-bold text-primary mb-6">Kontakt</h2>97 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">98 <div class="bg-gray-800 rounded-xl p-6">99 <h3 class="text-xl font-semibold mb-4">Haus 1</h3>100 <div class="space-y-3">101 <div class="flex items-center">102 <i data-feather="map-pin" class="mr-3 text-secondary"></i>103 <a href="#" class="hover:text-primary transition">Musterstraße 1, 99085 Erfurt</a>104 </div>105 <div class="flex items-center">106 <i data-feather="phone" class="mr-3 text-secondary"></i>107 <a href="tel:+493611234567" class="hover:text-primary transition">0361 1234567</a>108 </div>109 <div class="flex items-center">110 <i data-feather="mail" class="mr-3 text-secondary"></i>111 <a href="mailto:haus1@jenaplan-erfurt.de" class="hover:text-primary transition">haus1@jenaplan-erfurt.de</a>112 </div>113 </div>114 </div>115 <div class="bg-gray-800 rounded-xl p-6">116 <h3 class="text-xl font-semibold mb-4">Haus 2</h3>117 <div class="space-y-3">118 <div class="flex items-center">119 <i data-feather="map-pin" class="mr-3 text-secondary"></i>120 <a href="#" class="hover:text-primary transition">Beispielweg 2, 99085 Erfurt</a>121 </div>122 <div class="flex items-center">123 <i data-feather="phone" class="mr-3 text-secondary"></i>124 <a href="tel:+493618765432" class="hover:text-primary transition">0361 8765432</a>125 </div>126 <div class="flex items-center">127 <i data-feather="mail" class="mr-3 text-secondary"></i>128 <a href="mailto:haus2@jenaplan-erfurt.de" class="hover:text-primary transition">haus2@jenaplan-erfurt.de</a>129 </div>130 </div>131 </div>132 </div>133 </section>134 </main>135 136 <!-- Footer -->137 <footer class="bg-gray-800 py-8">138 <div class="container mx-auto px-4">139 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">140 <div>141 <h3 class="text-lg font-semibold mb-4">Kontakt</h3>142 <address class="text-gray-300 not-italic">143 Jenaplanschule Erfurt<br>144 Musterstraße 1<br>145 99085 Erfurt146 </address>147 </div>148 <div>149 <h3 class="text-lg font-semibold mb-4">Rechtliches</h3>150 <ul class="space-y-2">151 <li><a href="#" class="text-gray-300 hover:text-primary transition">Impressum</a></li>152 <li><a href="#" class="text-gray-300 hover:text-primary transition">Datenschutz</a></li>153 </ul>154 </div>155 <div>156 <h3 class="text-lg font-semibold mb-4">Social Media</h3>157 <div class="flex space-x-4">158 <a href="#" class="text-gray-300 hover:text-primary transition"><i data-feather="facebook"></i></a>159 <a href="#" class="text-gray-300 hover:text-primary transition"><i data-feather="instagram"></i></a>160 <a href="#" class="text-gray-300 hover:text-primary transition"><i data-feather="twitter"></i></a>161 </div>162 </div>163 </div>164 <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400">165 <p>© 2024 Jenaplanschule Erfurt. Alle Rechte vorbehalten.</p>166 </div>167 </div>168 </footer>169 170 <!-- Cookie Consent -->171 <div class="fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 p-4">172 <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">173 <p class="mb-4 md:mb-0">Wir verwenden Cookies, um die Nutzererfahrung zu verbessern. <a href="#" class="text-primary hover:underline">Mehr erfahren</a></p>174 <div class="flex space-x-4">175 <button class="bg-gray-700 px-4 py-2 rounded-lg hover:bg-gray-600 transition">Nur notwendige</button>176 <button class="bg-primary px-4 py-2 rounded-lg hover:bg-opacity-90 transition">Alle akzeptieren</button>177 </div>178 </div>179 </div>180 181 <script>182 feather.replace();183 </script>184</body>185</html>186