camill/spacetaxi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

latest version

Browse Source
This commit is contained in:
camill 2025-11-25 22:19:21 +01:00
commit 054170cd93
10 changed files with 716 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
feedback.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>SpaceTaxi Quittung</title>
<style>
body{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
height: 100vh;
color: white;
}
.zelle
{
border: 3px solid white;
width: 50vw;
height: 10vw;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3vh;
padding: 1vw;
}
</style>
</head>
<body>
<div class="zelle" id="feedback">
Hallo was auch immerdas gibt ein großes Feuerwerk im ALl und vieles vieles mehr
</div>
</body>
</html>

33
planets/planet1.svg Normal file
View File

@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs></defs><g>
<g>
<g>
<path d="M49.999999999999986,12.779655201707229 C70.11585862636645,12.779655201707229 86.45598689281479,29.119783468155568 86.45598689281479,49.235642094522035 C86.45598689281479,69.35150072088851 70.11585862636645,85.69162898733684 49.999999999999986,85.69162898733684 C29.88414137363352,85.69162898733684 13.544013107185172,69.35150072088851 13.544013107185172,49.235642094522035 C13.544013107185172,29.119783468155568 29.88414137363352,12.779655201707229 49.999999999999986,12.779655201707229 Z" transform="matrix(1,0,0,1,0,0)" fill="#e32f2f" stroke="#ffffff" stroke-width="2"/>
</g>
<g>
<path d="M31.084835473273035,35.51206961643615 C32.90400173444606,35.51206961643615 34.381711962862596,36.96866969873245 34.381711962862596,38.76184787046015 C34.381711962862596,40.555026042187855 32.90400173444606,42.01162612448415 31.084835473273035,42.01162612448415 C29.265669212100004,42.01162612448415 27.787958983683477,40.555026042187855 27.787958983683477,38.76184787046015 C27.787958983683477,36.96866969873245 29.265669212100004,35.51206961643615 31.084835473273035,35.51206961643615 Z" transform="matrix(1,0,0,1,0,0)" fill="#a40202" stroke="#000000" stroke-miterlimit="3"/>
</g>
<g>
<path d="M63.348639007493645,25.84913358081038 C65.43635093376353,25.84913358081038 67.13220102359914,27.306284016656605 67.13220102359914,29.100139712698947 C67.13220102359914,30.89399540874129 65.43635093376353,32.35114584458751 63.348639007493645,32.35114584458751 C61.26092708122376,32.35114584458751 59.56507699138816,30.89399540874129 59.56507699138816,29.100139712698947 C59.56507699138816,27.306284016656605 61.26092708122376,25.84913358081038 63.348639007493645,25.84913358081038 Z" transform="matrix(1,0,0,1,0,0)" fill="#a40202" stroke="#000000" stroke-miterlimit="3"/>
</g>
<g>
<path d="M54.00562310253167,44.632116583176796 C57.60767290687517,44.632116583176796 60.533620882466984,46.695486793244385 60.533620882466984,49.235642094522035 C60.533620882466984,51.775797395799685 57.60767290687517,53.839167605867274 54.00562310253167,53.839167605867274 C50.40357329818817,53.839167605867274 47.47762532259636,51.775797395799685 47.47762532259636,49.235642094522035 C47.47762532259636,46.695486793244385 50.40357329818817,44.632116583176796 54.00562310253167,44.632116583176796 Z" transform="matrix(1,0,0,1,0,0)" fill="#953535" stroke="#000000" stroke-miterlimit="3"/>
</g>
<g>
<path d="M31.084835473273028,67.10352988459469 C34.3400742443047,67.58082378068514 36.90408664026625,66.60674173148553 36.90408664026625,69.55558386485876 C36.90408664026625,72.504425998232 32.99572889610674,72.7615912402357 29.784754684087115,72.7615912402357 C26.57378047206749,72.7615912402357 24.710025838829814,70.20851752089891 24.710025838829814,67.25967538752569 C24.710025838829814,64.31083325415246 27.907829926072296,66.63770680303813 31.084835473273028,67.10352988459469 Z" transform="matrix(1,0,0,1,0,0)" fill="#861717" stroke="#000000" stroke-miterlimit="3"/>
</g>
<g>
<path d="M84.53180252874124,45.15413898311008 C85.46300239837689,45.15413898311008 85.18267300056985,47.45984469872253 85.18267300056985,50.00000000000017 C85.18267300056985,52.54015530127782 85.36537182760256,54.49413025385069 84.43417195796691,54.49413025385069 C83.50297208833126,54.49413025385069 82.56291935145967,53.27550858031808 82.56291935145967,50.73535327904043 C82.56291935145967,48.19519797776279 83.60060265910559,45.15413898311008 84.53180252874124,45.15413898311008 Z" transform="matrix(1,0,0,1,0,0)" fill="#a40202" stroke="#000000" stroke-miterlimit="3"/>
</g>
<g>
<path d="M39.31549510942883,17.574972275595233 C39.31549510942883,19.36815044732294 34.36994106020562,20.479240593092086 33.60653338817786,19.782216196892843 C32.2631054932581,18.555608118922663 39.31549510942883,15.781794103867528 39.31549510942883,17.574972275595233 Z" transform="matrix(1,0,0,1,0,0)" fill="#a40202" stroke="#000000" stroke-miterlimit="3"/>
</g>
<g>
<path d="M16.146511989874558,48.33374569831096 C18.439678477922023,48.921196161147044 17.92062331758814,56.8579580596286 16.729793872719465,57.79856118682004 C14.634198618772094,59.45381371494998 13.853345501827093,47.746295235474875 16.146511989874558,48.33374569831096 Z" transform="matrix(1,0,0,1,0,0)" fill="#cb7474" stroke="#000000" stroke-miterlimit="3"/>
</g>
<g>
<path d="M65.42586730481322,70.62340962721285 C66.84059592434285,70.62340962721285 67.98978112864876,71.58177517404272 67.98978112864876,72.7615912402357 C67.98978112864876,73.94140730642869 66.84059592434285,74.89977285325855 65.42586730481322,74.89977285325855 C64.0111386852836,74.89977285325855 62.86195348097769,73.94140730642869 62.86195348097769,72.7615912402357 C62.86195348097769,71.58177517404272 64.0111386852836,70.62340962721285 65.42586730481322,70.62340962721285 Z" transform="matrix(1,0,0,1,0,0)" fill="#d84747" stroke="#000000" stroke-miterlimit="3"/>
</g>
<g>
<path d="M95.18553407800728,19.87545540866851 C95.21152216745261,19.87545540866851 95.23263231357285,19.896565554788747 95.23263231357285,19.922553644234075 C95.23263231357285,19.948541733679402 95.21152216745261,19.96965187979964 95.18553407800728,19.96965187979964 C95.15954598856194,19.96965187979964 95.13843584244171,19.948541733679402 95.13843584244171,19.922553644234075 C95.13843584244171,19.896565554788747 95.15954598856194,19.87545540866851 95.18553407800728,19.87545540866851 Z" transform="matrix(1,0,0,1,0,0)" fill="#fefefe" stroke="#000000" stroke-width="2"/>
</g>
</g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

