diff --git a/assets/index-CpUBV3E5.js b/assets/index-3zhe2Sl6.js similarity index 100% rename from assets/index-CpUBV3E5.js rename to assets/index-3zhe2Sl6.js diff --git a/assets/index-CfSeDG2G.css b/assets/index-CfSeDG2G.css new file mode 100644 index 0000000..523ab84 --- /dev/null +++ b/assets/index-CfSeDG2G.css @@ -0,0 +1 @@ +@charset "UTF-8";.App{text-align:center;padding:20px;background-color:#8d8787;color:#fff;min-height:100vh;font-size:17px}.orientation-warning{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;color:#fff;font-size:1.5rem;text-align:center;z-index:1000}@keyframes blink-shadow{0%,to{box-shadow:0 0 10px 2px #fffc}50%{box-shadow:0 0 20px 4px #444}}section{margin:0;width:100vw;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#8d8787}section .text{position:relative;font-size:12vw;text-align:center;color:#fff;-webkit-box-reflect:below -.46em linear-gradient(transparent,rgba(0,0,0,.2666666667))}section .text span{position:relative;display:inline-block}.hide{display:none}.button-highlight{background-color:#f5f5f5;color:#444;padding:10px 20px;font-size:1em;border:none;border-radius:5px;cursor:pointer;outline:none;animation:blink-shadow 1s infinite;transition:transform .3s}.button-highlight:hover{transform:scale(1.05)}.battlefield{display:flex;justify-content:center;align-items:flex-start;gap:40px;padding-top:60px;overflow:hidden;position:relative}.card-container{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:550px;margin:0 auto}.card-header{font-size:.85em;position:absolute;background-color:#444;color:#fff;padding:0 5px;border-radius:0 0 10px 10px;width:50%;left:50%;transform:translate(-50%) translateY(-50%);top:10px;text-align:center;font-weight:700}.card-header h2{margin:.2em 1em}.card-spieler,.card-computer{position:relative;width:100%;max-width:550px;height:auto;aspect-ratio:.75;border-radius:1em;overflow:hidden;transition:transform .6s}.card-spieler img,.card-computer img{width:100%;height:auto;border-radius:5px;margin-bottom:5px}.card-flip{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s;perspective:1000px}.card-front,.card-back{position:absolute;width:100%;height:100%;border-radius:1em;backface-visibility:hidden;box-sizing:border-box}.card-front{width:100%;height:100%;padding:20px;border-radius:1em;box-shadow:0 8px 16px #0000004d;background:linear-gradient(to bottom,#f5f5f5 95%,#444 5%);border:.8em solid #444444;position:absolute;backface-visibility:hidden;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}.card-back{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center}.card-back img{width:100%;height:auto;border-radius:1em}.card-properties{list-style:none;padding:0;margin:0;width:100%}.card-properties li{display:flex;justify-content:space-between;align-items:center;margin:10px 0;width:100%;color:#fff}.property-label{flex:1;text-align:left;font-weight:700}.property-value{flex:.5;text-align:center;font-weight:700}.property-label,.property-value{transition:color .3s,background-color .3s}body:not(.computer-turn) .player-card .property-label:hover,body:not(.computer-turn) .player-card .property-value:hover{background-color:#444;color:#fff}.rating-scale{flex:1;height:10px;background-color:#eee;border-radius:5px;overflow:hidden;min-width:100px;display:flex;justify-content:flex-end}.rating-scale .rating-bar{width:100%;height:100%;transition:width .3s}.card-description{width:calc(100% + 40px);margin:0 -20px;color:#fff;font-size:17px;line-height:1.5;background-color:#444;box-sizing:border-box;text-align:left;padding:10px 20px}.card-properties-list{list-style:none;padding:0;margin:0;width:100%}.card-properties-list li{display:flex;justify-content:space-between;align-items:center;margin:10px 0;width:100%;color:#b2aeae}@media (max-width: 1100px){.card-description{font-size:.9em}.card-front img{width:80%;margin:0 auto}}@media (max-width: 950px){.card-properties-list li{line-height:.5;font-size:.9em;margin:5px 0}.card-header{font-size:.75em}}@media (max-width: 900px){.card-description,.card-properties-list li{font-size:.7em}.card-header{font-size:.65em}}@media (max-width: 850px){.card-description,.card-properties-list li{font-size:.7em}.card-header{font-size:.65em}}@media (max-width: 750px){.card-description,.card-properties-list li{font-size:.6em}.card-header{font-size:.65em}}@media (max-width: 700px){.card-description,.card-properties-list li{font-size:.55em}.card-header{font-size:.65em}.rating-scale{height:8px}}@media (max-width: 650px){.card-description,.card-properties-list li{font-size:.45em}.card-header{font-size:.55em}.rating-scale{height:6px}}@media (max-width: 600px){.card-description,.card-properties-list li{font-size:.35em}.rating-scale{height:5px}}.navbar{position:fixed;top:0;width:100%;display:flex;justify-content:space-between;padding:10px 20px;background-color:transparent;z-index:1000}.navbar .navbar-left{display:flex;gap:10px}.navbar .navbar-right{display:flex;gap:10px;position:absolute;right:100px}.navbar .navbar-button{margin:10px 5px 0 0;color:#444;border:none;padding:5px 10px;border-radius:5px;cursor:pointer;transition:background-color .3s;z-index:100}.navbar .navbar-button:hover{background-color:#666161;color:#fff}.winner-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000c;color:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 8px #0003;z-index:2000;text-align:center;font-size:2em;font-family:Comic Sans MS,Comic Sans,cursive;pointer-events:none}.end-animation-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;position:fixed;top:0;left:0;background-color:#000c;z-index:1000}.end-animation-content{text-align:center;color:#fff;padding:20px;border-radius:10px;background-color:#333;animation:fadeIn 1s ease-in-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.end-animation-message{font-size:2rem;margin-bottom:20px}.end-animation-button{padding:10px 20px;font-size:1rem;color:#fff;background-color:#666161;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease;z-index:1001}.end-animation-button:hover{background-color:#b2aeae;color:#1e1e1e}.endAnimBody{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;position:fixed;top:0;left:0;background-color:#000c;z-index:1000}.endAnimBody h2{color:#fff;font-size:3rem;text-align:center;margin:0;padding:20px;background-color:#00000080;border-radius:10px}.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:start;padding-top:10vh;background-color:#000c;z-index:101}.popup-content{background-color:#8d8787;padding:20px;border-radius:5px;box-shadow:0 4px 6px #0000001a;width:80%;max-width:600px;max-height:80vh;overflow-y:auto;color:#fff}.about-me{color:#fff;margin-top:20px}.about-me h2{font-size:2em}.about-me a{color:#fff;text-decoration:none}.about-me a:hover{text-decoration:underline}.about-me img,.about-me svg{vertical-align:middle}.schliesen-button{margin-top:2em;margin-bottom:2em;display:flex;justify-content:center}.schliesen-button .button{background-color:#666161;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;transition:background-color .3s}.schliesen-button .button:hover{background-color:#b2aeae;color:#444} diff --git a/assets/index-Dsm5Rhks.css b/assets/index-Dsm5Rhks.css deleted file mode 100644 index 53fcca9..0000000 --- a/assets/index-Dsm5Rhks.css +++ /dev/null @@ -1 +0,0 @@ -@charset "UTF-8";.App{text-align:center;padding:20px;background-color:#8d8787;color:#fff;min-height:100vh;font-size:17px}.orientation-warning{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;color:#fff;font-size:1.5rem;text-align:center;z-index:1000}@keyframes blink-shadow{0%,to{box-shadow:0 0 10px 2px #fffc}50%{box-shadow:0 0 20px 4px #444}}section{margin:0;width:100vw;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;min-height:100vh;background:#8d8787}section .text{position:relative;font-size:12vw;text-align:center;color:#fff;-webkit-box-reflect:below -.46em linear-gradient(transparent,rgba(0,0,0,.2666666667))}section .text span{position:relative;display:inline-block}.hide{display:none}.button-highlight{background-color:#f5f5f5;color:#444;padding:10px 20px;font-size:1em;border:none;border-radius:5px;cursor:pointer;outline:none;animation:blink-shadow 1s infinite;transition:transform .3s}.button-highlight:hover{transform:scale(1.05)}.battlefield{display:flex;justify-content:center;align-items:flex-start;gap:40px;padding-top:60px;overflow:hidden;position:relative}.card-container{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:550px;margin:0 auto}.card-header{position:absolute;background-color:#444;color:#fff;padding:0 5px;border-radius:0 0 10px 10px;width:50%;left:50%;transform:translate(-50%) translateY(-50%);top:10px;text-align:center;font-weight:700}.card-header h2{margin:.2em 1em}.card-spieler,.card-computer{position:relative;width:100%;max-width:550px;height:auto;aspect-ratio:.75;border-radius:1em;overflow:hidden;transition:transform .6s}.card-spieler img,.card-computer img{width:100%;height:auto;border-radius:5px;margin-bottom:5px}.card-flip{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s;perspective:1000px}.card-front,.card-back{position:absolute;width:100%;height:100%;border-radius:1em;backface-visibility:hidden;box-sizing:border-box}.card-front{width:100%;height:100%;padding:20px;border-radius:1em;box-shadow:0 8px 16px #0000004d;background:linear-gradient(to bottom,#f5f5f5 95%,#444 5%);border:.8em solid #444444;position:absolute;backface-visibility:hidden;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}.card-back{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center}.card-back img{width:100%;height:auto;border-radius:1em}.card-properties{list-style:none;padding:0;margin:0;width:100%}.card-properties li{display:flex;justify-content:space-between;align-items:center;margin:10px 0;width:100%;color:#fff}.property-label{flex:1;text-align:left;font-weight:700}.property-value{flex:.5;text-align:center;font-weight:700}.property-label,.property-value{transition:color .3s,background-color .3s}body:not(.computer-turn) .player-card .property-label:hover,body:not(.computer-turn) .player-card .property-value:hover{background-color:#444;color:#fff}.rating-scale{flex:1;height:10px;background-color:#eee;border-radius:5px;overflow:hidden;margin-left:10px;min-width:100px;display:flex;justify-content:flex-end}.rating-scale .rating-bar{width:100%;height:100%;transition:width .3s}.card-description{width:calc(100% + 40px);margin:0 -20px;color:#fff;font-size:17px;line-height:1.5;background-color:#444;box-sizing:border-box}.card-properties-list{list-style:none;padding:0;margin:0;width:100%}.card-properties-list li{display:flex;justify-content:space-between;align-items:center;margin:10px 0;width:100%;color:#b2aeae}@media (max-width: 1100px){.card-description{font-size:.9em}.card-front img{width:80%;margin:0 auto}}@media (max-width: 950px){.card-properties-list li{line-height:.5;font-size:.9em;margin:5px 0}}@media (max-width: 850px){.card-description,.card-properties-list li{font-size:.7em}}@media (max-width: 700px){.card-description,.card-properties-list li{font-size:.6em}}.navbar{position:fixed;top:0;width:100%;display:flex;justify-content:space-between;padding:10px 20px;background-color:transparent;z-index:1000}.navbar .navbar-left{display:flex;gap:10px}.navbar .navbar-right{display:flex;gap:10px;position:absolute;right:100px}.navbar .navbar-button{margin:10px 5px 0 0;color:#444;border:none;padding:5px 10px;border-radius:5px;cursor:pointer;transition:background-color .3s;z-index:100}.navbar .navbar-button:hover{background-color:#666161;color:#fff}.winner-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000c;color:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 8px #0003;z-index:2000;text-align:center;font-size:2em;font-family:Comic Sans MS,Comic Sans,cursive;pointer-events:none}.end-animation-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;position:fixed;top:0;left:0;background-color:#000c;z-index:1000}.end-animation-content{text-align:center;color:#fff;padding:20px;border-radius:10px;background-color:#333;animation:fadeIn 1s ease-in-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.end-animation-message{font-size:2rem;margin-bottom:20px}.end-animation-button{padding:10px 20px;font-size:1rem;color:#fff;background-color:#666161;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease;z-index:1001}.end-animation-button:hover{background-color:#b2aeae;color:#1e1e1e}.endAnimBody{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;position:fixed;top:0;left:0;background-color:#000c;z-index:1000}.endAnimBody h2{color:#fff;font-size:3rem;text-align:center;margin:0;padding:20px;background-color:#00000080;border-radius:10px}.popup-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:start;padding-top:10vh;background-color:#000c;z-index:101}.popup-content{background-color:#8d8787;padding:20px;border-radius:5px;box-shadow:0 4px 6px #0000001a;width:80%;max-width:600px;max-height:80vh;overflow-y:auto;color:#fff}.about-me{color:#fff;margin-top:20px}.about-me h2{font-size:2em}.about-me a{color:#fff;text-decoration:none}.about-me a:hover{text-decoration:underline}.about-me img,.about-me svg{vertical-align:middle}.schliesen-button{margin-top:2em;margin-bottom:2em;display:flex;justify-content:center}.schliesen-button .button{background-color:#666161;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;transition:background-color .3s}.schliesen-button .button:hover{background-color:#b2aeae;color:#444} diff --git a/index.html b/index.html index 7d74f67..2741971 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,8 @@ Card Battle - - + +