primadona/reactnativerocketboost
0
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>Dream Diary | Reactify</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">10 <style>11 .dream-entry {12 background: linear-gradient(135deg, rgba(99,102,241,0.05) 0%, rgba(16,185,129,0.05) 100%);13 border-left: 4px solid #6366f1;14 }15 .transit-strength-1 { opacity: 0.6; }16 .transit-strength-2 { opacity: 0.8; }17 .transit-strength-3 { opacity: 1; }18 </style>19</head>20<body class="bg-gray-50">21 <nav class="bg-white shadow-sm">22 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">23 <div class="flex justify-between h-16">24 <div class="flex items-center">25 <i data-feather="moon" class="text-indigo-500"></i>26 <span class="ml-2 text-xl font-semibold text-gray-900">Dream Diary</span>27 </div>28 <div class="flex items-center space-x-8">29 <a href="index.html" class="text-gray-500 hover:text-gray-700">Home</a>30 <a href="react-native.html" class="text-gray-500 hover:text-gray-700">React Native</a>31 <a href="dream-diary.html" class="text-indigo-600 font-medium">Dream Diary</a>32 </div>33 </div>34 </div>35 </nav>36 37 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">38 <!-- Notification Settings -->39 <div class="bg-white rounded-xl shadow-md p-6 mb-8">40 <h2 class="text-2xl font-bold text-gray-900 mb-4">Dream Reminder</h2>41 <div class="flex items-center space-x-4">42 <div class="flex-1">43 <label class="block text-sm font-medium text-gray-700 mb-1">Notification Time</label>44 <input type="time" class="border rounded-md px-3 py-2 w-full" value="07:00">45 </div>46 <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">47 <i data-feather="bell" class="mr-2"></i> Save48 </button>49 </div>50 </div>51 52 <!-- Current Dream Entry -->53 <div class="bg-white rounded-xl shadow-md p-6 mb-8">54 <h2 class="text-2xl font-bold text-gray-900 mb-4">Today's Dream</h2>55 <textarea class="w-full h-40 border rounded-md p-4 mb-4" placeholder="Write your dream here..."></textarea>56 <button class="bg-emerald-500 text-white px-6 py-3 rounded-lg hover:bg-emerald-600 transition shadow-md">57 Save & View Transits58 </button>59 </div>60 61 <!-- Transits Display -->62 <div class="bg-white rounded-xl shadow-md p-6 mb-8 hidden" id="transits-section">63 <h2 class="text-2xl font-bold text-gray-900 mb-4">Today's Astrological Transits</h2>64 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">65 <div>66 <img src="http://static.photos/abstract/640x360/42" alt="Astrology Chart" class="rounded-lg w-full">67 </div>68 <div>69 <div class="space-y-4">70 <div class="p-4 bg-indigo-50 rounded-lg transit-strength-3">71 <h3 class="font-bold">Moon in Cancer</h3>72 <p class="text-sm">Emotional sensitivity is heightened today. You may find yourself more intuitive than usual.</p>73 </div>74 <div class="p-4 bg-indigo-50 rounded-lg transit-strength-2">75 <h3 class="font-bold">Mercury square Jupiter</h3>76 <p class="text-sm">Your dreams may contain exaggerated or philosophical themes today.</p>77 </div>78 <div class="p-4 bg-indigo-50 rounded-lg transit-strength-1">79 <h3 class="font-bold">Venus trine Neptune</h3>80 <p class="text-sm">Dreams may have romantic or artistic themes with a spiritual undertone.</p>81 </div>82 </div>83 </div>84 </div>85 </div>86 87 <!-- Dream Journal Filter -->88 <div class="bg-white rounded-xl shadow-md p-6 mb-8">89 <h2 class="text-2xl font-bold text-gray-900 mb-4">Filter Dreams</h2>90 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">91 <div>92 <label class="block text-sm font-medium text-gray-700 mb-1">Moon Phase</label>93 <select class="border rounded-md px-3 py-2 w-full">94 <option>Any</option>95 <option>New Moon</option>96 <option>Full Moon</option>97 <option>Waxing Crescent</option>98 <option>Waning Gibbous</option>99 </select>100 </div>101 <div>102 <label class="block text-sm font-medium text-gray-700 mb-1">Planet in Sign</label>103 <select class="border rounded-md px-3 py-2 w-full">104 <option>Any</option>105 <option>Sun in Aries</option>106 <option>Moon in Cancer</option>107 <option>Mercury in Gemini</option>108 </select>109 </div>110 <div>111 <label class="block text-sm font-medium text-gray-700 mb-1">Planet in House</label>112 <select class="border rounded-md px-3 py-2 w-full">113 <option>Any</option>114 <option>Mars in 1st</option>115 <option>Venus in 7th</option>116 <option>Jupiter in 9th</option>117 </select>118 </div>119 </div>120 <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition shadow-md">121 <i data-feather="filter" class="mr-2"></i> Apply Filters122 </button>123 </div>124 125 <!-- Past Dreams -->126 <div class="space-y-4">127 <h2 class="text-2xl font-bold text-gray-900 mb-4">Past Dream Entries</h2>128 <div class="dream-entry p-6 rounded-lg">129 <div class="flex justify-between items-start mb-2">130 <h3 class="font-bold">April 12, 2023</h3>131 <span class="text-sm text-gray-500">Full Moon in Libra</span>132 </div>133 <p class="mb-4">I dreamed I was flying over a city made of glass. The buildings reflected the moonlight in beautiful patterns...</p>134 <div class="text-sm text-gray-600">135 <span class="mr-3">Venus in Taurus</span>136 <span>Mars in 5th House</span>137 </div>138 </div>139 <div class="dream-entry p-6 rounded-lg">140 <div class="flex justify-between items-start mb-2">141 <h3 class="font-bold">April 5, 2023</h3>142 <span class="text-sm text-gray-500">New Moon in Aries</span>143 </div>144 <p class="mb-4">A strange dream about being chased through a forest by shadow figures. I kept running but couldn't find the exit...</p>145 <div class="text-sm text-gray-600">146 <span class="mr-3">Mercury Retrograde</span>147 <span>Pluto in 8th House</span>148 </div>149 </div>150 </div>151 </main>152 153 <script>154 feather.replace();155 // Show transits when save button is clicked156 document.querySelector('button.bg-emerald-500').addEventListener('click', function() {157 document.getElementById('transits-section').classList.remove('hidden');158 });159 </script>160</body>161</html>