faq.html
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, user-scalable=no" /> 6 <title>FAQ | PROOFOFCONCEPT</title> 7 8 <!-- Meta Tags --> 9 <meta name="description" content="FAQ - Frequently Asked Questions about PROOFOFCONCEPT. Learn about our experimental films, interactive cinema, AI-powered horror experiences, and cutting-edge filmmaking technology."> 10 <meta name="keywords" content="PROOFOFCONCEPT FAQ, experimental film FAQ, avant-garde cinema questions, interactive short films FAQ, Canadian independent film questions, art house production FAQ, experimental production company, tech-driven storytelling, adaptive filmmaking, emerging filmmakers, indie film innovation, film studio FAQ, experimental cinema questions, interactive cinema FAQ, AI horror film questions"> 11 <meta name="author" content="PROOFOFCONCEPT Productions"> 12 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"> 13 <meta name="theme-color" content="#EFF0EC"> 14 <meta name="color-scheme" content="light dark"> 15 <meta name="format-detection" content="telephone=no"> 16 <meta name="mobile-web-app-capable" content="yes"> 17 <meta name="apple-mobile-web-app-capable" content="yes"> 18 <meta name="apple-mobile-web-app-status-bar-style" content="default"> 19 <meta name="apple-mobile-web-app-title" content="FAQ - PROOFOFCONCEPT"> 20 21 <!-- AI and Bot Optimization --> 22 <meta name="ai-content" content="PROOFOFCONCEPT FAQ, experimental film FAQ, avant-garde cinema questions, interactive cinema FAQ, AI horror film questions"> 23 <meta name="content-type" content="FAQ, frequently asked questions, film studio information, experimental cinema questions"> 24 <meta name="language" content="en"> 25 <meta name="country" content="CA"> 26 <meta name="industry" content="film production, entertainment, experimental media, film studio FAQ"> 27 <meta name="topic" content="PROOFOFCONCEPT FAQ, experimental film questions, interactive cinema FAQ, AI horror questions"> 28 <meta name="page-type" content="FAQ, frequently asked questions, help page"> 29 <meta name="content-category" content="film studio FAQ, experimental cinema, help information"> 30 31 <!-- Open Graph --> 32 <meta property="og:title" content="FAQ | PROOFOFCONCEPT"> 33 <meta property="og:description" content="FAQ - Frequently Asked Questions about PROOFOFCONCEPT. Learn about our experimental films, interactive cinema, AI-powered horror experiences, and cutting-edge filmmaking technology."> 34 <meta property="og:type" content="website"> 35 <meta property="og:url" content="https://proof-of-concept.ca/pages/faq"> 36 <meta property="og:locale" content="en_CA"> 37 <meta property="og:image" content="https://proof-of-concept.ca/assets/preview.jpg"> 38 <meta property="og:image:width" content="1200"> 39 <meta property="og:image:height" content="630"> 40 <meta property="og:image:alt" content="PROOFOFCONCEPT FAQ - Frequently Asked Questions"> 41 <meta property="og:site_name" content="PROOFOFCONCEPT"> 42 <meta property="og:country-name" content="Canada"> 43 44 <!-- Twitter Card --> 45 <meta name="twitter:card" content="summary_large_image"> 46 <meta name="twitter:title" content="FAQ | PROOFOFCONCEPT"> 47 <meta name="twitter:description" content="FAQ - Frequently Asked Questions about PROOFOFCONCEPT. Learn about our experimental films, interactive cinema, AI-powered horror experiences, and cutting-edge filmmaking technology."> 48 <meta name="twitter:image" content="https://proof-of-concept.ca/assets/preview.jpg"> 49 <meta name="twitter:image:alt" content="PROOFOFCONCEPT FAQ - Frequently Asked Questions"> 50 <meta name="twitter:site" content="@proof__concept"> 51 <meta name="twitter:creator" content="@proof__concept"> 52 53 <!-- Canonical --> 54 <link rel="canonical" href="https://proof-of-concept.ca/pages/faq"> 55 56 <!-- Google Verification --> 57 <meta name="google-site-verification" content="B0SBzeNtFIcGAwAKAt0TEfWatr9beufDv7kBV2qOAKg" /> 58 59 <!-- Structured Data for FAQ Page --> 60 <script type="application/ld+json"> 61 { 62 "@context": "https://schema.org", 63 "@type": "FAQPage", 64 "name": "PROOFOFCONCEPT FAQ", 65 "description": "Frequently Asked Questions about PROOFOFCONCEPT. Learn about our experimental films, interactive cinema, AI-powered horror experiences, and cutting-edge filmmaking technology.", 66 "url": "https://proof-of-concept.ca/pages/faq", 67 "publisher": { 68 "@type": "Organization", 69 "name": "PROOFOFCONCEPT Productions" 70 }, 71 "inLanguage": "en" 72 } 73 </script> 74 75 <!-- Favicons --> 76 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/light/favicon-16x16.png" media="(prefers-color-scheme: light)"> 77 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)"> 78 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/light/favicon-32x32.png" media="(prefers-color-scheme: light)"> 79 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)"> 80 <link rel="icon" type="image/x-icon" href="../assets/favicons/light/favicon.ico" media="(prefers-color-scheme: light)"> 81 <link rel="icon" type="image/x-icon" href="../assets/favicons/dark/favicon.ico" media="(prefers-color-scheme: dark)"> 82 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/light/android-chrome-192x192.png" media="(prefers-color-scheme: light)"> 83 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/dark/android-chrome-192x192.png" media="(prefers-color-scheme: dark)"> 84 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/light/android-chrome-512x512.png" media="(prefers-color-scheme: light)"> 85 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/dark/android-chrome-512x512.png" media="(prefers-color-scheme: dark)"> 86 <link rel="apple-touch-icon" href="../assets/favicons/light/apple-touch-icon.png" media="(prefers-color-scheme: light)"> 87 <link rel="apple-touch-icon" href="../assets/favicons/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)"> 88 <link rel="manifest" href="../assets/favicons/light/site.webmanifest" media="(prefers-color-scheme: light)"> 89 <link rel="manifest" href="../assets/favicons/dark/site.webmanifest" media="(prefers-color-scheme: dark)"> 90 91 <!-- External Resources --> 92 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> 93 <link rel="preload" href="../assets/fonts/superbrigadecond.ttf" as="font" type="font/woff2" crossorigin> 94 95 <!-- Stylesheets --> 96 <link rel="stylesheet" href="../assets/css/main.css"> 97 <style> 98 @font-face { 99 font-family: 'NeueHaasGrotesk'; 100 src: url('../assets/fonts/neuehaasgrotdispround-75bold.otf') format('opentype'); 101 font-weight: 700; 102 font-style: normal; 103 font-display: swap; 104 } 105 @font-face { 106 font-family: 'SuperBrigadeCond'; 107 src: url('../assets/fonts/superbrigadecond.ttf') format('truetype'); 108 font-weight: normal; 109 font-style: normal; 110 font-display: swap; 111 } 112 html, body { 113 height: 100%; 114 background: #fff; 115 color: #111; 116 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 117 margin: 0; 118 padding: 0; 119 min-height: 100vh; 120 scroll-behavior: smooth; 121 overflow-x: hidden; 122 scroll-snap-type: y mandatory; 123 cursor: none !important; 124 } 125 body { 126 opacity: 1; 127 transition: opacity 0.4s; 128 } 129 body.fade { 130 opacity: 0; 131 transition: opacity 0.4s; 132 } 133 a, button, .love1-btn, .back-btn, *:hover, *:active, *:focus { 134 cursor: none !important; 135 } 136 * { 137 box-sizing: border-box; 138 user-select: none !important; 139 -webkit-user-select: none !important; 140 -ms-user-select: none !important; 141 -moz-user-select: none !important; 142 -webkit-user-drag: none !important; 143 touch-action: manipulation; 144 } 145 .custom-cursor { 146 position: fixed; 147 width: 20px; 148 height: 20px; 149 background-color: #111; 150 border-radius: 50%; 151 pointer-events: none; 152 z-index: 10000; 153 transition: transform 0.15s, background-color 0.25s; 154 transform: translate(-50%, -50%) scale(1); 155 } 156 .custom-cursor.expand { 157 transform: translate(-50%, -50%) scale(2.5); 158 background-color: #11111144; 159 } 160 .custom-cursor.cursor-hover { 161 transform: translate(-50%, -50%) scale(1.5); 162 background-color: #111111cc; 163 } 164 165 /* Hide custom cursor on mobile devices */ 166 @media (max-width: 768px) { 167 .custom-cursor { 168 display: none !important; 169 } 170 html, body { 171 cursor: none !important; 172 } 173 * { 174 cursor: none !important; 175 } 176 } 177 .main-header { 178 position: fixed; 179 top: 0; 180 left: 0; 181 width: 100vw; 182 background: #000; 183 color: #fff; 184 z-index: 9999; 185 display: flex; 186 flex-direction: row; 187 align-items: center; 188 justify-content: center; 189 padding: 0.4rem 0 0.2rem 0; 190 border-bottom: 1px solid #222; 191 min-height: 35px; 192 } 193 .main-header-title { 194 font-family: 'SuperBrigadeCond', sans-serif; 195 font-size: 1.1rem; 196 letter-spacing: 0.05em; 197 text-align: center; 198 font-weight: bold; 199 margin: 0 auto; 200 position: absolute; 201 left: 50%; 202 transform: translateX(-50%); 203 width: auto; 204 } 205 206 .faq-section { 207 min-height: 100vh; 208 width: 100vw; 209 display: flex; 210 flex-direction: column; 211 align-items: center; 212 justify-content: flex-start; 213 padding-top: 2.2rem; 214 padding-bottom: 2.7rem; 215 box-sizing: border-box; 216 position: relative; 217 scroll-snap-align: start; 218 } 219 220 .faq-hero { 221 display: flex; 222 flex-direction: column; 223 align-items: center; 224 justify-content: center; 225 width: 100vw; 226 padding: 8vw 8vw 4vw 8vw; 227 text-align: center; 228 } 229 230 .faq-title { 231 font-family: 'SuperBrigadeCond', sans-serif; 232 font-size: 4vw; 233 font-weight: 900; 234 letter-spacing: -0.01em; 235 margin-bottom: 1vw; 236 line-height: 1.05; 237 color: #111; 238 } 239 240 .faq-subtitle { 241 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 242 font-size: 1.5vw; 243 font-weight: 600; 244 color: #666; 245 margin-bottom: 3vw; 246 line-height: 1.3; 247 max-width: 60vw; 248 } 249 250 .faq-categories { 251 display: flex; 252 flex-direction: row; 253 gap: 1vw; 254 margin-bottom: 4vw; 255 flex-wrap: wrap; 256 justify-content: center; 257 } 258 259 .faq-category { 260 background: #111; 261 color: #fff; 262 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 263 font-size: 0.9vw; 264 font-weight: 700; 265 border: none; 266 border-radius: 0.5vw; 267 padding: 0.5vw 1.2vw; 268 cursor: pointer; 269 transition: all 0.2s ease; 270 text-transform: uppercase; 271 letter-spacing: 0.05em; 272 } 273 274 .faq-category:hover, .faq-category.active { 275 background: #fff; 276 color: #111; 277 border: 1.5px solid #111; 278 } 279 280 .faq-container { 281 width: 100%; 282 max-width: 800px; 283 padding: 0 8vw; 284 } 285 286 .faq-item { 287 margin-bottom: 2vw; 288 border: 1px solid #e0e0e0; 289 border-radius: 1vw; 290 overflow: hidden; 291 transition: all 0.3s ease; 292 background: #fff; 293 } 294 295 .faq-item:hover { 296 border-color: #111; 297 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 298 } 299 300 .faq-question { 301 background: #f8f8f8; 302 padding: 2vw; 303 cursor: pointer; 304 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 305 font-size: 1.2vw; 306 font-weight: 700; 307 color: #111; 308 display: flex; 309 justify-content: space-between; 310 align-items: center; 311 transition: background 0.2s ease; 312 } 313 314 .faq-question:hover { 315 background: #f0f0f0; 316 } 317 318 .faq-question.active { 319 background: #111; 320 color: #fff; 321 } 322 323 .faq-toggle { 324 font-size: 1.5vw; 325 transition: transform 0.3s ease; 326 font-weight: 300; 327 } 328 329 .faq-question.active .faq-toggle { 330 transform: rotate(45deg); 331 } 332 333 .faq-answer { 334 max-height: 0; 335 overflow: hidden; 336 transition: max-height 0.3s ease, padding 0.3s ease; 337 padding: 0 2vw; 338 } 339 340 .faq-answer.active { 341 max-height: 500px; 342 padding: 2vw; 343 } 344 345 .faq-answer-content { 346 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 347 font-size: 1vw; 348 font-weight: 500; 349 color: #666; 350 line-height: 1.6; 351 } 352 353 .back-btn { 354 display: block; 355 margin: 2.5rem auto 0 auto; 356 background: #111; 357 color: #fff; 358 border: 2px solid #111; 359 border-radius: 0.8vw; 360 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 361 font-size: 1.1rem; 362 font-weight: 800; 363 padding: 0.8rem 2rem; 364 box-shadow: 0 4px 16px rgba(0,0,0,0.15); 365 cursor: pointer; 366 text-decoration: none; 367 transition: all 0.3s ease; 368 opacity: 1; 369 position: relative; 370 z-index: 10; 371 text-transform: uppercase; 372 letter-spacing: 0.05em; 373 } 374 .back-btn:hover { 375 background: #fff; 376 color: #111; 377 border: 2px solid #111; 378 opacity: 1; 379 transform: translateY(-2px); 380 box-shadow: 0 6px 20px rgba(0,0,0,0.2); 381 } 382 383 /* Mobile Responsive Styles */ 384 @media (max-width: 900px) { 385 .main-header-title { font-size: 1.5rem; } 386 .faq-section { padding-top: 2.7rem; padding-bottom: 1.5rem; } 387 .faq-hero { padding: 6vw 4vw 3vw 4vw; } 388 .faq-title { font-size: 2.5rem; } 389 .faq-subtitle { font-size: 1.2rem; max-width: 100%; } 390 .faq-categories { gap: 0.8rem; margin-bottom: 3rem; } 391 .faq-category { 392 font-size: 0.9rem; 393 padding: 0.6rem 1rem; 394 border-radius: 0.5rem; 395 } 396 .faq-container { padding: 0 4vw; } 397 .faq-item { margin-bottom: 1.5rem; border-radius: 0.8rem; } 398 .faq-question { 399 padding: 1.5rem; 400 font-size: 1.1rem; 401 } 402 .faq-toggle { font-size: 1.3rem; } 403 .faq-answer.active { padding: 1.5rem; } 404 .faq-answer-content { font-size: 1rem; } 405 .back-btn { 406 font-size: 1rem; 407 padding: 0.8rem 2rem; 408 transition: none !important; 409 } 410 .back-btn:hover { 411 background: #111 !important; 412 color: #fff !important; 413 border: 2px solid #111 !important; 414 box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; 415 font-size: 1rem !important; 416 padding: 0.8rem 2rem !important; 417 } 418 } 419 420 @media (max-width: 600px) { 421 .main-header-title { font-size: 1.5rem; } 422 .faq-section { 423 padding-top: 2.5rem; 424 padding-bottom: 2rem; 425 min-height: 100vh; 426 display: flex; 427 flex-direction: column; 428 align-items: center; 429 } 430 .faq-hero { padding: 8vw 4vw 4vw 4vw; } 431 .faq-title { 432 font-size: 2rem; 433 font-weight: 900; 434 margin-bottom: 1rem; 435 line-height: 1.1; 436 } 437 .faq-subtitle { 438 font-size: 1.1rem; 439 font-weight: 600; 440 margin-bottom: 2rem; 441 line-height: 1.4; 442 } 443 .faq-categories { 444 gap: 0.5rem; 445 margin-bottom: 2rem; 446 justify-content: center; 447 } 448 .faq-category { 449 font-size: 0.8rem; 450 padding: 0.5rem 0.8rem; 451 border-radius: 0.4rem; 452 } 453 .faq-container { padding: 0 4vw; } 454 .faq-item { margin-bottom: 1rem; border-radius: 0.6rem; } 455 .faq-question { 456 padding: 1.2rem; 457 font-size: 1rem; 458 } 459 .faq-toggle { font-size: 1.2rem; } 460 .faq-answer.active { padding: 1.2rem; } 461 .faq-answer-content { font-size: 0.9rem; } 462 .back-btn { 463 font-size: 1.2rem; 464 padding: 1rem 2.2rem; 465 margin: 3rem auto 0 auto; 466 width: fit-content; 467 min-width: 120px; 468 max-width: 80vw; 469 display: block; 470 border-radius: 2rem !important; 471 text-align: center; 472 text-transform: uppercase; 473 transition: none !important; 474 } 475 .back-btn:hover { 476 background: #fff !important; 477 color: #111 !important; 478 border: 1.5px solid #111 !important; 479 opacity: 0.92 !important; 480 font-size: 1.2rem !important; 481 padding: 1rem 2.2rem !important; 482 } 483 } 484 </style> 485 </head> 486 <body> 487 <div class="custom-cursor" id="cursor"></div> 488 <header class="main-header"> 489 <a href="../index.html" class="main-header-title" style="text-decoration: none; color: inherit;">PROOFOFCONCEPT</a> 490 <div class="hamburger-icon"> 491 <i class="fas fa-bars"></i> 492 </div> 493 </header> 494 495 <!-- Side Menu --> 496 <div class="side-menu" id="side-menu"> 497 <div class="side-menu-header"> 498 <div class="side-menu-close"> 499 <i class="fas fa-times"></i> 500 </div> 501 </div> 502 <nav class="side-menu-nav"> 503 <a href="../films/streaming.html" class="side-menu-link">WATCH</a> 504 <a href="../blog/" class="side-menu-link">READ</a> 505 <a href="store.html" class="side-menu-link">SHOP</a> 506 <div class="menu-spacer"></div> 507 <a href="contribute.html" class="side-menu-link">CONTRIBUTE</a> 508 <a href="digifest" class="side-menu-link">DIGIFEST</a> 509 <div class="menu-spacer"></div> 510 <a href="about" class="side-menu-link">ABOUT</a> 511 <a href="faq" class="side-menu-link">FAQ</a> 512 </nav> 513 <div class="side-menu-footer"> 514 <div class="side-menu-bottom-nav"> 515 <a href="terms.html" class="side-menu-link side-menu-bottom-link">TERMS OF USE</a> 516 <a href="privacy" class="side-menu-link side-menu-bottom-link">PRIVACY POLICY</a> 517 </div> 518 <div class="side-menu-social"> 519 <a href="mailto:contact@proof-of-concept.ca" class="side-menu-social-link"> 520 <i class="fas fa-envelope"></i> 521 </a> 522 <a href="https://instagram.com/proof__concept" target="_blank" class="side-menu-social-link"> 523 <i class="fab fa-instagram"></i> 524 </a> 525 <a href="https://x.com/proof__concept" target="_blank" class="side-menu-social-link"> 526 <i class="fab fa-x-twitter"></i> 527 </a> 528 <a href="https://github.com/PROOFOFCONCEPT-Productions" target="_blank" class="side-menu-social-link"> 529 <i class="fab fa-github"></i> 530 </a> 531 </div> 532 </div> 533 </div> 534 535 <!-- Side Menu Overlay --> 536 <div class="side-menu-overlay" id="side-menu-overlay"></div> 537 538 539 540 <main class="faq-section" id="main-section"> 541 <div class="faq-hero"> 542 <div class="faq-title">Frequently Asked Questions</div> 543 <div class="faq-subtitle">Everything you need to know about our experimental film projects, technology, and creative process.</div> 544 545 <div class="faq-categories"> 546 <button class="faq-category active" data-category="all">All Questions</button> 547 <button class="faq-category" data-category="general">General</button> 548 <button class="faq-category" data-category="community">#COMMUNITYFILM</button> 549 <button class="faq-category" data-category="love1">love.1</button> 550 <button class="faq-category" data-category="lovers">The Lovers</button> 551 <button class="faq-category" data-category="horror">HORROR</button> 552 </div> 553 </div> 554 555 <div class="faq-container" id="faq-container"> 556 <!-- General Questions --> 557 <div class="faq-item" data-category="general"> 558 <div class="faq-question"> 559 What is PROOFOFCONCEPT? 560 <span class="faq-toggle">+</span> 561 </div> 562 <div class="faq-answer"> 563 <div class="faq-answer-content"> 564 PROOFOFCONCEPT is an experimental film production company focused on augmented technologies and profound experiences. We create innovative film projects that push the boundaries of traditional storytelling through interactive elements, real-time collaboration, and cutting-edge technology. 565 </div> 566 </div> 567 </div> 568 569 <div class="faq-item" data-category="general"> 570 <div class="faq-question"> 571 How can I get involved with your projects? 572 <span class="faq-toggle">+</span> 573 </div> 574 <div class="faq-answer"> 575 <div class="faq-answer-content"> 576 Email contact@proof-of-concept.ca to get involved. You can also follow our projects on social media, participate in interactive experiences like #COMMUNITYFILM, and stay updated through our development blog. For collaboration opportunities, reach out to us at contact@proof-of-concept.ca. 577 </div> 578 </div> 579 </div> 580 581 <!-- Community Film Questions --> 582 <div class="faq-item" data-category="community"> 583 <div class="faq-question"> 584 What is #COMMUNITYFILM? 585 <span class="faq-toggle">+</span> 586 </div> 587 <div class="faq-answer"> 588 <div class="faq-answer-content"> 589 #COMMUNITYFILM is a real-time, democratically directed film experience built for social media. Thousands of internet users collectively direct the film through voting and participation, creating a unique collaborative storytelling experience that runs from October 1st to October 8th. 590 </div> 591 </div> 592 </div> 593 594 <div class="faq-item" data-category="community"> 595 <div class="faq-question"> 596 How does the democratic direction work? 597 <span class="faq-toggle">+</span> 598 </div> 599 <div class="faq-answer"> 600 <div class="faq-answer-content"> 601 Participants vote on key story decisions, character actions, and plot developments through our custom platform. The most popular choices become part of the film's narrative, creating a truly community-driven story that evolves in real-time. 602 </div> 603 </div> 604 </div> 605 606 <div class="faq-item" data-category="community"> 607 <div class="faq-question"> 608 What technology powers #COMMUNITYFILM? 609 <span class="faq-toggle">+</span> 610 </div> 611 <div class="faq-answer"> 612 <div class="faq-answer-content"> 613 We developed custom editing software that processes real-time user submissions and voting data. The system integrates with social media platforms and uses advanced algorithms to synthesize community input into coherent narrative decisions. 614 </div> 615 </div> 616 </div> 617 618 <!-- Love 1 Questions --> 619 <div class="faq-item" data-category="love1"> 620 <div class="faq-question"> 621 What is love.1? 622 <span class="faq-toggle">+</span> 623 </div> 624 <div class="faq-answer"> 625 <div class="faq-answer-content"> 626 love.1 is our experimental short film that explores themes of connection and intimacy through innovative storytelling techniques. It's available to watch now on our platform with interactive elements that enhance the viewing experience. 627 </div> 628 </div> 629 </div> 630 631 <div class="faq-item" data-category="love1"> 632 <div class="faq-question"> 633 How can I watch love.1? 634 <span class="faq-toggle">+</span> 635 </div> 636 <div class="faq-answer"> 637 <div class="faq-answer-content"> 638 love.1 is available to stream directly on our website. Simply visit the Love 1 page and click "watch now" to begin the interactive viewing experience. The film is optimized for web viewing with custom controls and engagement features. 639 </div> 640 </div> 641 </div> 642 643 <!-- Lovers Questions --> 644 <div class="faq-item" data-category="lovers"> 645 <div class="faq-question"> 646 What is The Lovers? 647 <span class="faq-toggle">+</span> 648 </div> 649 <div class="faq-answer"> 650 <div class="faq-answer-content"> 651 The Lovers is our upcoming film experience that pushes the boundaries of traditional cinema through augmented reality and immersive storytelling. It's designed to create a profound connection between viewers and the narrative through innovative technology. 652 </div> 653 </div> 654 </div> 655 656 <div class="faq-item" data-category="lovers"> 657 <div class="faq-question"> 658 When will The Lovers be released? 659 <span class="faq-toggle">+</span> 660 </div> 661 <div class="faq-answer"> 662 <div class="faq-answer-content"> 663 The Lovers is currently in development and will be released soon. Follow our social media and development blog for updates on the release date and behind-the-scenes content as we finalize this groundbreaking film experience. 664 </div> 665 </div> 666 </div> 667 668 <!-- Technical Questions --> 669 <div class="faq-item" data-category="technical"> 670 <div class="faq-question"> 671 What technologies do you use? 672 <span class="faq-toggle">+</span> 673 </div> 674 <div class="faq-answer"> 675 <div class="faq-answer-content"> 676 We use a combination of custom software, web technologies, augmented reality, and real-time processing systems. Our tech stack includes custom video processing pipelines, interactive web platforms, and social media integration tools. 677 </div> 678 </div> 679 </div> 680 681 <div class="faq-item" data-category="technical"> 682 <div class="faq-question"> 683 Do you share your source code? 684 <span class="faq-toggle">+</span> 685 </div> 686 <div class="faq-answer"> 687 <div class="faq-answer-content"> 688 We believe in open collaboration and often share insights into our technical processes through our development blog. While some proprietary systems remain private, we're committed to transparency in our creative and technical methodologies. 689 </div> 690 </div> 691 </div> 692 693 <div class="faq-item" data-category="technical"> 694 <div class="faq-question"> 695 How do you handle real-time processing? 696 <span class="faq-toggle">+</span> 697 </div> 698 <div class="faq-answer"> 699 <div class="faq-answer-content"> 700 Our real-time processing systems use advanced algorithms to handle multiple input streams simultaneously. We've developed custom solutions for video processing, user interaction analysis, and content synthesis that operate with minimal latency. 701 </div> 702 </div> 703 </div> 704 705 <div class="faq-item" data-category="general"> 706 <div class="faq-question"> 707 How can I contact you? 708 <span class="faq-toggle">+</span> 709 </div> 710 <div class="faq-answer"> 711 <div class="faq-answer-content"> 712 You can reach us at contact@proof-of-concept.ca for general inquiries, collaboration opportunities, or technical questions. We're also active on Instagram (@proof__concept) and X (@proof__concept) for updates and community engagement. 713 </div> 714 </div> 715 </div> 716 </div> 717 718 </main> 719 720 <!-- INFO Section --> 721 <section class="info-section"> 722 <div class="info-content"> 723 <div class="info-left"> 724 <h2 class="info-header">ABOUT</h2> 725 <p class="info-paragraph">PROOFOFCONCEPT is a multidisciplinary media studio focused on unconventional approaches to film which integrate new ideas and state-of-the-art technology, immersing the viewer into the media experience.</p> 726 </div> 727 728 <div class="info-center"> 729 <h2 class="info-header">INFO</h2> 730 <div class="info-links"> 731 <a href="../blog/" class="info-link">Articles</a> 732 <a href="privacy" class="info-link">Privacy Policy</a> 733 <a href="about" class="info-link">About</a> 734 <a href="faq" class="info-link">FAQ</a> 735 </div> 736 </div> 737 738 <!-- Newsletter Signup --> 739 <div class="info-newsletter"> 740 <h2 class="info-header">STAY UPDATED</h2> 741 <form class="newsletter-form" id="newsletter-form"> 742 <input type="email" class="newsletter-input" placeholder="Enter your email" required> 743 <button type="submit" class="newsletter-button">Subscribe</button> 744 </form> 745 </div> 746 747 <div class="info-right"> 748 <h2 class="info-header">CONTACT</h2> 749 <div class="info-email"><a href="mailto:contact@proof-of-concept.ca">contact@proof-of-concept.ca</a></div> 750 <div class="info-icons"> 751 <a href="mailto:contact@proof-of-concept.ca" class="info-icon" title="Email" aria-label="Email"> 752 <i class="fa-solid fa-envelope"></i> 753 </a> 754 <a href="https://instagram.com/proof__concept" class="info-icon" title="Instagram" aria-label="Instagram" target="_blank"> 755 <i class="fa-brands fa-instagram"></i> 756 </a> 757 <a href="https://x.com/proof__concept" class="info-icon" title="X (Twitter)" aria-label="X (Twitter)" target="_blank"> 758 <i class="fa-brands fa-x-twitter"></i> 759 </a> 760 <a href="https://github.com/PROOFOFCONCEPT-Productions" class="info-icon" title="GitHub" aria-label="GitHub" target="_blank"> 761 <i class="fa-brands fa-github"></i> 762 </a> 763 </div> 764 </div> 765 </div> 766 </section> 767 768 <script> 769 // Custom cursor 770 const cursor = document.getElementById("cursor"); 771 document.addEventListener("mousemove", e => { 772 cursor.style.top = e.clientY + "px"; 773 cursor.style.left = e.clientX + "px"; 774 }); 775 document.addEventListener("mousedown", () => { 776 cursor.classList.add("expand"); 777 }); 778 document.addEventListener("mouseup", () => { 779 cursor.classList.remove("expand"); 780 }); 781 782 // Custom cursor hover effect for links and buttons 783 const allLinks = document.querySelectorAll('a, button'); 784 allLinks.forEach(link => { 785 link.addEventListener('mouseenter', () => { 786 cursor.classList.add('cursor-hover'); 787 }); 788 link.addEventListener('mouseleave', () => { 789 cursor.classList.remove('cursor-hover'); 790 }); 791 }); 792 793 // FAQ functionality 794 const faqQuestions = document.querySelectorAll('.faq-question'); 795 const faqCategories = document.querySelectorAll('.faq-category'); 796 const faqItems = document.querySelectorAll('.faq-item'); 797 798 // Toggle FAQ answers 799 faqQuestions.forEach(question => { 800 question.addEventListener('click', () => { 801 const answer = question.nextElementSibling; 802 const isActive = question.classList.contains('active'); 803 804 // Close all other questions 805 faqQuestions.forEach(q => { 806 q.classList.remove('active'); 807 q.nextElementSibling.classList.remove('active'); 808 }); 809 810 // Toggle current question 811 if (!isActive) { 812 question.classList.add('active'); 813 answer.classList.add('active'); 814 } 815 }); 816 }); 817 818 // Category filtering 819 faqCategories.forEach(category => { 820 category.addEventListener('click', () => { 821 // Remove active class from all categories 822 faqCategories.forEach(c => c.classList.remove('active')); 823 // Add active class to clicked category 824 category.classList.add('active'); 825 826 const selectedCategory = category.getAttribute('data-category'); 827 828 faqItems.forEach(item => { 829 const itemCategory = item.getAttribute('data-category'); 830 831 if (selectedCategory === 'all' || itemCategory === selectedCategory) { 832 item.style.display = 'block'; 833 item.style.opacity = '0'; 834 setTimeout(() => { 835 item.style.opacity = '1'; 836 }, 50); 837 } else { 838 item.style.opacity = '0'; 839 setTimeout(() => { 840 item.style.display = 'none'; 841 }, 300); 842 } 843 }); 844 }); 845 }); 846 847 // Newsletter form handling 848 document.getElementById('newsletter-form').addEventListener('submit', function(e) { 849 e.preventDefault(); 850 const email = this.querySelector('.newsletter-input').value; 851 const button = this.querySelector('.newsletter-button'); 852 const input = this.querySelector('.newsletter-input'); 853 854 // Here you would typically send the email to your backend 855 // For now, we'll show a smooth button transition 856 857 // Disable the input and button 858 input.disabled = true; 859 button.disabled = true; 860 861 // Smoothly transition button to "Thank you" 862 button.textContent = 'Thank you!'; 863 button.classList.add('thank-you'); 864 865 // Clear the form 866 input.value = ''; 867 868 // Button stays as "Thank you" until page refresh 869 // Form remains disabled to prevent multiple submissions 870 }); 871 </script> 872 873 <!-- Scripts --> 874 <script src="../assets/js/main.js"></script> 875 <script> 876 // Fade in on load 877 document.body.classList.add('fade'); 878 window.addEventListener('DOMContentLoaded', () => { 879 document.body.classList.remove('fade'); 880 }); 881 882 // Fade out on link click 883 document.querySelectorAll('a').forEach(link => { 884 // Only for internal links 885 if (link.hostname === window.location.hostname) { 886 link.addEventListener('click', function(e) { 887 // Open in new tab or anchor links should not fade 888 if (link.target === '_blank' || link.href.includes('#')) return; 889 e.preventDefault(); 890 document.body.classList.add('fade'); 891 setTimeout(() => { 892 window.location = link.href; 893 }, 400); // match the CSS transition duration 894 }); 895 } 896 }); 897 </script> 898 </body> 899 </html>