hackontrack/nonnie_02.html at main · kckustomac/hackontrack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>March 2021 Theme Sheet - Holy Name Catholic School</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Georgia:wght@400;700&display=swap');

        body {
            background: #f9f5eb;
            font-family: 'Georgia', serif;
        }

        .container {
            max-width: 680px;
            margin: 40px auto;
            background: white;
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
            border: 8px solid #3b2a1f;
            padding: 48px 40px 40px;
            position: relative;
        }

        .sun {
            width: 138px;
            height: 138px;
            background: radial-gradient(circle at 40% 40%, #ffeb3b 35%, #f59e0b 100%);
            border-radius: 50%;
            position: relative;
            box-shadow: 0 0 40px #fcd34d;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sun::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: repeating-conic-gradient(#f59e0b 0deg 12deg, transparent 12deg 35deg);
            border-radius: 50%;
            opacity: 0.4;
        }

        .handwritten {
            font-family: 'Comic Neue', cursive;
            font-size: 1.45rem;
            font-weight: 700;
            color: #1f2937;
        }

        .circle {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            position: relative;
            border: 5px solid #111827;
            box-shadow: inset 0 0 0 6px #fff;
        }

        .circle::after {
            content: '✕';
            position: absolute;
            color: #991b1b;
            font-size: 56px;
            font-weight: bold;
            transform: rotate(12deg);
            opacity: 0.95;
        }
    </style>
</head>
<body class="py-12">
    <div class="container">

        <!-- Header -->
        <div class="flex items-start justify-between mb-10">
            <!-- School Logo & Name -->
            <div class="flex items-start gap-6">
                <!-- HN Logo -->
                <div class="text-8xl font-black text-[#1e3a8a] leading-none tracking-tighter">HN</div>

                <!-- School Info -->
                <div>
                    <h1 class="text-[22px] font-bold text-[#1e3a8a] leading-tight">Holy Name Catholic School</h1>
                    <p class="text-sm text-gray-700 mt-1">1007 Southwest Blvd.<br>Kansas City, KS 66103</p>
                    <p class="text-sm text-gray-700">v. 913-722-1032</p>
                </div>
            </div>

            <!-- Sun with flowers -->
            <div class="sun">
                <div class="absolute -top-6 -left-6 text-5xl">🌸</div>
                <div class="absolute -top-4 right-2 text-4xl">🌼</div>
                <div class="absolute bottom-3 -left-5 text-4xl">🌺</div>
                <div class="absolute bottom-4 right-6 text-5xl">🌻</div>
                <span class="text-6xl relative z-10 drop-shadow">☀️</span>
            </div>
        </div>

        <!-- Title -->
        <div class="text-center mb-12">
            <h2 class="text-5xl font-bold text-amber-950 tracking-widest">March 2021:</h2>
        </div>

        <!-- Monthly Theme -->
        <div class="mb-10">
            <p class="text-xl font-bold text-[#1e3a8a] border-b border-[#1e3a8a] pb-1 mb-3">Monthly Theme:</p>
            <p class="handwritten text-5xl text-emerald-800 pl-3">Spring</p>
        </div>

        <!-- Weekly Themes -->
        <div>
            <p class="text-xl font-bold text-[#1e3a8a] border-b border-[#1e3a8a] pb-1 mb-6">Weekly Themes:</p>

            <ol class="space-y-7 pl-2 text-[21px]">
                <li class="flex gap-5 items-baseline">
                    <span class="font-bold text-[#1e3a8a] w-6">1.</span>
                    <span>Hearing &amp; Sight — <span class="handwritten text-3xl">Dr. SEUSS</span></span>
                </li>
                <li class="flex gap-5 items-baseline">
                    <span class="font-bold text-[#1e3a8a] w-6">2.</span>
                    <span>Spring Break</span>
                </li>
                <li class="flex gap-5 items-baseline">
                    <span class="font-bold text-[#1e3a8a] w-6">3.</span>
                    <span>Spring Arrives</span>
                </li>
                <li class="flex gap-5 items-baseline">
                    <span class="font-bold text-[#1e3a8a] w-6">4.</span>
                    <span>Baby Animals — New Life — Baby Animal</span>
                </li>
            </ol>
        </div>

        <!-- Bottom sensory circles (all crossed out) -->
        <div class="mt-20 pt-10 border-t border-gray-300 flex justify-center gap-8 flex-wrap">
            <div class="circle bg-blue-400"></div>
            <div class="circle bg-orange-500"></div>
            <div class="circle bg-red-500"></div>
            <div class="circle bg-pink-500"></div>
            <div class="circle bg-green-500"></div>
            <div class="circle bg-purple-500"></div>
        </div>

        <p class="text-center text-[10px] text-gray-400 mt-6 tracking-widest">ORIGINAL SENSORY CIRCLES — ALL MARKED COMPLETE</p>

    </div>
</body>
</html>