Hugging Face's logo

Spaces:
AkashKumarave
/
ff
Running

App Files Community
ff
File size: 12,058 Bytes 
c6ccee3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DPIcon - Transform Your Ideas into Stunning Visuals</title>
  <link rel="stylesheet" href="css/style.css">
  <!-- Firebase SDK -->
  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
</head>
<body class="index-page">
  <div class="container">
    <!-- Sidebar -->
    <nav class="sidebar">
      <button class="close-menu md:hidden text-white text-2xl m-0 p-2 border-none bg-transparent cursor-pointer">
        ✕
      </button>
      <div class="sidebar-header">
        <svg width="25" height="30" viewBox="0 0 25 30" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_1_917)">
            <!-- SVG Path Placeholder -->
          </g>
          <defs>
            <clipPath id="clip0_1_917">
              <rect width="25" height="29.59" fill="white" transform="translate(0 0.389893)"/>
            </clipPath>
          </defs>
        </svg>
        <span>dpicon</span>
      </div>
      <div class="nav-items">
        <a href="index.html" class="nav-item active">
          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- SVG Path Placeholder -->
          </svg>
          <span>Home</span>
          <div class="indicator">
            <div></div>
          </div>
        </a>
        <a href="face-fusion.html" class="nav-item">
          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- SVG Path Placeholder -->
          </svg>
          <span>Face Fusion</span>
        </a>
        <a href="text-to-image.html" class="nav-item">
          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- SVG Path Placeholder -->
          </svg>
          <span>Text to Image</span>
        </a>
        <a href="community.html" class="nav-item">
          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- SVG Path Placeholder -->
          </svg>
          <span>Community</span>
        </a>
        <a href="sponsor.html" class="nav-item">
          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- SVG Path Placeholder -->
          </svg>
          <span>Sponsor</span>
        </a>
        <a href="founder.html" class="nav-item">
          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- SVG Path Placeholder -->
          </svg>
          <span>Founder</span>
        </a>
      </div>
      <div class="footer">
        <div class="powered-by">Powered by</div>
        <img src="public/images/powered-by-logo.jpg" alt="Powered by logo">
        <div class="copyright">
          <span>© Copyright</span>
          <span class="year">2025</span>
          <span>by DPIcon</span>
        </div>
      </div>
    </nav>

    <!-- Main Content -->
    <main class="main-content">
      <!-- Top Bar -->
      <header class="top-bar">
        <button class="top-bar__hamburger md:hidden">
          ☰
        </button>
        <div class="top-bar__content">
          <span class="top-bar__credits" id="credits-display">50</span>
          <button class="top-bar__upgrade" id="upgrade-button">Upgrade</button>
          <span class="top-bar__welcome" id="welcome-message">Welcome Guest</span>
          <div class="top-bar__avatar"></div>
        </div>
      </header>

      <!-- Connect with Google Button -->
      <div class="box-border flex justify-center items-center mb-12 m-0 p-0 w-full">
        <button id="google-signin-button" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] transition-transform transform hover:scale-105 font-medium text-lg flex items-center">
          <svg class="mr-2" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0ZM12 2C17.514 2 22 6.486 22 12C22 17.514 17.514 22 12 22C6.486 22 2 17.514 2 12C2 6.486 6.486 2 12 2ZM12 4C8.962 4 6.5 6.462 6.5 9.5C6.5 12.538 8.962 15 12 15C15.038 15 17.5 12.538 17.5 9.5C17.5 6.462 15.038 4 12 4ZM12 6C13.933 6 15.5 7.567 15.5 9.5C15.5 11.433 13.933 13 12 13C10.067 13 8.5 11.433 8.5 9.5C8.5 7.567 10.067 6 12 6ZM18.5 7.5C18.5 8.328 17.828 9 17 9C16.172 9 15.5 8.328 15.5 7.5C15.5 6.672 16.172 6 17 6C17.828 6 18.5 6.672 18.5 7.5Z" fill="white"/>
          </svg>
          Connect with Google
          <span id="google-signin-spinner" class="ml-2 hidden">⏳</span>
        </button>
      </div>

      <!-- Hero Section -->
      <div class="hero">
        <video autoplay muted loop playsinline>
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
        <h1>Transform Your Ideas into Stunning Visuals</h1>
      </div>

      <!-- Feature Cards Section -->
      <div class="feature-cards">
        <div class="feature-card">
          <div class="highlight"></div>
          <div class="content">
            <div class="icon">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- SVG Path Placeholder -->
              </svg>
            </div>
            <span>Face Fusion</span>
          </div>
        </div>
        <div class="feature-card">
          <div class="highlight"></div>
          <div class="content">
            <div class="icon">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- SVG Path Placeholder -->
              </svg>
            </div>
            <span>Text to Image</span>
          </div>
        </div>
        <div class="feature-card">
          <div class="highlight"></div>
          <div class="content">
            <div class="icon">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <!-- SVG Path Placeholder -->
              </svg>
            </div>
            <span>Community</span>
          </div>
        </div>
      </div>

      <!-- Why Section -->
      <div class="why-section">
        <h2>Why DPIcon is Your Creative Rocket Fuel</h2>
        <div class="bullet-points">
          <div class="bullet-point">
            <div class="bullet">•</div>
            <div class="text">AI Alchemy: Turn whispers of thought into vivid masterpieces with next-gen tech. No Rules</div>
          </div>
          <div class="bullet-point">
            <div class="bullet">•</div>
            <div class="text">Just Wonders: Easy enough for dreamers, powerful enough for visionaries.</div>
          </div>
          <div class="bullet-point">
            <div class="bullet">•</div>
            <div class="text">Infinite Realms: Text-to-image wizardry or face-swapping adventures—your choice.</div>
          </div>
          <div class="bullet-point">
            <div class="bullet">•</div>
            <div class="text">Blink-and-Done Speed: Stellar results faster than a meteor shower.</div>
          </div>
        </div>
      </div>

      <!-- Content Sections -->
      <div class="content-section">
        <h2>Transform Your Ideas into Stunning Visuals</h2>
        <img src="public/images/transform-ideas-image.jpg" alt="Transform Your Ideas into Stunning Visuals">
        <div class="divider"></div>
        <p>Step into a world where words weave wonders and faces find new fates. DPIcon is your portal to boundless creativity, powered by cutting-edge AI. From conjuring vivid scenes with a single sentence to reimagining your face in fantastical realms, we turn your wildest whims into breathtaking visuals. Dare to dream – DPIcon makes it real.</p>
      </div>

      <div class="content-section">
        <h2>The Spark of a New Era</h2>
        <img src="public/images/spark-era-image.jpg" alt="The Spark of a New Era">
        <div class="divider"></div>
        <p>At DPIcon, we believe creativity shouldn't be confined. We're pioneers at the crossroads of art and technology, crafting tools that let you sculpt the impossible. Whether you're an artist seeking a muse, a visionary with a story, or a soul craving something new, DPIcon is your playground of endless potential.</p>
      </div>

      <div class="content-section">
        <h2>What Sets Us Apart</h2>
        <img src="public/images/sets-apart-image.jpg" alt="What Sets Us Apart">
        <div class="divider"></div>
        <p>AI Sorcery: Advanced algorithms that turn imagination into masterpieces. No Limits, Just Magic: From text to art, face to fantasy – explore it all. Instant Alchemy: Conjure creations faster than a lightning strike. Yours to Command: Simple tools, extraordinary results – no wizardry degree required.</p>
      </div>

      <!-- Meet Our Founder CTA Button -->
      <div class="box-border flex justify-center items-center mb-6 m-0 p-0 w-full">
        <a href="founder.html" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] transition-colors font-medium text-lg">
          Meet Our Founder
        </a>
      </div>
    </main>
  </div>

  <!-- Upgrade Popup -->
  <div id="upgrade-popup" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">
    <div class="bg-gradient-to-br from-[#1a1a1a] to-[#2a2a2a] rounded-lg p-8 max-w-4xl w-full mx-4 popup-content">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-[32px] text-white">Choose Your Plan</h2>
        <button id="close-popup" class="text-white text-2xl">&times;</button>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Basic Free Plan -->
        <div class="plan-card p-6 rounded-lg text-center">
          <h3 class="text-[24px] text-white mb-4">Basic Free</h3>
          <p class="text-white text-lg mb-4">50 Credits / Month</p>
          <p class="text-white text-2xl font-bold mb-4">$0</p>
          <button id="select-basic" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button>
        </div>
        <!-- Pro Plan -->
        <div class="plan-card p-6 rounded-lg text-center">
          <h3 class="text-[24px] text-white mb-4">Pro</h3>
          <p class="text-white text-lg mb-4">Unlimited for 1 Month</p>
          <p class="text-white text-2xl font-bold mb-4">$80</p>
          <button id="select-pro" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button>
        </div>
        <!-- Premium Plan -->
        <div class="plan-card p-6 rounded-lg text-center">
          <h3 class="text-[24px] text-white mb-4">Premium</h3>
          <p class="text-white text-lg mb-4">Unlimited for 1 Year</p>
          <p class="text-white text-2xl font-bold mb-4">$900</p>
          <button id="select-premium" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button>
        </div>
      </div>
    </div>
  </div>

  <script src="js/firebase.js"></script>
  <script src="js/script.js"></script>
</body>
</html>