6
planets/planet2.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99" width="99" height="99"><defs><linearGradient id="3508459566319265045" x1="6.637105935226728" y1="49.235642094522035" x2="93.36289406477322" y2="49.235642094522035" gradientTransform="matrix(0.011530596,0,0,0.011530596,-0.076529785,-0.067716283)"><stop stop-color="#0336ff" /><stop offset="1" stop-color="#00bdff" stop-opacity="0.711" /></linearGradient></defs><g>
<g>
<g>
<path d="M49.99999999999997,5.872748029748806 C73.9269848653858,5.872748029748806 93.36289406477323,25.30865722913621 93.36289406477323,49.235642094522035 C93.36289406477323,73.16262695990787 73.9269848653858,92.59853615929526 49.99999999999997,92.59853615929526 C26.07301513461414,92.59853615929526 6.637105935226721,73.16262695990787 6.637105935226721,49.235642094522035 C6.637105935226721,25.30865722913621 26.07301513461414,5.872748029748806 49.99999999999997,5.872748029748806 Z" transform="matrix(1,0,0,1,0,0)" fill="url('#3508459566319265045')" stroke="#ffffff" stroke-width="2"/>
</g>
</g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

33
planets/planet3.svg Normal file
View File

@ -0,0 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs></defs><g>
<g>
<g>
<path d="M49.99999999999997,24.253495283222634 C63.78476832671553,24.253495283222634 74.9821468112994,35.45087376780649 74.9821468112994,49.235642094522035 C74.9821468112994,63.02041042123758 63.78476832671553,74.21778890582144 49.99999999999997,74.21778890582144 C36.215231673284414,74.21778890582144 25.017853188700546,63.02041042123758 25.017853188700546,49.235642094522035 C25.017853188700546,35.45087376780649 36.215231673284414,24.253495283222634 49.99999999999997,24.253495283222634 Z" fill="#c3bcb6" stroke="#ffffff" stroke-width="2"/>
</g>
<g>
<path d="M43.266949678765656,35.20625768381753 C44.54241231483862,35.20625768381753 45.57847164790519,35.98994358959865 45.57847164790519,36.95471660919231 C45.57847164790519,37.91948962878597 40.95542770962612,37.91948962878597 40.95542770962612,36.95471660919231 C40.95542770962612,35.98994358959865 41.99148704269269,35.20625768381753 43.266949678765656,35.20625768381753 Z" fill="none" stroke="#93908e" stroke-width="4"/>
</g>
<g>
<path d="M65.34166267475835,41.9136305899785 C66.36925434642785,41.9136305899785 67.20396789420579,42.69731649575962 67.20396789420579,43.66208951535327 C67.20396789420579,44.62686253494692 63.47935745531091,44.62686253494692 63.47935745531091,43.66208951535327 C63.47935745531091,42.69731649575962 64.31407100308886,41.9136305899785 65.34166267475835,41.9136305899785 Z" transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#b0aba6" stroke-width="4"/>
</g>
<g>
<path d="M58.41241105317198,29.680419596029033 C59.050142371208466,29.680419596029033 59.56817203774175,29.872224278043856 59.56817203774175,30.10834946655953 C59.56817203774175,30.344474655075206 57.256650068602205,30.344474655075206 57.256650068602205,30.10834946655953 C57.256650068602205,29.872224278043856 57.77467973513549,29.680419596029033 58.41241105317198,29.680419596029033 Z" transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#b0aba6" stroke-width="2"/>
</g>
<g>
<path d="M28.042434459984854,42.941288305312085 C28.299116578133916,42.941288305312085 28.50761967075169,43.734010180732625 28.50761967075169,44.70990712082768 C28.50761967075169,45.685804060922734 27.577249249218017,45.685804060922734 27.577249249218017,44.70990712082768 C27.577249249218017,43.734010180732625 27.785752341835792,42.941288305312085 28.042434459984854,42.941288305312085 Z" transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#b0aba6" stroke-width="2"/>
</g>
<g>
<path d="M35.82577925080353,67.38826174908291 C35.91641008908537,67.14811229368104 36.7316929698904,67.23293761812886 37.64473327196587,67.57751307354151 C38.557773574041335,67.92208852895416 38.22927289068926,68.79253463429438 37.31623258861379,68.44795917888173 C36.40319228653833,68.10338372346908 35.73514841252169,67.6284112044848 35.82577925080353,67.38826174908291 Z" transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#827e75" stroke-width="2"/>
</g>
<g>
<path d="M56.91055315085704,51.939569965327394 C57.64768329853276,51.939569965327394 57.25665006860221,51.77935190595266 57.25665006860221,52.48018994235498 C57.25665006860221,53.18102797875731 54.58484694042336,53.18102797875731 54.58484694042336,52.48018994235498 C54.58484694042336,51.77935190595266 56.17342300318132,51.939569965327394 56.91055315085704,51.939569965327394 Z" transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#b0aba6" stroke-width="2"/>
</g>
<g>
<path d="M39.464942703587134,54.60994230893171 C40.09145525518753,54.60994230893171 40.60037190865179,54.99036966844031 40.60037190865179,55.45870277187073 C40.60037190865179,55.92703587530116 38.32951349852248,55.92703587530116 38.32951349852248,55.45870277187073 C38.32951349852248,54.99036966844031 38.838430151986735,54.60994230893171 39.464942703587134,54.60994230893171 Z" transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#444444" stroke-width="2"/>
</g>
<g>
<path d="M53.78936711489291,66.59992532006596 C55.06482975096588,66.59992532006596 56.100889084032445,67.38361122584709 56.100889084032445,68.34838424544074 C56.100889084032445,69.31315726503439 51.47784514575338,69.31315726503439 51.47784514575338,68.34838424544074 C51.47784514575338,67.38361122584709 52.513904478819946,66.59992532006596 53.78936711489291,66.59992532006596 Z" fill="none" stroke="#b0aba6" stroke-width="4"/>
</g>
<g>
<path d="M67.90752253643653,57.585901939360994 C69.1829851725095,57.585901939360994 69.06328352100628,56.62559040958037 69.06328352100628,57.59036342917402 C69.06328352100628,58.555136448767676 66.75176155186675,59.33436096435554 65.596000567297,59.33436086473577 C64.63122754770335,59.33436078157804 66.63205990036356,57.585901939360994 67.90752253643653,57.585901939360994 Z" fill="none" stroke="#999592" stroke-width="4"/>
</g>
</g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

