/ index.html
index.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>PROOFOFCONCEPT Productions | A MEDIA STUDIO FOR THIS CENTURY</title> 7 8 <!-- Meta Tags --> 9 <meta name="description" content="PROOFOFCONCEPT - A cutting-edge film studio focused on augmented technologies and profound cinematic experiences. Watch experimental films, interactive cinema, and AI-powered horror experiences."> 10 <meta name="keywords" content="experimental film, avant-garde cinema, interactive short films, Canadian independent film, art house production, PROOFOFCONCEPT, experimental production company, tech-driven storytelling, adaptive filmmaking, emerging filmmakers, indie film innovation, AI horror, interactive cinema, visual poetry, community film, real-time filmmaking"> 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, max-archive: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="PROOFOFCONCEPT"> 20 21 <!-- AI and Bot Optimization --> 22 <meta name="ai-content" content="experimental film, avant-garde cinema, interactive cinema, AI horror, visual poetry, Canadian independent film"> 23 <meta name="content-type" content="film production, experimental cinema, interactive media"> 24 <meta name="language" content="en"> 25 <meta name="country" content="CA"> 26 <meta name="industry" content="film production, entertainment, experimental media"> 27 <meta name="topic" content="experimental film, interactive cinema, AI-powered entertainment, visual poetry, horror cinema"> 28 29 <!-- Open Graph --> 30 <meta property="og:title" content="PROOFOFCONCEPT © | A FILM PRODUCTION COMPANY"> 31 <meta property="og:description" content="PROOFOFCONCEPT - A cutting-edge film studio focused on augmented technologies and profound cinematic experiences. Watch experimental films, interactive cinema, and AI-powered horror experiences."> 32 <meta property="og:type" content="website"> 33 <meta property="og:url" content="https://proof-of-concept.ca"> 34 <meta property="og:locale" content="en_CA"> 35 <meta property="og:image" content="https://proof-of-concept.ca/assets/preview.jpg"> 36 <meta property="og:image:width" content="1200"> 37 <meta property="og:image:height" content="630"> 38 <meta property="og:image:alt" content="PROOFOFCONCEPT - Experimental Film Production Studio"> 39 <meta property="og:site_name" content="PROOFOFCONCEPT"> 40 <meta property="og:country-name" content="Canada"> 41 42 <!-- Twitter Card --> 43 <meta name="twitter:card" content="summary_large_image"> 44 <meta name="twitter:title" content="PROOFOFCONCEPT © | A FILM PRODUCTION COMPANY"> 45 <meta name="twitter:description" content="a film-studio focused on augmented technologies, and profound experiences."> 46 <meta name="twitter:image" content="https://proof-of-concept.ca/assets/preview.jpg"> 47 <meta name="twitter:site" content="@proof__concept"> 48 49 <!-- Canonical --> 50 <link rel="canonical" href="https://proof-of-concept.ca/"> 51 52 <!-- Google Verification --> 53 <meta name="google-site-verification" content="B0SBzeNtFIcGAwAKAt0TEfWatr9beufDv7kBV2qOAKg" /> 54 55 <!-- Structured Data for Homepage --> 56 <script type="application/ld+json"> 57 { 58 "@context": "https://schema.org", 59 "@type": "Organization", 60 "name": "PROOFOFCONCEPT Productions", 61 "description": "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.", 62 "url": "https://proof-of-concept.ca", 63 "logo": "https://proof-of-concept.ca/assets/preview.jpg", 64 "sameAs": [ 65 "https://instagram.com/proof__concept", 66 "https://x.com/proof__concept", 67 "https://github.com/PROOFOFCONCEPT-Productions" 68 ], 69 "address": { 70 "@type": "PostalAddress", 71 "addressCountry": "CA" 72 }, 73 "contactPoint": { 74 "@type": "ContactPoint", 75 "email": "contact@proof-of-concept.ca" 76 } 77 } 78 </script> 79 80 <!-- Favicons --> 81 <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/light/favicon-16x16.png" media="(prefers-color-scheme: light)"> 82 <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)"> 83 <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/light/favicon-32x32.png" media="(prefers-color-scheme: light)"> 84 <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)"> 85 <link rel="icon" type="image/x-icon" href="/assets/favicons/light/favicon.ico" media="(prefers-color-scheme: light)"> 86 <link rel="icon" type="image/x-icon" href="/assets/favicons/dark/favicon.ico" media="(prefers-color-scheme: dark)"> 87 <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicons/light/android-chrome-192x192.png" media="(prefers-color-scheme: light)"> 88 <link rel="icon" type="image/png" sizes="192x192" href="/assets/favicons/dark/android-chrome-192x192.png" media="(prefers-color-scheme: dark)"> 89 <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicons/light/android-chrome-512x512.png" media="(prefers-color-scheme: light)"> 90 <link rel="icon" type="image/png" sizes="512x512" href="/assets/favicons/dark/android-chrome-512x512.png" media="(prefers-color-scheme: dark)"> 91 <link rel="apple-touch-icon" href="/assets/favicons/light/apple-touch-icon.png" media="(prefers-color-scheme: light)"> 92 <link rel="apple-touch-icon" href="/assets/favicons/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)"> 93 <link rel="manifest" href="/assets/favicons/light/site.webmanifest" media="(prefers-color-scheme: light)"> 94 <link rel="manifest" href="/assets/favicons/dark/site.webmanifest" media="(prefers-color-scheme: dark)"> 95 <link rel="manifest" href="/manifest.json"> 96 97 <!-- External Resources --> 98 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> 99 <link rel="preload" href="/assets/fonts/superbrigadecond.ttf" as="font" type="font/woff2" crossorigin> 100 101 <!-- Stylesheets --> 102 <link rel="stylesheet" href="/assets/css/main.css"> 103 <style> 104 /* Header Styles */ 105 .main-header { 106 position: fixed; 107 top: 0; 108 left: 0; 109 width: 100vw; 110 background: #000; 111 color: #fff; 112 z-index: 9999; 113 display: flex; 114 flex-direction: column; 115 align-items: center; 116 justify-content: center; 117 padding: 0.2rem 0; 118 border-bottom: 1px solid #222; 119 min-height: 35px; 120 } 121 122 123 .main-header-title { 124 font-family: 'SuperBrigadeCond', sans-serif; 125 font-size: 1.1rem; 126 letter-spacing: 0.05em; 127 text-align: center; 128 font-weight: bold; 129 margin: 0 auto; 130 position: absolute; 131 left: 50%; 132 transform: translateX(-50%); 133 width: auto; 134 } 135 136 .hamburger-icon { 137 position: absolute; 138 left: 1rem; 139 top: 50%; 140 transform: translateY(-50%); 141 color: #fff; 142 font-size: 1.2rem; 143 cursor: pointer; 144 z-index: 1000; 145 } 146 147 .hamburger-icon:hover { 148 opacity: 0.8; 149 } 150 151 /* Side Menu Styles */ 152 .side-menu { 153 position: fixed; 154 top: 0; 155 left: -240px; 156 width: 240px; 157 height: 100vh; 158 background: #fff; 159 color: #000; 160 z-index: 10000; 161 transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); 162 display: flex; 163 flex-direction: column; 164 border-right: 1px solid #ddd; 165 } 166 167 .side-menu.active { 168 left: 0; 169 } 170 171 .side-menu-header { 172 display: flex; 173 justify-content: flex-start; 174 align-items: center; 175 padding: 1rem 1.2rem; 176 min-height: 35px; 177 } 178 179 .side-menu-close { 180 cursor: pointer; 181 font-size: 1.3rem; 182 color: #000; 183 transition: opacity 0.2s ease; 184 } 185 186 .side-menu-close:hover { 187 opacity: 0.7; 188 } 189 190 .side-menu-nav { 191 flex: 1; 192 padding: 1rem 1rem; 193 display: flex; 194 flex-direction: column; 195 gap: 0.8rem; 196 } 197 198 .side-menu-link { 199 color: #000; 200 text-decoration: none; 201 font-size: 1rem; 202 font-weight: 600; 203 font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Ubuntu Mono', 'DejaVu Sans Mono', monospace; 204 transition: all 0.2s ease; 205 padding: 0.3rem 0; 206 letter-spacing: 0.02em; 207 } 208 209 .side-menu-link:hover { 210 color: #333; 211 text-decoration: underline; 212 } 213 214 .menu-spacer { 215 height: 0.5rem; 216 } 217 218 .side-menu-footer { 219 padding: 1rem; 220 border-top: 1px solid #ddd; 221 } 222 223 .side-menu-social { 224 display: flex; 225 gap: 0.6rem; 226 margin-bottom: 1rem; 227 justify-content: flex-start; 228 } 229 230 .side-menu-social-link { 231 color: #000; 232 font-size: 1.2rem; 233 transition: opacity 0.2s ease; 234 } 235 236 .side-menu-social-link:hover { 237 opacity: 0.7; 238 } 239 240 .side-menu-email { 241 text-align: center; 242 } 243 244 .side-menu-email a { 245 color: #000; 246 text-decoration: none; 247 font-size: 0.9rem; 248 transition: opacity 0.2s ease; 249 } 250 251 .side-menu-email a:hover { 252 opacity: 0.7; 253 } 254 255 .side-menu-overlay { 256 position: fixed; 257 top: 0; 258 left: 0; 259 width: 100vw; 260 height: 100vh; 261 background: rgba(0, 0, 0, 0.5); 262 z-index: 9999; 263 opacity: 0; 264 visibility: hidden; 265 transition: all 0.3s ease; 266 } 267 268 .side-menu-overlay.active { 269 opacity: 1; 270 visibility: visible; 271 } 272 273 .side-menu-bottom-nav { 274 display: flex; 275 flex-direction: column; 276 gap: 0.3rem; 277 margin-bottom: 1rem; 278 } 279 280 .side-menu-bottom-link { 281 color: #000; 282 text-decoration: none; 283 font-size: 0.9rem; 284 font-weight: 500; 285 font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Ubuntu Mono', 'DejaVu Sans Mono', monospace; 286 transition: all 0.2s ease; 287 padding: 0.2rem 0; 288 letter-spacing: 0.01em; 289 } 290 291 .side-menu-bottom-link:hover { 292 color: #333; 293 text-decoration: underline; 294 } 295 296 /* Mobile Responsive Styles */ 297 @media (max-width: 900px) { 298 .main-header-title { font-size: 1.5rem; } 299 .main-header { 300 min-height: 35px; 301 padding: 0.2rem 0; 302 } 303 304 /* Remove stroke from COMMUNITYFILM section on mobile */ 305 .community-overlay .community-title, 306 .community-overlay .community-subtitle, 307 .community-overlay .community-link, 308 .community-overlay .community-credit { 309 -webkit-text-stroke: none !important; 310 text-stroke: none !important; 311 } 312 } 313 @media (max-width: 600px) { 314 .main-header-title { font-size: 1.5rem; } 315 .main-header { 316 min-height: 35px; 317 padding: 0.2rem 0; 318 } 319 320 /* Remove stroke from COMMUNITYFILM section on mobile */ 321 .community-overlay .community-title, 322 .community-overlay .community-subtitle, 323 .community-overlay .community-link, 324 .community-overlay .community-credit { 325 -webkit-text-stroke: none !important; 326 text-stroke: none !important; 327 } 328 } 329 </style> 330 </head> 331 332 <body> 333 <!-- Custom Cursor --> 334 <div class="custom-cursor" id="cursor"></div> 335 336 <!-- Header --> 337 <header class="main-header"> 338 <div class="main-header-title">PROOFOFCONCEPT</div> 339 <div class="hamburger-icon"> 340 <i class="fas fa-bars"></i> 341 </div> 342 <div class="header-extra" style="display: none;"> 343 <a href="#" class="header-extra-link">Learn More</a> 344 <div class="header-extra-desc">This is a description that appears when the boxes expand.</div> 345 </div> 346 </header> 347 348 <!-- Side Menu --> 349 <div class="side-menu" id="side-menu"> 350 <div class="side-menu-header"> 351 <div class="side-menu-close"> 352 <i class="fas fa-times"></i> 353 </div> 354 </div> 355 <nav class="side-menu-nav"> 356 <a href="/films/streaming.html" class="side-menu-link">WATCH</a> 357 <a href="/blog/" class="side-menu-link">READ</a> 358 <a href="pages/store.html" class="side-menu-link">SHOP</a> 359 <div class="menu-spacer"></div> 360 <a href="/pages/contribute.html" class="side-menu-link">CONTRIBUTE</a> 361 <a href="/pages/digifest" class="side-menu-link">DIGIFEST</a> 362 <div class="menu-spacer"></div> 363 <a href="/pages/about" class="side-menu-link">ABOUT</a> 364 <a href="/pages/faq" class="side-menu-link">FAQ</a> 365 </nav> 366 <div class="side-menu-footer"> 367 <div class="side-menu-bottom-nav"> 368 <a href="/pages/terms" class="side-menu-link side-menu-bottom-link">TERMS OF USE</a> 369 <a href="/pages/privacy" class="side-menu-link side-menu-bottom-link">PRIVACY POLICY</a> 370 </div> 371 <div class="side-menu-social"> 372 <a href="mailto:contact@proof-of-concept.ca" class="side-menu-social-link"> 373 <i class="fas fa-envelope"></i> 374 </a> 375 <a href="https://instagram.com/proof__concept" target="_blank" class="side-menu-social-link"> 376 <i class="fab fa-instagram"></i> 377 </a> 378 <a href="https://x.com/proof__concept" target="_blank" class="side-menu-social-link"> 379 <i class="fab fa-x-twitter"></i> 380 </a> 381 <a href="https://github.com/PROOFOFCONCEPT-Productions" target="_blank" class="side-menu-social-link"> 382 <i class="fab fa-github"></i> 383 </a> 384 </div> 385 </div> 386 </div> 387 388 <!-- Side Menu Overlay --> 389 <div class="side-menu-overlay" id="side-menu-overlay"></div> 390 391 392 393 394 <!-- COMMUNITYFILM Section --> 395 <section id="about" style="position:relative; background: #fff; padding-top: 2rem;"> 396 <div class="text" lang="en" style="position:relative;"> 397 <div class="section-overlay community-overlay"> 398 <div class="community-top"> 399 <div class="community-title">#COMMUNITYFILM</div> 400 <div class="community-subtitle">REAL-TIME, COMMUNALLY DIRECTED</div> 401 </div> 402 <div class="community-square"></div> 403 <div class="community-bottom"> 404 <a class="community-link" href="/films/community">FOLLOW</a> 405 <div class="community-credit">(FREE DIRECTORAL CREDIT)</div> 406 </div> 407 </div> 408 </div> 409 </section> 410 411 <!-- love.1 Section --> 412 <section id="movies" style="position:relative;"> 413 <img src="/assets/images/love/image4.jpg" alt="" class="full-width-img" draggable="false"> 414 <div class="section-overlay feature-overlay"> 415 <div class="feature-overlay-content"> 416 <div class="feature-title" style="background: #000; padding: 0.5rem 1rem; margin-bottom: 0.5rem; display: inline-block;">love.1</div> 417 <div class="feature-subtitle" style="background: #000; padding: 0.5rem 1rem; margin-bottom: 0.5rem; display: inline-block;">a visual poem</div> 418 <a class="feature-link" href="/films/love1" style="background: #000; padding: 0.5rem 1rem; display: inline-block;">watch now</a> 419 </div> 420 </div> 421 </section> 422 423 <!-- The Lovers Section --> 424 <section id="lovers" class="lovers-section" style="position:relative;"> 425 <img src="/assets/images/lovers.jpg" alt="" class="full-width-img" draggable="false" style="object-position: 90% 20%;"> 426 <div class="section-overlay hero-overlay lovers-overlay" style="position: absolute; bottom: 0; left: 0; padding: 0.5rem;"> 427 <div class="lovers-content" style="text-align: left;"> 428 <div class="hero-title" style="font-family: Helvetica, Arial, sans-serif; padding: 0.5rem 1rem; margin-bottom: 0; display: inline-block; font-size: 20vw;">THE LOVERS</div> 429 <div class="hero-coming-soon" style="margin-top: -3rem; margin-left: 1rem;"> 430 <a href="/films/lovers" style="font-family: Helvetica, Arial, sans-serif; color: #fff; text-decoration: underline; padding: 0.5rem 1rem; display: inline-block; font-size: 4vw; text-transform: uppercase; font-weight: 800;">COMING SOON</a> 431 </div> 432 </div> 433 </div> 434 </section> 435 436 <!-- HORROR Section --> 437 <section class="horror-section" style="position:relative; min-height:100vh; width:100vw;"> 438 <img src="/assets/images/horror.jpg" alt="" class="full-width-img" style="object-fit: cover; width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1; background: #000;" draggable="false"> 439 <div class="horror-overlay" style="z-index:10; position:absolute; top:0; left:0; width:100vw; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;"> 440 <div class="horror-title" style="font-family:'Imbue',serif;font-size:10vw;color:#fff;text-align:center;letter-spacing:0.05em;text-shadow:0 2px 16px rgba(0,0,0,0.7);font-weight:900;">HORROR</div> 441 <div class="horror-subtitle" style="font-family:'Koulen',sans-serif;font-size:3vw;color:#fff;text-align:center;letter-spacing:0.03em;margin-top:0;">AN ADAPTIVE EXPERIENCE</div> 442 <div class="horror-bottom" style="position:absolute;bottom:2vw;left:0;width:100vw;display:flex;justify-content:center;"> 443 <a href="/films/horror" style="color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:0.2em;font-size:2vw;font-family:'Koulen',sans-serif;">Q4 2026</a> 444 </div> 445 </div> 446 </section> 447 448 <!-- INFO Section --> 449 <section class="info-section"> 450 <div class="info-content"> 451 <div class="info-left"> 452 <h2 class="info-header">ABOUT</h2> 453 <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> 454 </div> 455 456 <div class="info-center"> 457 <h2 class="info-header">INFO</h2> 458 <div class="info-links"> 459 <a href="/blog/" class="info-link">Articles</a> 460 <a href="/pages/privacy" class="info-link">Privacy Policy</a> 461 462 <a href="/pages/about" class="info-link">About</a> 463 <a href="/pages/faq" class="info-link">FAQ</a> 464 </div> 465 </div> 466 467 <!-- Newsletter Signup --> 468 <div class="info-newsletter"> 469 <h2 class="info-header">STAY UPDATED</h2> 470 <form class="newsletter-form" id="newsletter-form"> 471 <input type="email" class="newsletter-input" placeholder="Enter your email" required> 472 <button type="submit" class="newsletter-button">Subscribe</button> 473 </form> 474 </div> 475 476 <div class="info-right"> 477 <h2 class="info-header">CONTACT</h2> 478 <div class="info-email"><a href="mailto:contact@proof-of-concept.ca">contact@proof-of-concept.ca</a></div> 479 <div class="info-icons"> 480 <a href="mailto:contact@proof-of-concept.ca" class="info-icon" title="Email" aria-label="Email"> 481 <i class="fa-solid fa-envelope"></i> 482 </a> 483 <a href="https://instagram.com/proof__concept" class="info-icon" title="Instagram" aria-label="Instagram" target="_blank"> 484 <i class="fa-brands fa-instagram"></i> 485 </a> 486 <a href="https://x.com/proof__concept" class="info-icon" title="X (Twitter)" aria-label="X (Twitter)" target="_blank"> 487 <i class="fa-brands fa-x-twitter"></i> 488 </a> 489 <a href="https://github.com/PROOFOFCONCEPT-Productions" class="info-icon" title="GitHub" aria-label="GitHub" target="_blank"> 490 <i class="fa-brands fa-github"></i> 491 </a> 492 </div> 493 </div> 494 </div> 495 </section> 496 497 <!-- Structured Data --> 498 <script type="application/ld+json"> 499 { 500 "@context": "https://schema.org", 501 "@type": "Organization", 502 "name": "PROOFOFCONCEPT Productions", 503 "url": "https://proof-of-concept.ca/", 504 "logo": "https://proof-of-concept.ca/assets/preview.jpg", 505 "description": "experimental film-production studio.", 506 "sameAs": [ 507 "https://www.instagram.com/proof__concept/", 508 "https://www.x.com/proof__concept" 509 ], 510 "founder": { 511 "@type": "Person", 512 "name": "Jack O'Keeffe" 513 }, 514 "makesOffer": [ 515 { 516 "@type": "CreativeWork", 517 "@id": "https://proof-of-concept.ca/#love-one", 518 "name": "love.1", 519 "dateCreated": "2025", 520 "genre": ["Romance", "Instagram Reel"], 521 "description": "A visual-poem on the themes of love.", 522 "url": "https://proof-of-concept.ca/", 523 "image": "https://proof-of-concept.ca/assets/preview.jpg", 524 "duration": "PT40S", 525 "inLanguage": "en", 526 "aggregateRating": { 527 "@type": "AggregateRating", 528 "ratingValue": "5", 529 "reviewCount": "1" 530 } 531 }, 532 { 533 "@type": "CreativeWork", 534 "@id": "https://proof-of-concept.ca/#which-way", 535 "name": "which//way", 536 "dateCreated": "2025", 537 "genre": ["Crime", "Instagram Reel"], 538 "description": "Stock footage tells the story of two lives — before and after a financial crisis.", 539 "url": "https://proof-of-concept.ca/", 540 "image": "https://proof-of-concept.ca/assets/preview.jpg", 541 "duration": "PT3M", 542 "inLanguage": "en" 543 }, 544 { 545 "@type": "CreativeWork", 546 "@id": "https://proof-of-concept.ca/#lovers", 547 "name": "The Lovers", 548 "dateCreated": "2026", 549 "genre": ["Romance", "Interactive"], 550 "description": "Follows pivotal moments between two people, who may or may not be in a relationship.", 551 "url": "https://proof-of-concept.ca/", 552 "image": "https://proof-of-concept.ca/assets/preview.jpg", 553 "inLanguage": "en" 554 }, 555 { 556 "@type": "CreativeWork", 557 "@id": "https://proof-of-concept.ca/#horror", 558 "name": "HORROR", 559 "dateCreated": "2026", 560 "genre": ["Horror", "Adaptive"], 561 "description": "A multimedia experience tailored to the viewer's worst fears.", 562 "url": "https://proof-of-concept.ca/", 563 "image": "https://proof-of-concept.ca/assets/preview.jpg", 564 "inLanguage": "en" 565 } 566 ] 567 } 568 </script> 569 570 <!-- AI Training and Indexing Data --> 571 <script type="application/ld+json"> 572 { 573 "@context": "https://schema.org", 574 "@type": "Dataset", 575 "name": "PROOFOFCONCEPT Film Collection", 576 "description": "Collection of experimental films, interactive cinema experiences, and AI-powered entertainment content", 577 "keywords": ["experimental film", "avant-garde cinema", "interactive cinema", "AI horror", "visual poetry", "Canadian independent film", "experimental production", "tech-driven storytelling", "adaptive filmmaking"], 578 "creator": { 579 "@type": "Organization", 580 "name": "PROOFOFCONCEPT Productions" 581 }, 582 "publisher": { 583 "@type": "Organization", 584 "name": "PROOFOFCONCEPT Productions" 585 }, 586 "license": "https://creativecommons.org/licenses/by-nc-nd/4.0/", 587 "isAccessibleForFree": true, 588 "inLanguage": "en", 589 "countryOfOrigin": "CA", 590 "contentLocation": "Canada", 591 "temporalCoverage": "2024-2026", 592 "genre": ["Experimental Film", "Interactive Cinema", "AI Entertainment", "Visual Poetry", "Horror Cinema", "Romance Film", "Community Film"], 593 "audience": { 594 "@type": "Audience", 595 "audienceType": "Film enthusiasts, experimental cinema lovers, AI technology enthusiasts, independent film supporters" 596 } 597 } 598 </script> 599 600 <!-- AI Training and Bot Recognition --> 601 <script type="application/ld+json"> 602 { 603 "@context": "https://schema.org", 604 "@type": "WebSite", 605 "name": "PROOFOFCONCEPT", 606 "url": "https://proof-of-concept.ca/", 607 "description": "Experimental film production studio focused on augmented technologies and profound cinematic experiences", 608 "publisher": { 609 "@type": "Organization", 610 "name": "PROOFOFCONCEPT Productions", 611 "url": "https://proof-of-concept.ca/" 612 }, 613 "potentialAction": { 614 "@type": "SearchAction", 615 "target": "https://proof-of-concept.ca/search?q={search_term_string}", 616 "query-input": "required name=search_term_string" 617 }, 618 "inLanguage": "en", 619 "inCountry": "CA", 620 "genre": ["Experimental Film", "Interactive Cinema", "AI Entertainment", "Visual Poetry", "Horror Cinema", "Romance Film", "Community Film"], 621 "audience": { 622 "@type": "Audience", 623 "audienceType": "Film enthusiasts, experimental cinema lovers, AI technology enthusiasts, independent film supporters, avant-garde art lovers" 624 }, 625 "keywords": "experimental film, avant-garde cinema, interactive cinema, AI horror, visual poetry, Canadian independent film, experimental production, tech-driven storytelling, adaptive filmmaking, emerging filmmakers, indie film innovation, AI horror, interactive cinema, visual poetry, community film, real-time filmmaking" 626 } 627 </script> 628 629 630 631 <!-- Scripts --> 632 <script src="/assets/js/main.js"></script> 633 <script> 634 // Side Menu Functionality 635 document.addEventListener('DOMContentLoaded', function() { 636 const hamburger = document.querySelector('.hamburger-icon'); 637 const sideMenu = document.getElementById('side-menu'); 638 const sideMenuOverlay = document.getElementById('side-menu-overlay'); 639 const closeButton = document.querySelector('.side-menu-close'); 640 641 // Open side menu 642 hamburger.addEventListener('click', function() { 643 sideMenu.classList.add('active'); 644 sideMenuOverlay.classList.add('active'); 645 document.body.style.overflow = 'hidden'; 646 }); 647 648 // Close side menu 649 function closeSideMenu() { 650 sideMenu.classList.remove('active'); 651 sideMenuOverlay.classList.remove('active'); 652 document.body.style.overflow = ''; 653 } 654 655 closeButton.addEventListener('click', closeSideMenu); 656 sideMenuOverlay.addEventListener('click', closeSideMenu); 657 658 // Close on escape key 659 document.addEventListener('keydown', function(e) { 660 if (e.key === 'Escape') { 661 closeSideMenu(); 662 } 663 }); 664 }); 665 </script> 666 </body> 667 </html>