110 lines
3.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kampüs Cadıları | Feminist Bi' Dünya</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=Permanent+Marker&display=swap"
rel="stylesheet"
/>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
lilac: '#EADDFA', // Main Light BG (Poster style)
lilacDark: '#D0B5EA', // Secondary BG
purple: '#6B2C91', // Primary Brand Purple
deep: '#2D0F41', // Text/Borders (Almost Black)
accent: '#9D4EDD', // Vibrant Accent
red: '#ED1C24', // Action Red
surface: '#FFFCF9', // Paper White
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
display: ['Oswald', 'sans-serif'],
marker: ['Permanent Marker', 'cursive'],
},
backgroundImage: {
'halftone': "radial-gradient(circle, #2D0F41 1px, transparent 1px)",
'paper': "url('https://www.transparenttextures.com/patterns/cream-paper.png')",
},
animation: {
'blob': 'blob 7s infinite',
'float': 'float 6s ease-in-out infinite',
'marquee': 'marquee 25s linear infinite',
},
keyframes: {
blob: {
'0%': { transform: 'translate(0px, 0px) scale(1)' },
'33%': { transform: 'translate(30px, -50px) scale(1.1)' },
'66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
'100%': { transform: 'translate(0px, 0px) scale(1)' },
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
},
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-50%)' },
}
},
},
},
};
</script>
<style>
body {
font-family: 'Inter', sans-serif;
color: #2D0F41;
background-color: #EADDFA;
overflow-x: hidden; /* Moved here to allow sticky position to work in children */
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Oswald', sans-serif;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Noise Overlay */
.noise-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
opacity: 0.05;
background: url('https://www.transparenttextures.com/patterns/noise-lines.png');
}
</style>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@^19.2.3",
"react-dom/": "https://esm.sh/react-dom@^19.2.3/",
"lucide-react": "https://esm.sh/lucide-react@^0.562.0",
"react/": "https://esm.sh/react@^19.2.3/"
}
}
</script>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div id="root"></div>
<div class="noise-overlay"></div>
<script type="module" src="/index.tsx"></script>
</body>
</html>