12
planets/planet4.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99" width="99" height="99"><defs><radialGradient id="9766374505327868956" cx="3.092062742589107" cy="49.999999999999986" r="74.29397814585104" gradientTransform="matrix(0.013460041,0,0,0.013460041,-0.041619292,-0.173002055)"><stop stop-color="#46d8c1" /><stop offset="0.305328" stop-color="#3ecbc7" stop-opacity="0.849" /><stop offset="0.569672" stop-color="#3cc7c9" stop-opacity="0.806" /><stop offset="1" stop-color="#1eb457" stop-opacity="0.711" /></radialGradient><linearGradient id="15182817303782241296" x1="80.13879922479632" y1="30.131622656454734" x2="92.79973926119396" y2="30.131622656454734" gradientTransform="matrix(0.078983077,0,0,0.084154588,-6.329608939,-2.035714286)"><stop stop-color="#2d4d33" /><stop offset="1" stop-color="#1dc687" /></linearGradient></defs><g>
<g>
<g>
<path d="M40.239051815514635,12.853010927074514 C60.73619492627831,12.853010927074514 77.38604088844016,29.502856889236345 77.38604088844016,49.99999999999999 C77.38604088844016,70.49714311076364 60.73619492627831,87.14698907292546 40.239051815514635,87.14698907292546 C19.741908704750962,87.14698907292546 3.092062742589114,70.49714311076364 3.092062742589114,49.99999999999999 C3.092062742589114,29.502856889236345 19.741908704750962,12.853010927074514 40.239051815514635,12.853010927074514 Z" transform="matrix(1,0,0,1,0,0)" fill="url('#9766374505327868956')" stroke="#ffffff" stroke-width="2"/>
</g>
<g>
<path d="M86.46926924299513,24.190175935463657 C89.96232623522367,24.190175935463657 92.79973926119395,26.85322279782682 92.79973926119395,30.13162265645473 C92.79973926119395,33.410022515082645 89.96232623522367,36.073069377445805 86.46926924299513,36.073069377445805 C82.97621225076658,36.073069377445805 80.1387992247963,33.410022515082645 80.1387992247963,30.13162265645473 C80.1387992247963,26.85322279782682 82.97621225076658,24.190175935463657 86.46926924299513,24.190175935463657 Z" transform="matrix(1,0,0,1,0,0)" fill="url('#15182817303782241296')" stroke="#ffffff" stroke-width="2"/>
</g>
<g>
<path d="M149.24348311060916,41.59012704693752 C149.28251168035473,41.59012704693752 149.3142146191924,41.62182998577518 149.3142146191924,41.66085855552075 C149.3142146191924,41.699887125266315 149.28251168035473,41.731590064103976 149.24348311060916,41.731590064103976 C149.2044545408636,41.731590064103976 149.17275160202593,41.699887125266315 149.17275160202593,41.66085855552075 C149.17275160202593,41.62182998577518 149.2044545408636,41.59012704693752 149.24348311060916,41.59012704693752 Z" fill="#fefefe" stroke="#000000" stroke-width="2"/>
</g>
</g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

