can you create an daily dream diary app. You get notification every morning, a ding, at the time you can set, so you can write your dream diary. After you write the diary, then you get greeted with your daily transits chart - astrological chart with the explanations of all of the transits, and also their strenght (ai will be used for the generation of these explanations, don't worry about that, and the chart i also have already generated. There is also a feature where you can filter (by 3 filters max) your journal (dream diary) entries by astrological events (full moons, new moons, planet in a sign, planet in a house.
1a3052a verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>React Native | Reactify</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <style> | |
| .mobile-frame { | |
| background-image: url('http://static.photos/technology/640x360/42'); | |
| background-size: cover; | |
| height: 600px; | |
| width: 300px; | |
| border-radius: 40px; | |
| position: relative; | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .notch { | |
| width: 150px; | |
| height: 25px; | |
| background: black; | |
| border-radius: 0 0 20px 20px; | |
| position: absolute; | |
| top: 0; | |
| left: 75px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <i data-feather="code" class="text-indigo-500"></i> | |
| <span class="ml-2 text-xl font-semibold text-gray-900">Reactify</span> | |
| </div> | |
| <div class="flex items-center space-x-8"> | |
| <a href="index.html" class="text-gray-500 hover:text-gray-700">Home</a> | |
| <a href="react-native.html" class="text-indigo-600 font-medium">React Native</a> | |
| <a href="dream-diary.html" class="text-gray-500 hover:text-gray-700">Dream Diary</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="flex-1"> | |
| <h1 class="text-4xl font-bold text-gray-900 mb-6"> | |
| Build <span class="text-indigo-600">Mobile Apps</span> with React Native | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Create beautiful, native-quality iOS and Android apps using familiar React concepts. | |
| All components are truly native and give you the best possible experience. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="text-green-500 mr-2"></i> | |
| <span>Write once, run on both iOS and Android</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="text-green-500 mr-2"></i> | |
| <span>Native performance with JavaScript</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="check-circle" class="text-green-500 mr-2"></i> | |
| <span>Hot reloading for faster development</span> | |
| </div> | |
| </div> | |
| <button class="mt-8 bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition shadow-md"> | |
| Get Started with React Native | |
| </button> | |
| </div> | |
| <div class="flex-1 flex justify-center"> | |
| <div class="mobile-frame"> | |
| <div class="notch"></div> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center"> | |
| <div class="w-24 h-1 bg-gray-300 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |