1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Join New Art City</title> 6 7 <link rel="stylesheet" href="/styles/main.nac.css"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 9 10 <!-- opengraph metadata --> 11 <meta property="og:title" content="Join New Art City"> 12 <meta property="og:description" content="Virtual Art Space"> 13 <meta property="og:image" content="https://newart.city/img/top-show/nac-festival-grounds.jpg"> 14 15 <meta name="twitter:card" content="summary_large_image"> 16 <meta property="og:site_name" content="New Art City"> 17 <!-- end opengraph metadata --> 18 19 <!-- favicon metadata --> 20 <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png"> 21 <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"> 22 <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"> 23 <link rel="manifest" href="/img/favicon/site.webmanifest"> 24 <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#5bbad5"> 25 <link rel="shortcut icon" href="/img/favicon/favicon.ico"> 26 <meta name="msapplication-TileColor" content="#00aba9"> 27 <meta name="msapplication-config" content="/img/favicon/browserconfig.xml"> 28 <meta name="theme-color" content="#ffffff"> 29 <!-- end favicon metadata --> 30 31 <link rel="stylesheet" href="https://use.typekit.net/nvo2aai.css"> 32 33
33<script src='https://code.jquery.com/jquery-3.6.3.min.js'></script>
33 34
34<script src='/js/vendor/micromodal/micromodal.min.js'></script>
34 35 <!-- Cloudflare Turnstile, the bot check on the signup form --> 36 <!-- 37 Loads the Cloudflare Turnstile widget script. 38 39 Include this partial on any page that renders a `cf-turnstile` div. The guard 40 makes a second include harmless, because two contact forms or a contact form 41 and the signup form can appear on one page. 42 43 The script is async, thus it finds and renders every widget on the page after 44 it loads. The order of the script and the widget does not matter. 45-->
46<script> 47 if (!document.querySelector('script[data-turnstile-api]')) { 48 var turnstileApiScript = document.createElement('script') 49 turnstileApiScript.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js' 50 turnstileApiScript.async = true 51 turnstileApiScript.defer = true 52 turnstileApiScript.setAttribute('data-turnstile-api', '') 53 document.head.appendChild(turnstileApiScript) 54 } 55</script>
55 56 57 58 59 60</head> 61<body class='page-join public-shared'> 62 63 <div class="public-header-2023"> 64 <div class="header-content"> 65 66 <a class="logo-container" aria-label="New Art City logo" href="/"> <!-- http-urls-on-this-line-allowed-in-world-export-test --> 67 <div class="double"> 68 <span class='logo-text'>New<br>Art<br>City</span> 69 <div class="logo"></div> 70 </div> 71 <span class="subtitle">Virtual Art Space</span> 72</a> 73 74 75 76 77 78
78<script src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
78 79 80
80<script type="importmap"> 81 { 82 "imports": { 83 "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js", 84 "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/" 85 } 86 } 87 </script>
87 88 89 90
91<script type="text/javascript"> 92 93 window.dynamicImport = async (path) => { 94 // This import doesn't require an import map, so we can use the normal import 95 if (path.startsWith('.') || path.startsWith('/')) { 96 return import(path) 97 } 98 99 // importShim will automatically pass-through to the native dynamic import or polyfill as necessary 100 // https ://www.npmjs.com/package/es-module-shims 101 return importShim(path) 102 103 } 104</script>
104 105 106
107<script type="module"> 108 // setup 109 var camera = null 110 var cameraFar = 150 111 var scene = null 112 var renderer = null 113 var cube = null 114 var small = false 115 116 // Find the element that will host the canvas. 117 var canvasCtn = document.querySelector('.logo') 118 119 // render small logo when inside dash-nav 120 if( canvasCtn.closest('.dash-nav') !== null ){ 121 small = true 122 document.querySelector('.logo-container').classList.add('logo-small') 123 } 124 125 await initLogo() 126 animateLogo() 127 128 129 async function initLogo() { 130 131 // Ensure three is imported 132 const THREE = await dynamicImport(`three`) 133 134 // init scene 135 136 var width = 80 137 var height = 80 138 139 if( small ) width = height = 55 140 141 // Add canvas to the document element. 142 renderer = new THREE.WebGLRenderer({ 143 alpha: true, 144 antialias: false, 145 }) 146 renderer.setSize(width, height ) 147 renderer.setClearColor(0xededed, 0) 148 149 renderer.autoClear = false 150 151 canvasCtn.appendChild(renderer.domElement) 152 153 camera = new THREE.PerspectiveCamera( 75, width/height, 1, cameraFar ); 154 camera.position.y = 0; 155 camera.position.x = 0; 156 camera.position.z = 0; 157 158 scene = new THREE.Scene(); 159 160 var geometry = new THREE.BoxGeometry(4,4,4) 161 var material = new THREE.MeshNormalMaterial({wireframe:true}) 162 163 cube = new THREE.Mesh( geometry, material ); 164 cube.position.z = 7 165 166 scene.add(camera) 167 scene.add(cube) 168 169 camera.lookAt(cube.position) 170 171 } 172 173 function animateLogo(){ 174 175 requestAnimationFrame( animateLogo ) 176 177 cube.rotation.y += 0.002 178 cube.rotation.x -= 0.002 179 cube.rotation.z -= 0.002 180 181 renderer.render( scene, camera ) 182 183 } 184</script>
184 185 186 <div class="menu-ctn"> 187 <button class='menu-btn'> 188 <img src="/img/icons/menu.png"> 189 </button> 190 <div class="menu-dropdown"> 191 <a href="/">Home / Gallery</a> 192 <a href="/join">Join</a> 193 <a href="https://info.newart.city/about">About</a> 194 <a href="#" class='open-contact-modal'>Contact</a> 195 <a href="https://info.newart.city/">Features & Documentation</a> 196 <a href="/blog">Blog</a> 197 <a href="/support">Support New Art City</a> 198 199 <a href='/login'>Log In →</a> 200 201 <div class="social-links"> 202 <a href="https://www.instagram.com/newart.city/" target="_blank"> 203 <img src="/img/icons/instagram.svg" class='icon' alt='Instagram icon'> 204 </a> 205 <a href="https://twitter.com/new_art_city" target="_blank"> 206 <img src="/img/icons/twitter.svg" class='icon' alt='Twitter icon'> 207 </a> 208 <a href="https://www.youtube.com/channel/UCe11QowUMjLtO8h2db1tX5g" target="_blank"> 209 <img src="/img/icons/youtube.svg" class='icon' alt='Youtube icon'> 210 </a> 211 <a href="https://www.are.na/new-art-city" target="_blank"> 212 <img src="/img/icons/arena.svg" class='icon' alt='Arena icon'> 213 </a> 214 </div> 215 </div> 216 </div> 217 </div> 218</div> 219 220<!-- Modal: Contact --> 221<div class="modal micromodal-slide" id="modal-contact" aria-hidden="true"> 222 <div class="modal__overlay" tabindex="-1"> 223 <div class="modal__container"> 224 <div class="close-modal" data-micromodal-close>×</div> 225 226 <h2>Contact</h2> 227 228 <form class='contact-form'> 229 230 <label for='contact-message'> 231 <span class='form-label'>Message</span> 232 <span class="helper-text">What's on your mind?</span> 233 <textarea name='contact-message' id='contact-message'></textarea> 234 </label> 235 236 <label for='contact-email'> 237 <span class='form-label'>Email Address</span> 238 <span class="helper-text">So we can reply to you.</span> 239 <input type="email" name="contact-email" id='contact-email'> 240 </label> 241 242 <div id="contact-turnstile" class="cf-turnstile" data-sitekey="0x4AAAAAAErMkbqOubmlELot" data-theme="light" data-size="flexible" data-response-field-name="turnstileToken"></div> 243 244 <input type="hidden" name="message-type" value="New Art City contact message"> 245 <input type="hidden" name="contact-form" value="public-header-2023"> 246 <input type="submit" name="submit-contact" value="Send Message"> 247 248 </form> 249 250 251 </div> 252 </div> 253</div> 254 255<!-- Modal: Confirmation --> 256<div class="modal micromodal-slide" id="modal-confirmation" aria-hidden="true"> 257 <div class="modal__overlay" tabindex="-1"> 258 <div class="modal__container"> 259 <div class="close-modal" data-micromodal-close>×</div> 260 <h2 class='confirmation-headline'>Thanks!</h2> 261 <p class='confirmation-message'>We will get back to you as soon as possible.</p> 262 </div> 263 </div> 264</div> 265
266<script> 267 268 // jquery and micromodal must be included at the top of any page this appears on. 269 270 // menu button 271 $('.menu-btn').click((e) => { 272 $('.menu-ctn').toggleClass('active') 273 }) 274 275 // close menu when anything else is clickec 276 $('body').click((e) => { 277 if( $(e.target).closest('.menu-ctn').length == 0 ){ 278 $('.menu-ctn').removeClass('active') 279 } 280 }) 281 282 // open contact modal 283 $('body').on('click', '.open-contact-modal, [href="#contact"]', function(e) { 284 e.preventDefault() 285 $('.close-modal').click() // close any already open modal 286 MicroModal.show('modal-contact') 287 }) 288 289 // submit contact 290 $('.contact-form').submit(async function(e) { 291 292 e.preventDefault() 293 $('body').addClass('loading') 294 295 let contactResponse = await fetch('/api/messages/submit-contact', { 296 method: 'POST', 297 headers: { 'Content-type': 'application/json' }, 298 body: JSON.stringify({ 299 'contact-email': $('#contact-email').val(), 300 'contact-message': $('#contact-message').val(), 301 'turnstileToken': $('.contact-form [name=turnstileToken]').val(), 302 'contact-form': $('.contact-form [name=contact-form]').val() 303 }) 304 }) 305 306 $('body').removeClass('loading') 307 308 // handle error 309 if (!contactResponse.ok) { 310 // A token is single-use. Reset the widget so the visitor can try again. 311 if (window.turnstile) window.turnstile.reset('#contact-turnstile') 312 alert(await contactResponse.text()) 313 return 314 } 315 316 // success 317 document.querySelector('.contact-form').reset() 318 if (window.turnstile) window.turnstile.reset('#contact-turnstile') 319 $('.close-modal').click() 320 document.querySelector('.confirmation-headline').innerHTML = "Thanks!" 321 document.querySelector('.confirmation-message').innerHTML = "We will get back to you as soon as possible." 322 MicroModal.show('modal-confirmation') 323 }) 324 325</script>
325 326 327<!-- 328 Loads the Cloudflare Turnstile widget script. 329 330 Include this partial on any page that renders a `cf-turnstile` div. The guard 331 makes a second include harmless, because two contact forms or a contact form 332 and the signup form can appear on one page. 333 334 The script is async, thus it finds and renders every widget on the page after 335 it loads. The order of the script and the widget does not matter. 336-->
337<script> 338 if (!document.querySelector('script[data-turnstile-api]')) { 339 var turnstileApiScript = document.createElement('script') 340 turnstileApiScript.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js' 341 turnstileApiScript.async = true 342 turnstileApiScript.defer = true 343 turnstileApiScript.setAttribute('data-turnstile-api', '') 344 document.head.appendChild(turnstileApiScript) 345 } 346</script>
346 347 348 349 350 <div class='ctn'> 351 <div class="hero"> 352 <div class="hero-intro"> 353 <h1>New Art City is a virtual exhibition toolkit for digital art.</h1> 354 <div class="intro-pitch"> 355 <p>We are an online space for <b>artists</b>, <b>curators</b>, <b>educators</b> and <b>organizers</b> to install and publish digital art in custom 3D worlds for the web browser.</p> 356 <p>Built by a small independent team of artists and designers, New Art City's goal is to solve problems for digital artists and create an easy to use and broadly accessible space for digital art.</p> 357 </div> 358 <div class="hero-ctas"> 359 <button class='compact create-account-btn'>Create an Account</button> 360 <a href="#" class='open-video-modal'>Watch Video</a> 361 </div> 362 </div> 363 <div class="hero-slides right-side"> 364 <div class="hero-slide active"> 365 <img src="/img/promo-screenshots/alt-reality-parsons-school-of-design-the-new-school.jpeg"> 366 <a class="slide-credit" href='https://newart.city/show/alt-reality' target="_blank"> 367 <span class="show-title"> 368 <span>(alt) reality</span> 369 <img src="/img/icons/outbound.png"> 370 </span> 371 <span class="show-credit">Parsons School of Design, The New School</span> 372 </a> 373 </div> 374 <div class="hero-slide"> 375 <img src="/img/promo-screenshots/brazil-the-future-henrique-fagundes.jpeg"> 376 <a class="slide-credit" href='https://newart.city/show/brazilthefuture' target="_blank"> 377 <span class="show-title"> 378 <span>Brazil: the future</span> 379 <img src="/img/icons/outbound.png"> 380 </span> 381 <span class="show-credit">Henrique Fagundes</span> 382 </a> 383 </div> 384 <div class="hero-slide"> 385 <img src="/img/promo-screenshots/forest-of-things-manuel-tozzi.jpeg"> 386 <a class="slide-credit" href='https://newart.city/show/forest-of-things' target="_blank"> 387 <span class="show-title"> 388 <span>Forest of Things</span> 389 <img src="/img/icons/outbound.png"> 390 </span> 391 <span class="show-credit">Manuel Tozzi</span> 392 </a> 393 </div> 394 </div> 395 </div> 396 </div> 397 398 <div class="product-selling-points"> 399 <div class="ctn"> 400 <div class="triple"> 401 402 <div class="point"> 403 <div class="point-top"> 404 <div class="icon"> 405 <img src="/img/icons/3d.png"> 406 </div> 407 <h3>3D, multiplayer and customizable.</h3> 408 </div> 409 <span>Every space is designed and built by users, who include artists, curators, students and cultural organizers.</span> 410 </div> 411 <div class="point"> 412 <div class="point-top"> 413 414 <div class="icon"> 415 <img src="/img/icons/media.png"> 416 </div> 417 <h3>No coding experience required.</h3> 418 </div> 419 <span>Upload your media and arrange it with our drag and drop editor. </span> 420 </div> 421 <div class="point"> 422 <div class="point-top"> 423 <div class="icon"> 424 <img src="/img/icons/people.png"> 425 </div> 426 <h3>Built for collaboration.</h3> 427 </div> 428 <span>Install the work with friends in real time and keep everyone organized with advanced collaboration tools.</span> 429 </div> 430 431 </div> 432 </div> 433 </div> 434 435 <div class="ctn pricing-ctn"> 436 <h3 class='pricing-headline'>Pricing</h3> 437 <div class="pricing-subtext">New Art City will never put advertising on your virtual space or sell your personal data. Instead, New Art City is supported by users and partner organizations. Help us grow a new future for creative websites.</div> 438 439 <div class="pricing-toggle"> 440 <button class='pricing-toggle-btn' plan-group='individual' active='true'>Individual</button> 441 <button class='pricing-toggle-btn' plan-group='education' active='false'>Education</button> 442 <button class='pricing-toggle-btn' plan-group='commercial' active='false'>Commercial</button> 443 </div> 444 445 <div class="pricing-table plan-group-content" plan-group='individual' active='true'> 446 447 <div class="plan-card"> 448 <h4 class="plan-title">Visitor</h4> 449 <div class="plan-cost">
450 <span>Free Trial</span> 451 </div> 452 <ul class="plan-perks"> 453 454 <li>One space inside a single world</li> 455 456 <li>40mb total uploads</li> 457 458 <li>5 collaborators</li> 459 460 </ul> 461 <button class='select-plan-btn' plankey='free'>Create an Account</button> 462 </div> 463 464 <div class="plan-card"> 465 <h4 class="plan-title">Supporter</h4> 466 <div class="plan-cost"> 467 <span>$14<span class="cost-period">/Month</span></span> 468 </div> 469 <ul class="plan-perks"> 470 471 <li>Two personal worlds</li> 472 473 <li>Unlimited virtual spaces inside those worlds</li> 474 475 <li>100mb upload per space</li> 476 477 <li>10 collaborators</li> 478 479 <li>More object shapes</li> 480 481 <li>Visitor Counter</li> 482 483 <li>Livestreams</li> 484 485 <li>Scheduled openings</li> 486 487 <li>Password protected worlds</li> 488 489 <li>Archive & export your worlds</li> 490 491 </ul> 492 <button class='select-plan-btn' plankey='basic'>Create an Account</button> 493 </div> 494 495 <div class="plan-card"> 496 <h4 class="plan-title">Sustaining Member</h4> 497 <div class="plan-cost"> 498 <span>$28<span class="cost-period">/Month</span></span> 499 </div> 500 <ul class="plan-perks"> 501 502 <li>Five personal worlds</li> 503 504 <li>Unlimited virtual spaces inside those worlds</li> 505 506 <li>100mb upload per space</li> 507 508 <li>50 collaborators</li> 509 510 <li>More object shapes</li> 511 512 <li>Visitor Counter</li> 513 514 <li>Livestreams</li> 515 516 <li>Scheduled openings</li> 517 518 <li>Password protected worlds</li> 519 520 <li>Archive & export your worlds</li> 521 522 </ul> 523 <button class='select-plan-btn' plankey='pro'>Create an Account</button> 524 </div> 525 526 </div> 527 528 <div class='pricing-table plan-group-content' plan-group='education' active='false'> 529 530 <!-- <a class="plan-group-intro" href='#'>Learn more about our education features on our dedicated EDU page here.</a> --> 531 532 <div class="plan-card"> 533 <h4 class="plan-title">Single Class</h4> 534 <div class="plan-cost"> 535 <span>$500/Year</span> 536 </div> 537 <ul class="plan-perks"> 538 <li>50 Seats</li> 539 <li>Unlimited virtual spaces per seat</li> 540 <li>Invite students via single link</li> 541 <li>Organization management tools</li> 542 <li>Archive & export your 3D worlds to a web directory ZIP file</li> 543 </ul> 544 <a href="mailto:[email protected]?subject=Education inquiry (Single Class Plan)" class='button'>Get in Touch</a> 545 <!-- <button class='select-plan-btn' plankey='edu-50-seat'>Create an Account</button> --> 546 </div> 547 548 <div class="plan-card"> 549 <h4 class="plan-title">Department</h4> 550 <div class="plan-cost"> 551 <span>$2,000/Year</span> 552 </div> 553 <ul class="plan-perks"> 554 <li>250 Seats</li> 555 <li>Unlimited virtual spaces per seat</li> 556 <li>Invite students via single link</li> 557 <li>Organization management tools</li> 558 <li>Archive & export your 3D worlds to a web directory ZIP file</li> 559 </ul> 560 <a href="mailto:[email protected]?subject=Education inquiry (Department Plan)" class='button'>Get in Touch</a> 561 <!-- <button class='select-plan-btn' plankey='edu-250-seat'>Create an Account</button> --> 562 </div> 563 564 <div class="plan-card"> 565 <h4 class="plan-title">School</h4> 566 <div class="plan-cost"> 567 <span>$5,000/Year</span> 568 </div> 569 <ul class="plan-perks"> 570 <li>1,000 Seats</li> 571 <li>Unlimited virtual spaces per seat</li> 572 <li>Invite students via single link</li> 573 <li>Organization management tools</li> 574 <li>Archive & export your 3D worlds to a web directory ZIP file</li> 575 </ul> 576 <a href="mailto:[email protected]?subject=Education inquiry (School Plan)" class='button'>Get in Touch</a> 577 <!-- <button class='select-plan-btn' plankey='edu-1000-seat'>Create an Account</button> --> 578 </div> 579 580 </div> 581 <div class='plan-group-content' plan-group='commercial' active='false'> 582 <div class="plan-card"> 583 <h4 class="plan-title">Commercial Projects</h4> 584 <div class="plan-cost">
585 <span>Variable Pricing</span> 586 </div> 587 <p>New Art City can be used as a white-labeled virtual multiplayer space for your for-profit projects and client work. We also offer build-out and consulting services.</p> 588 <p>Let's discuss your work and how we can help.</p> 589 <a href="mailto:[email protected]?subject=Commercial inquiry" class='button'>Get in Touch</a> 590 </div> 591 </div> 592 593 <div class="pricing-subtext"><a href='/support'>Want to support our mission without creating an account?</a></div> 594 595</div> 596 597 <div class="ctn features-double-ctn"> 598 <div class="join-double"> 599 <div class="image-ctn promo-slides"> 600 601 <div class="promo-slide active"> 602 <img src="/img/promo-screenshots/landscapes-khk-kassel.jpg"> 603 <a href='https://newart.city/show/landscapes' target="_blank" class="slide-credit"> 604 <span class="show-title"> 605 <span>Landscapes</span> 606 <img src="/img/icons/outbound.png"> 607 </span> 608 <span class="show-credit">KHK Kassel: Newmedia, Games & Animation</span> 609 </a> 610 </div> 611 612 <div class="promo-slide"> 613 <img src="/img/promo-screenshots/3-minutes-to-midnight-sophie-rogers-and-deformal.jpeg"> 614 <a href='https://newart.city/show/sophie-rogers' target="_blank" class="slide-credit"> 615 <span class="show-title"> 616 <span>3 Minutes to Midnight</span> 617 <img src="/img/icons/outbound.png"> 618 </span> 619 <span class="show-credit">Sophie Rogers & De:Formal</span> 620 </a> 621 </div> 622 623 <div class="promo-slide"> 624 <img src="/img/promo-screenshots/reconsider-flesh-output-field.jpeg"> 625 <a href='https://newart.city/show/reconsiderflesh' target="_blank" class="slide-credit"> 626 <span class="show-title"> 627 <span>Reconsider Flesh</span> 628 <img src="/img/icons/outbound.png"> 629 </span> 630 <span class="show-credit">Output Field</span> 631 </a> 632 </div> 633 634 635 </div> 636 <div class="features-ctn"> 637 <h2>Artist-Focused Gallery Features</h2> 638 <div class="features-table"> 639 <div class="row full-width"> 640 <img src="/img/icons/devices.png"> 641 <span>Visitors can quickly access your work on desktop and mobile without signing up, logging in or downloading.</span> 642 </div> 643 <div class="row"> 644 <img src="/img/icons/people.png"> 645 <span>Upload art and install together with friends.</span> 646 </div> 647 <div class="row"> 648 <img src="/img/icons/livestream.png"> 649 <span>Livestream performances in 3D.</span> 650 </div> 651 <div class="row"> 652 <img src="/img/icons/camera.png"> 653 <span>Collect documentation with crowd-sourced screenshots.</span> 654 </div> 655 <div class="row"> 656 <img src="/img/icons/group.png"> 657 <span>Host up to 300 simultaneous visitors for large events.</span> 658 </div> 659 <div class="row"> 660 <img src="/img/icons/heart-outline.png"> 661 <span>Ask for donations before entering a space.</span> 662 </div> 663 <div class="row"> 664 <img src="/img/icons/chat-dark.png"> 665 <span>Collect notes or feedback in the guestbook.</span> 666 </div> 667 </div> 668 </div> 669 </div> 670 </div> 671 672 <div class="ctn"> 673 <h3 class='section-headline'>Frequently Asked Questions</h3> 674 <div class="faq-ctn"> 675 <div class="faq-item"> 676 <span class='faq-question'>What happens to my artwork when I cancel my membership?</span> 677 <span class='faq-answer'> 678 <p>The only thing that changes when you cancel your membership is you lose edit access to your space. If your world has been published, it will remain accessible indefinitely from the normal URL. You will regain edit access if you sign back up.</p> 679 </span> 680 </div> 681 682 <div class="faq-item">
683 <span class='faq-question'>Are virtual exhibitions accessible to everyone?</span> 684 <span class='faq-answer'><p>Our no-code editor makes it easy for anybody to build a 3D website regardless of prior experience with 3D modeling or game design. Anybody can visit a New Art City exhibition after it is published using web browsers and mobile devices. Our catalog view is designed to be accessible for visitors who use screen readers.</p></span> 685 </div> 686 687 <div class="faq-item"> 688 <span class='faq-question'>What is the difference between a space and a world in New Art City?</span> 689 <span class='faq-answer'><p>Worlds are containers for spaces. For exhibitions which require more than one 3D space, they are grouped within worlds. For example each artist in a group show could have a space in a world for the exhibition, or artworks could be grouped thematically in different spaces.</p></span> 690 </div> 691 692 <div class="faq-item"> 693 <span class='faq-question'>Which exhibitions are posted to the homepage?</span> 694 <span class='faq-answer'><p>While all published exhibitions are available at their URLs, the shows on the New Art City homepage are subject to our curatorial discretion. Submit your space for review and promotion and we will promote work which meets our curation goals.</p></span> 695 </div> 696 697 <div class="faq-item"> 698 <span class='faq-question'>Can I sell my art on New Art City?</span> 699 <span class='faq-answer'><p>We have no built-in tools for e-commerce or NFT sales, but each artwork object on New Art City has a hyperlink field which allows you to link to any external site where you are selling your work.</p></span> 700 </div> 701 702 <div class="faq-item"> 703 <span class='faq-question'>What are the communication features?</span> 704 <span class='faq-answer'><p>When you sign up and create a handle, it becomes visible over your avatar and in the chat window of each space. Every space has a built in group chat, and a guestbook where visitors can leave comments and screenshots taken in the space.</p></span> 705 </div> 706 707 <div class="faq-item"> 708 <span class='faq-question'>What does my membership contribution to new New Art City support?</span> 709 <span class='faq-answer'><p>Support from our users enables us to continue building the core functionality of the toolkit. We also reinvest contributions to develop our artist residency and accessibility program.</p></span> 710 </div> 711 </div> 712 </div> 713 714 <div class="footer"> 715 <div class="ctn"> 716 717 <div class="social-links"> 718 <a href="https://www.instagram.com/newart.city/" target="_blank"> 719 <img src="/img/icons/instagram.svg" class='icon' alt='Instagram icon'> 720 </a> 721 <a href="https://twitter.com/new_art_city" target="_blank"> 722 <img src="/img/icons/twitter.svg" class='icon' alt='Twitter icon'> 723 </a> 724 <a href="https://www.youtube.com/channel/UCe11QowUMjLtO8h2db1tX5g" target="_blank"> 725 <img src="/img/icons/youtube.svg" class='icon' alt='Youtube icon'> 726 </a> 727 <a href="https://www.are.na/new-art-city" target="_blank"> 728 <img src="/img/icons/arena.svg" class='icon' alt='Arena icon'> 729 </a> 730 </div> 731 </div> 732 </div> 733 734 <!-- Select Plan Modal --> 735 <!-- ( same HTML as pricing above ) --> 736 <div class="modal micromodal-slide" id="modal-select-plan" aria-hidden="true"> 737 <div class="modal__overlay" tabindex="-1"> 738 <div class="modal__container"> 739 <div class="close-modal" data-micromodal-close >×</div> 740 <div class="ctn pricing-ctn"> 741 <h3 class='pricing-headline'>Pricing</h3> 742 <div class="pricing-subtext">New Art City will never put advertising on your virtual space or sell your personal data. Instead, New Art City is supported by users and partner organizations. Help us grow a new future for creative websites.</div> 743 744 <div class="pricing-toggle"> 745 <button class='pricing-toggle-btn' plan-group='individual' active='true'>Individual</button> 746 <button class='pricing-toggle-btn' plan-group='education' active='false'>Education</button> 747 <button class='pricing-toggle-btn' plan-group='commercial' active='false'>Commercial</button> 748 </div> 749 750 <div class="pricing-table plan-group-content" plan-group='individual' active='true'> 751 752 <div class="plan-card"> 753 <h4 class="plan-title">Visitor</h4> 754 <div class="plan-cost">
755 <span>Free Trial</span> 756 </div> 757 <ul class="plan-perks"> 758 759 <li>One space inside a single world</li> 760 761 <li>40mb total uploads</li> 762 763 <li>5 collaborators</li> 764 765 </ul> 766 <button class='select-plan-btn' plankey='free'>Create an Account</button> 767 </div> 768 769 <div class="plan-card"> 770 <h4 class="plan-title">Supporter</h4> 771 <div class="plan-cost"> 772 <span>$14<span class="cost-period">/Month</span></span> 773 </div> 774 <ul class="plan-perks"> 775 776 <li>Two personal worlds</li> 777 778 <li>Unlimited virtual spaces inside those worlds</li> 779 780 <li>100mb upload per space</li> 781 782 <li>10 collaborators</li> 783 784 <li>More object shapes</li> 785 786 <li>Visitor Counter</li> 787 788 <li>Livestreams</li> 789 790 <li>Scheduled openings</li> 791 792 <li>Password protected worlds</li> 793 794 <li>Archive & export your worlds</li> 795 796 </ul> 797 <button class='select-plan-btn' plankey='basic'>Create an Account</button> 798 </div> 799 800 <div class="plan-card"> 801 <h4 class="plan-title">Sustaining Member</h4> 802 <div class="plan-cost"> 803 <span>$28<span class="cost-period">/Month</span></span> 804 </div> 805 <ul class="plan-perks"> 806 807 <li>Five personal worlds</li> 808 809 <li>Unlimited virtual spaces inside those worlds</li> 810 811 <li>100mb upload per space</li> 812 813 <li>50 collaborators</li> 814 815 <li>More object shapes</li> 816 817 <li>Visitor Counter</li> 818 819 <li>Livestreams</li> 820 821 <li>Scheduled openings</li> 822 823 <li>Password protected worlds</li> 824 825 <li>Archive & export your worlds</li> 826 827 </ul> 828 <button class='select-plan-btn' plankey='pro'>Create an Account</button> 829 </div> 830 831 </div> 832 833 <div class='pricing-table plan-group-content' plan-group='education' active='false'> 834 835 <!-- <a class="plan-group-intro" href='#'>Learn more about our education features on our dedicated EDU page here.</a> --> 836 837 <div class="plan-card"> 838 <h4 class="plan-title">Single Class</h4> 839 <div class="plan-cost"> 840 <span>$500/Year</span> 841 </div> 842 <ul class="plan-perks"> 843 <li>50 Seats</li> 844 <li>Unlimited virtual spaces per seat</li> 845 <li>Invite students via single link</li> 846 <li>Organization management tools</li> 847 <li>Archive & export your 3D worlds to a web directory ZIP file</li> 848 </ul> 849 <a href="mailto:[email protected]?subject=Education inquiry (Single Class Plan)" class='button'>Get in Touch</a> 850 <!-- <button class='select-plan-btn' plankey='edu-50-seat'>Create an Account</button> --> 851 </div> 852 853 <div class="plan-card"> 854 <h4 class="plan-title">Department</h4> 855 <div class="plan-cost"> 856 <span>$2,000/Year</span> 857 </div> 858 <ul class="plan-perks"> 859 <li>250 Seats</li> 860 <li>Unlimited virtual spaces per seat</li> 861 <li>Invite students via single link</li> 862 <li>Organization management tools</li> 863 <li>Archive & export your 3D worlds to a web directory ZIP file</li> 864 </ul> 865 <a href="mailto:[email protected]?subject=Education inquiry (Department Plan)" class='button'>Get in Touch</a> 866 <!-- <button class='select-plan-btn' plankey='edu-250-seat'>Create an Account</button> --> 867 </div> 868 869 <div class="plan-card"> 870 <h4 class="plan-title">School</h4> 871 <div class="plan-cost"> 872 <span>$5,000/Year</span> 873 </div> 874 <ul class="plan-perks"> 875 <li>1,000 Seats</li> 876 <li>Unlimited virtual spaces per seat</li> 877 <li>Invite students via single link</li> 878 <li>Organization management tools</li> 879 <li>Archive & export your 3D worlds to a web directory ZIP file</li> 880 </ul> 881 <a href="mailto:[email protected]?subject=Education inquiry (School Plan)" class='button'>Get in Touch</a> 882 <!-- <button class='select-plan-btn' plankey='edu-1000-seat'>Create an Account</button> --> 883 </div> 884 885 </div> 886 <div class='plan-group-content' plan-group='commercial' active='false'> 887 <div class="plan-card"> 888 <h4 class="plan-title">Commercial Projects</h4> 889 <div class="plan-cost">
890 <span>Variable Pricing</span> 891 </div> 892 <p>New Art City can be used as a white-labeled virtual multiplayer space for your for-profit projects and client work. We also offer build-out and consulting services.</p> 893 <p>Let's discuss your work and how we can help.</p> 894 <a href="mailto:[email protected]?subject=Commercial inquiry" class='button'>Get in Touch</a> 895 </div> 896 </div> 897 898 <div class="pricing-subtext"><a href='/support'>Want to support our mission without creating an account?</a></div> 899 900</div> 901 </div> 902 </div> 903 </div> 904 905 <!-- Register Modal --> 906<div class="modal micromodal-slide" id="modal-register" aria-hidden="true"> 907 <div class="modal__overlay" tabindex="-1"> 908 <div class="modal__container"> 909 <form class='join-step-1'> 910 911 <h2 class='register-header'>Join New Art City</h2> 912 <div class="close-modal" data-micromodal-close >×</div> 913 914 <div class="register-layout"> 915 <div class="register-left"> 916 <label> 917 <div class="form-label-ctn"> 918 <div class='form-label'>Your Name</div> 919 <div class="helper-text">This will be visible in your profile.</div> 920 </div> 921 <input 922 type="text" 923 name="name" 924 maxlength="30" 925 placeholder="Your Name"> 926 </label> 927 928 <label for="username"> 929 <div class="form-label-ctn"> 930 <div class='form-label'>Username</div> 931 <div class="helper-text">This will appear in your profile URL.</div> 932 </div> 933 <input 934 id='username' 935 type="text" 936 name="username" 937 maxlength="16" 938 autocomplete="new-password" 939 placeholder="username"> 940 </label> 941 942 <label for="email"> 943 <div class='form-label'>Email Address</div> 944 <input 945 type="email" 946 id="email" 947 name="email" 948 autocomplete="new-password" 949 placeholder="Email"> 950 </label> 951 952 <label for="password"> 953 <div class='form-label'>Password</div> 954 <input 955 type="password" 956 id="password" 957 name="password" 958 placeholder="Password" 959 autocomplete="new-password" 960 minlength="6"> 961 </label> 962 963 </div> 964 <div class="register-right"> 965 966 <h3>Basic Terms</h3> 967 968 <div class="terms"> 969 <ul> 970 <li>We will never sell your user data or your visitor data to any third parties.</li> 971 <li>You maintain your ownership of anything you upload.</li> 972 <li>We may promote your work and we may use your work to promote New Art City.</li> 973 </ul> 974 975 <div class="full-terms"> 976 <a href="https://info.newart.city/terms-of-use" target='_blank'>Read the Full Terms of Use</a> 977 </div> 978 979 <label class="checkbox-row"> 980 <input type="checkbox" class='terms-agreed'> 981 <div>I agree to the terms of use.</div> 982 </label> 983 984 <div class="cf-turnstile" data-sitekey="0x4AAAAAAErMkbqOubmlELot" data-theme="light" data-size="flexible"></div> 985 986 </div> 987 988 <br> 989 990 <input type="submit" value='Continue'> 991 992 </div> 993 </div> 994 <div class="form-error"></div> 995 996 </form> 997 </div> 998 </div> 999</div> 1000 1001 <!-- Modal: Video --> 1002 <div class="modal micromodal-slide" id="modal-video" aria-hidden="true"> 1003 <div class="modal__overlay" tabindex="-1"> 1004 <div class="modal__container"> 1005 <div class="close-modal" data-micromodal-close >×</div> 1006 <iframe src="https://www.youtube-nocookie.com/embed/8PwwJctp1XY" frameborder="0" allowfullscreen class='nac-video'></iframe> 1007 </div> 1008 </div> 1009 </div> 1010 1011
1011<script> 1012 1013 window.planKey = 'free' 1014 1015 // prevent a mousedown event on modal container then mouseup 1016 // on modal overlay from triggering modal close: 1017 // 1. on overlay mouse down close modal 1018 $('body').on('mousedown', '.modal__overlay', function(e) { 1019 var modalId = $(this).parent().attr('id') 1020 MicroModal.close(modalId) 1021 }) 1022 // 2. stop modal container from passing its click event to overlay 1023 $('body').on('mousedown', '.modal__container', function(e) { 1024 e.stopPropagation() 1025 }) 1026 1027 // plan group switcher 1028 $('.pricing-toggle-btn').click(function(){ 1029 $('[plan-group]').attr('active','false') 1030 let planGroup = $(this).attr('plan-group') 1031 $(`[plan-group=${planGroup}]`).attr('active','true') 1032 }) 1033 1034 // Create account button (open select plan modal) 1035 $('.create-account-btn').click(function(e){ 1036 e.preventDefault() 1037 $('.close-modal').click() // close any already open modal 1038 MicroModal.show('modal-select-plan') 1039 }) 1040 1041 // select plan buttons (open register modal) 1042 $('.select-plan-btn').click(function(e){ 1043 e.preventDefault() 1044 window.planKey = $(this).attr('plankey') 1045 1046 try{ 1047 MicroModal.close('modal-select-plan') 1048 }catch(e){ 1049 // do nothing 1050 } 1051 1052 MicroModal.show('modal-register') 1053 }) 1054 1055 // autofill username 1056 $('form.join-step-1 input[name=name]').on('input',function(){ 1057 let name = $(this).val() 1058 let username = name.replace(/[^a-zA-Z0-9]/g,'-').toLowerCase() 1059 $('form.join-step-1 input[name=username]').val(username) 1060 }) 1061 1062 // auto slug username 1063 $('form.join-step-1 input[name=username]').on('change',function(){ 1064 let username = $(this).val() 1065 let slug = username.replace(/[^a-zA-Z0-9]/g,'-').toLowerCase() 1066 $('form.join-step-1 input[name=username]').val(slug) 1067 }) 1068 1069 // submit register 1070 $('.join-step-1').submit(async function(e) { 1071 1072 e.preventDefault() 1073 $('.form-error').hide() 1074 1075 $('.terms-agreed').parent().removeClass('highlighted') 1076 if ($('.terms-agreed').prop('checked') == false) { 1077 $('.terms-agreed').parent().addClass('highlighted') 1078 return 1079 } 1080 1081 $('body').addClass('loading') 1082 1083 let newUserResponse = await fetch('/api/users/new-user', { 1084 method: 'POST', 1085 headers: { 'Content-type': 'application/json' }, 1086 body: JSON.stringify({ 1087 email: $('#email').val(), 1088 password: $('#password').val(), 1089 name: $('input[name=name]').val(), 1090 username: $('#username').val(), 1091 turnstileToken: $('form.join-step-1 [name=cf-turnstile-response]').val(), 1092 }) 1093 }) 1094 1095 // handle error 1096 if (!newUserResponse.ok) { 1097 $('body').removeClass('loading') 1098 $('.form-error').show().html(await newUserResponse.text()) 1099 // A Turnstile token is single-use. Reset the widget so the user can retry. 1100 if (window.turnstile) window.turnstile.reset() 1101 return 1102 } 1103 1104 // skip a payment for free plan 1105 if (window.planKey == 'free') { 1106 // Signup Step 2 - Free Plan Chosen 1107 // window.fathom?.trackGoal('2Z3KUPHO', 0); 1108 window.location.href = '/dashboard/new-world?onboarding' 1109 return 1110 } 1111 1112 // Signup Step 2 - Paid Plan Chosen 1113 // window.fathom?.trackGoal('4IIFM6V9', 0); 1114 1115 // retrieve a checkout session 1116 // then redirect to checkout 1117 let checkoutResponse = await fetch('/api/payments/new-subscription-checkout-session', { 1118 method: 'POST', 1119 headers: { 'Content-type': 'application/json' }, 1120 body: JSON.stringify({ 1121 planKey, 1122 successUrl: '/dashboard/new-world?onboarding' 1123 }) 1124 }) 1125 1126 if (checkoutResponse.ok) { 1127 let { checkoutSessionUrl } = await checkoutResponse.json() 1128 window.location.href = checkoutSessionUrl 1129 } else { 1130 console.log(await checkoutResponse.text()) 1131 alert("There was an error setting up your account. Our team has been notified to correct this issue.") 1132 $('body').removeClass('loading') 1133 } 1134 }) 1135 1136 // watch video modal 1137 $('.open-video-modal').click((e) => { 1138 e.preventDefault() 1139 $('.close-modal').click() // close any already open modal 1140 MicroModal.show('modal-video',{ 1141 onClose: () => { 1142 // reset youtube videos when modal closes 1143 let src = $('.nac-video').attr('src') 1144 $('.nac-video').attr('src',src) 1145 } 1146 }) 1147 }) 1148 1149 // hero slideshow 1150 let numSlides = $('.hero-slide').length 1151 let slideIndex = 1 1152 setInterval(() => { 1153 $('.hero-slide').removeClass('active') 1154 $('.hero-slide').eq(slideIndex).addClass('active') 1155 slideIndex++ 1156 if( slideIndex >= numSlides ) slideIndex = 0 1157 },5000) 1158 1159 // promo slideshow 1160 let numSlides2 = $('.promo-slide').length 1161 let slideIndex2 = 1 1162 setInterval(() => { 1163 $('.promo-slide').removeClass('active') 1164 $('.promo-slide').eq(slideIndex2).addClass('active') 1165 slideIndex2++ 1166 if( slideIndex2 >= numSlides2 ) slideIndex2 = 0 1167 },5000) 1168 1169 </script>
1169 1170
1170<script src="https://cdn.usefathom.com/script.js" data-site="EKBJVRUJ" defer></script>
1170 1171 1172 1173 1174</body> 1175</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.