9
planets/planet5.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><defs></defs><g>
<g>
<g>
<path d="M49.99999999999923,2.0068148794455283 C76.48190898665132,2.0068148794455283 97.99318512055345,23.518091013347625 97.99318512055345,49.99999999999969 C97.99318512055345,76.48190898665175 76.48190898665132,97.99318512055385 49.99999999999923,97.99318512055385 C23.51809101334714,97.99318512055385 2.0068148794450096,76.48190898665175 2.0068148794450096,49.99999999999969 C2.0068148794450096,23.518091013347625 23.51809101334714,2.0068148794455283 49.99999999999923,2.0068148794455283 Z" transform="matrix(1,0,0,1,0,0)" fill="#ede456" stroke="#ffffff" stroke-width="2"/>
</g>
<g>
<path d="M149.24348311060916,41.59012704693752 C149.28251168035473,41.59012704693752 149.3142146191924,41.62182998577518 149.3142146191924,41.66085855552075 C149.3142146191924,41.699887125266315 149.28251168035473,41.731590064103976 149.24348311060916,41.731590064103976 C149.2044545408636,41.731590064103976 149.17275160202593,41.699887125266315 149.17275160202593,41.66085855552075 C149.17275160202593,41.62182998577518 149.2044545408636,41.59012704693752 149.24348311060916,41.59012704693752 Z" fill="#fefefe" stroke="#000000" stroke-width="2"/>
</g>
</g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

200
spacetaxi.css Normal file
View File

@ -0,0 +1,200 @@
body,
form {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
overflow: hidden;
}
.zelle,
.doppelzelle {
margin-top: 2vw;
border: 3px solid white;
width: 50vw;
height: 5vw;
border-radius: 15px;
}
.doppelzelle {
border: 0;
display: flex;
justify-content: space-between;
height: 10vw;
}
#option,
#select {
height: 10vw;
width: 20vw;
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#logo {
display: flex;
margin-left: 2vw;
}
#login {
display: flex;
gap: 1vw;
margin-right: 2vw;
align-items: center;
}
#account {
display: flex;
justify-content: space-between;
align-items: center;
}
#username,
#password {
border: 0;
border-bottom: 0.1vw solid white;
background-color: rgba(255, 255, 255, 0);
width: 6vw;
}
input,
select,
textarea {
color: white;
height: 1vw;
;
}
#unternehmen {
color: white;
text-align: center;
justify-content: center;
font-size: 2vw;
}
#planeten {
height: 15vw;
display: flex;
}
#planet1 {
margin-left: 3vw;
margin-right: 3vw;
}
#planet2 {
margin-top: 6vw;
}
#planet3 {
margin-top: 1vw;
margin-right: 3vw;
}
#planet4 {
margin-top: 4vw;
}
#planet5 {
margin-left: 6vw;
margin-top: 2vw;
}
#planet1,
#planet2,
#planet3,
#planet4,
#planet5 {
cursor: grabbing;
}
#score {
width: 41vw;
}
.subtitle {
align-self: center;
}
.check,
.radio {
margin-left: 1vw;
margin-top: 0.5vw;
}
#check-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
#score {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
align-items: center;
justify-content: space-evenly;
padding-left: 2vw;
}
.scorefield {
display: flex;
width: 8vw;
align-items: center;
gap: 1vw;
}
#planetensum,
#dauersum,
#kostensum {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid white;
height: 3vw;
width: 3vw;
box-sizing: border-box;
}
#launch {
font-size: 3vh;
text-shadow: -1px 1px 0 #000000;
cursor: grabbing;
margin-left: 2vw;
background-color: rgb(143, 6, 6);
color: rgb(255, 255, 255);
width: 6vw;
height: 6vh;
border: 0;
border-radius: 15px;
}
#launch:hover {
background-color: rgb(196, 50, 6);
}
particle {
border-radius: 50%;
left: 0;
pointer-events: none;
position: fixed;
top: 0;
opacity: 0;
}

260
spacetaxi.html Normal file
View File

