Hugging Face's logo

Spaces:
manyone
/
hallmark-holiday-plot-magic
Running

App Files Community
hallmark-holiday-plot-magic
File size: 9,146 Bytes 
555c7db
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
157
158
159
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hallmark Holiday Plot Magic</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
        
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #f8f9fa;
        }
        
        .snowflake {
            position: absolute;
            color: #fff;
            user-select: none;
            pointer-events: none;
            animation: fall linear infinite;
        }
        
        @keyframes fall {
            to {
                transform: translateY(100vh);
            }
        }
        
        .festive-border {
            border-image: linear-gradient(45deg, #e63946, #f4a261, #2a9d8f, #264653) 1;
            border-width: 4px;
            border-style: solid;
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-b from-red-50 to-green-50 relative overflow-x-hidden">
    <!-- Snowflakes -->
    <div id="snowflakes"></div>
    
    <div class="container mx-auto px-4 py-12 max-w-4xl">
        <header class="text-center mb-12">
            <h1 class="text-4xl md:text-5xl font-bold text-red-600 font-playfair mb-4">Hallmark Holiday Plot Magic</h1>
            <p class="text-xl text-gray-700">Generate your perfect holiday movie plot!</p>
            <div class="mt-6">
                <i data-feather="film" class="w-12 h-12 text-green-600 mx-auto"></i>
            </div>
        </header>
        
        <main class="bg-white rounded-xl shadow-xl p-6 md:p-8 festive-border">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div class="space-y-6">
                    <div>
                        <label class="block text-lg font-semibold text-gray-800 mb-2">Heroine's Profession</label>
                        <select id="female_1" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400">
                            <option value="Architect">Architect</option>
                            <option value="Baker">Baker</option>
                            <option value="Veterinarian">Veterinarian</option>
                            <option value="Art Teacher">Art Teacher</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-lg font-semibold text-gray-800 mb-2">Setting</label>
                        <select id="setting" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400">
                            <option value="small coastal town">Small Coastal Town</option>
                            <option value="mountain village">Mountain Village</option>
                            <option value="rural farming community">Rural Farming Community</option>
                            <option value="historic downtown district">Historic Downtown District</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-lg font-semibold text-gray-800 mb-2">Her Mission</label>
                        <select id="decision" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400">
                            <option value="restore the old community center">Restore the Old Community Center</option>
                            <option value="organize the annual festival">Organize the Annual Festival</option>
                            <option value="save the local business">Save the Local Business</option>
                            <option value="reconnect with her roots">Reconnect With Her Roots</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-lg font-semibold text-gray-800 mb-2">Her Current Fiancé</label>
                        <select id="male_1" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400">
                            <option value="Corporate Executive">Corporate Executive</option>
                            <option value="Successful Attorney">Successful Attorney</option>
                            <option value="Real Estate Developer">Real Estate Developer</option>
                            <option value="Tech Entrepreneur">Tech Entrepreneur</option>
                        </select>
                    </div>
                </div>
                
                <div class="space-y-6">
                    <div>
                        <label class="block text-lg font-semibold text-gray-800 mb-2">The Local Love Interest</label>
                        <select id="male_2" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400">
                            <option value="Local Contractor">Local Contractor</option>
                            <option value="Elementary School Principal">Elementary School Principal</option>
                            <option value="Marine Biologist">Marine Biologist</option>
                            <option value="Historian">Historian</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-lg font-semibold text-gray-800 mb-2">The Wise Helper</label>
                        <select id="helper" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400">
                            <option value="Town Elder">Town Elder</option>
                            <option value="Former Teacher">Former Teacher</option>
                            <option value="Local Librarian">Local Librarian</option>
                            <option value="Community Volunteer">Community Volunteer</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-lg font-semibold text-gray-800 mb-2">The Special Place</label>
                        <select id="place" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-400 focus:border-red-400">
                            <option value="community center">Community Center</option>
                            <option value="bookstore">Bookstore</option>
                            <option value="bakery">Bakery</option>
                            <option value="old theater">Old Theater</option>
                        </select>
                    </div>
                    
                    <div class="flex space-x-4 pt-2">
                        <button id="generateBtn" class="flex-1 bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
                            <i data-feather="play" class="w-5 h-5 mr-2"></i> Generate Plot
                        </button>
                        <button id="randomizeBtn" class="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
                            <i data-feather="shuffle" class="w-5 h-5 mr-2"></i> Randomize
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="mt-8">
                <h2 class="text-2xl font-bold text-gray-800 mb-4 font-playfair">Your Hallmark Holiday Movie Plot</h2>
                <div id="plotOutput" class="bg-red-50 p-6 rounded-lg border-l-4 border-red-500 text-gray-700 leading-relaxed">
                    <p class="italic text-gray-500">Select your options and click "Generate Plot" to create your perfect holiday movie!</p>
                </div>
                
                <div class="mt-6 flex justify-center">
                    <button id="shareBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300 flex items-center">
                        <i data-feather="share-2" class="w-4 h-4 mr-2"></i> Share This Plot
                    </button>
                </div>
            </div>
        </main>
        
        <footer class="mt-12 text-center text-gray-600">
            <p>Made with <i data-feather="heart" class="w-4 h-4 inline text-red-500"></i> for holiday movie lovers</p>
        </footer>
    </div>
    <script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>