Version2
This commit is contained in:
Erik Thiele
10
GirlsDayPython/templates/about.html
Normal file
10
GirlsDayPython/templates/about.html
Normal file
@@ -0,0 +1,10 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h2>{{ title }}.</h2>
|
||||
<h3>{{ message }}</h3>
|
||||
|
||||
<p>Use this area to provide additional information.</p>
|
||||
|
||||
{% endblock %}
|
||||
16
GirlsDayPython/templates/admin.html
Normal file
16
GirlsDayPython/templates/admin.html
Normal file
@@ -0,0 +1,16 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div style="text-align:center; margin-top:50px; color:#00ffcc;">
|
||||
<h1>Admin</h1>
|
||||
|
||||
<form method="POST">
|
||||
<input type="text" name="code" value="{{ code }}" required
|
||||
style="padding:10px; font-size:20px; text-align:center;">
|
||||
<br><br>
|
||||
<button type="submit">Speichern</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
20
GirlsDayPython/templates/contact.html
Normal file
20
GirlsDayPython/templates/contact.html
Normal file
@@ -0,0 +1,20 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h2>{{ title }}.</h2>
|
||||
<h3>{{ message }}</h3>
|
||||
|
||||
<address>
|
||||
One Microsoft Way<br />
|
||||
Redmond, WA 98052-6399<br />
|
||||
<abbr title="Phone">P:</abbr>
|
||||
425.555.0100
|
||||
</address>
|
||||
|
||||
<address>
|
||||
<strong>Support:</strong> <a href="mailto:Support@example.com">Support@example.com</a><br />
|
||||
<strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
|
||||
</address>
|
||||
|
||||
{% endblock %}
|
||||
165
GirlsDayPython/templates/index.html
Normal file
165
GirlsDayPython/templates/index.html
Normal file
@@ -0,0 +1,165 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div id="main" style="text-align:center; margin-top:50px; color:#00ffcc; position:relative; z-index:2;">
|
||||
<h1>Girls Day Quiz</h1>
|
||||
<p>Gib den Code ein</p>
|
||||
|
||||
{% if message %}
|
||||
<p style="color: {{ color }}; font-weight:bold;">{{ message }}</p>
|
||||
{% endif %}
|
||||
|
||||
{% if not success %}
|
||||
<form method="POST" id="codeForm">
|
||||
<div id="inputs"></div>
|
||||
<input type="hidden" name="code" id="hiddenCode">
|
||||
<button type="submit">Absenden</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<div id="lock" style="font-size:90px; margin-top:30px; transition: transform 1.8s ease, opacity 1.2s ease;">
|
||||
🔒
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="flash-overlay"></div>
|
||||
|
||||
<style>
|
||||
#inputs input {
|
||||
width: 44px;
|
||||
height: 56px;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
background: #020617;
|
||||
color: #00ffcc;
|
||||
border: 2px solid #00ffcc;
|
||||
border-radius: 8px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#inputs input:focus {
|
||||
box-shadow: 0 0 12px #00ffcc;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
background-color: #00ffcc;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: #020617;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #00ccaa;
|
||||
}
|
||||
|
||||
#flash-overlay {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body.animating {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const codeLength = {{ code_length }};
|
||||
const container = document.getElementById("inputs");
|
||||
const hiddenInput = document.getElementById("hiddenCode");
|
||||
|
||||
// Eingabefelder erzeugen
|
||||
if (container) {
|
||||
for (let i = 0; i < codeLength; i++) {
|
||||
let input = document.createElement("input");
|
||||
input.type = "text";
|
||||
input.maxLength = 1;
|
||||
input.autocomplete = "off";
|
||||
input.inputMode = "numeric";
|
||||
input.pattern = "[0-9]*";
|
||||
|
||||
input.addEventListener("input", () => {
|
||||
input.value = input.value.replace(/[^0-9]/g, "");
|
||||
updateHidden();
|
||||
|
||||
if (input.value && input.nextElementSibling) {
|
||||
input.nextElementSibling.focus();
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Backspace" && !input.value && input.previousElementSibling) {
|
||||
input.previousElementSibling.focus();
|
||||
}
|
||||
});
|
||||
|
||||
container.appendChild(input);
|
||||
}
|
||||
}
|
||||
|
||||
// Code zusammensetzen
|
||||
function updateHidden() {
|
||||
let code = "";
|
||||
container.querySelectorAll("input").forEach(i => code += i.value);
|
||||
hiddenInput.value = code;
|
||||
}
|
||||
|
||||
// Animation bei Erfolg
|
||||
const success = "{{ success }}";
|
||||
|
||||
if (success === "True") {
|
||||
const lock = document.getElementById("lock");
|
||||
const overlay = document.getElementById("flash-overlay");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
document.body.classList.add("animating");
|
||||
|
||||
// 1. Kurz warten
|
||||
setTimeout(() => {
|
||||
// 2. Schloss geht auf
|
||||
lock.textContent = "🔓";
|
||||
lock.style.transform = "scale(1.08)";
|
||||
}, 500);
|
||||
|
||||
// 3. Langsamer Zoom Richtung Schloss
|
||||
setTimeout(() => {
|
||||
main.style.transition = "transform 2.8s ease-in-out, opacity 1.4s ease";
|
||||
main.style.transformOrigin = "center 65%";
|
||||
main.style.transform = "scale(2.4)";
|
||||
}, 1700);
|
||||
|
||||
// 4. Schloss verschwindet, während der Weiß-Effekt beginnt
|
||||
setTimeout(() => {
|
||||
lock.style.opacity = "0";
|
||||
}, 3300);
|
||||
|
||||
// 5. Weißer Kreis wächst von der Mitte bis zum Rand
|
||||
setTimeout(() => {
|
||||
overlay.style.opacity = "1";
|
||||
overlay.style.transition = "width 2.6s ease-out, height 2.6s ease-out, opacity 0.4s ease";
|
||||
overlay.style.width = "250vmax";
|
||||
overlay.style.height = "250vmax";
|
||||
}, 3500);
|
||||
|
||||
// 6. Weiterleitung
|
||||
setTimeout(() => {
|
||||
window.location.href = "/success";
|
||||
}, 6200);
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
47
GirlsDayPython/templates/layout.html
Normal file
47
GirlsDayPython/templates/layout.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }} - My Flask Application</title>
|
||||
<link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/content/site.css" />
|
||||
<script src="/static/scripts/modernizr-2.6.2.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a href="/" class="navbar-brand">Application name</a>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="{{ url_for('home') }}">Home</a></li>
|
||||
<li><a href="{{ url_for('about') }}">About</a></li>
|
||||
<li><a href="{{ url_for('contact') }}">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container body-content">
|
||||
{% block content %}{% endblock %}
|
||||
<hr />
|
||||
<footer>
|
||||
<p>© {{ year }} - My Flask Application</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="/static/scripts/jquery-1.10.2.js"></script>
|
||||
<script src="/static/scripts/bootstrap.js"></script>
|
||||
<script src="/static/scripts/respond.js"></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
176
GirlsDayPython/templates/success.html
Normal file
176
GirlsDayPython/templates/success.html
Normal file
@@ -0,0 +1,176 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.victory-page {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(120, 0, 40, 0.85) 0%, rgba(10, 20, 50, 0.95) 70%, rgba(5, 15, 35, 1) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.victory-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.victory-bg::before,
|
||||
.victory-bg::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* feine Linien */
|
||||
.victory-bg::before {
|
||||
background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(135deg, rgba(255,120,120,0.18) 1px, transparent 1px), linear-gradient(45deg, rgba(255,120,120,0.08) 1px, transparent 1px);
|
||||
background-size: 180px 180px, 180px 180px, 320px 320px, 280px 280px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* rote Flächen / Tech-Glas */
|
||||
.victory-bg::after {
|
||||
background: linear-gradient(125deg, transparent 0%, transparent 60%, rgba(255,80,80,0.18) 60%, rgba(255,80,80,0.18) 68%, transparent 68%), linear-gradient(140deg, transparent 0%, transparent 72%, rgba(255,160,160,0.12) 72%, rgba(255,160,160,0.12) 76%, transparent 76%), linear-gradient(180deg, rgba(255,0,70,0.10) 0%, transparent 35%), linear-gradient(90deg, transparent 0%, transparent 15%, rgba(255,0,70,0.08) 15%, rgba(255,0,70,0.08) 16%, transparent 16%, transparent 70%, rgba(255,180,180,0.08) 70%, rgba(255,180,180,0.08) 71%, transparent 71%);
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: 50px 40px;
|
||||
width: min(900px, 90vw);
|
||||
border-radius: 24px;
|
||||
background: rgba(10, 20, 40, 0.35);
|
||||
backdrop-filter: blur(6px);
|
||||
box-shadow: 0 0 40px rgba(0,0,0,0.35);
|
||||
animation: fadeInUp 1.1s ease;
|
||||
}
|
||||
|
||||
.cancom-logo {
|
||||
font-size: 88px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1px;
|
||||
color: #e30613;
|
||||
margin-bottom: 28px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 50px;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
font-size: 30px;
|
||||
line-height: 1.5;
|
||||
color: #f4f6fb;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.mission-badge {
|
||||
display: inline-block;
|
||||
padding: 16px 28px;
|
||||
border-radius: 14px;
|
||||
background: #e30613;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 20px rgba(227, 6, 19, 0.35);
|
||||
}
|
||||
|
||||
.corner-line {
|
||||
position: absolute;
|
||||
border: 1px solid rgba(255, 180, 180, 0.25);
|
||||
box-shadow: 0 0 18px rgba(255, 120, 120, 0.08);
|
||||
}
|
||||
|
||||
.corner-line.one {
|
||||
top: 8%;
|
||||
left: 18%;
|
||||
width: 280px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.corner-line.two {
|
||||
top: 16%;
|
||||
right: 10%;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
transform: skewX(-18deg);
|
||||
}
|
||||
|
||||
.corner-line.three {
|
||||
bottom: 12%;
|
||||
right: 7%;
|
||||
width: 320px;
|
||||
height: 160px;
|
||||
transform: skewX(-25deg);
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.98);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cancom-logo {
|
||||
font-size: 56px;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.mission-badge {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="victory-page">
|
||||
<div class="victory-bg"></div>
|
||||
|
||||
<div class="corner-line one"></div>
|
||||
<div class="corner-line two"></div>
|
||||
<div class="corner-line three"></div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="cancom-logo">CANCOM</div>
|
||||
|
||||
<div class="success-title">Herzlichen Glückwunsch!</div>
|
||||
|
||||
<div class="success-text">
|
||||
Ihr habt die <strong>CANCOM</strong><br>
|
||||
vor dem Hackerangriff gerettet.
|
||||
</div>
|
||||
|
||||
<div class="mission-badge">Mission erfüllt</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user