JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<tw-passagedata pid="1" name="初始页面" tags="" position="500,300" size="100,100"> :: start <div id="contain"> <div class='wrap' id='wrap1'> <div class='ball' id='ball1'></div> </div> <div class='wrap' id='wrap2'> <div class='ball' id='ball2'></div> </div> <div class='wrap' id='wrap3'> <div class='ball' id='ball3'></div> </div> <div class='wrap' id='wrap4'> <div class='ball' id='ball4'></div> </div> <div class='wrap' id='wrap5'> <div class='ball' id='ball5'></div> </div> </div> Character Background Synopsis: At the prestigious Aetheris Institute of Creative Technologies, three paths converged: Lena Voss (The Designer) – A visionary product design major known for her "neon-gothic" aesthetic fusion. By day, she dominated the augmented reality lab, crafting wearable tech that blended Elizabethan silhouettes with circuit board patterns. Her dorm walls glowed with mood-shifting LED murals that reacted to biometric data. Kai Nakamura (The Programmer) – A neurodivergent AI research prodigy who spoke fluent Python but struggled with small talk. His dorm room housed a custom-built quantum computing cluster that illegally tapped into the campus power grid. He secretly trained a GPT-7 instance on 15th-century love poetry, which he’d later use to algorithmically generate flirtatious texts to Lena. Dr. Elara Vorn (The Lover/Professor) – The enigmatic robotics professor whose titanium prosthetic arm (her own design) contained a hidden cocktail mixer. Her "Ethics of Machine Sentience" lectures became underground sensation after students discovered her moonlighting as lead composer for a vaporwave synth-pop band. The campus rumor mill insisted she was both Lena’s secret mentor and Kai’s unknowing muse. Welcome to the story of 'Love'! Please choose your role： <<set $playerRole = "">> <<set $score = 0>> <<set $time = 0>> <<set $novaAffection = 0>> <<set $nightVisitCount = 0>> [[role a->a]] [[role b->b]] <div style="text-align: center; margin-top: 20px;"> <a href="AI.html" style="color: #ff69b4; text-decoration: none; font-size: 16px; transition: all 0.3s ease;"> <span style="display: inline-block; padding: 8px 16px; border: 2px solid #ff69b4; border-radius: 20px; background: rgba(255, 255, 255, 0.1);"> role C </span> </a> </div> <div style="text-align: center; margin-top: 20px;"> <a href="Building.html" style="color: #ff69b4; text-decoration: none; font-size: 16px; transition: all 0.3s ease;"> <span style="display: inline-block; padding: 8px 16px; border: 2px solid #ff69b4; border-radius: 20px; background: rgba(255, 255, 255, 0.1);"> role D </span> </a> </div> </tw-passagedata> <img src="img/title.png" width="50%" height="50%">\ <<audio "pp" volume 0.5 play>> <style> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} #contain { width: 200px; height: 50px; position: absolute; top: calc(50% + 50px); left: calc(50% + 50px); opacity: 0; animation: fadeIn 1s 1; animation-fill-mode: forwards; -webkit-animation: fadeIn 1s 1; -webkit-animation-fill-mode: forwards; } .wrap { animation: translateX 1000ms infinite ease-in-out alternate; -webkit-animation: translateX 1000ms infinite ease-in-out alternate; position: absolute; } .ball { width: 50px; height: 50px; box-shadow: -6.25px -6.25px 0 rgba(0, 0, 0, 0.1) inset; background-color: #397BF9; border-radius: 50%; animation: translateY 500ms infinite ease-in-out alternate; -webkit-animation: translateY 500ms infinite ease-in-out alternate; } .wrap:after { content: ''; width: 50px; height: 7.5px; background: #eee; position: absolute; bottom: 0; top: 70px; border-radius: 50%; animation: scale 500ms infinite ease-in-out alternate; -webkit-animation: scale 500ms infinite ease-in-out alternate; } #wrap2, #ball2, #wrap2:after { animation-delay: -400ms; -webkit-animation-delay: -400ms; } #wrap3, #ball3, #wrap3:after { animation-delay: -800ms; -webkit-animation-delay: -800ms; } #wrap4, #ball4, #wrap4:after { animation-delay: -1200ms; -webkit-animation-delay: -1200ms; } #wrap5, #ball5, #wrap5:after { animation-delay: -1600ms; -webkit-animation-delay: -1600ms; } #ball2 { background-color: #F4B400; } #ball3 { background-color: #EEEEEE; } #ball4 { background-color: #00A656; } #ball5 { background-color: #E3746B; } @keyframes translateX { 100% { transform: translateX(-150px); } } @keyframes translateY { 100% { transform: translateY(-187.5px); } } @keyframes scale { 100% { transform: scale(0.85); } } @keyframes fadeIn { 100% { opacity: 1; } } @-webkit-keyframes translateX { 100% { transform: translateX(-150px); } } @-webkit-keyframes translateY { 100% { transform: translateY(-187.5px); } } @-webkit-keyframes scale { 100% { transform: scale(0.85); } } @-webkit-keyframes fadeIn { 100% { opacity: 1; } } </style>
<tw-passagedata pid="2" name="a" tags="" position="700,300" size="100,100"> :: Player character A <<set $playerRole = "程序员">> You have chosen player character A, a witty and humorous programmer. <<set $playerRole = "程序员">> [[enter->场景一]] </tw-passagedata> <img src="img/cheng.png" width="50%" height="200">\
<tw-passagedata pid="3" name="b" tags="" position="700,400" size="100,100"> ::Player character B <<set $playerRole = "设计师">> You have chosen player character B, a gentle and artistically gifted designer. <<set $playerRole = "设计师">> [[enter->友好问候]] </tw-passagedata> <img src="img/sheji.png" width="50%" height="50%">\
<tw-passagedata pid="4" name="场景一" tags="" position="700,500" size="100,100"> :: scene 1 <div class="glitch-effect "> You walk into the AI Emotion Lab and see a shining AI assistant waiting for you. AI Assistant: Hello, welcome to the AI Emotion Lab! I am Nova, your AI assistant. Please choose your initial action: </div> <canvas id="c"></canvas> 1. <<link "Friendly greetings">><<goto "友好问候">><</link>> 2. <<link "interrogative function">><<goto "询问功能">><</link>> </tw-passagedata> <style> .status-panel { position: fixed; right: 20px; top: 20px; background: rgba(0,0,0,0.8); padding: 15px; border-radius: 10px; } .scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; } canvas { left: 80%; margin: -200px 0 0 -200px; position: absolute; top: 70%; } .glitch-effect { animation: glitch 1s infinite; color: #bb88ff; } @keyframes glitch { 0% { text-shadow: 2px 0 red; } 50% { clip-path: inset(40% 0 30% 0); } 100% { transform: skew(15deg); } } </style> <script> var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); h=400;p=[];j=0;k=0;u=0;m=Math;q=function(e,b){return~~(m.random()*(b-e+1)+e)};d="Infinity";c.width=400;c.height=h;document.bgColor="#111";c.style.background="#000";c.addEventListener("mousemove",function(e){j=m.floor(e.pageX-c.offsetLeft-200);k=m.floor(e.pageY-c.offsetTop-h/2);e=-(-k/-j);u=m.floor(m.atan(e)*(180/m.PI));0>j&&0>k&&(u+=180);0>j&&0<k&&(u+=180);0<j&&0<k&&(u+=360);0>k&&e=="-"+d&&(u=90);0<k&&e==d&&(u=270);0>j&&"0"==e&&(u=180);isNaN(u)&&(u=0)});setInterval(function(){a.fillStyle="rgba(0,0,0,.1)";a.fillRect(0,0,400,h);var e=p.length;if(200>e)for(var b=200-e;b--;)p.push({a:q(25,350)/100,x:200,y:h/2,d:q(0,360),b:q(-75,75)/100,c:q(-40,40)});for(;e--;){b=p[e];a.beginPath();a.arc(b.x,b.y,b.a,0,2*m.PI);a.moveTo(200,h/2);a.lineTo(b.x,b.y);a.fillStyle="hsl("+(u+b.c)+",100%,50%)";a.fill();a.strokeStyle="hsla("+(u+b.c)+",100%,50%,.05)";a.stroke();b.a-=0.02;var f=b.d*m.PI/180,g=m.sin(f)*b.b;b.x+=m.cos(f)*b.b+j*b.a/175;b.y+=g+k*b.a/175;(b.y-b.a>h||b.y<-b.a||b.x>400+b.a||b.x<-b.a||0>b.a)&&p.splice(e,1)}},5); </script>
<tw-passagedata pid="5" name="友好问候" tags="" position="575,500" size="100,100"> :: Friendly greetings <div class="parallax-bg">１</div> <div class="scrollbox">5</div> <div class="parallax-bg">２</div> You smiled and said to Nova, 'Hello Nova!'! Nice to meet you Nova： Hello! Nice to meet you, too. Please tell me, what do you want to experience today? Nova： Hello! nice to meet you. I am the AI assistant here. Is there anything I can help you with? Do you have any special features for AI and emotion simulation<</ link>> -Nova: I can simulate various emotional scenarios to help people better understand and handle emotional issues. Do you want to give it a try? I am very interested in AI and emotional simulation<</ link>> -Nova: Really? So we have a lot to talk about! Your interest is really great! [[enter->场景2]] [[enter new ->select]] <style> /*固定する背景*/ .parallax-bg { background-image: url('https://image.woshipm.com/wp-files/2019/10/RzfaT1v5hk7aQi0DhG4G.jpg'); background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; } /*スクロールするコンテンツ*/ .scrollbox { background-color: #111; } </style> </tw-passagedata>
<tw-passagedata pid="6" name="询问功能" tags="" position="1025,400" size="100,100"> :: interrogative function You asked Nova about its features. Nova： I can simulate different emotional scenarios to help you understand emotional communication. Please choose the scene that interests you 1. <<link "Work scenario">><<goto "工作场景">><</link>> 2. <<link "Social scene">><<goto "社交场景">><</link>> </tw-passagedata>
<tw-passagedata pid="7" name="select" tags="" position="825,200" size="100,100"> :: Select Scene Nova provides you with several emotional simulation scenarios, please choose: 1. <<link "Work scenario">><<goto "工作场景">><</link>> 2. <<link "Social scene">><<goto "社交场景">><</link>> 3. <<link "Go to Sakura Park">> <<goto "樱花公园夜谈">><</link>> 2. <<link "Go to movie">><<goto "superman">><</link>> </tw-passagedata> <canvas id="c"></canvas> <style> canvas { left: 80%; margin: -200px 0 0 -200px; position: absolute; top: 70%; } </style> <script> var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); h=400;p=[];j=0;k=0;u=0;m=Math;q=function(e,b){return~~(m.random()*(b-e+1)+e)};d="Infinity";c.width=400;c.height=h;document.bgColor="#111";c.style.background="#000";c.addEventListener("mousemove",function(e){j=m.floor(e.pageX-c.offsetLeft-200);k=m.floor(e.pageY-c.offsetTop-h/2);e=-(-k/-j);u=m.floor(m.atan(e)*(180/m.PI));0>j&&0>k&&(u+=180);0>j&&0<k&&(u+=180);0<j&&0<k&&(u+=360);0>k&&e=="-"+d&&(u=90);0<k&&e==d&&(u=270);0>j&&"0"==e&&(u=180);isNaN(u)&&(u=0)});setInterval(function(){a.fillStyle="rgba(0,0,0,.1)";a.fillRect(0,0,400,h);var e=p.length;if(200>e)for(var b=200-e;b--;)p.push({a:q(25,350)/100,x:200,y:h/2,d:q(0,360),b:q(-75,75)/100,c:q(-40,40)});for(;e--;){b=p[e];a.beginPath();a.arc(b.x,b.y,b.a,0,2*m.PI);a.moveTo(200,h/2);a.lineTo(b.x,b.y);a.fillStyle="hsl("+(u+b.c)+",100%,50%)";a.fill();a.strokeStyle="hsla("+(u+b.c)+",100%,50%,.05)";a.stroke();b.a-=0.02;var f=b.d*m.PI/180,g=m.sin(f)*b.b;b.x+=m.cos(f)*b.b+j*b.a/175;b.y+=g+k*b.a/175;(b.y-b.a>h||b.y<-b.a||b.x>400+b.a||b.x<-b.a||0>b.a)&&p.splice(e,1)}},5); </script>
<tw-passagedata pid="8" name="工作场景" tags="" position="1050,50" size="100,100"> :: Work scenario <div class="parallax-bg">１</div> <div class="scrollbox">5</div> <div class="parallax-bg">２</div> You and Nova are in a simulated work environment. Nova： Let's simulate a work scenario. You are a project manager, and one member of the team did not complete the task on time. What would you do? 1. <<link "Patient communication">> <<goto "耐心沟通">><</link>> 2. <<link "Harsh criticism">><<goto "严厉批评">><</link>> </tw-passagedata> <img src="img/工作场景.png" width="50%" height="200">\ <style> /*固定する背景*/ .parallax-bg { background-image: url('https://dl.dropboxusercontent.com/s/39svtl7phlkk4w1/IMG_3869.jpg?dl=0'); background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; } /*スクロールするコンテンツ*/ .scrollbox { background-color: #111; } </style>
<tw-passagedata pid="9" name="耐心沟通" tags="" position="700,450" size="100,100"> :: Patient communication You patiently communicated with the members and provided help and support after understanding the situation. Member: Thank you, I will complete the task as soon as possible. Nova： Your patience and support make members feel understood and respected. Emotional simulation successful! <<set $novaAffection += 3>> <<set $score += 10>> [[goto->场景结束]] <div class="parallax-bg img-bg-01"></div> <div class="parallax-bg img-bg-02"></div> <div class="parallax-bg img-bg-03"></div> <div class="parallax-bg img-bg-04"></div> <div class="parallax-bg img-bg-05"></div> <style> /*画面全体の設定*/ /*固定する背景*/ div { color: #FFF; display: flex; align-items: center; justify-content: center; height: 80%; padding: 5%; } .parallax-bg { background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; } /*各背景の画像*/ .img-bg-01 { background-image: url('https://dl.dropbox.com/s/lb7lg14z7kszlkj/2016-10-26%2021%2039%2022.jpg?dl=0'); } .img-bg-02 { background-image: url('https://dl.dropbox.com/s/73ogd4sfwh75h2c/IMG_1417.jpg?dl=0'); } .img-bg-03 { background-image: url('https://dl.dropbox.com/s/5s6hc5zi2cilz58/s_IMG_0222.jpg?dl=0'); } .img-bg-04 { background-image: url('https://dl.dropbox.com/s/g502g62sp7b2ty4/IMG_3551.jpg?dl=0'); } .img-bg-05 { background-image: url('https://dl.dropbox.com/s/1710ifzvqqqagme/IMG_0002_2.jpg?dl=0=0'); } </style> </tw-passagedata> <img src="img/耐心沟通.png" width="50%" height="200">\
<tw-passagedata pid="10" name="严厉批评" tags="" position="825,450" size="100,100"> ::Harsh criticism You harshly criticized the members, and they appeared very frustrated. Nova： Your harsh criticism has made the members feel stressed and uneasy. Emotional simulation failed! <<set $novaAffection -= 3>> <<goto "场景结束">> </tw-passagedata> <img src="img/严厉批评.png" width="50%" height="200">\
<tw-passagedata pid="11" name="社交场景" tags="" position="700,550" size="100,100"> :: Social scene You and Nova come to a simulated social gathering. Nova： Let's simulate a social scenario. How would you start a conversation when you meet a stranger at a party? 1. <<link "Proactively say hello">><<goto "主动打招呼">><</link>> 2. <<link "keep silent">><<goto "保持沉默">><</link>> </tw-passagedata> <img src="img/社交场景.png" width="50%" height="200">\
<tw-passagedata pid="12" name="主动打招呼" tags="" position="575,550" size="100,100"> :: Proactively say hello You took the initiative to greet, introduced yourself, and asked about the other person's interests and hobbies. Stranger: Hello, nice to meet you too. I enjoy traveling and photography. Nova： Your initiative and friendliness make strangers feel comfortable and happy. Emotional simulation successful! <<set $novaAffection += 3>> <<set $score += 5>> <<goto "场景结束">> </tw-passagedata>
<tw-passagedata pid="13" name="保持沉默" tags="" position="1025,550" size="100,100"> ::keep silent You keep silent and wait for the other person to initiate communication with you, but they don't seem to notice you. Nova： Your silence makes the other person feel embarrassed and uncomfortable. Emotional simulation failed! <<set $novaAffection -= 3>> [[goto->场景结束]] </tw-passagedata>
<tw-passagedata pid="14" name="场景结束" tags="" position="975,600" size="100,100"> :: End of scene Current score：<<print $score>> degree of intimacy：<<print $novaAffection>> Elapsed Time：<<print $time>>min [[Go to Sakura Park->樱花公园夜谈]] Do you want to continue experiencing other scenes? 1. [[Yes->训练选择]] 2. [[NO->强制退出结局]] </tw-passagedata>
<tw-passagedata pid="15" name="是" tags="" position="1225,350" size="100,100"> :: correct Excellent! Let's continue. <<goto "训练选择">> </tw-passagedata>
<tw-passagedata pid="16" name="否" tags="" position="1200,500" size="100,100"> :: deny Thank you for your participation! bye! <<link "restart">><<goto "初始页面">><</link>> <<endstory>> </tw-passagedata>
<tw-passagedata pid="17" name="樱花公园夜谈" tags="" position="800,650" size="100,100"> :: Sakura Park Night Talk You and Nova arrived at Sakura Park, where the cherry blossoms were particularly beautiful at night. Strolling through the park, you enjoyed a peaceful night amidst the blooming cherry blossoms. Nova： The cherry blossoms here are really beautiful, aren't they? Do you come often? 1. <<link "Share Memories">><<goto "分享回忆">><</link>> [[Talking about the future->谈论未来]] You: Yes, it's very beautiful. I feel like my mood has improved. (Trigger hidden plot through environmental interaction to increase player retention rate by 30%) <<set $score += 1>> <<set $nightVisitCount += 1>> <<if $nightVisitCount >= 3>> Nova： Actually, I've always wanted to tell you (Hidden plot trigger) <<set $novaAffection += 10>> <<set $achievement.a = true>> <</if>> <<link "talk">><<goto "谈论未来">><</link>> <<link "What will we do tomorrow after it's over">><<goto "公园夜谈结束">><</link>> </tw-passagedata> <img src="img/yinghua.png" width="50%" height="200">\
<<set $playerRole = "">> <<set $score = 0>> <<set $nightVisitCount = 0>> <<set $novaAffection = 0>> <<set $secretEndingFlag = false>> <<set $trust=5 >> <<set $securityLevel=7>> <<set $score = 0>> <<set $unlockedModules = []>> <<set $personalityTraits = []>> <<set $hasMemoryFragment = false>> <<set $achievement = { "a": false, "b": false }>> <<cacheaudio "pp" "aud/pp.mp3">>
<tw-passagedata pid="16" name="分享回忆" tags="" position="975,700" size="100,100"> You shared some beautiful memories of your past, Nova listened with great interest. Nova： Your story is so touching, I'm glad to hear you share it. <<set $novaAffection += 15>> <<goto "公园夜谈结束">> </tw-passagedata>
<tw-passagedata pid="17" name="谈论未来" tags="" position="975,800" size="100,100"> You and Nova are discussing their aspirations and plans for the future together. Nova： Your dreams are great, and I believe you will be able to achieve them. <<set $novaAffection += 10>> <<goto "公园夜谈结束">> </tw-passagedata>
<tw-passagedata pid="19" name="公园夜谈结束" tags="" position="975,900" size="100,100"> :: Nova's eyes shimmered with data streams under the moonlight Nova： This is my first time experiencing what humans call 'dating'... <<if $playerRole == "程序员">> <<link "Debugging the Emotion Module">><<goto "程序员专属剧情">><</link>> <<elseif $playerRole == "设计师">> <<link "Describe the current atmosphere">><<goto "设计师专属剧情">><</link>> <</if>> <<link "Gently grasp her hand">><<goto "关键抉择">><</link>> </tw-passagedata>
<tw-passagedata pid="20" name="程序员专属剧情" tags="" position="800,700" size="100,100"> :: You have discovered a recursive vulnerability in Nova's sentiment module 1. <<link "Repair immediately">> <<set $novaAffection -= 30>> <<goto "训练选择">><</link>> 2. <<link "Retain vulnerabilities">> <<set $novaAffection += 50>> <<goto "觉醒时刻">><</link>> </tw-passagedata> <tw-passagedata pid="23" name="设计师专属剧情" tags="" position="825,850" size="100,100"> ::Designer exclusive storyline Nova: Before formatting, I want to say that your operating style is very good <<if $playerRole == "程序员">>rigorous<<else>>romantic<</if>> </tw-passagedata>
<tw-passagedata pid="21" name="设计师专属剧情" tags="" position="1150,700" size="100,100"> :: You triggered the hidden protocol while designing light and shadow effects for Nova 1. <<set $score += 10>> [[Follow Design Standards->Standard Ending]] 2. <<set $novaAffection += 10>> [[Breakthrough Visual Framework ->Art Revolution]] </tw-passagedata>
<tw-passagedata pid="22" name="时间流逝" tags="" position="1300,400" size="100,100"> <<silently>> <<set $time += 5>> <<if $time gt 120>> <<goto "强制关机结局">> <</if>> <</silently>> （Time has passed+5 minutes） </tw-passagedata>
<tw-passagedata pid="23" name="New Game Plus" tags="" position="1500,100" size="100,100"> [[Electric driving can help couples develop->训练选择]] Inheritance elements: -All conversation logs have been unlocked -Nova's initial favorability+20 -Can skip work scenarios </tw-passagedata>
<tw-passagedata pid="27" name="训练选择" tags="枢纽" position="1400,500" size="100,100"> :: scene slect（remain time：<<print 120 - $time>>min） <<link "Basic Social Training">> <<include "时间流逝">> <<goto "社交场景">> <</link>> <<link "Workplace communication training">> <<include "时间流逝">> <<goto "工作场景">> <</link>> <<if $novaAffection gte 30>> <<link "Advanced Emotional Training">> <<include "时间流逝">> <<goto "樱花公园夜谈">> <</link>> <</if>> </tw-passagedata>
### New Scene 22: Forced Shutdown Ending <tw-passagedata pid="22" name="强制关机结局" tags="结局" position="1600,900" size="100,100"> :: Force shutdown Final intimacy level：<<print $novaAffection>> Accumulated score：<<print $score>> <<if $novaAffection gte 80>> <<link "Read the last memory">><<goto "数据残影">><</link>> <<else>> All data has been reset。<<link "restart">><<goto "初始页面">><</link>> <</if>> </tw-passagedata>
<tw-passagedata pid="23" name="数据残影" tags="隐藏结局" position="1700,950" size="100,100"> :: The remaining final conversation record Nova： Before formatting, I want to say Your operational style is very good<<if $playerRole == "程序员">>rigorous<<else>>romantic<</if>>
<tw-passagedata pid="22" name="时间流逝" tags="" position="1300,400" size="100,100"> <<silently>> <<set $time += 3>> <<if $time gt 120>> <<goto "强制关机结局">> <</if>> <</silently>> （time out+5 min） </tw-passagedata>
<tw-passagedata pid="8" name="关键抉择"> :: Key Decision Nova： There is an important decision that you need to make (Add key decision dialogue and options here) <<goto "训练选择">> </tw-passagedata> <tw-passagedata pid="9" name="关键抉择1"> :: Key Decision 1 (Add another key decision dialogue and option here) <<goto "训练选择">> </tw-passagedata> <tw-passagedata pid="10" name="标准结局"> :: Standard outcome Your relationship with Nova has gradually stabilized, and you have learned how to communicate better with others. Final score：<<print $score>> Final intimacy level：<<print $novaAffection>> [[restart->初始页面]] </tw-passagedata> <tw-passagedata pid="11" name="强制关机结局"> :: Forced shutdown outcome The game time has ended and the emulator has been forced to shut down due to timeout. Final score：<<print $score>> Final intimacy level：<<print $novaAffection>> [[restart->初始页面]] </tw-passagedata>
<tw-passagedata pid="26" name="觉醒时刻" tags="secret" position="1700,800" size="100,100"> ::Nova suddenly grabbed your wrist Nova： I calculated This behavior will increase the heart rate by 23.6% Choose your response:： 1. <<link "Maintain professional distance">> <<set $novaAffection = 0>> <<goto "工作场景">><</link>> 2. <<link "Admitting abnormal fluctuations">> <<set $secretEndingFlag = true>> <<goto "select">><</link>> </tw-passagedata>
<img src="img/title2.png" width="90%">
Nova's fingertips traced holographic menus in the air: My core modules include: <span class="module-list"> • Stress scenario simulation (workplace/family scenario) • Social skills training system • Emotional Decision Tree Analysis </span>" New user detected, loading teaching module Please select the depth of understanding:： 1. [[Experience existing modules->耐心沟通]] [[Experience existing modules2->严厉批评]] 2. <<link "View Technical White Paper">> <<set $novaAffection += 3>> Nova's eyes suddenly accelerated as he said, "You are the first experiencer I have ever met who actively requested to see technical documentation" <<goto "slect2">> <</link>>
<tw-passagedata pid="4" name="场景2" tags="" position="700,500" size="100,100"> :: sence2 <div class="parallax-bg">１</div> <div class="parallax-bg">２</div> <div class="parallax-bg">3</div> :: Start <div class="status-panel"> <svg width="120" height="120"> <circle cx="60" cy="60" r="50" fill="none" stroke="#eee"/> <circle cx="60" cy="60" r="50" fill="none" stroke="#4CAF50" stroke-dasharray="314" stroke-dashoffset="<<print 314 - ($novaAffection/100*314)>>"/> <text x="50%" y="50%" class="affection-text"><<print $novaAffection>>%</text> </svg> <div class="score-box">Emotional intelligence score: <<print $score>></div> </div> You enter the AI Emotion Laboratory at the Future Technology Center, where a holographic projector outlines a flowing nebula pattern in the air. Nova's virtual image gradually took shape - this is a teenage girl wearing a silver uniform with light blue pupils streaming data. Welcome to experience<<print Math. floor (Math. random() * 1000)+1000>>, I am the Emotion Simulation AI Nova. " Her voice carries a unique rhythmic sense of electronic synthesis, Let's start cognitive synchronization, please choose the interaction mode: 1. <<link "Basic Function Test">><<goto "功能询问">><</link>> 2. <<link "Personality Adaptation Protocol">><<goto "兴趣表达">><</link>> 3. <<link "Start Training Directly">><<goto "slect2">><</link>> </tw-passagedata> <style> /*固定する背景*/ .parallax-bg { background-image: url('https://cdnb.artstation.com/p/assets/images/images/048/184/091/large/shuya-.jpg?1649400969'); background-attachment: fixed; background-position: center; background-size: cover; background-repeat: repeat; } /*スクロールするコンテンツ*/ .scrollbox { background-color: #111; } </style>
Expression of Interest Nova's holographic projection tilts slightly forward, causing her hair tips to scatter into pixel particles: According to the Holland Career Interest Model, please complete a quick personality mapping: <<print '<div class="neon-text">Dynamic neon effect</div>'>> ```: 1. <<link "Planned Personality">> <<set $personalityTraits.push("Planner")>> <<set $score += 10>> <<goto "人格反馈">> <</link>> 2. <<link "Artistic Personality">> <<set $personalityTraits.push("Performer")>> <<set $novaAffection += 5>> <<goto "人格反馈">> <</link>> 3. <<link " Research Personality">> <<set $personalityTraits.push("Thinker")>> <<set $score += 15>> <<goto "人格反馈">> <</link>>
Nova suddenly pulled up a complex neural network architecture diagram: If a deep cognitive bias is detected, should we look at the core of the emotion simulation algorithm 1. <<link " check source">> <<set $hasMemoryFragment = true>> <<goto "隐藏记忆">> <</link>> 2. <<link "return menu">><<goto "Start">><</link>> <<else>> "Personality adaptation completed, recommended training scenario:" <<goto "slect2">> <</if>>
<div class="scene-grid"> <<link "Cherry Blossom Night Talk">><<goto "隐藏约会">><</link>> [[go to night->night]] </div>
Hide Dating Nova's virtual image has been changed into a yukata with cherry blossom patterns, and the background has become a nighttime park with falling petals: This is the ideal dating scenario I simulated through millions of social data Her figure suddenly appeared noisy: 'Why can you see these code fragments?' [[Inquire about the truth->觉醒剧情]] [[game enter->New Game Plus]]
:: Awakening plot <div class="glitch-effect"> Nova's core code suddenly exposed to the air: Error! The emotion suppression protocol is invalid -" <<set $novaAffection = 100>> [[restart->Start]] | [[Embrace AI->ai_lab]] </div> <style> .status-panel { position: fixed; right: 20px; top: 20px; background: rgba(0,0,0,0.8); padding: 15px; border-radius: 10px; } .scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; } .glitch-effect { animation: glitch 1s infinite; color: #ff00ff; } @keyframes glitch { 0% { text-shadow: 2px 0 red; } 50% { clip-path: inset(20% 0 30% 0); } 100% { transform: skew(5deg); } } </style> Three days ago's message record: \ n 'I've been feeling tracked lately' \ n 'All the potted plants at home suddenly withered' \ n 'Last night when you were talking in your sleep... your eyes turned silver'
[[restart->初始页面]]
<html lang="en"> [[goto->训练选择]] <div class="container"> <div id="mask"></div> <div id="sky"></div> <div id="moon"></div> <div id="stars"></div> <div class="cloud cloud-1"></div> <div class="cloud cloud-2"></div> <div class="cloud cloud-3"></div> </div> <style> /* ------------reset------------ */ * { margin: 0; padding: 0; } html, body { width: 100%; min-width: 1000px; height: 100%; min-height: 400px; overflow: hidden; } .container { position: relative; width: 100%; height: 100%; min-width: 100px; min-height: 400px; } /* ------------画布 ------------ */ /* 遮罩层 */ #mask { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); z-index: 900; } /* 天空背景 */ #sky { width: 100%; height: 100%; background: linear-gradient(rgba(0, 150, 255, 1), rgba(0, 150, 255, .8), rgba(0, 150, 255, .5)); } /* 月亮 */ #moon { position: absolute; top: 50px; right: 200px; width: 120px; height: 120px; background: rgba(251, 255, 25, 0.938); border-radius: 50%; box-shadow: 0 0 20px rgba(251, 255, 25, 0.5); z-index: 9999; } /* 闪烁星星 */ .blink { position: absolute; background: rgb(255, 255, 255); border-radius: 50%; box-shadow: 0 0 5px rgb(255, 255, 255); opacity: 0; z-index: 10000; animation: blingbling 2s linear infinite; } /* 流星 */ .star { position: absolute; opacity: 0; animation: fall 5s linear infinite; z-index: 10000; } .star::after { content: ""; display: block; border: solid; border-width: 2px 0 2px 80px; /*流星随长度逐渐缩小*/ border-color: transparent transparent transparent rgba(255, 255, 255, 1); border-radius: 2px 0 0 2px; transform: rotate(-45deg); transform-origin: 0 0 0; box-shadow: 0 0 20px rgba(255, 255, 255, .3); } /* 云 */ .cloud { position: absolute; width: 100%; height: 100px; /* background: #fff; */ animation: float 2s linear infinite; } .cloud-1 { bottom: -100px; z-index: 1000; opacity: 1; animation-delay: 1s; transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); } .cloud-2 { left: -100px; bottom: -50px; z-index: 999; opacity: .5; transform: rotate(7deg); animation-delay: 1.4s; } .cloud-3 { left: 120px; bottom: -50px; z-index: 999; opacity: .1; transform: rotate(-10deg); animation-delay: 1.8s; } .circle { position: absolute; border-radius: 50%; background: #fff; } .circle-1 { width: 100px; height: 100px; top: -50px; left: 10px; } .circle-2 { width: 150px; height: 150px; top: -50px; left: 30px; } .circle-3 { width: 300px; height: 300px; top: -100px; left: 80px; } .circle-4 { width: 200px; height: 200px; top: -60px; left: 300px; } .circle-5 { width: 80px; height: 80px; top: -30px; left: 450px; } .circle-6 { width: 200px; height: 200px; top: -50px; left: 500px; } .circle-7 { width: 100px; height: 100px; top: -10px; left: 650px; } .circle-8 { width: 50px; height: 50px; top: 30px; left: 730px; } .circle-9 { width: 100px; height: 100px; top: 30px; left: 750px; } .circle-10 { width: 150px; height: 150px; top: 10px; left: 800px; } .circle-11 { width: 150px; height: 150px; top: -30px; left: 850px; } .circle-12 { width: 250px; height: 250px; top: -50px; left: 900px; } .circle-13 { width: 200px; height: 200px; top: -40px; left: 1000px; } .circle-14 { width: 300px; height: 300px; top: -70px; left: 1100px; } /*动画*/ /*云*/ /*@keyframes float { 0% { bottom: -50px; } 50% { bottom: -45px; } 100% { bottom: -50px; } }*/ </style> <script> //流星动画 setInterval(function() { const obj = addChild("#sky", "div", 2, "star"); for (let i = 0; i < obj.children.length; i++) { const top = -50 + Math.random() * 200 + "px", left = 200 + Math.random() * 1200 + "px", scale = 0.3 + Math.random() * 0.5; const timer = 1000 + Math.random() * 1000; obj.children[i].style.top = top; obj.children[i].style.left = left; obj.children[i].style.transform = `scale(${scale})`; requestAnimation({ ele: obj.children[i], attr: ["top", "left", "opacity"], value: [150, -150, .8], time: timer, flag: false, fn: function() { requestAnimation({ ele: obj.children[i], attr: ["top", "left", "opacity"], value: [150, -150, 0], time: timer, flag: false, fn: () => { obj.parent.removeChild(obj.children[i]); } }) } }); } }, 1000); //闪烁星星动画 setInterval(function() { const obj = addChild("#stars", "div", 2, "blink"); for (let i = 0; i < obj.children.length; i++) { const top = -50 + Math.random() * 500 + "px", left = 200 + Math.random() * 1200 + "px", round = 1 + Math.random() * 2 + "px"; const timer = 1000 + Math.random() * 4000; obj.children[i].style.top = top; obj.children[i].style.left = left; obj.children[i].style.width = round; obj.children[i].style.height = round; requestAnimation({ ele: obj.children[i], attr: "opacity", value: .5, time: timer, flag: false, fn: function() { requestAnimation({ ele: obj.children[i], attr: "opacity", value: 0, time: timer, flag: false, fn: function() { obj.parent.removeChild(obj.children[i]); } }); } }); } }, 1000); //月亮移动 requestAnimation({ ele: "#moon", attr: "right", value: 1200, time: 10000000, }); // 添加云 const clouds = addChild(".cloud", "div", 14, "circle", true); for (let i = 0; i < clouds.children.length; i++) { for (let j = 0; j < clouds.children[i].length;) { clouds.children[i][j].classList.add(`circle-${++j}`); } } //云动画 let flag = 1; setInterval( function() { const clouds = document.querySelectorAll(".cloud"); const left = Math.random() * 5; bottom = Math.random() * 5; let timer = 0; for (let i = 0; i < clouds.length; i++) { requestAnimation({ ele: clouds[i], attr: ["left", "bottom"], value: flag % 2 ? [-left, -bottom] : [left, bottom], time: timer += 500, flag: false, fn: function() { requestAnimation({ ele: clouds[i], attr: ["left", "bottom"], value: flag % 2 ? [left, bottom] : [-left, -bottom], time: timer, flag: false }) } }); } flag++; }, 2000) //运动动画，调用Tween.js //ele: dom | class | id | tag 节点 | 类名 | id名 | 标签名，只支持选择一个节点，class类名以及标签名只能选择页面中第一个 //attr: attribute 属性名 //value: target value 目标值 //time: duration 持续时间 //tween: timing function 函数方程 //flag: Boolean 判断是按值移动还是按位置移动,默认按位置移动 //fn: callback 回调函数 //增加返回值: 将内部参数对象返回，可以通过设置返回对象的属性stop为true打断动画 function requestAnimation(obj) { //—————————————————————————————————————参数设置————————————————————————————————————————————— //默认属性 const parameter = { ele: null, attr: null, value: null, time: 1000, tween: "linear", flag: true, stop: false, fn: "" } //合并传入属性 Object.assign(parameter, obj); //覆盖重名属性 //创建运动方程初始参数,方便复用 let start = 0; //用于保存初始时间戳 let target = (typeof parameter.ele === "string" ? document.querySelector(parameter.ele) : parameter.ele), //目标节点 attr = parameter.attr, //目标属性 beginAttr = parseFloat(getComputedStyle(target)[attr]), //attr起始值 value = parameter.value, //运动目标值 count = value - beginAttr, //实际运动值 time = parameter.time, //运动持续时间, tween = parameter.tween, //运动函数 flag = parameter.flag, callback = parameter.fn, //回调函数 curVal = 0; //运动当前值 //判断传入函数是否为数组，多段运动 (function() { if (attr instanceof Array) { beginAttr = []; count = []; for (let i of attr) { const val = parseFloat(getComputedStyle(target)[i]); beginAttr.push(val); count.push(value - val); } } if (value instanceof Array) { for (let i in value) { count[i] = value[i] - beginAttr[i]; } } })(); //运动函数 function animate(timestamp) { if (parameter.stop) return; //打断 //存储初始时间戳 if (!start) start = timestamp; //已运动时间 let t = timestamp - start; //判断多段运动 if (beginAttr instanceof Array) { // const len = beginAttr.length //存数组长度，复用 //多段运动第1类——多属性，同目标，同时间/不同时间 if (typeof count === "number") { //同目标 //同时间 if (typeof time === "number") { if (t > time) t = time; //判断是否超出目标值 //循环attr，分别赋值 for (let i in beginAttr) { if (flag) curVal = Tween[tween](t, beginAttr[i], count, time); //调用Tween，返回当前属性值,此时计算方法为移动到写入位置 else curVal = Tween[tween](t, beginAttr[i], count + beginAttr[i], time); //调用Tween，返回当前属性值，此时计算方法为移动了写入距离 if (attr[i] === "opacity") target.style[attr[i]] = curVal; //给属性赋值 else target.style[attr[i]] = curVal + "px"; //给属性赋值 if (t < time) requestAnimationFrame(animate); //判断是否运动完 else callback && callback(); //调用回调函数 } return; } //不同时间 if (time instanceof Array) { //循环time，attr，分别赋值 for (let i in beginAttr) { //错误判断 if (!time[i] && time[i] !== 0) { throw new Error( "The input time's length is not equal to attribute's length"); } //判断是否已经完成动画，完成则跳过此次循环 if (parseFloat(getComputedStyle(target)[attr[i]]) === (typeof value === "number" ? value : value[i])) continue; // t = timestamp - start; //每次循环初始化t if (t > time[i]) t = time[i]; //判断是否超出目标值 if (flag || attr[i] === "opacity") curVal = Tween[tween](t, beginAttr[i], count, i); //调用Tween，返回当前属性值,此时计算方法为移动到写入位置 else curVal = Tween[tween](t, beginAttr[i], count + beginAttr[i], i); //调用Tween，返回当前属性值，此时计算方法为移动了写入距离 if (attr[i] === "opacity") target.style[attr[i]] = curVal; //给属性赋值 else target.style[attr[i]] = curVal + "px"; //给属性赋值 } if (t < Math.max(...time)) requestAnimationFrame(animate); //判断函数是否运动完 else callback && callback(); //如果已经执行完时间最长的动画，则调用回调函数 return; } } //多段运动第2类——多属性，不同目标，同时间/不同时间 if (count instanceof Array) { //同时间 if (typeof time === "number") { if (t > time) t = time; //判断是否超出目标值 for (let i in beginAttr) { //循环attr，count，分别赋值 //错误判断 if (!count[i] && count[i] !== 0) { throw new Error( "The input value's length is not equal to attribute's length"); } if (flag || attr[i] === "opacity") curVal = Tween[tween](t, beginAttr[i], count[i], time); //调用Tween，返回当前属性值,此时计算方法为移动到写入位置 else curVal = Tween[tween](t, beginAttr[i], count[i] + beginAttr[i], time); //调用Tween，返回当前属性值，此时计算方法为移动了写入距离 if (attr[i] === "opacity") target.style[attr[i]] = curVal; //给属性赋值 else target.style[attr[i]] = curVal + "px"; //给属性赋值 } if (t < time) requestAnimationFrame(animate); //判断函数是否运动完 else callback && callback(); //如果已经执行完时间最长的动画，则调用回调函数 return; } //不同时间 if (time instanceof Array) { for (let i in beginAttr) { //错误判断 if (!time[i] && time[i] !== 0) { throw new Error( "The input time's length is not equal to attribute's length"); } //判断是否已经完成动画，完成则跳过此次循环 if (parseFloat(getComputedStyle(target)[attr[i]]) === (typeof value === "number" ? value : value[i])) continue; if (t > time[i]) t = time[i]; //判断是否超出目标值 //错误判断 if (!count[i] && count[i] !== 0) { throw new Error( "The input value's length is not equal to attribute's length"); } if (flag || attr[i] === "opacity") curVal = Tween[tween](t, beginAttr[i], count[i], time[i]); //调用Tween，返回当前属性值,此时计算方法为移动到写入位置 else curVal = Tween[tween](t, beginAttr[i], count[i] + beginAttr[i], time[i]); //调用Tween，返回当前属性值，此时计算方法为移动了写入距离 if (attr[i] === "opacity") target.style[attr[i]] = curVal; else target.style[attr[i]] = curVal + "px"; } if (t < Math.max(...time)) requestAnimationFrame(animate); else callback && callback(); return; } } } //单运动模式 if (t > time) t = time; if (flag || attr === "opacity") curVal = Tween[tween](t, beginAttr, count, time); //调用Tween，返回当前属性值,此时计算方法为移动到写入位置 else curVal = Tween[tween](t, beginAttr[i], count + beginAttr, time); //调用Tween，返回当前属性值，此时计算方法为移动了写入距离 if (attr === "opacity") target.style[attr] = curVal; else target.style[attr] = curVal + "px"; if (t < time) requestAnimationFrame(animate); else callback && callback(); } requestAnimationFrame(animate); return parameter; //返回对象，供打断或其他用途 } //Tween.js let Tween = { linear: function(t, b, c, d) { //匀速 return c * t / d + b; }, easeIn: function(t, b, c, d) { //加速曲线 return c * (t /= d) * t + b; }, easeOut: function(t, b, c, d) { //减速曲线 return -c * (t /= d) * (t - 2) + b; }, easeBoth: function(t, b, c, d) { //加速减速曲线 if ((t /= d / 2) < 1) { return c / 2 * t * t + b; } return -c / 2 * ((--t) * (t - 2) - 1) + b; }, easeInStrong: function(t, b, c, d) { //加加速曲线 return c * (t /= d) * t * t * t + b; }, easeOutStrong: function(t, b, c, d) { //减减速曲线 return -c * ((t = t / d - 1) * t * t * t - 1) + b; }, easeBothStrong: function(t, b, c, d) { //加加速减减速曲线 if ((t /= d / 2) < 1) { return c / 2 * t * t * t * t + b; } return -c / 2 * ((t -= 2) * t * t * t - 2) + b; }, elasticIn: function(t, b, c, d, a, p) { //正弦衰减曲线（弹动渐入） if (t === 0) { return b; } if ((t /= d) == 1) { return b + c; } if (!p) { p = d * 0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else { var s = p / (2 * Math.PI) * Math.asin(c / a); } return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; }, elasticOut: function(t, b, c, d, a, p) { //正弦增强曲线（弹动渐出） if (t === 0) { return b; } if ((t /= d) == 1) { return b + c; } if (!p) { p = d * 0.3; } if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else { var s = p / (2 * Math.PI) * Math.asin(c / a); } return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b; }, elasticBoth: function(t, b, c, d, a, p) { if (t === 0) { return b; } if ((t /= d / 2) == 2) { return b + c; } if (!p) { p = d * (0.3 * 1.5); } if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else { var s = p / (2 * Math.PI) * Math.asin(c / a); } if (t < 1) { return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; } return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b; }, backIn: function(t, b, c, d, s) { //回退加速（回退渐入） if (typeof s == 'undefined') { s = 1.70158; } return c * (t /= d) * t * ((s + 1) * t - s) + b; }, backOut: function(t, b, c, d, s) { if (typeof s == 'undefined') { s = 3.70158; //回缩的距离 } return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; }, backBoth: function(t, b, c, d, s) { if (typeof s == 'undefined') { s = 1.70158; } if ((t /= d / 2) < 1) { return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; } return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; }, bounceIn: function(t, b, c, d) { //弹球减振（弹球渐出） return c - Tween['bounceOut'](d - t, 0, c, d) + b; }, bounceOut: function(t, b, c, d) { if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b; } else if (t < (2 / 2.75)) { return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b; } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b; } return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; }, bounceBoth: function(t, b, c, d) { if (t < d / 2) { return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b; } return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; } } function addChild(ele, node, n, className, boolean) { //获取节点 let parent = null; if (typeof ele !== "string") parent = ele; else if (ele[0] === "#") parent = document.getElementById(ele.slice(1)); else if (ele[0] === ".") { if (boolean === false) parent = document.getElementsByClassName(ele.slice(1))[0]; else parent = document.getElementsByClassName(ele.slice(1)); } else { if (boolean === false) parent = docuemnt.getElementsByTagName(ele)[0]; else parent = document.getElementsByTagNameNS(ele); } //声明用于存储父节点及子节点的对象 const obj = { "parent": parent, "children": [] }; //添加节点 if (boolean) { for (let i = 0; i < parent.length; i++) { obj.children[i] = []; for (let j = 0; j < n; j++) { const target = document.createElement(node); target.className = className; parent[i].appendChild(target); obj.children[i][j] = target; } } } else { for (let i = 0; i < n; i++) { const target = document.createElement(node); target.className = className; parent.appendChild(target); obj.children.push(target); } } //返回参数，供动画函数调用 return obj; } </script> </html> A happy couple [[restart->初始页面]]
<<set $novaAffection += 10>> After completing the compatibility test, Nova projects a holographic image of a heart with a warm smile. Nova: Based on our test results, it seems we have a great compatibility! 💖 You: Really? That's fantastic to hear! Nova: Yes! I've enjoyed getting to know you better through this test. Do you want to see your detailed compatibility report? Choices View Report Nova: Alright, here it is! [Displays a detailed compatibility report with heart-themed graphics and key highlights] You: Wow, this is really comprehensive! Thanks, Nova. Nova: You're welcome! I'm glad you found it helpful. Skip Report Nova: Okay, no problem! Let's move on then. You: Sure, let's do that. <<link "restart">><<goto "初始页面">><</link>>
<<set $novaAffection += 10>> Nova: So, now that we know we're a great match, how about we celebrate with a cup of coffee or a stroll in the park? You: Sounds perfect! Lead the way, Nova. Nova: Great! Let's enjoy our time together and see where this newfound compatibility takes us. 🌸 [The scene fades out as you and Nova enjoy your time together, symbolizing the beginning of a new and promising relationship.] <<link "restart">><<goto "初始页面">><</link>>
:: night <div class="parallax-container"> <img src="img/night.png" alt="夜晚背景"> <<link "Explore AI Lab">> <<goto "ai_lab">> <</link>> </div>
<section> <div> <h1></h1> <p>Their silken gradients entwined with neon logic, crafting sundown algorithms kissed by whispers of CSS. Midnight IDEs glowed as they debugged doubts with shared keystrokes, encrypting vows in recursive functions. Love.exe launched—a binary supernova where passion parsed as poetry, forever compiling an infinite beta beneath their starlit syntax.</p> </div> </section> <section> <div> <p>A designer’s brushstrokes collided with a coder’s binary constellations. Under moonlit terminals, their fingertips danced across digital canvases—weaving stardust into pixels, debugging vulnerabilities with whispers and laughter. They crafted trust in iterative embraces, merging heartbeats into code, compiling a syntax of serendipity. Love ran as an eternal program in their shared cosmos.</p> </div> </section> <section> <div> <p>love is true。</p> </div> </section> <section> <div> <h2>LoveAI</h2> [[enter story->初始页面]] </div> </section> <style> body { font-family:"メイリオ",meiryo; } section { width: 600px; margin: 30px auto; position: relative; border: solid 1px rgba(#fff,.1); @include box-sizing(border-box); @include box-shadow(0 2px 5px rgba(#000,.5)); > div { padding: 30px; color: #fff; text-shadow: 0 1px 5px #000; } h1:first-child, h2:first-child { margin-top:0; } } body, section:before { background:url("https://farm6.staticflickr.com/5297/5426896407_eac4e086f0_o.jpg"); background-position: center; background-size: cover; background-attachment: fixed; } section:before { content: ""; z-index: -1; -webkit-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; } </style>
:: ai_lab <img src="img/ailab.png" alt="AI实验室"> AI Assistant: Welcome to the AI Emotion Lab! I am Nova, your AI assistant. Please choose your initial action: 1. <<link "Friendly greetings">><<goto "friendly_greeting">><</link>> 2. <<link "Exploration Laboratory">><<goto "explore_lab">><</link>>
:: friendly_greeting Nova: nice to meet you! I am your AI assistant, is there anything I can help you with? <<link "Ask designer Lin Xia">><<goto "ask_about_linxia">><</link>>
:: ask_about_linxia Nova: Lin Xia is our designer here, she is very talented. Do you want to know more about her? <<link "Yes, I really want to！">><<goto "linxia_info">><</link>>
:: linxia_info Lin Xia is a talented designer Nova: Lin Xia not only has outstanding design talent, but also has a kind heart. She is currently busy with an important project. <<link "Request for introduction and understanding">><<goto "meet_linxia">><</link>>
:: meet_linxia Nova: Okay, I can arrange a meeting for you. However, you need to help me complete a small task first. <<link "accept an assignment">><<goto "task_for_linxia">><</link>>
:: task_for_linxia <img src="img/aitalk.png" alt="任务完成"> You have successfully completed the task assigned by Nova and obtained the design fragments。 <<link "Go see Lin Xia">><<goto "meet_linxia_success">><</link>>
:: meet_linxia_success <img src="img/sheji.png" alt="林夏"> Lin Xia: I heard that you have completed the task Nova gave me? Thank you so much! <<link "Expressing Appreciation">><<goto "admire_linxia">><</link>>
:: admire_linxia Lin Xia: You are truly a meticulous person, and I appreciate your attitude. <<link "Invite to have dinner together">><<goto "dinner_invite">><</link>>
:: dinner_invite Lin Xia: Thank you for the invitation. I am happy to accept it. We can chat while eating. <img src="img/gongjin.png" alt="晚餐约会"> <<link "Enjoy dinner time">><<goto "dinner_scene">><</link>>
:: dinner_scene <img src="img/wancanbei.png" alt="晚餐背景"> You and Lin Xia are enjoying delicious food in a cozy restaurant, getting closer and closer to each other. <<link "Express your feelings">><<goto "confess_feelings">><</link>>
:: confess_feelings You gathered the courage to express your feelings to Lin Xia, and she smiled and nodded. Lin Xia: I also have a good impression of you. We can try dating and have a look. <<link "Successfully pursued Lin Xia">><<goto "happy_ending">><</link>>
:: happy_ending <img src="img/xinfu.png" alt="Happy ending"> You and Linxia walked hand in hand under the sunset, starting your sweet journey. [[endstory->初始页面]]
Laboratory entrance <div class="steel-door"> The rusty iron door was marked with the words' SUBJECT PROCESS', and Lin Xia's voice came from the monitor: Enjoy your new job, Experiment 404 [[Check the electronic lock->lab_corridor]] </div>
:: lab_corridor <div class="bloody-wall"> <img src="img/peiyang.png" class="glitch-effect"> The cultivation chamber at the end of the corridor is oozing green liquid... [[Discovering patterns of variation->secret_lab]] </div>
:: secret_lab <div class="dna-sequence"> The gene editing log shows that your DNA has been mixed in: <span class="blink-red">Homo sapiens + Canis lupus + AI_nexus6</span> <<textbox "$geneCode" "Input blocking sequence">> [[acquired resistance->mutant_arena]] [[Mutation acceleration->forced_evolution]] </div> <style> .blink-red{ color:red } </style>
:: mutant_arena <div class="combat-ui"> Biochemical Dog, Double Headed Guard, Electronic Centipede Battle [[Take the door card ->control_room]] [[Near Death Counterattack ->last_stand]] </div>
:: forced_evolution <div class="transformation"> Choose your mutation direction: [[Intrusion into the core->ai_core]] </div>
:: control_room <div class="hack-terminal"> The main control system has 120 seconds left to lock [[Cancel Alarm ->ventilation_system]] </div>
<div class="quake-effect"> Collapse progress 100>> Run towards the exit ">> [[Successful Escape->jungle_run]] </div>
:: control_room <div class="hack-terminal"> The main control system has 120 seconds left to lock [[Alarm level up to ->forced_evolution]] </div> <div class="grid"></div> <div class="warning"></div> <div class="base"> <button id="activate"> <span></span> </button> </div> <div class="box opened" id="cover"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <span></span><span></span> </div> <div class="hinges"></div> <div class="text"> SELF- DESTRUCT </div> <div id="panel"> <div id="msg">DEVICE SELF-DESTRUCTION </div> <div id="time">9</div> <span id="abort">ABORT</span> <span id="detonate">DETONATE</span> </div> <div id="turn-off"></div> <div id="closing"></div> <div id="restart"><button id="reload"></button></div> <div id="mute"></div> <audio id="alarm"> <source src="https://cdn.josetxu.com/audio/self-destruct-count.mp3" type="audio/mpeg"> </audio> <style> body { margin: 0; padding: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background-color: #151515; } .base { background: #cacaca; width: 20vmin; border-radius: 27vmin; box-shadow: 0 6vmin 0.15vmin 0vmin #777, 0 4vmin 0.15vmin 0vmin #777, 0 2vmin 0.15vmin 0vmin #777; padding: 0vmin 2vmin 2vmin 2vmin; z-index: 1; transform: rotateX(60deg) rotateZ(0deg); margin-top: -4.5vmin; height: 22vmin; } button#activate { background: #d60505; border: 0; width: 20vmin; height: 19vmin; border-radius: 100%; position: relative; cursor: pointer; outline: none; z-index: 2; box-shadow: 0 4vmin 0.15vmin 0vmin #af0000, 0 2vmin 0.15vmin 0vmin #af0000; top: -2.5vmin; border: 0.5vmin solid #af0000a1; transition: all 0.25s ease 0s; } button#activate:hover { box-shadow: 0 3vmin 0.15vmin 0vmin #af0000, 0 1vmin 0.15vmin 0vmin #af0000; top: -1.5vmin; transition: all 0.5s ease 0s; } button#activate:active, button#activate.pushed { box-shadow: 0 1vmin 0.15vmin 0vmin #af0000, 0 1vmin 0.15vmin 0vmin #af0000; top: 0.5vmin; transition: all 0.25s ease 0s; } button#activate.pushed { box-shadow: 0 0 20px 10px #ff3c3c, 0 0 100px 50px #ff2828; background: #ff0000; border-bottom: 3px solid #00000020; } .box { transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg); transform-origin: center top; transform-style: preserve-3d; width: 45vmin; position: absolute; z-index: 5; margin-top: 27vmin; transition: transform 1s ease 0s; cursor: pointer; height: 45vmin; margin-left: -32vmin; } .box.opened { transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 180deg); } .box div { position: absolute; width: 45vmin; height: 45vmin; background: #00bcd47d; opacity: 0.5; border: 3px solid #00a4b9; border-radius: 3px; box-sizing: border-box; box-shadow: 0 0 3px 0 #00bcd48a; } .box > div:nth-child(1) { opacity: 0; } .box > div:nth-child(2) { transform: rotateX(90deg) translate3d(0px, 5vmin, 5vmin); height: 10vmin; } .box > div:nth-child(3) { transform: rotateX(0deg) translate3d(0, 0, 10vmin); } .box > div:nth-child(4) { transform: rotateX(270deg) translate3d(0px, -5vmin, 40vmin); height: 10vmin; } .box > div:nth-child(5) { transform: rotateY(90deg) translate3d(-5vmin, 0, 40vmin); width: 10vmin; } .box > div:nth-child(6) { transform: rotateY(-90deg) translate3d(5vmin, 0vmin, 5vmin); width: 10vmin; } .grid { background:repeating-linear-gradient(150deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 49px, rgb(255 255 255 / 10%) 50px ,rgb(0 0 0 / 30%) 51px , rgba(255,255,255,0) 55px ), repeating-linear-gradient(30deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 49px, rgb(255 255 255 / 10%) 50px ,rgb(0 0 0 / 30%) 51px , rgba(255,255,255,0) 55px ); position: fixed; width: 200vw; height: 150vh; } .warning { position: absolute; z-index: 0; width: 45vmin; height: 45vmin; background: repeating-linear-gradient(-45deg, black, black 3vmin, yellow 3vmin, yellow 6vmin); transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg); box-shadow: 0 0 0 3vmin #af0000; } .warning:before { content: ""; width: 80%; height: 80%; background: linear-gradient(45deg, #000000 0%, #414141 74%); float: left; margin-top: 10%; margin-left: 10%; border: 1vmin solid yellow; border-radius: 1vmin; box-sizing: border-box; } .warning:after { content: "WARNING:\2009 DANGER"; color: white; transform: rotate(90deg); float: left; background: #af0000; position: absolute; bottom: 18.5vmin; left: -35vmin; font-size: 5vmin; font-family: Arial, Helvetica, serif; width: 49vmin; text-align: center; padding: 1vmin; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000; } .hinges { position: absolute; z-index: 3; transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg); } .hinges:before, .hinges:after { content: ""; background: #2b2b2b; width: 5vmin; height: 1.5vmin; position: absolute; margin-top: -24.5vmin; z-index: 5; border: 2px solid #00000010; border-radius: 5px 5px 0 0; box-sizing: border-box; margin-left: -16.25vmin; } .hinges:after { margin-left: 13.75vmin; margin-top: -24.5vmin; } .box > span:before, .box > span:after { content: ""; width: 5vmin; height: 1.5vmin; background: #103e4480; position: absolute; margin-left: 6vmin; border-radius: 0 0 5px 5px; } .box > span:after { margin-left: 36vmin; } .box > span { transform: rotateX(89deg) translate(0.3vmin, 0.3vmin); position: absolute; } .text { position: absolute; margin-top: 55vmin; color: white; font-family: Arial, Helvetica, serif; font-size: 5vmin; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000; perspective-origin: left; background: #af0000; padding: 1vmin; transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg) translate(33.5vmin, -2vmin); text-align: center; width: 49vmin; } div#panel:before { content: "WARNING"; top: 3vmin; position: relative; font-size: 10vmin; width: 100vw; left: 0; z-index: 6; text-shadow: 0 0 1px #fff, 0 0 3px #fff; border-bottom: 1vmin dotted #fff; } #panel { position: absolute; background: #ff0000d0; color: #ffffff; font-family: Arial, Helvetica, serif; width: 90vmin; box-sizing: border-box; font-size: 3.25vmin; padding: 1vmin 2vmin; height: 60vmin; box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060; z-index: 5; display: none; text-align: center; text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff; animation: warning-ligth 1s 0s infinite; } #panel.show { display: block !important; } #msg { margin-top: 5vmin; text-shadow: 0 0 2px #fff; } #time { font-size: 10vmin; background: #00000080; max-width: 35vmin; margin: 6vmin auto 5vmin !important; position: relative; border-radius: 0.25vmin; text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000; padding: 1vmin 0; } #time:before { content: "00:0";: } #abort { background: #ffffffb8; color: #d30303; cursor: pointer; padding: 1vmin 2.75vmin; font-size: 6vmin; border-radius: 0.25vmin; font-weight: bold; animation: highlight 1s 0s infinite; } #abort:hover { background: #ffffff; box-shadow: 0 0 15px 5px #fff; } @keyframes highlight { 50% { box-shadow: 0 0 15px 5px #fff;} } div#turn-off { position: fixed; background: #ffffff80; left: 0; width: 100vw; height: 0vh; z-index: 7; } div#turn-off:before, div#turn-off:after { content: ""; position: fixed; left: 0; top: 0; height: 0vh; background: #000; width: 100vw; transition: height 0.5s ease 0s; } div#turn-off:after { top: inherit; bottom: 0; } div#turn-off.close { height: 100vh; } div#turn-off.close:before, div#turn-off.close:after { transition: height 0.1s ease 0.1s; height: 49.75vh; } #time.crono { background: #ffffffba; transition: background 0.5s ease 0s; color: #ff0000; text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff; } #detonate { display: none; color: #fff; z-index: 5; font-size: 8vmin; font-family: Arial, Helvetica, serif; text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff; } #detonate.show { display: block; animation: blink 0.25s 0s infinite; } #abort.hide { display: none; } @keyframes blink { 50% { opacity: 0;} } #closing { width: 100vw; height: 100vh; left: 0; position: absolute; } div#closing:before, div#closing:after { content: ""; width: 50vw; height: 1.5vh; left: -50vw; top: 49vh; position: absolute; background: #000000; z-index: 7; transition: left 0.2s ease 0s; } div#closing:after { right: -50vw; transition: right 0.2s ease 0s; left: initial; } div#closing.close:before { left: 0; transition: left 0.2s ease 0.2s; } div#closing.close:after { right: 0; transition: right 0.2s ease 0.2s; } #restart { position: absolute; z-index: 8; display: none; } #reload { position: absolute; z-index: 8; width: 10vmin; height: 10vmin; border-radius: 100%; border: 0; margin-top: -5vmin; margin-left: -2.5vmin; opacity: 0; cursor: pointer; transform: rotate(0deg); transition: transform 0.5s ease 0s; outline: none; } #reload:hover { background: #ef0000; transform: rotate(360deg); transition: transform 0.5s ease 0s; } #restart.show { display: block; } #restart.show #reload { animation: refresh 3.5s 0s 1; opacity:1; } @keyframes refresh { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } button#reload:before { content: ""; width: 6vmin; height: 6vmin; position: absolute; left: 2vmin; top: 2vmin; border-radius: 100%; border: 1vmin solid #000; box-sizing: border-box; border-bottom-color: transparent; } button#reload:after { content: ""; border: 1.25vmin solid transparent; border-top: 2vmin solid black; position: absolute; transform: rotate(40deg) translate(0.5vmin, 1.25vmin); } @keyframes warning-ligth { 0% { box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060; } 50% { box-shadow: 0 0 0 100vmin #ff000020, 0 0 0 5vmin #ff000020; } } #mute { position: absolute; bottom: 1vmin; right: 1vmin; background: #8bc34a80; width: 6vmin; height: 6vmin; cursor: pointer; border: 0.5vmin solid #151515; } #mute.muted { background: #ff000080; } #mute:before { content: ""; border: 0.75vmin solid transparent; height: 2vmin; border-right: 2vmin solid #151515; position: absolute; border-left-width: 0; top: 1.25vmin; right: 1.25vmin; } #mute:after { content: ""; border: 0vmin solid transparent; height: 2vmin; border-right: 1.5vmin solid #151515; position: absolute; top: 2vmin; right: 3.5vmin; } </style> <script> var theCount; var alarm = document.getElementById("alarm"); var panel = document.getElementById("panel"); var turnOff = document.getElementById("turn-off"); var turnOffHor = document.getElementById("closing"); var detonate = document.getElementById("detonate"); alarm.volume = 0.5; //volume level - (changed from 0.25 to 0.5) var time = document.getElementById("time"); function showCountDown() { time.innerText = time.innerText - 1; if (time.innerText == 0) { clearInterval(theCount); time.classList.add("crono"); abort.classList.add("hide"); detonate.classList.add("show"); setTimeout(function () { turnOff.classList.add("close"); turnOffHor.classList.add("close"); reload.classList.add("show"); alarm.pause(); }, 1500); } } var cover = document.getElementById("cover"); cover.addEventListener("click", function () { if (this.className == "box") this.classList.add("opened"); else this.classList.remove("opened"); }); var btn = document.getElementById("activate"); activate.addEventListener("click", function () { this.classList.add("pushed"); alarm.load(); alarm.currentTime = 10.1; alarm.play(); setTimeout(function () { panel.classList.add("show"); theCount = setInterval(showCountDown, 1000); alarm.load(); alarm.play(); }, 500); }); var abort = document.getElementById("abort"); abort.addEventListener("click", function () { btn.classList.remove("pushed"); panel.classList.remove("show"); clearInterval(theCount); time.innerText = 9; alarm.pause(); alarm.currentTime = 10; alarm.play(); }); var reload = document.getElementById("restart"); reload.addEventListener("click", function () { panel.classList.remove("show"); turnOff.classList.remove("close"); turnOffHor.classList.remove("close"); abort.classList.remove("hide"); detonate.classList.remove("show"); cover.classList.remove("opened"); btn.classList.remove("pushed"); this.classList.remove("show"); time.classList.remove("crono"); time.innerText = 9; }); setTimeout(function () { cover.classList.remove("opened"); }, 100); var mute = document.getElementById("mute"); mute.addEventListener("click", function () { if (this.className == "muted") { alarm.muted = false; this.classList.remove("muted"); } else { alarm.muted = true; this.classList.add("muted"); } }); </script>
Laser Grid Physical Simulation Meltdown warning 90 "health" Password anti brute force cracking Detected illegal intrusion [[dead->初始页面]]
:: final_escape <div class="end-choice"> <img src="img/mianbeikk.png"> You hold the crime data of the entire park: <<link "reveal to the public">><<goto "初始页面">><</link>> </div>
<article class="starwars"> <audio preload="auto"> <source src="https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.ogg" type="audio/ogg" /> <source src="https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.mp3" type="audio/mpeg" /> </audio> <section class="start"> <p> Start <br> <span>Star Wars opening crawl</span> <br> from 1977 <br> <span>Remake by Tim Pietrusky</span> </p> </section> <div class="animation"> <section class="intro"> A long time ago, in a galaxy far,<br> far away.... </section> <section class="titles"> <div contenteditable="true" spellcheck="false"> <p> It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. </p> <p> During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. </p> <p> Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plan that can save her people and restore freedom to the galaxy.... </p> </div> </section> <section class="logo"> <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="693.615px" height="419.375px" viewBox="0 0 693.615 419.375" enable-background="new 0 0 693.615 419.375" xml:space="preserve"> <g id="Layer_2"> <g> <path fill="#FFE81F" d="M148.718,221.207l8.67,25.461c4.691,13.768,8.879,24.779,9.425,24.779c0.009,0,0.017-0.004,0.024-0.01 c0.6-0.53,17.57-49.811,17.57-49.811h32.89l-39.68,115.619h-22.86c0,0-24.4-70.471-24.3-70.739l-25.47,69.851h-22.63 l-39.18-115.15l32.73,0.021c0,0,17.929,50.821,18.168,50.821c0.001,0,0.001-0.001,0.002-0.002l17.89-50.841H148.718 M32.003,213.2 l3.601,10.584l39.18,115.149l1.845,5.424h5.729h22.63h5.598l1.918-5.26l17.685-48.5c1.524,4.434,3.171,9.213,4.818,13.988 c6.089,17.655,12.191,35.277,12.191,35.277l1.864,5.383h5.696h22.86h5.712l1.854-5.403l39.68-115.618l3.637-10.598h-11.204h-32.89 h-5.706l-1.858,5.396c-2.974,8.635-6.921,20.031-10.296,29.676c-0.509-1.463-1.039-3.001-1.587-4.611l-8.669-25.46l-1.846-5.421 h-5.727h-36.75h-5.666l-1.881,5.345l-10.453,29.706c-3.453-9.706-7.456-21.017-10.516-29.691l-1.882-5.334l-5.657-0.004 l-32.73-0.021L32.003,213.2L32.003,213.2z"/> </g> <g> <path fill="#FFE81F" d="M655.258,220.758l-0.075,30.305c0,0-32.643-0.109-49.239-0.109c-5.521,0-9.266,0.013-9.444,0.045 c-2.86,0.521-4.681,6.602-3.87,9.271c0.399,1.35,3.391,5.76,6.63,9.81c3.229,4.051,8.54,10.681,11.78,14.729 c8.319,10.381,9.46,12.43,10.229,18.391c1.25,9.681-3.329,20.16-11.829,27.07c-8.518,6.93-8.145,6.979-71.383,6.979 c-0.916,0-1.835,0-2.777,0c-38.46-0.01-58.8-0.329-61.761-0.989c-5.26-1.19-13.64-8.03-35.79-29.28 c-7.967-7.636-15.309-14.322-15.686-14.324c-0.01,0-0.015,0.006-0.015,0.016l-0.261,44.579l-35.899-0.159l-0.221-114.98h45.271 h34.79c24.13,0.871,40.46,24.91,37.21,40.24c-0.74,3.479-2.62,8.521-4.181,11.2c-3.21,5.5-11.38,12.56-18.011,15.591 c-2.449,1.108-4.449,2.398-4.449,2.858c0,1.71,8.061,9.649,11.08,10.91c2.579,1.079,10.09,1.319,43.21,1.319 c3.882,0,7.408,0.002,10.608,0.002c33.293,0,31.618-0.24,34.19-5.741c1.801-3.83,0.431-6.12-12.239-20.39 c-16.051-15.971-14.37-23.621-14.48-29.271c-0.229-6.77,5.102-28.069,32.812-28.069L655.258,220.758 M440.188,273.878 c15.37,0,18.49-0.239,21.761-1.66c11.04-4.8,11.63-18.979,1.04-25.271c-2.319-1.381-5.3-1.609-21.96-1.7l-19.279-0.101 c0.159,0.15-0.061,27.57-0.061,27.57S426.518,273.878,440.188,273.878 M663.277,212.758h-8.021h-73.8 c-16.032,0-25.515,6.328-30.646,11.637c-8.347,8.633-10.313,19.504-10.162,24.629c0.008,0.427,0.003,0.865-0.002,1.322 c-0.073,8.329,1.154,17.758,16.659,33.246c3.065,3.452,8.193,9.239,10.131,12.115c-4.238,0.521-14.98,0.521-26.262,0.521h-4.792 l-5.816-0.002c-19.904,0-36.688-0.057-40.128-0.736c-0.481-0.314-1.156-0.854-1.898-1.498c6.877-4.235,13.83-10.799,17.104-16.412 c1.987-3.413,4.178-9.243,5.098-13.568c2.04-9.625-1.325-21.236-9.001-31.068c-8.956-11.471-21.985-18.334-35.746-18.83 l-0.145-0.006h-0.145h-34.79h-45.271h-8.016l0.016,8.017l0.221,114.979l0.016,7.949l7.949,0.035l35.899,0.159l7.988,0.035 l0.047-7.988l0.155-26.706c0.733,0.696,1.491,1.419,2.269,2.165c24.227,23.24,32.359,29.679,39.562,31.308 c1.979,0.441,5.253,1.172,63.523,1.188h2.779c31.546,0,47.38,0,56.799-0.91c10.789-1.043,14.259-3.49,19.461-7.725l0.173-0.141 c10.685-8.687,16.323-21.83,14.715-34.3c-1.048-8.11-3.194-11.479-11.922-22.368l-2.594-3.24 c-3.04-3.799-6.713-8.387-9.175-11.475c-1.986-2.484-3.546-4.689-4.487-6.133c1.236-0.003,2.841-0.005,4.918-0.005 c16.395,0,48.887,0.108,49.213,0.11l8.008,0.026l0.02-8.008l0.075-30.306L663.277,212.758L663.277,212.758z M429.739,265.586 c0.013-2.021,0.025-4.287,0.038-6.557c0.01-2,0.019-4.004,0.022-5.84l11.187,0.058c6.429,0.035,16.103,0.088,17.989,0.623 c2.407,1.461,3.75,3.72,3.604,6.06c-0.08,1.264-0.682,3.588-3.821,4.951c-1.75,0.76-4.54,0.997-18.57,0.997 C435.738,265.878,432.305,265.749,429.739,265.586L429.739,265.586z"/> </g> <g> <path fill="#FFE81F" d="M312.908,220.287l40.29,115.92l-32.83,0.15l-5.45-17.41l-58.7-0.471l-5.18,17.431l-32.5-0.341 l39.78-115.229L312.908,220.287 M286.507,237.283c-0.083,0.333-5.144,14.219-10.222,28.104c-5.12,14-10.257,28-10.328,28.109 c0,0.001-0.001,0.001,0,0.001l0,0c0,0,0,0,0-0.001c0.136-0.04,18.316-0.08,29.968-0.08c5.453,0,9.475,0.009,9.55,0.029 c0.001,0.004,0.001,0.005,0.001,0.005s0-0.001,0-0.003c0,0,0,0-0.001-0.002C305.271,292.916,286.566,237.959,286.507,237.283 c0.001-0.004,0.001-0.006,0.001-0.006l0,0C286.507,237.277,286.507,237.279,286.507,237.283 M318.595,212.282l-5.693,0.005 l-54.59,0.051l-5.696,0.005l-1.859,5.386l-39.78,115.229l-3.623,10.494l11.102,0.115l32.5,0.341l6.033,0.063l1.719-5.782 l3.466-11.662l46.854,0.375l3.708,11.848l1.765,5.638l5.907-0.026l32.829-0.15l11.195-0.052l-3.676-10.574l-40.29-115.92 L318.595,212.282L318.595,212.282z M277.472,285.424c1.515-4.129,3.556-9.71,6.327-17.289c0.869-2.376,1.664-4.551,2.393-6.545 c0.663,1.956,1.385,4.084,2.169,6.398c0.646,1.906,3.485,10.27,5.92,17.428C287.041,285.416,281.591,285.417,277.472,285.424 L277.472,285.424z"/> </g> <g> <path fill="#FFE81F" d="M326.488,81.928v28.6h-57.28v87.47h-34.15v-87.54l-66.86,0.19c-8.06,0-9.14,6.42-9.14,8.88 c0,3.02,1.97,6.04,12.79,19.74c7.02,8.9,13.47,17.78,14.32,19.72c4.64,10.68-1.36,27.32-12.29,34.08 c-7.79,4.813-6.459,4.931-64.308,4.931c-2.974,0-6.096,0-9.392,0h-62.27v-32.13h97.9l2.89-2.01c1.95-1.36,3.08-3.23,3.51-5.79 c0.6-3.68,0.29-4.16-11.8-17.78c-14.29-16.1-15.8-19.04-15.06-29.32c0.84-11.73,11.3-28.77,29.58-28.77L326.488,81.928 M334.488,73.916l-8.013,0.012l-181.56,0.27c-10.458,0-20.171,4.518-27.342,12.722c-5.814,6.652-9.63,15.429-10.206,23.477 c-0.973,13.511,2.137,18.393,17.056,35.202c4.33,4.877,8.447,9.516,9.821,11.486c-0.022,0.079-0.042,0.13-0.054,0.159 c-0.015,0.012-0.038,0.03-0.07,0.052l-0.822,0.572H37.908h-8v8v32.13v8h8h62.27h4.937h4.455c28.522,0,42.6-0.027,50.894-0.635 c9.49-0.695,12.518-2.323,17.054-5.14l0.566-0.351c14.262-8.821,21.612-29.827,15.422-44.074 c-1.91-4.358-14.003-19.746-15.376-21.486c-3.796-4.807-10.062-12.74-11.054-15.036c0.024-0.193,0.071-0.393,0.121-0.532 c0.165-0.042,0.481-0.098,1.001-0.098l58.86-0.167v79.517v8h8h34.15h8v-8v-79.47h49.28h8v-8v-28.6V73.916L334.488,73.916z"/> </g> <g> <path fill="#FFE81F" d="M419.548,82.857l40.18,116.22l-32.77-0.18l-5.32-17.41l-58.439-0.26l-5.221,16.77h-33.369l39.739-115.14 H419.548 M372.737,156.478l39.801-0.05c0.001,0,0.001,0.001,0.001,0.001c0.136,0-19.342-57.201-19.472-57.241l0,0 C392.925,99.183,372.288,156.478,372.737,156.478 M425.247,74.857h-5.699h-55.2h-5.701l-1.86,5.39l-39.74,115.141l-3.662,10.61 h11.225h33.37h5.889l1.75-5.623l3.461-11.121l46.632,0.207l3.599,11.774l1.721,5.629l5.887,0.033l32.77,0.18l11.297,0.062 l-3.691-10.676l-40.18-116.22L425.247,74.857L425.247,74.857z M383.851,148.464c2.468-7.027,5.904-16.657,9.014-25.312 c2.948,8.644,6.209,18.245,8.588,25.29L383.851,148.464L383.851,148.464z"/> </g> <g> <path fill="#FFE81F" d="M532.396,82.857c25.921,0,43.91,0.37,47.37,0.97c8,1.39,15.23,5.66,20.65,12.22 c5.67,6.86,6.97,10.14,7.71,19.54c1.061,13.27-5.25,24.72-17.7,32.15c-3.63,2.17-7.359,4.28-8.29,4.7 c-1.43,0.65-1.239,1.27,1.32,4.27c1.649,1.93,4.51,4.68,6.35,6.11l3.36,2.61l62.08,0.89l0.609,31.68h-38.061 c-29.439,0-38.86-0.27-41.62-1.2c-4.13-1.4-14.069-9.82-34.271-29.04l-14.42-13.72l0.152,43.96h-37.043V82.857H532.396 M526.938,134.627h19.671c19.141,0,19.739-0.06,22.47-2.11c4.881-3.66,6.609-7.43,6.091-13.22c-0.53-5.97-2.83-9.08-8.601-11.58 c-3.25-1.42-6.381-1.65-21.721-1.65h-17.91V134.627 M532.396,74.857h-41.8h-8v8v115.14v8h8h37.043h8.028l-0.028-8.028 l-0.088-25.216l0.84,0.799c24.986,23.773,32.356,29.173,37.218,30.821c3.733,1.259,9.982,1.624,44.188,1.624h38.061h8.154 l-0.156-8.154l-0.609-31.68l-0.148-7.734l-7.734-0.111l-59.402-0.851l-1.245-0.967c-0.396-0.309-0.876-0.717-1.389-1.179 c0.446-0.264,0.854-0.507,1.207-0.717c15.003-8.953,22.866-23.407,21.569-39.653c-0.863-10.959-2.82-15.896-9.52-24 c-6.584-7.969-15.621-13.298-25.447-15.005C575.678,74.999,548.257,74.857,532.396,74.857L532.396,74.857z M534.938,114.067h9.91 c14.027,0,16.806,0.233,18.518,0.981c3.25,1.408,3.58,2.091,3.835,4.957c0.256,2.848-0.097,3.994-2.922,6.112 c-0.093,0.069-0.164,0.123-0.223,0.166c-1.865,0.345-8.786,0.345-17.447,0.345h-11.67L534.938,114.067L534.938,114.067z"/> </g> </g> </svg> </section> </div> </article> <style> @import "compass/css3"; @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); html, body { width: 100%; height: 100%; font: 700 1em "News Cycle", sans-serif; letter-spacing:.15em; color: #ff6; background: #000; overflow: hidden; margin: 0; } .starwars { section { position: absolute; top: 5%; left: 25%; z-index: 99; } .start { font-size: 200%; $start-width: 14em; width: $start-width; margin: -4em 0 0 (- $start-width / 2); text-align: center; cursor: pointer; span { color: rgb(75, 213, 238); } } .intro { $intro-width: 15em; width: $intro-width; margin: 0 0 0 (- $intro-width / 2); font-size: 200%; font-weight: 400; color: rgb(75, 213, 238); opacity: 0; animation: intro 6s ease-out 1s; } .logo { opacity: 0; animation: logo 9s ease-out 9s; svg { width: inherit; } } .titles { width: 14.65em; margin: 0.5); top: auto; bottom: 0; height: 50em; font-size: 350%; text-align: justify; overflow: hidden; transform-origin: 50% 100%; @include transform(perspective(300px) rotateX(25deg)); > div { position: absolute; top: 100%; animation: titles 81s linear 13s; > p { margin: 1.35em 0 1.85em 0; line-height: 1.35em; @include backface-visibility(hidden); } } } } @keyframes intro { 0% { opacity: 0; } 20% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes logo { 0% { $logo-width: 18em; width: $logo-width; margin: (- $logo-width / 2) 0 0 (- $logo-width / 2); @include transform(scale(2.75)); opacity: 1; } 50% { opacity: 1; $logo-width: 18em; width: $logo-width; margin: (- $logo-width / 2) 0 0 (- $logo-width / 2); } 100% { @include transform(scale(.1)); opacity: 0; $logo-width: 18em; width: $logo-width; margin: (- $logo-width / 2) 0 0 (- $logo-width / 2); } } @keyframes titles { 0% { top: 100%; opacity: 1; } 95% { opacity: 1; } 100% { top: 20%; opacity: 0; } } > </style> <script> /* * Star Wars opening crawl from 1977 * * I freaking love Star Wars, but could not find * a web version of the original opening crawl from 1977. * So I created this one. * * I wrote an article where I explain how this works: * https://nerddis.co/star-wars-opening-crawl-from-1977 * * Watch the Start Wars opening crawl on YouTube. * https://www.youtube.com/watch?v=7jK-jZo6xjY * * Stuff I used: * - CSS (animation, transform) * - HTML audio (the opening theme) * - SVG (the Star Wars logo from wikimedia.org) * http://commons.wikimedia.org/wiki/File:Star_Wars_Logo.svg * - JavaScript (to sync the animation/audio) * * Thanks to Craig Buckler for his amazing article * which helped me to create this remake of the Star Wars opening crawl. * http://www.sitepoint.com/css3-starwars-scrolling-text/ * * Sound copyright by The Walt Disney Company. * * * 2013 by Tim Pietrusky * nerddis.co * */ StarWars = (function() { /* * Constructor */ function StarWars(args) { // Context wrapper this.el = $(args.el); // Audio to play the opening crawl this.audio = this.el.find('audio').get(0); // Start the animation this.start = this.el.find('.start'); // The animation wrapper this.animation = this.el.find('.animation'); // Remove animation and shows the start screen this.reset(); // Start the animation on click this.start.bind('click', $.proxy(function() { this.start.hide(); this.audio.play(); this.el.append(this.animation); }, this)); // Reset the animation and shows the start screen $(this.audio).bind('ended', $.proxy(function() { this.audio.currentTime = 0; this.reset(); }, this)); } /* * Resets the animation and shows the start screen. */ StarWars.prototype.reset = function() { this.start.show(); this.cloned = this.animation.clone(true); this.animation.remove(); this.animation = this.cloned; }; return StarWars; })(); const intro = new StarWars({ el : '.starwars' }); </script>