Skip to content

Commit 86fa1c4

Browse files
James-BonaguroJames-Bonaguro
authored
Add initial HTML structure for Digital Peace System
This HTML file outlines the structure and content for 'The Digital Peace System', including styles, sections, and a footer.
1 parent 4e36a78 commit 86fa1c4

File tree

1 file changed

+204
-0
lines changed

1 file changed

+204
-0
lines changed

‎digital.peace‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>The Digital Peace System</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">
12+
<style>
13+
:root {
14+
--paper-bg: #F9F7F2;
15+
--ink-black: #1a1a1a;
16+
--alert-red: #C0392B;
17+
--calm-green: #27AE60;
18+
--warm-gold: #D4AC0D;
19+
}
20+
body {
21+
background-color: var(--paper-bg);
22+
color: var(--ink-black);
23+
font-family: 'Source Sans Pro', sans-serif;
24+
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d1d1d1' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
25+
}
26+
h1, h2, h3, h4 {
27+
font-family: 'Playfair Display', serif;
28+
}
29+
.paper-shadow {
30+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
31+
border: 1px solid rgba(0,0,0,0.05);
32+
}
33+
.grain-overlay {
34+
position: fixed;
35+
top: 0;
36+
left: 0;
37+
width: 100%;
38+
height: 100%;
39+
pointer-events: none;
40+
z-index: 50;
41+
opacity: 0.4;
42+
background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png");
43+
}
44+
</style>
45+
</head>
46+
<body class="antialiased leading-relaxed">
47+
48+
<div class="grain-overlay"></div>
49+
50+
<!-- MAIN CONTAINER -->
51+
<div class="max-w-4xl mx-auto px-6 py-12 md:py-20 relative z-10">
52+
53+
<!-- HEADER -->
54+
<header class="text-center mb-16">
55+
<p class="uppercase tracking-[0.2em] text-xs font-semibold text-gray-500 mb-4">The Parenting Framework</p>
56+
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-gray-900 tracking-tight">The Digital Peace System</h1>
57+
<p class="text-xl md:text-2xl text-gray-600 max-w-2xl mx-auto font-light italic">
58+
"You aren't a bad parent.<br>You're fighting a billion-dollar algorithm without a system."
59+
</p>
60+
</header>
61+
62+
<!-- SECTION 1: THE PROBLEM (PINTEREST HOOK) -->
63+
<section class="bg-white p-8 md:p-12 rounded-lg paper-shadow mb-12">
64+
<h2 class="text-3xl font-bold text-center mb-10">Why "Just Try Harder" Fails</h2>
65+
66+
<div class="grid md:grid-cols-2 gap-8">
67+
<!-- The Old Way -->
68+
<div class="bg-red-50 p-8 rounded-lg border-l-4 border-red-800 relative opacity-90">
69+
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-red-800 text-white px-4 py-1 text-sm font-bold uppercase tracking-wider rounded-full shadow-md">The Old Way</div>
70+
<h3 class="text-2xl font-bold text-red-900 mb-4 text-center mt-2">Willpower</h3>
71+
<ul class="space-y-4 text-red-900/80">
72+
<li class="flex items-start"><i class="fas fa-times mt-1 mr-3"></i> <span><strong>Parent:</strong> "Turn it off because I said so."</span></li>
73+
<li class="flex items-start"><i class="fas fa-times mt-1 mr-3"></i> <span><strong>Child:</strong> "Why? That's not fair!"</span></li>
74+
<li class="flex items-start"><i class="fas fa-times mt-1 mr-3"></i> <span><strong>Result:</strong> Decision fatigue & screaming.</span></li>
75+
</ul>
76+
</div>
77+
78+
<!-- The New Way -->
79+
<div class="bg-green-50 p-8 rounded-lg border-l-4 border-green-800 relative">
80+
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-green-800 text-white px-4 py-1 text-sm font-bold uppercase tracking-wider rounded-full shadow-md">The System</div>
81+
<h3 class="text-2xl font-bold text-green-900 mb-4 text-center mt-2">Rhythm</h3>
82+
<ul class="space-y-4 text-green-900/80">
83+
<li class="flex items-start"><i class="fas fa-check mt-1 mr-3"></i> <span><strong>Parent:</strong> "The wifi sleeps at 7 PM."</span></li>
84+
<li class="flex items-start"><i class="fas fa-check mt-1 mr-3"></i> <span><strong>Child:</strong> Accepts the environment.</span></li>
85+
<li class="flex items-start"><i class="fas fa-check mt-1 mr-3"></i> <span><strong>Result:</strong> Peace, Predictability & Sleep.</span></li>
86+
</ul>
87+
</div>
88+
</div>
89+
90+
<p class="text-center mt-8 text-gray-500 text-sm font-semibold uppercase tracking-wide">Goal: Move from Policing (You vs. Them) to Predictability (Them vs. Clock)</p>
91+
</section>
92+
93+
<!-- SECTION 2: THE SCIENCE -->
94+
<section class="mb-16">
95+
<div class="flex flex-col md:flex-row items-center gap-6 mb-8">
96+
<div class="h-px bg-gray-300 flex-1"></div>
97+
<h2 class="text-2xl font-serif font-bold text-gray-400 uppercase tracking-widest text-center">The Science</h2>
98+
<div class="h-px bg-gray-300 flex-1"></div>
99+
</div>
100+
101+
<div class="grid md:grid-cols-2 gap-6">
102+
<div class="bg-white p-8 rounded-lg paper-shadow">
103+
<div class="text-amber-600 text-4xl mb-4"><i class="fas fa-layer-group"></i></div>
104+
<h3 class="text-xl font-bold mb-3">Crowding Out</h3>
105+
<p class="text-gray-600 leading-relaxed">
106+
We don't "ban" screens. We fill the jar with "Big Rocks" first: Sleep, Connection, and Movement. Screen time fits harmlessly in the spaces left over.
107+
</p>
108+
</div>
109+
<div class="bg-white p-8 rounded-lg paper-shadow">
110+
<div class="text-blue-600 text-4xl mb-4"><i class="fas fa-clock"></i></div>
111+
<h3 class="text-xl font-bold mb-3">Predictability</h3>
112+
<p class="text-gray-600 leading-relaxed">
113+
Anxiety stems from the unknown. When screen time is rhythmic (same time, same place), the addiction loop breaks because the child knows exactly when their "fix" is coming.
114+
</p>
115+
</div>
116+
</div>
117+
</section>
118+
119+
<!-- SECTION 3: THE FRAMEWORK (TRAFFIC LIGHTS) -->
120+
<section class="bg-[#1a1a1a] text-gray-200 rounded-2xl p-8 md:p-12 paper-shadow mb-16 relative overflow-hidden">
121+
<div class="text-center mb-12 relative z-10">
122+
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">The Family Rhythm Framework</h2>
123+
<p class="text-gray-400">The core of the system is the "Traffic Light" schedule.</p>
124+
<p class="text-xs text-gray-500 mt-2 uppercase tracking-wide">*This is a framework, not a law. Customize the hours to fit your family's needs.*</p>
125+
</div>
126+
127+
<div class="space-y-8 relative z-10">
128+
<!-- RED LIGHT -->
129+
<div class="flex flex-col md:flex-row gap-6 items-center bg-gray-800/50 p-6 rounded-xl border border-gray-700">
130+
<div class="w-16 h-16 rounded-full bg-red-600 flex items-center justify-center shadow-[0_0_20px_rgba(220,38,38,0.4)] flex-shrink-0">
131+
<i class="fas fa-ban text-2xl text-white"></i>
132+
</div>
133+
<div class="text-center md:text-left">
134+
<h3 class="text-xl font-bold text-white mb-1">RED LIGHT: The "No Fly" Zones</h3>
135+
<p class="text-sm text-red-300 uppercase tracking-wide font-bold mb-2">Bedrooms • Dinner Table • 1 Hour Before Bed</p>
136+
<p class="text-gray-400 text-sm">Non-negotiable. Screens in bedrooms are the #1 cause of sleep deprivation. We protect sleep sovereignty at all costs.</p>
137+
</div>
138+
</div>
139+
140+
<!-- YELLOW LIGHT -->
141+
<div class="flex flex-col md:flex-row gap-6 items-center bg-gray-800/50 p-6 rounded-xl border border-gray-700">
142+
<div class="w-16 h-16 rounded-full bg-yellow-500 flex items-center justify-center shadow-[0_0_20px_rgba(234,179,8,0.4)] flex-shrink-0">
143+
<i class="fas fa-exclamation text-2xl text-white"></i>
144+
</div>
145+
<div class="text-center md:text-left">
146+
<h3 class="text-xl font-bold text-white mb-1">YELLOW LIGHT: The Conditional Zones</h3>
147+
<p class="text-sm text-yellow-300 uppercase tracking-wide font-bold mb-2">Living Room • Kitchen (After "The Big 3")</p>
148+
<p class="text-gray-400 text-sm">Screen time is a <strong>Result</strong>, not a Default. It is available only after: 1. Chores, 2. Homework, 3. Outside Play.</p>
149+
</div>
150+
</div>
151+
152+
<!-- GREEN LIGHT -->
153+
<div class="flex flex-col md:flex-row gap-6 items-center bg-gray-800/50 p-6 rounded-xl border border-gray-700">
154+
<div class="w-16 h-16 rounded-full bg-green-600 flex items-center justify-center shadow-[0_0_20px_rgba(22,163,74,0.4)] flex-shrink-0">
155+
<i class="fas fa-play text-2xl text-white"></i>
156+
</div>
157+
<div class="text-center md:text-left">
158+
<h3 class="text-xl font-bold text-white mb-1">GREEN LIGHT: The Free Zones</h3>
159+
<p class="text-sm text-green-300 uppercase tracking-wide font-bold mb-2">After School • Weekends • Movie Nights</p>
160+
<p class="text-gray-400 text-sm">Let them play! Once responsibilities are met, tech is a healthy tool for fun, creativity, and connection. You decide the duration that works for your home.</p>
161+
</div>
162+
</div>
163+
</div>
164+
</section>
165+
166+
<!-- SECTION 4: THE OFFER -->
167+
<section class="text-center py-10 border-t border-b border-gray-200">
168+
<h2 class="text-3xl font-bold mb-6">Install the System in 20 Minutes</h2>
169+
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
170+
Stop improvising. Get the complete toolkit to secure your WiFi, lock the phones, and set the rhythm.
171+
</p>
172+
173+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl mx-auto text-left">
174+
<div class="bg-white p-6 rounded-lg paper-shadow">
175+
<div class="text-gray-300 text-5xl font-serif absolute -mt-4 -ml-2 opacity-20">01</div>
176+
<h4 class="font-bold text-lg mb-2 relative z-10">The Audio Overview</h4>
177+
<p class="text-sm text-gray-500">A "Deep Dive" conversation you can listen to while driving that explains the psychology to your partner.</p>
178+
</div>
179+
<div class="bg-white p-6 rounded-lg paper-shadow">
180+
<div class="text-gray-300 text-5xl font-serif absolute -mt-4 -ml-2 opacity-20">02</div>
181+
<h4 class="font-bold text-lg mb-2 relative z-10">The Fridge Sheet</h4>
182+
<p class="text-sm text-gray-500">The printable "Family Rhythm" framework. Put it on the fridge so the <em>Paper</em> is the boss, not you.</p>
183+
</div>
184+
<div class="bg-white p-6 rounded-lg paper-shadow">
185+
<div class="text-gray-300 text-5xl font-serif absolute -mt-4 -ml-2 opacity-20">03</div>
186+
<h4 class="font-bold text-lg mb-2 relative z-10">The Lockbox Guide</h4>
187+
<p class="text-sm text-gray-500">Step-by-step tech setup to lock down phones, tablets, and block adult content at the router level.</p>
188+
</div>
189+
</div>
190+
191+
<button class="mt-12 bg-gray-900 text-white px-8 py-4 rounded-full font-bold tracking-wide hover:bg-gray-800 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
192+
Get The Digital Peace Bundle
193+
</button>
194+
<p class="mt-6 text-xs text-gray-500 italic">(Pro-Tip: Yes, you can turn the Wi-Fi back on for yourself after they sleep. We won't tell. 🍷)</p>
195+
</section>
196+
197+
<footer class="text-center mt-12 text-gray-400 text-sm">
198+
<p>&copy; 2025 Digital Peace System.</p>
199+
</footer>
200+
201+
</div>
202+
203+
</body>
204+
</html>

0 commit comments

Comments
 (0)