@ -0,0 +1,260 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>SpaceTaxi</title>
<link rel="stylesheet" href="spacetaxi.css">
<script src="spacetaxi.js"></script>
</head>
<body>
<form method="post" action="http://info.mi.hs-offenburg.de/~tom/formGetPost.php">
<div class="zelle" id="account">
<div id="logo">
<p id="unternehmen">astroID</p>
</div>
<div id="login">
<p>username:</p>
<input type="text" name="username" id="username">
<p>password:</p>
<input type="password" name="password" id="password">
</div>
</div>
<div class="doppelzelle">
<div class="zelle" id="select">
<p class="subtitle">Wähle dein Raumschiff aus</p>
<label><input type="radio" name="spaceship" value="rocket1" class="radio">Ariane 5 ECA</label>
<label><input type="radio" name="spaceship" value="rocket2" class="radio">Saturn V</label>
<label><input type="radio" name="spaceship" value="rocket3" class="radio">Langer Marsch 5</label>
</div>
<div class="zelle" id="option">
<p class="subtitle">Wähle deine Ausstattung aus</p>
<div id="check-grid">
<label><input type="checkbox" name="blenden" value="true" class="check">UV-Blenden</label>
<label><input type="checkbox" name="mikrowelle" value="true" class="check">Mikrowelle</label>
<label><input type="checkbox" name="schwebepizza" value="true" class="check">Schwebepizza</label>
<label><input type="checkbox" name="marsweckle" value="true" class="check">Marsweckle</label>
<label><input type="checkbox" name="rover" value="true" class="check">Rover</label>
<label><input type="checkbox" name="panel" value="true" class="check">PV-Panel</label>
</div>
</div>
</div>
<div class="zelle" id="planeten">
<svg id="planet1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<defs></defs>
<g>
<g>
<g>
<path
d="M49.999999999999986,12.779655201707229 C70.11585862636645,12.779655201707229 86.45598689281479,29.119783468155568 86.45598689281479,49.235642094522035 C86.45598689281479,69.35150072088851 70.11585862636645,85.69162898733684 49.999999999999986,85.69162898733684 C29.88414137363352,85.69162898733684 13.544013107185172,69.35150072088851 13.544013107185172,49.235642094522035 C13.544013107185172,29.119783468155568 29.88414137363352,12.779655201707229 49.999999999999986,12.779655201707229 Z"
transform="matrix(1,0,0,1,0,0)" fill="#e32f2f" stroke="#ffffff" stroke-width="2" />
</g>
<g>
<path
d="M31.084835473273035,35.51206961643615 C32.90400173444606,35.51206961643615 34.381711962862596,36.96866969873245 34.381711962862596,38.76184787046015 C34.381711962862596,40.555026042187855 32.90400173444606,42.01162612448415 31.084835473273035,42.01162612448415 C29.265669212100004,42.01162612448415 27.787958983683477,40.555026042187855 27.787958983683477,38.76184787046015 C27.787958983683477,36.96866969873245 29.265669212100004,35.51206961643615 31.084835473273035,35.51206961643615 Z"
transform="matrix(1,0,0,1,0,0)" fill="#a40202" stroke="#000000" stroke-miterlimit="3" />
</g>
<g>
<path
d="M63.348639007493645,25.84913358081038 C65.43635093376353,25.84913358081038 67.13220102359914,27.306284016656605 67.13220102359914,29.100139712698947 C67.13220102359914,30.89399540874129 65.43635093376353,32.35114584458751 63.348639007493645,32.35114584458751 C61.26092708122376,32.35114584458751 59.56507699138816,30.89399540874129 59.56507699138816,29.100139712698947 C59.56507699138816,27.306284016656605 61.26092708122376,25.84913358081038 63.348639007493645,25.84913358081038 Z"
transform="matrix(1,0,0,1,0,0)" fill="#a40202" stroke="#000000" stroke-miterlimit="3" />
</g>
<g>
<path
d="M54.00562310253167,44.632116583176796 C57.60767290687517,44.632116583176796 60.533620882466984,46.695486793244385 60.533620882466984,49.235642094522035 C60.533620882466984,51.775797395799685 57.60767290687517,53.839167605867274 54.00562310253167,53.839167605867274 C50.40357329818817,53.839167605867274 47.47762532259636,51.775797395799685 47.47762532259636,49.235642094522035 C47.47762532259636,46.695486793244385 50.40357329818817,44.632116583176796 54.00562310253167,44.632116583176796 Z"
transform="matrix(1,0,0,1,0,0)" fill="#953535" stroke="#000000" stroke-miterlimit="3" />
</g>
<g>
<path
d="M31.084835473273028,67.10352988459469 C34.3400742443047,67.58082378068514 36.90408664026625,66.60674173148553 36.90408664026625,69.55558386485876 C36.90408664026625,72.504425998232 32.99572889610674,72.7615912402357 29.784754684087115,72.7615912402357 C26.57378047206749,72.7615912402357 24.710025838829814,70.20851752089891 24.710025838829814,67.25967538752569 C24.710025838829814,64.31083325415246 27.907829926072296,66.63770680303813 31.084835473273028,67.10352988459469 Z"
transform="matrix(1,0,0,1,0,0)" fill="#861717" stroke="#000000" stroke-miterlimit="3" />
</g>
<g>
<path
d="M84.53180252874124,45.15413898311008 C85.46300239837689,45.15413898311008 85.18267300056985,47.45984469872253 85.18267300056985,50.00000000000017 C85.18267300056985,52.54015530127782 85.36537182760256,54.49413025385069 84.43417195796691,54.49413025385069 C83.50297208833126,54.49413025385069 82.56291935145967,53.27550858031808 82.56291935145967,50.73535327904043 C82.56291935145967,48.19519797776279 83.60060265910559,45.15413898311008 84.53180252874124,45.15413898311008 Z"
transform="matrix(1,0,0,1,0,0)" fill="#a40202" stroke="#000000" stroke-miterlimit="3" />
</g>
<g>
<path
d="M39.31549510942883,17.574972275595233 C39.31549510942883,19.36815044732294 34.36994106020562,20.479240593092086 33.60653338817786,19.782216196892843 C32.2631054932581,18.555608118922663 39.31549510942883,15.781794103867528 39.31549510942883,17.574972275595233 Z"
transform="matrix(1,0,0,1,0,0)" fill="#a40202" stroke="#000000" stroke-miterlimit="3" />
</g>
<g>
<path
d="M16.146511989874558,48.33374569831096 C18.439678477922023,48.921196161147044 17.92062331758814,56.8579580596286 16.729793872719465,57.79856118682004 C14.634198618772094,59.45381371494998 13.853345501827093,47.746295235474875 16.146511989874558,48.33374569831096 Z"
transform="matrix(1,0,0,1,0,0)" fill="#cb7474" stroke="#000000" stroke-miterlimit="3" />
</g>
<g>
<path
d="M65.42586730481322,70.62340962721285 C66.84059592434285,70.62340962721285 67.98978112864876,71.58177517404272 67.98978112864876,72.7615912402357 C67.98978112864876,73.94140730642869 66.84059592434285,74.89977285325855 65.42586730481322,74.89977285325855 C64.0111386852836,74.89977285325855 62.86195348097769,73.94140730642869 62.86195348097769,72.7615912402357 C62.86195348097769,71.58177517404272 64.0111386852836,70.62340962721285 65.42586730481322,70.62340962721285 Z"
transform="matrix(1,0,0,1,0,0)" fill="#d84747" stroke="#000000" stroke-miterlimit="3" />
</g>
<g>
<path
d="M95.18553407800728,19.87545540866851 C95.21152216745261,19.87545540866851 95.23263231357285,19.896565554788747 95.23263231357285,19.922553644234075 C95.23263231357285,19.948541733679402 95.21152216745261,19.96965187979964 95.18553407800728,19.96965187979964 C95.15954598856194,19.96965187979964 95.13843584244171,19.948541733679402 95.13843584244171,19.922553644234075 C95.13843584244171,19.896565554788747 95.15954598856194,19.87545540866851 95.18553407800728,19.87545540866851 Z"
transform="matrix(1,0,0,1,0,0)" fill="#fefefe" stroke="#000000" stroke-width="2" />
</g>
</g>
</g>
</svg>
<svg id="planet2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99" width="99" height="99">
<defs>
<linearGradient id="a-3508459566319265045" x1="6.637105935226728" y1="49.235642094522035"
x2="93.36289406477322" y2="49.235642094522035"
gradientTransform="matrix(0.011530596,0,0,0.011530596,-0.076529785,-0.067716283)">
<stop stop-color="#0336ff" offset="0"/>
<stop offset="1" stop-color="#00bdff" stop-opacity="0.711" />
</linearGradient>
</defs>
<g>
<g>
<g>
<path
d="M49.99999999999997,5.872748029748806 C73.9269848653858,5.872748029748806 93.36289406477323,25.30865722913621 93.36289406477323,49.235642094522035 C93.36289406477323,73.16262695990787 73.9269848653858,92.59853615929526 49.99999999999997,92.59853615929526 C26.07301513461414,92.59853615929526 6.637105935226721,73.16262695990787 6.637105935226721,49.235642094522035 C6.637105935226721,25.30865722913621 26.07301513461414,5.872748029748806 49.99999999999997,5.872748029748806 Z"
transform="matrix(1,0,0,1,0,0)" fill="url('#a-3508459566319265045')" stroke="#ffffff"
stroke-width="2" />
</g>
</g>
</g>
</svg>
<svg id="planet3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<defs></defs>
<g>
<g>
<g>
<path
d="M49.99999999999997,24.253495283222634 C63.78476832671553,24.253495283222634 74.9821468112994,35.45087376780649 74.9821468112994,49.235642094522035 C74.9821468112994,63.02041042123758 63.78476832671553,74.21778890582144 49.99999999999997,74.21778890582144 C36.215231673284414,74.21778890582144 25.017853188700546,63.02041042123758 25.017853188700546,49.235642094522035 C25.017853188700546,35.45087376780649 36.215231673284414,24.253495283222634 49.99999999999997,24.253495283222634 Z"
fill="#c3bcb6" stroke="#ffffff" stroke-width="2" />
</g>
<g>
<path
d="M43.266949678765656,35.20625768381753 C44.54241231483862,35.20625768381753 45.57847164790519,35.98994358959865 45.57847164790519,36.95471660919231 C45.57847164790519,37.91948962878597 40.95542770962612,37.91948962878597 40.95542770962612,36.95471660919231 C40.95542770962612,35.98994358959865 41.99148704269269,35.20625768381753 43.266949678765656,35.20625768381753 Z"
fill="none" stroke="#93908e" stroke-width="4" />
</g>
<g>
<path
d="M65.34166267475835,41.9136305899785 C66.36925434642785,41.9136305899785 67.20396789420579,42.69731649575962 67.20396789420579,43.66208951535327 C67.20396789420579,44.62686253494692 63.47935745531091,44.62686253494692 63.47935745531091,43.66208951535327 C63.47935745531091,42.69731649575962 64.31407100308886,41.9136305899785 65.34166267475835,41.9136305899785 Z"
transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#b0aba6" stroke-width="4" />
</g>
<g>
<path
d="M58.41241105317198,29.680419596029033 C59.050142371208466,29.680419596029033 59.56817203774175,29.872224278043856 59.56817203774175,30.10834946655953 C59.56817203774175,30.344474655075206 57.256650068602205,30.344474655075206 57.256650068602205,30.10834946655953 C57.256650068602205,29.872224278043856 57.77467973513549,29.680419596029033 58.41241105317198,29.680419596029033 Z"
transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#b0aba6" stroke-width="2" />
</g>
<g>
<path
d="M28.042434459984854,42.941288305312085 C28.299116578133916,42.941288305312085 28.50761967075169,43.734010180732625 28.50761967075169,44.70990712082768 C28.50761967075169,45.685804060922734 27.577249249218017,45.685804060922734 27.577249249218017,44.70990712082768 C27.577249249218017,43.734010180732625 27.785752341835792,42.941288305312085 28.042434459984854,42.941288305312085 Z"
transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#b0aba6" stroke-width="2" />
</g>
<g>
<path
d="M35.82577925080353,67.38826174908291 C35.91641008908537,67.14811229368104 36.7316929698904,67.23293761812886 37.64473327196587,67.57751307354151 C38.557773574041335,67.92208852895416 38.22927289068926,68.79253463429438 37.31623258861379,68.44795917888173 C36.40319228653833,68.10338372346908 35.73514841252169,67.6284112044848 35.82577925080353,67.38826174908291 Z"
transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#827e75" stroke-width="2" />
</g>
<g>
<path
d="M56.91055315085704,51.939569965327394 C57.64768329853276,51.939569965327394 57.25665006860221,51.77935190595266 57.25665006860221,52.48018994235498 C57.25665006860221,53.18102797875731 54.58484694042336,53.18102797875731 54.58484694042336,52.48018994235498 C54.58484694042336,51.77935190595266 56.17342300318132,51.939569965327394 56.91055315085704,51.939569965327394 Z"
transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#b0aba6" stroke-width="2" />
</g>
<g>
<path
d="M39.464942703587134,54.60994230893171 C40.09145525518753,54.60994230893171 40.60037190865179,54.99036966844031 40.60037190865179,55.45870277187073 C40.60037190865179,55.92703587530116 38.32951349852248,55.92703587530116 38.32951349852248,55.45870277187073 C38.32951349852248,54.99036966844031 38.838430151986735,54.60994230893171 39.464942703587134,54.60994230893171 Z"
transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#444444" stroke-width="2" />
</g>
<g>
<path
d="M53.78936711489291,66.59992532006596 C55.06482975096588,66.59992532006596 56.100889084032445,67.38361122584709 56.100889084032445,68.34838424544074 C56.100889084032445,69.31315726503439 51.47784514575338,69.31315726503439 51.47784514575338,68.34838424544074 C51.47784514575338,67.38361122584709 52.513904478819946,66.59992532006596 53.78936711489291,66.59992532006596 Z"
fill="none" stroke="#b0aba6" stroke-width="4" />
</g>
<g>
<path
d="M67.90752253643653,57.585901939360994 C69.1829851725095,57.585901939360994 69.06328352100628,56.62559040958037 69.06328352100628,57.59036342917402 C69.06328352100628,58.555136448767676 66.75176155186675,59.33436096435554 65.596000567297,59.33436086473577 C64.63122754770335,59.33436078157804 66.63205990036356,57.585901939360994 67.90752253643653,57.585901939360994 Z"
fill="none" stroke="#999592" stroke-width="4" />
</g>
</g>
</g>
</svg>
<svg id="planet4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99 99" width="99" height="99">
<defs>
<radialGradient id="b-9766374505327868956" cx="3.092062742589107" cy="49.999999999999986"
r="74.29397814585104"
gradientTransform="matrix(0.013460041,0,0,0.013460041,-0.041619292,-0.173002055)">
<stop stop-color="#46d8c1" offset="0"/>
<stop offset="0.305328" stop-color="#3ecbc7" stop-opacity="0.849" />
<stop offset="0.569672" stop-color="#3cc7c9" stop-opacity="0.806" />
<stop offset="1" stop-color="#1eb457" stop-opacity="0.711" />
</radialGradient>
<linearGradient id="c-15182817303782241296" x1="80.13879922479632" y1="30.131622656454734"
x2="92.79973926119396" y2="30.131622656454734"
gradientTransform="matrix(0.078983077,0,0,0.084154588,-6.329608939,-2.035714286)">
<stop stop-color="#2d4d33" offset="0" />
<stop offset="1" stop-color="#1dc687" />
</linearGradient>
</defs>
<g>
<g>
<g>
<path
d="M40.239051815514635,12.853010927074514 C60.73619492627831,12.853010927074514 77.38604088844016,29.502856889236345 77.38604088844016,49.99999999999999 C77.38604088844016,70.49714311076364 60.73619492627831,87.14698907292546 40.239051815514635,87.14698907292546 C19.741908704750962,87.14698907292546 3.092062742589114,70.49714311076364 3.092062742589114,49.99999999999999 C3.092062742589114,29.502856889236345 19.741908704750962,12.853010927074514 40.239051815514635,12.853010927074514 Z"
transform="matrix(1,0,0,1,0,0)" fill="url('#b-9766374505327868956')" stroke="#ffffff"
stroke-width="2" />
</g>
<g>
<path
d="M86.46926924299513,24.190175935463657 C89.96232623522367,24.190175935463657 92.79973926119395,26.85322279782682 92.79973926119395,30.13162265645473 C92.79973926119395,33.410022515082645 89.96232623522367,36.073069377445805 86.46926924299513,36.073069377445805 C82.97621225076658,36.073069377445805 80.1387992247963,33.410022515082645 80.1387992247963,30.13162265645473 C80.1387992247963,26.85322279782682 82.97621225076658,24.190175935463657 86.46926924299513,24.190175935463657 Z"
transform="matrix(1,0,0,1,0,0)" fill="url('#c-15182817303782241296')" stroke="#ffffff"
stroke-width="2" />
</g>
<g>
<path
d="M149.24348311060916,41.59012704693752 C149.28251168035473,41.59012704693752 149.3142146191924,41.62182998577518 149.3142146191924,41.66085855552075 C149.3142146191924,41.699887125266315 149.28251168035473,41.731590064103976 149.24348311060916,41.731590064103976 C149.2044545408636,41.731590064103976 149.17275160202593,41.699887125266315 149.17275160202593,41.66085855552075 C149.17275160202593,41.62182998577518 149.2044545408636,41.59012704693752 149.24348311060916,41.59012704693752 Z"
fill="#fefefe" stroke="#000000" stroke-width="2" />
</g>
</g>
</g>
</svg>
<svg id="planet5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<defs></defs>
<g>
<g>
<g>
<path
d="M49.99999999999923,2.0068148794455283 C76.48190898665132,2.0068148794455283 97.99318512055345,23.518091013347625 97.99318512055345,49.99999999999969 C97.99318512055345,76.48190898665175 76.48190898665132,97.99318512055385 49.99999999999923,97.99318512055385 C23.51809101334714,97.99318512055385 2.0068148794450096,76.48190898665175 2.0068148794450096,49.99999999999969 C2.0068148794450096,23.518091013347625 23.51809101334714,2.0068148794455283 49.99999999999923,2.0068148794455283 Z"
transform="matrix(1,0,0,1,0,0)" fill="#ede456" stroke="#ffffff" stroke-width="2" />
</g>
<g>
<path
d="M149.24348311060916,41.59012704693752 C149.28251168035473,41.59012704693752 149.3142146191924,41.62182998577518 149.3142146191924,41.66085855552075 C149.3142146191924,41.699887125266315 149.28251168035473,41.731590064103976 149.24348311060916,41.731590064103976 C149.2044545408636,41.731590064103976 149.17275160202593,41.699887125266315 149.17275160202593,41.66085855552075 C149.17275160202593,41.62182998577518 149.2044545408636,41.59012704693752 149.24348311060916,41.59012704693752 Z"
fill="#fefefe" stroke="#000000" stroke-width="2" />
</g>
</g>
</g>
</svg>
</div>
<div class="zelle" id="score">
<div class="scorefield" id="first">
<p>Planeten</p>
<div id="planetensum">0</div>
</div>
<div class="scorefield">
<p>Dauer</p>
<div id="dauersum">0y
</div>
</div>
<div class="scorefield" id="last">
<p>Kosten</p>
<div id="kostensum">0M$</div>
</div>
<input type="submit" id="launch" value="Launch!">
</div>
<input type="hidden" id="planete" name="planete" value="">
<input type="hidden" id="dauer" name="dauer" value="">
<input type="hidden" id="kosten" name="kosten" value="">
</form>
</body>
</html>

