spacetaxi/spacetaxi.html
2025-11-25 22:19:21 +01:00

260 lines
23 KiB
HTML

<!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>