1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 4-5
4 5 <script async src="https://www.googletagmanager.com/gtag/js?id=
5G-MGFF0K8FF5
vendor: 16 bytes, lines 5-6
5"></script> 6
6<script> 7
vendor: 146 bytes, lines 7-11
7window.dataLayer = window.dataLayer || []; 8 function gtag(){dataLayer.push(arguments);} 9 gtag('js', new Date()); 10 11 gtag('config', '
11G-MGFF0K8FF5
vendor: 8 bytes, lines 11-12
11'); 12
12</script>
12 13 <meta charset="UTF-8"> 14<!-- This site is hosted on Netlify. Anyone can build and deploy a site 15 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=aa4dac71-1352-43aa-a088-d754f02ff38f 16 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 17 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 18 <title>Eco-Innovators Journey</title> 19
19<script src="https://cdn.tailwindcss.com"></script>
19 20 <style> 21 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap'); 22 23 body { 24 font-family: 'Inter', sans-serif; 25 background: #F0F9FF; /* A lighter, more modern background */ 26 color: #334155; /* slate-700 */ 27 overscroll-behavior-y: contain; 28 } 29 30 .app-container { 31 min-height: 100vh; 32 display: flex; 33 flex-direction: column; 34 align-items: center; 35 justify-content: space-between; /* Pushes footer down */ 36 padding: 1rem; 37 } 38 39 .main-content { 40 width: 100%; 41 max-width: 48rem; /* max-w-3xl */ 42 display: flex; 43 flex-direction: column; 44 align-items: center; 45 } 46 47 .content-card { 48 background-color: rgba(255, 255, 255, 0.95); 49 backdrop-filter: blur(16px); 50 -webkit-backdrop-filter: blur(16px); 51 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 52 border: 1px solid rgba(255, 255, 255, 0.6); 53 border-radius: 1rem; /* rounded-2xl */ 54 padding: 2rem; /* p-8 */ 55 width: 100%; 56 margin: 1.5rem 0; 57 animation: fadeIn 0.5s ease-in-out; 58 } 59 60 @keyframes fadeIn { 61 from { opacity: 0; transform: translateY(10px); } 62 to { opacity: 1; transform: translateY(0); } 63 } 64 65 .header-font { 66 font-family: 'Playfair Display', serif; 67 } 68 69 .button-base { 70 display: inline-flex; 71 align-items: center; 72 justify-content: center; 73 gap: 0.5rem; 74 font-weight: 600; 75 padding: 0.75rem 1.5rem; 76 border-radius: 0.5rem; 77 box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); 78 transition: all 0.2s ease-in-out; 79 cursor: pointer; 80 border: 1px solid transparent; 81 } 82 83 .button-primary { 84 background-color: #0F766E; /* teal-700 */ 85 color: white; 86 } 87 88 .button-primary:hover:not(:disabled) { 89 background-color: #0D6961; /* teal-800 */ 90 box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); 91 } 92 93 .button-secondary { 94 background-color: #FBBF24; /* yellow-400 */ 95 color: #78350F; /* amber-800 */ 96 } 97 98 .button-secondary:hover:not(:disabled) { 99 background-color: #F59E0B; /* yellow-500 */ 100 box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); 101 } 102 103 .button-tertiary { 104 background-color: #94A3B8; /* slate-400 */ 105 color: white; 106 } 107 108 .button-tertiary:hover:not(:disabled) { 109 background-color: #64748B; /* slate-500 */ 110 } 111 112 .button-option { 113 width: 100%; 114 text-align: left; 115 background-color: white; 116 color: #115E59; /* teal-800 */ 117 border-color: #CCFBF1; /* teal-100 */ 118 justify-content: flex-start; 119 } 120 121 .button-option:hover:not(:disabled) { 122 background-color: #F0FDFA; /* teal-50 */ 123 border-color: #5EEAD4; /* teal-200 */ 124 transform: translateY(-2px); 125 } 126 127 .button-base:disabled { 128 opacity: 0.6; 129 cursor: not-allowed; 130 } 131 132 .loading-spinner-container { 133 display: flex; 134 flex-direction: column; 135 justify-content: center; 136 align-items: center; 137 margin: 2rem 0; 138 gap: 1rem; 139 color: #0F766E; 140 } 141 142 .loading-spinner svg { 143 animation: spin 1s linear infinite; 144 height: 2.5rem; 145 width: 2.5rem; 146 } 147 148 @keyframes spin { 149 from { transform: rotate(0deg); } 150 to { transform: rotate(360deg); } 151 } 152 153 .api-status-message { 154 font-weight: 500; 155 text-align: center; 156 padding: 0.75rem 1.25rem; 157 border-radius: 0.5rem; 158 margin-bottom: 1rem; 159 width: 100%; 160 max-width: 48rem; 161 } 162 163 .api-status-success { background-color: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0;} 164 165 .api-status-error { background-color: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; } 166 167 .api-status-loading { background-color: #FEFCE8; color: #854D0E; border: 1px solid #FEF08A; } 168 169 .canvas-item { 170 margin-bottom: 1rem; 171 padding: 1.25rem; 172 background-color: #F8FAFC; /* slate-50 */ 173 border-radius: 0.75rem; 174 border: 1px solid #E2E8F0; /* slate-200 */ 175 } 176 177 .ai-guidance-list { 178 padding-left: 1.5rem; 179 list-style-position: outside; 180 } 181 182 textarea { 183 transition: all 0.2s ease-in-out; 184 } 185 186 textarea:focus { 187 box-shadow: 0 0 0 2px #5EEAD4; 188 border-color: #14B8A6; 189 } 190 </style> 191 192<link rel="stylesheet" href="/index.css">
193<script type="importmap"> 194{ 195 "imports": { 196 "@google/genai": "https://aistudiocdn.com/@google/genai@^1.23.0", 197 "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/", 198 "react/": "https://aistudiocdn.com/react@^19.2.0/", 199 "react": "https://aistudiocdn.com/react@^19.2.0" 200 } 201} 202</script>
202 203
203<script type="module" crossorigin src="/assets/index-DU7NO42v.js"></script>
203 204</head> 205<body> 206 <div id="root"></div> 207</body> 208</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.