115
spacetaxi.js Normal file
View File

@ -0,0 +1,115 @@
document.addEventListener('DOMContentLoaded', init);
list_id = [0, 0, 0, 0, 0];
function init() {
create_star_field(100);
document.querySelectorAll('input[name="spaceship"]').forEach(radio => {
radio.addEventListener('change', update_score);
});
//myForm.password.addEventListener('change', check_password);
//myForm.spaceship.addEventListener('change', update_score);
document.querySelectorAll('svg').forEach(function (svg) { svg.addEventListener('click', printClicked) });
}
function create_star_field(n)
{
for (let i = 0; i < n; i++)
{
create_star();
}
}
function create_star()
{
const x = Math.floor(Math.random() * window.innerWidth);
const y = Math.floor(Math.random() * window.innerHeight);
const star = document.createElement('particle');
document.body.appendChild(star);
star.style.position = 'absolute';
star.style.opacity = '1';
star.style.zIndex = '-1';
const size = Math.round(Math.random() * 5);
star.style.height = `${size}px`;
star.style.width = `${size}px`;
star.style.background = '#ffffff';
star.style.left = `${x}px`;
star.style.top = `${y}px`;
}
function check_password(e) {
return
}
function check_username(e) {
return
}
function printClicked(e) {
const planet_id = e.currentTarget.id;
const svg_element = e.currentTarget;
planet_index = planet_id[planet_id.length - 1] - 1
if (list_id[planet_index] == 1) {
svg_element.querySelectorAll("path")[0].setAttribute("stroke", "#ffffff");
svg_element.querySelectorAll("path")[0].setAttribute("stroke-width", "2");
list_id[planet_index] = 0;
}
else {
svg_element.querySelectorAll("path")[0].setAttribute("stroke", "#ff0000f0");
svg_element.querySelectorAll("path")[0].setAttribute("stroke-width", "0.4vw");
list_id[planet_index] = 1;
}
update_score()
}
function update_score() {
planet_sum = document.getElementById("planetensum");
dauer_sum = document.getElementById("dauersum");
kosten_sum = document.getElementById("kostensum");
current_sum = 0;
id_sum = 0;
for (let a = 0; a < 5; a++) {
if (list_id[a] == 1) {
current_sum += 1;
id_sum += a + 1;
}
}
dauer_sum.textContent = Math.round(id_sum / 2) + "y";
//dauer_sum.textContent += "d";
planet_sum.textContent = current_sum;
let rocket_factor = 1.0;
let rocket_selected = document.querySelectorAll("form")[0].spaceship.value;
switch (rocket_selected) {
case "rocket1": rocket_factor = 1.5; break;
case "rocket2": rocket_factor = 0.75; break;
case "rocket3": rocket_factor = 2.5; break;
default: rocket_factor = 0; break;
}
kosten_sum.textContent = Math.round(id_sum * rocket_factor) + "M$";
document.getElementById("planete").value = planet_sum.textContent;
document.getElementById("dauer").value = dauer_sum.textContent;
document.getElementById("kosten").value = kosten_sum.textContent;
}

5
spacetaxi.php Normal file
View File

@ -0,0 +1,5 @@
<?php
?>