first commit
This commit is contained in:
@@ -0,0 +1,10 @@
|
|||||||
|
I want you to build a online wizard game. for game instructions look into /wizard_instructions/. the service consists of the following components: a react app that serves as frontend, a python server, that contains the game logic and synchronizes and manages the players, an ai model in python that serves as ai player.
|
||||||
|
|
||||||
|
React frontend: Build the react website in /wizard_website/. make sure to keep the css in modules.
|
||||||
|
|
||||||
|
Python game server: Build the game server in /wizard_server/. the server should contain a component for the game logic. that game logic component should be usable apart from the server for the ai models to train. the server should manage players and lobbys.
|
||||||
|
the process is the following: a player opens the website, he creates a lobby, he joins that lobby. in that lobby there is a visibale lobby code whith which others can join that same lobby. you can also let ai players join with a button. when pressing start the game starts.
|
||||||
|
|
||||||
|
ai player: the ai player consists of a maschine learning model that was trained with reinforcement learning. the model will be trained with other models using the game logic component of the server. build the ai player in /wizard_ai/. in production the ai player should comunicate with the server over a websocket. the exact implementation of the ai model will be done later, just build the structure around it.
|
||||||
|
|
||||||
|
infrastructure: all components should be dockerized. make a dockerfile for each component and one compose file for all components together. the website will be inside the external docker network "wizard_website", the server will be inside the external docker network "wizard_api" and the server and ai model will be inside the docker network "wizard_internal". an already existing caddy container will work as reverse proxy for the services.
|
||||||
+342
@@ -0,0 +1,342 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<!-- saved from url=(0055)https://www.brettspielwelt.de/Hilfe/Anleitungen/Wizard/ -->
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<!-- Google tag (gtag.js) -->
|
||||||
|
<script async="" src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/js"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
|
||||||
|
gtag('config', 'G-4L0BPB0D5Q');
|
||||||
|
</script>
|
||||||
|
<title>Wizard - Anleitung * BrettspielWelt - Online Portal für Brettspiele</title>
|
||||||
|
|
||||||
|
<meta name="author" content="Alexander Zbiek">
|
||||||
|
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.brettspielwelt.de/">
|
||||||
|
<meta name="Keywords" content="Um Krone Und Kragen,Fußball Ligretto,Thurn und Taxis,Caylus,Packeis am Pol,Verflixxt,6nimmt,Einfach Genial,Diamant,Cafe International,Alles im Eimer,Attika,Top Race,Emerald,Dvonn,Carcassonne Erweiterung,RA,Fürsten von Florenz,meuterer,attribut,backgammon,turnit,carcassonne,vabanque,acquire,intrige,verraeter,verräter,kardinal & könig,doppelkopf,manhattan,tichu,cantstop,can't stop,kardinal,koenig,könig,bluff,lucky,dice,doko,bazaar,siedler,settler,catan,online,multiuser,spiel,brettspiel,brett,karten,verein,gemeinschaft,community,forum,fragen,antworten,mahjongg,kniffel,yahtzee,othello,chaos,spielen,chatten,BSW,spiel des jahres,solitaire,partner,game,play,java,internet,CD,computerspiel,computer,netzwerk,chat,download,brettspielwelt,entwicklung,programmieren,sofort,zocken,welt">
|
||||||
|
<meta name="Description" content="Online Spielewelt, ein Ort zum gemeinsamen Onlinespielen von Brettspielen.">
|
||||||
|
<meta name="audience" content="All">
|
||||||
|
<meta name="Robots" content="index,follow">
|
||||||
|
<meta name="Language" content="Deutsch">
|
||||||
|
<meta name="revisit-after" content="1 Day">
|
||||||
|
<meta name="Content-Language" content="de">
|
||||||
|
<link rel="image_src" href="https://www.brettspielwelt.de/img/PortalFacebook.jpg">
|
||||||
|
|
||||||
|
<meta property="og:title" content="Wizard - Anleitung * BrettspielWelt - Online Portal für Brettspiele">
|
||||||
|
<meta property="og:image" content="https://www.brettspielwelt.de/img/PortalFacebook.jpg">
|
||||||
|
<meta property="og:description" content="Willkommen zum kostenlosen Brettspiele Online Portal. Hier kannst Du die besten Brettspiele, online mit weltweit mitspielenden Spielern erleben. Ein grosse lebhafte Community bietet Hilfe und zugehörigkeitsgefühl.">
|
||||||
|
|
||||||
|
<meta name="page-topic" content="Spiel,Gesellschaft,Multiuser,Online,Brettspiel,Brettspiele,Welt,Community,Unterhaltung">
|
||||||
|
|
||||||
|
|
||||||
|
<!--[endif]---->
|
||||||
|
<link rel="Bookmark" type="image/x-icon" href="https://www.brettspielwelt.de/favicon.ico">
|
||||||
|
<link rel="Shortcut Icon" type="image/x-icon" href="https://www.brettspielwelt.de/favicon.ico">
|
||||||
|
<link rel="alternate" type="application/rss+xml" title="BrettspielWelt-NewsFeed" href="https://brettspielwelt.de/Community/News/rss/">
|
||||||
|
<!-- script language="JavaScript" src="/css/prototype.js" type="text/javascript" ></script -->
|
||||||
|
<!-- script src="https://tags.refinery89.com/tmbrettspielweltde.js" async></script -->
|
||||||
|
<script type="text/javascript">
|
||||||
|
<!--
|
||||||
|
function Login(){
|
||||||
|
window.open('https://m.brettspielwelt.de/', '_blank', '');
|
||||||
|
//GameWindow = open("/?action=play&loginroom=43","BrettspielWelt","toolbar=no,statusbar=yes,directories=no,scrollbars=no,height=533,width=611,resizable=yes");
|
||||||
|
}
|
||||||
|
// -->
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- script type="text/javascript" src="//get.mirando.de/mirando.js#a=17629719&as=1&at=100" async></script -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<meta name="google" content="notranslate">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-title" content="BrettspielWelt">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="application-name" content="BrettspielWelt">
|
||||||
|
<meta name="msapplication-tooltip" content="BrettspielWelt Online Portal">
|
||||||
|
<meta name="msapplication-window" content="width=1024;height=768">
|
||||||
|
<meta name="msapplication-navbutton-color" content="#FF3300">
|
||||||
|
<meta name="msapplication-starturl" content="https://m.brettspielwelt.de/">
|
||||||
|
<meta name="msapplication-square150x150logo" content="images/logo150.png">
|
||||||
|
<meta name="msapplication-square310x310logo" content="images/logo310.png">
|
||||||
|
<meta name="msapplication-starturl" content="https://m.brettspielwelt.de/">
|
||||||
|
<meta name="msapplication-starturl" content="https://m.brettspielwelt.de/">
|
||||||
|
<meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
|
||||||
|
<meta name="theme-color" content="#000">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, standalone, user-scalable=no">
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://m.brettspielwelt.de/">
|
||||||
|
<link rel="apple-touch-icon" href="https://www.brettspielwelt.de/Hilfe/Anleitungen/Wizard/images/logo152.png">
|
||||||
|
<link rel="icon" sizes="192x192" href="https://www.brettspielwelt.de/Hilfe/Anleitungen/Wizard/images/logo192.png">
|
||||||
|
<link rel="shortcut icon" sizes="196x196" href="https://www.brettspielwelt.de/Hilfe/Anleitungen/Wizard/images/logo196.png">
|
||||||
|
<!-- link rel="manifest" href="manifestbeta.json" -->
|
||||||
|
<link rel="prerender" type="text/html" href="https://m.brettspielwelt.de/api?get=info"><!-- Setup the language -->
|
||||||
|
<link href="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/flag-icon.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<link href="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/css" rel="stylesheet">
|
||||||
|
|
||||||
|
<script src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/jquery-3.5.1.min.js"></script>
|
||||||
|
<script src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
|
||||||
|
<script src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<link href="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/base.css" rel="stylesheet">
|
||||||
|
<!-- link href="/css/thym/css/backgroundx.css" rel="stylesheet" -->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="colors">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="wrapper" style="">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
|
||||||
|
<div id="bottom-bar" class="menu"><div class="menu inner">
|
||||||
|
<a href="https://www.brettspielwelt.de/" tabindex="0" class="icon-holder main-logo">
|
||||||
|
<img src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/logo.png" style="width: 100%;">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div tabindex="0" class="icon-holder color1 active ">
|
||||||
|
<a href="https://www.brettspielwelt.de/Spiele/">
|
||||||
|
<div>
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dice" stylename="svg-inline--fa fa-dice" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
||||||
|
<path fill="currentColor" d="M447.1 224c0-12.56-4.781-25.13-14.35-34.76l-174.9-174.9C249.1 4.786 236.5 0 223.1 0C211.4 0 198.9 4.786 189.2 14.35L14.35 189.2C4.783 198.9-.0011 211.4-.0011 223.1c0 12.56 4.785 25.17 14.35 34.8l174.9 174.9c9.625 9.562 22.19 14.35 34.75 14.35s25.13-4.783 34.75-14.35l174.9-174.9C443.2 249.1 447.1 236.6 447.1 224zM96 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S120 210.8 120 224S109.3 248 96 248zM224 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 376 224 376zM224 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S248 210.8 248 224S237.3 248 224 248zM224 120c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 120 224 120zM352 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S365.3 248 352 248zM591.1 192l-118.7 0c4.418 10.27 6.604 21.25 6.604 32.23c0 20.7-7.865 41.38-23.63 57.14l-136.2 136.2v46.37C320 490.5 341.5 512 368 512h223.1c26.5 0 47.1-21.5 47.1-47.1V240C639.1 213.5 618.5 192 591.1 192zM479.1 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S493.2 376 479.1 376z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<div class="icn-text">Games</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div tabindex="0" class="icon-holder color2 selected">
|
||||||
|
<a href="https://www.brettspielwelt.de/Hilfe/">
|
||||||
|
<div>
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="64px" height="64px" viewBox="0 0 1280.000000 1280.000000" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> <path fill="currentColor" d="M6095 12794 c-1453 -77 -2788 -613 -3885 -1558 -138 -119 -447 -423 -570 -561 -517 -579 -915 -1221 -1194 -1928 -224 -567 -361 -1145 -423 -1792 -24 -252 -24 -858 0 -1110 108 -1120 456 -2103 1068 -3016 355 -531 836 -1049 1344 -1450 989 -780 2125 -1232 3410 -1356 252 -24 858 -24 1110 0 1113 107 2103 456 3004 1059 338 227 614 452 919 753 264 259 421 437 632 717 728 964 1148 2057 1267 3293 24 252 24 858 0 1110 -137 1422 -679 2669 -1617 3720 -123 138 -432 442 -570 561 -1031 889 -2265 1413 -3625 1539 -162 15 -716 27 -870 19z m525 -2385 c615 -61 1156 -302 1535 -683 246 -247 428 -573 514 -921 44 -178 56 -297 56 -575 0 -346 -31 -567 -111 -806 -138 -412 -413 -725 -835 -948 -218 -115 -423 -185 -771 -261 l-216 -48 -4 -311 c-5 -337 -8 -357 -68 -476 -51 -101 -155 -187 -281 -231 -94 -34 -285 -34 -384 -1 -170 57 -271 167 -322 352 -16 59 -18 117 -18 625 0 501 2 566 17 615 37 119 105 148 548 239 310 64 467 118 633 217 331 199 516 500 546 888 26 342 -74 602 -328 857 -112 112 -179 161 -301 220 -168 81 -318 113 -545 113 -309 1 -529 -57 -735 -192 -112 -74 -296 -258 -447 -447 -138 -172 -284 -318 -347 -346 -58 -25 -202 -39 -286 -28 -94 13 -164 51 -246 133 -123 123 -162 238 -151 449 17 311 118 549 341 800 246 275 590 494 996 631 406 137 777 178 1210 135z m-255 -6980 c67 -13 178 -69 246 -123 68 -55 124 -126 178 -226 184 -342 4 -770 -379 -901 -99 -34 -258 -32 -361 3 -109 38 -194 91 -275 172 -127 127 -181 278 -171 475 8 176 66 299 198 426 170 162 345 216 564 174z"></path> </g> </svg>
|
||||||
|
</div>
|
||||||
|
<div class="icn-text">Help</div>
|
||||||
|
<div class="label red notifyLabel" aria-hidden="true" style="display: none;">0</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div tabindex="0" class="icon-holder color3">
|
||||||
|
<a href="https://www.brettspielwelt.de/Community/">
|
||||||
|
<div>
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-group" stylename="svg-inline--fa fa-user-group" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 96 960 960">
|
||||||
|
<path fill="currentColor" d="M-12 828v-65.467q0-44.255 44.95-71.394Q77.9 664 150.398 664h11.61q4.992 0 10.992.727-9 19.273-14.5 40.676Q153 726.806 153 751v77H-12Zm240 0v-77q0-71.172 69.787-114.086T479.862 594Q594 594 663 636.914T732 751v77H228Zm579 0v-77.429q0-23.802-5-45.121-5-21.32-14-40.723 6-.727 11.257-.727H810q73.7 0 117.85 27.046Q972 718.093 972 763v65H807ZM149.78 637Q118 637 95.5 614.17T73 559.281Q73 527 95.624 504.5t54.394-22.5Q182 482 205 504.535q23 22.536 23 54.977Q228 591 205.261 614t-55.481 23Zm660 0q-31.78 0-54.28-22.83T733 559.281Q733 527 755.624 504.5t54.394-22.5Q842 482 865 504.535q23 22.536 23 54.977Q888 591 865.261 614t-55.481 23Zm-329.289-72q-55.204 0-93.848-38.643Q348 487.714 348 432.509 348 377 386.643 339q38.644-38 93.848-38Q536 301 574 339t38 93.509q0 55.205-38 93.848T480.491 565Z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<div class="icn-text">Community</div>
|
||||||
|
<div class="label red notifyLabel" aria-hidden="true" style="display: none;">0</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div tabindex="0" class="icon-holder color4 selected">
|
||||||
|
<a href="https://www.brettspielwelt.de/News/">
|
||||||
|
<div>
|
||||||
|
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="newspaper" stylename="svg-inline--fa fa-newspaper" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path fill="currentColor" d="M480 32H128C110.3 32 96 46.33 96 64v336C96 408.8 88.84 416 80 416S64 408.8 64 400V96H32C14.33 96 0 110.3 0 128v288c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V64C512 46.33 497.7 32 480 32zM272 416h-96C167.2 416 160 408.8 160 400C160 391.2 167.2 384 176 384h96c8.836 0 16 7.162 16 16C288 408.8 280.8 416 272 416zM272 320h-96C167.2 320 160 312.8 160 304C160 295.2 167.2 288 176 288h96C280.8 288 288 295.2 288 304C288 312.8 280.8 320 272 320zM432 416h-96c-8.836 0-16-7.164-16-16c0-8.838 7.164-16 16-16h96c8.836 0 16 7.162 16 16C448 408.8 440.8 416 432 416zM432 320h-96C327.2 320 320 312.8 320 304C320 295.2 327.2 288 336 288h96C440.8 288 448 295.2 448 304C448 312.8 440.8 320 432 320zM448 208C448 216.8 440.8 224 432 224h-256C167.2 224 160 216.8 160 208v-96C160 103.2 167.2 96 176 96h256C440.8 96 448 103.2 448 112V208z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<div class="icn-text">News</div>
|
||||||
|
<div class="label red notifyLabel" aria-hidden="true" style="display: none;">0</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div tabindex="0" class="icon-holder color5">
|
||||||
|
<a href="https://www.brettspielwelt.de/About/">
|
||||||
|
<div>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="64px" height="64px" viewBox="0 0 100 100"> <path fill="currentColor" d="M50.433,0.892c-27.119,0-49.102,21.983-49.102,49.102s21.983,49.103,49.102,49.103s49.101-21.984,49.101-49.103S77.552,0.892,50.433,0.892z M59,79.031C59,83.433,55.194,87,50.5,87S42,83.433,42,79.031V42.469c0-4.401,3.806-7.969,8.5-7.969s8.5,3.568,8.5,7.969V79.031z M50.433,31.214c-5.048,0-9.141-4.092-9.141-9.142c0-5.049,4.092-9.141,9.141-9.141c5.05,0,9.142,4.092,9.142,9.141C59.574,27.122,55.482,31.214,50.433,31.214z"></path> </svg>
|
||||||
|
</div>
|
||||||
|
<div class="icn-text">About us</div>
|
||||||
|
<div class="label red notifyLabel" aria-hidden="true" style="display: none;">0</div>
|
||||||
|
</a></div><a href="https://www.brettspielwelt.de/About/">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div></div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="menu-holder" class="content-flow">
|
||||||
|
<div class="light x1"></div>
|
||||||
|
<div class="light x2"></div>
|
||||||
|
<div class="light x3"></div>
|
||||||
|
<div class="light x4"></div>
|
||||||
|
<div class="light x5"></div>
|
||||||
|
<div class="light x6"></div>
|
||||||
|
<div class="light x7"></div>
|
||||||
|
<div class="light x8"></div>
|
||||||
|
<div class="light x9"></div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="empty padder"> <a href="https://www.brettspielwelt.de/" tabindex="0" class="top-logo">
|
||||||
|
<img src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/logo.png" style="width: 100%;">
|
||||||
|
</a>
|
||||||
|
<div class="logo-right">
|
||||||
|
|
||||||
|
<a class="lead-btn" href="https://m.brettspielwelt.de/">Play now</a>
|
||||||
|
|
||||||
|
<div class="containe">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button style="padding: 0px; border-width: 4px;overflow:hidden; height:50px; width: 50px;" class="btn lead-btn dropdown-toggl" type="button" id="languageDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="width: 42px;height: 42px;background-size: cover;" class="flag-icon flag-icon-us"></span></button>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||||
|
<a class="dropdown-item" href="https://www.brettspielwelt.de/Hilfe/Anleitungen/Wizard/#" data-lang="us"><span class="flag-icon flag-icon-us"></span> English</a>
|
||||||
|
<a class="dropdown-item" href="https://www.brettspielwelt.de/Hilfe/Anleitungen/Wizard/#" data-lang="de"><span class="flag-icon flag-icon-de"></span> Deutsch</a>
|
||||||
|
<a class="dropdown-item" href="https://www.brettspielwelt.de/Hilfe/Anleitungen/Wizard/#" data-lang="fr"><span class="flag-icon flag-icon-fr"></span> Français</a>
|
||||||
|
<a class="dropdown-item" href="https://www.brettspielwelt.de/Hilfe/Anleitungen/Wizard/#" data-lang="nl"><span class="flag-icon flag-icon-nl"></span> Netherland</a>
|
||||||
|
<a class="dropdown-item" href="https://www.brettspielwelt.de/Hilfe/Anleitungen/Wizard/#" data-lang="kr"><span class="flag-icon flag-icon-kr"></span> Korean</a>
|
||||||
|
<a class="dropdown-item" href="https://www.brettspielwelt.de/Hilfe/Anleitungen/Wizard/#" data-lang="cn"><span class="flag-icon flag-icon-cn"></span> Chinese</a>
|
||||||
|
<!-- Add more languages as needed -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="http://www.brettspielwelt.de/?op" alt="Classic Pages"><img src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/classic.png"></a></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
// Check if a language is already selected
|
||||||
|
var selectedLanguage = "de";
|
||||||
|
|
||||||
|
let decodedCookie = decodeURIComponent(document.cookie);
|
||||||
|
let ca = decodedCookie.split(';');
|
||||||
|
for(let i = 0; i <ca.length; i++) {
|
||||||
|
let c = ca[i];
|
||||||
|
while (c.charAt(0) == ' ') {
|
||||||
|
c = c.substring(1);
|
||||||
|
}
|
||||||
|
if (c.indexOf("BSW_Settings") == 0) {
|
||||||
|
selectedLanguage=c.substring(13, c.length);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedLanguage) {
|
||||||
|
// Apply the selected language (you can add your logic here)
|
||||||
|
if(selectedLanguage==('ko')) selectedLanguage='kr';
|
||||||
|
if(selectedLanguage==('zh')) selectedLanguage='cn';
|
||||||
|
if(selectedLanguage==('en')) selectedLanguage='us';
|
||||||
|
|
||||||
|
console.log('Selected Language:', selectedLanguage);
|
||||||
|
// Example: Change the text of the button to the selected language
|
||||||
|
var pp='<span style="width: 42px;height: 42px;background-size: cover;" class="flag-icon flag-icon-'+selectedLanguage+'"></span>';
|
||||||
|
$('#languageDropdown').html(pp);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle language selection
|
||||||
|
$('.dropdown-item').on('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var language = $(this).data('lang');
|
||||||
|
console.log('Language selected:', language);
|
||||||
|
|
||||||
|
if(language==('kr')) language='ko';
|
||||||
|
if(language==('us')) language='en';
|
||||||
|
if(language==('cn')) language='zh';
|
||||||
|
// Save the selected language in local storage
|
||||||
|
|
||||||
|
var cookieName = 'BSW_Settings';
|
||||||
|
var cookieValue = language;
|
||||||
|
var myDate = new Date();
|
||||||
|
myDate.setMonth(myDate.getMonth() + 12);
|
||||||
|
document.cookie = cookieName +"=" + cookieValue + ";expires=" + myDate
|
||||||
|
+ ";domain=.brettspielwelt.de;path=/";
|
||||||
|
|
||||||
|
// Reload the page or apply the language change
|
||||||
|
location.reload();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="bsw-pane"></div>
|
||||||
|
</div>
|
||||||
|
<div id="page-content-wrapper" class="container">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div><div><div class="container px-4 py-3 text-center text-md-start">
|
||||||
|
<h1 class="fs-1 librebold" style="margin-top:20px;">Wizard</h1>
|
||||||
|
<h3>
|
||||||
|
<a href="https://m.brettspielwelt.de/pdf/Wizard.pdf" class="text-muted">Wizard (Originalregel)</a>
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12 text-center text-md-start"> <h3><span>Game preparation</span></h3><p><span>With <strong>/join</strong> 3-6 players can enter the game. With <strong>/start</strong> the game begins. Alternatively, you can use the <a href="https://www.brettspielwelt.de/Hilfe/Tools/Spielverwaltung/">game management use.</a></span></p><h3><a href="https://www.brettspielwelt.de/Hilfe/Tools/Spielverwaltung/"><span>The game</span></a></h3><p><a href="https://www.brettspielwelt.de/Hilfe/Tools/Spielverwaltung/"><span>Wizard is a funny card play, where you have to predict as accurately as possible the number of his tricks. Sounds easy if there weren't the nasty fellow players...</span></a></p><h3><a href="https://www.brettspielwelt.de/Hilfe/Tools/Spielverwaltung/"><span>Field</span></a></h3><a href="https://www.brettspielwelt.de/Hilfe/Tools/Spielverwaltung/"><img class="floatleft" src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/spielfeld.jpg">
|
||||||
|
<div class="clear"></div><div class="clear"></div><ol class="inside"><li>Map location</li><li>Trump card</li><li>Block of truth (opens/closes with a click on this icon)</li><li>Handcards</li></ol><img class="floatleft" alt="Spieleranzeige" src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/spieleranzeige.jpg">
|
||||||
|
<div class="clear"></div><div class="clear"></div><p><span>The total score is displayed on the card deposit box left below the player name. The number on the right side in brackets indicates the current score in the current round. On the right side you can see the number of stitches already acquired and the number of predicted.</span></p><p><span><samp>Example: Nessi has collected a total of 90 points. She predicts a trick but has not yet received a (0/1). That's why it currently has -10 points - therefore the (80) points.</samp></span></p><p><span>In the game are cards in four colors (red, yellow, green, blue), each of 1-13, as well as four magicians and four fools. The magician is the highest card, the fool is the lowest.</span></p><h3><span>Game sequence</span></h3><p><span>The game runs in several rounds depending on the number of players. At 3/4/5/6 players 20/15/12/10 rounds are played.</span></p><p><span>In the first round each player receives only one card, in the second round two, in the third three and so on.</span></p><p><span>At the beginning, the cards are distributed and a card is exposed as a trump card (exception: in the last round there is no trump card). You can see them at the top of the field. The value of the card is not relevant, only its color specifies the trump color for this round. Become a Trumpf Card <strong>Scar</strong> uncovered, in this round <strong>No</strong> Trump color.</span></p><img class="floatleft" alt="Zauberer-Auswahl" src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/zauberer.jpg">
|
||||||
|
<div class="clear"></div><p><span>The <strong>Magicians</strong> the player who is <strong>before</strong> the starter sits, the trump <strong>choose</strong>. For this purpose, it simply selects the desired color symbol in the selection circle.</span></p><h3><span>Predict stitches</span></h3><p><span>Now starting with the starter each player must reihum predict the number of his tricks.</span></p><img class="floatleft" alt="Stiche vorhersagen" src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/stiche.jpg">
|
||||||
|
<div class="clear"></div><p><span>The block of truth opens and you can set the desired number there by means of the small arrow buttons. Then you confirm your selection with OK.</span></p><h3><span>Playing cards</span></h3><p><span>If all players have chosen and confirmed, the starter starts playing one of his cards. It is always placed to the left in the edition, the following players are sitting in the game order to the right. In this order, all players will also place a card. </span></p><p><span>The following shall apply: The first color must always be served! (Only exception: If the first card is a magician, the complete trick is played without duty) For memory, the corresponding color symbol is shown in a brighter manner on the card depository.</span></p><p><span>For example, if the first player makes a red card, all other players must also place a red card if they own one. Exceptions are only the fool and the magician: You can always lay these cards, regardless of the trump or first color.</span></p><h3><span>Collect stitch</span></h3><p><span>If all players have played a card, it will determine who gets the trick. The following rules apply:</span></p><ul class="inside"><li>the magician always stumbles</li><li>with several magicians the first laid</li><li>the trump paints everything except the magician</li><li>have several trump cards, the higher</li><li>are not trump cards and magicians in the game, the highest card in the first laid color</li><li>only fools were played, the first fool gets the trick</li></ul><p><span>The player who has received the trick now first puts out a card (except in the first round).</span></p><h3><span>Value</span></h3><img class="floatleft" alt="Wertung" src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/wertung.jpg">
|
||||||
|
<div class="clear"></div><p><span>At the end of each round, each player's tricks are evaluated. Those who have received as many stitches as he had predicted will receive a bonus of 20 points. He also gets ten points extra for each stitch. If you are wrong with his forecast, you will not receive a bonus. For this, ten points will be deducted for each stitch he was above or below his statement.</span></p><h3><span>Playing</span></h3><p><span>The game ends at 3/4/5/6 players after 20/15/12/10 rounds. It wins the player with most points.</span></p><h3><span>Options</span></h3><h4><span>noteworthy</span></h4><p><span>The game is identical to the normal version until the following change: The sum of all predicted stitches shall not be equal to the sum of all possible stitches for this round; e.g. in round five, five stitches are to be awarded. The sum of the predictions of all players may therefore be <strong>not</strong> five! It may be less or more, only not exactly five. If this does not occur, the last player must bite in the order in the acid apple and increase or lower his bid.</span></p><h4><span>hiddentip</span></h4><p><span>The predictions of all players run secretly and will not be displayed until all predictions have been made.</span></p><h4><span>dmmixed</span></h4><p><span>Special option for the regional advances to DM 2008. Here the rounds 1 - 6 are played with hiddentip, the rounds 7 - 14 with notequal and round 15 again with hiddentip.</span></p><h4><span>wiztournament</span></h4><p><span>A special option for tournament games. It can only be played with 4-5 players and goes over ten rounds. The card distribution is as follows:</span></p><p><span>For four players: 1-3-5-7-9-11-12-13-14-15</span></p><p><span>For five players: 2-4-5-6-7-8-9-10-11-12</span></p><p><span>By default, the notequal option is switched on, but it can also be disabled. The hiddentip option can be used if necessary.</span></p></a><a id="Wings" name="Wings"></a><p><span>No real option, but rather an operating aid sets the WizardWings=On entry in the <a href="https://www.brettspielwelt.de/Hilfe/Client/PropDatei/">prop file in. This allows you to mark a card you want to play during the game. This then gets small "flies". If you turn, this card will be played automatically. Of course, as long as you're not in line, you can change your wish and choose another card.</a></span></p></div><a href="https://www.brettspielwelt.de/Hilfe/Client/PropDatei/">
|
||||||
|
</a></div><a href="https://www.brettspielwelt.de/Hilfe/Client/PropDatei/">
|
||||||
|
</a></div></div><a href="https://www.brettspielwelt.de/Hilfe/Client/PropDatei/">
|
||||||
|
|
||||||
|
</a></div><a href="https://www.brettspielwelt.de/Hilfe/Client/PropDatei/">
|
||||||
|
|
||||||
|
</a></div><a href="https://www.brettspielwelt.de/Hilfe/Client/PropDatei/">
|
||||||
|
|
||||||
|
|
||||||
|
</a><footer class="bg-dark text-center text-white" style="z-index: 6;"><a href="https://www.brettspielwelt.de/Hilfe/Client/PropDatei/">
|
||||||
|
<!-- Grid container -->
|
||||||
|
<style>.social{width: 32px;}</style>
|
||||||
|
</a><div class="container p-4 pb-0"><a href="https://www.brettspielwelt.de/Hilfe/Client/PropDatei/">
|
||||||
|
<!-- Section: Social media -->
|
||||||
|
</a><section class="mb-4"><a href="https://www.brettspielwelt.de/Hilfe/Client/PropDatei/">
|
||||||
|
<!-- Facebook -->
|
||||||
|
</a><a class="m-1" href="https://www.facebook.com/BrettspielWelt"><img src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/facebook.png" class="social"></a>
|
||||||
|
<!-- Twitter -->
|
||||||
|
<a class="m-1" href="https://twitter.com/ARMistice"><img src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/x.png" class="social"></a>
|
||||||
|
<!-- Insta -->
|
||||||
|
<a class="m-1" href="https://www.instagram.com/brettspielwelt/"><img src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/instagram.png" class="social" )=""></a>
|
||||||
|
<!-- Discord -->
|
||||||
|
<a class="m-1" href="https://discord.gg/RJV2RSaNhj"><img src="./Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/discord.png" class="social" )=""></a>
|
||||||
|
</section>
|
||||||
|
<!-- Section: Social media -->
|
||||||
|
</div>
|
||||||
|
<!-- Grid container -->
|
||||||
|
|
||||||
|
<!-- Copyright -->
|
||||||
|
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
|
||||||
|
© 2023 Copyright:
|
||||||
|
<a class="text-white" href="https://www.brettspielwelt.de/About/">BrettspielWelt</a>
|
||||||
|
</div>
|
||||||
|
<!-- Copyright -->
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
var pathName = document.location.pathname;
|
||||||
|
$(window).on("beforeunload", function () {
|
||||||
|
var scrollPosition = $("page-content-wrapper").scrollTop();
|
||||||
|
sessionStorage.setItem("scrollPosition_" + pathName, scrollPosition.toString());
|
||||||
|
});
|
||||||
|
if (sessionStorage["scrollPosition_" + pathName]) {
|
||||||
|
$("page-content-wrapper").scrollTop(sessionStorage.getItem("scrollPosition_" + pathName));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
||||||
+661
@@ -0,0 +1,661 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||||
|
|
||||||
|
.colors {
|
||||||
|
|
||||||
|
--transparency: 0.7;
|
||||||
|
--base-col0: 56, 142, 60;
|
||||||
|
--base-col1: 211, 47, 47;
|
||||||
|
--base-col2: 251, 192, 45;
|
||||||
|
--base-col3: 25, 118, 210;
|
||||||
|
--base-col4: 123, 31, 162;
|
||||||
|
color-scheme: dark;
|
||||||
|
--star: 253,188,52;
|
||||||
|
--on-green: 38,122,29;
|
||||||
|
--green: 84,170,75;
|
||||||
|
--chat-bg: 30,31,34;
|
||||||
|
--chat-primary: 56, 142, 60;
|
||||||
|
--chat-on-bg: 255,255,255;
|
||||||
|
--chat-on-primary: 255,255,255;
|
||||||
|
--bg: 43,45,49;
|
||||||
|
--on-bg: 255,255,255;
|
||||||
|
--bb: 30,31,34;
|
||||||
|
--on-bb: 255,255,255;
|
||||||
|
--srfc: 49,51,56;
|
||||||
|
--on-srfc: 255,255,255;
|
||||||
|
--primary: 211, 47, 47;
|
||||||
|
--on-primary: 255,255,255;
|
||||||
|
--primary-dark: 183, 28, 28;
|
||||||
|
--on-primary-dark: 255,255,255;
|
||||||
|
--primary-light: 229, 115, 115;
|
||||||
|
--on-primary-light: 0,0,0;
|
||||||
|
--input: 0,0,0;
|
||||||
|
--on-input: 255,255,255;
|
||||||
|
}
|
||||||
|
|
||||||
|
.teven td { border: 0px; }
|
||||||
|
.todd td { border: 0px; }
|
||||||
|
|
||||||
|
.teven {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
.todd {
|
||||||
|
background: rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
.color1>a {
|
||||||
|
--bs-link-color: #d03234;
|
||||||
|
--bs-link-hover-color: rgb(var(--on-bg));
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.color4>a {
|
||||||
|
--bs-link-color: #7a1c9e;
|
||||||
|
--bs-link-hover-color: rgb(var(--on-bg));
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.color3>a {
|
||||||
|
--bs-link-color: #2374ce;
|
||||||
|
--bs-link-hover-color: rgb(var(--on-bg));
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.color5>a {
|
||||||
|
--bs-link-color: #3c8e43;
|
||||||
|
--bs-link-hover-color: rgb(var(--on-bg));
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.color2>a {
|
||||||
|
--bs-link-color: #c8cb58;
|
||||||
|
--bs-link-hover-color: rgb(var(--on-bg));
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-drawer {
|
||||||
|
width: 360px;
|
||||||
|
background: antiquewhite;
|
||||||
|
position: absolute;
|
||||||
|
left: 100px;
|
||||||
|
height: 100%;
|
||||||
|
display: none;
|
||||||
|
z-index: 21;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-right {
|
||||||
|
order: 1;
|
||||||
|
right: 0px;
|
||||||
|
left: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawer-content{
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1100px) {
|
||||||
|
.xmenu-drawer {
|
||||||
|
flex: 0 0 360px;
|
||||||
|
background: antiquewhite;
|
||||||
|
position: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-secondary {
|
||||||
|
--bs-bg-opacity: 0.2;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
--bs-card-bg: rgb(var(--srfc));
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
--bs-link-color: grey;
|
||||||
|
--bs-link-hover-color: rgb(var(--on-bg));
|
||||||
|
}
|
||||||
|
.clear{
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
.floatleft {
|
||||||
|
float:left;
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
--bs-body-color: rgb(var(--on-bg));
|
||||||
|
--bs-link-color: grey;
|
||||||
|
--bs-link-hover-color: rgb(var(--on-bg));
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-center {
|
||||||
|
flex-grow: 1;
|
||||||
|
background: white;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-flow {
|
||||||
|
flex-grow: 1;
|
||||||
|
background: rgb(var(--bg));
|
||||||
|
color: rgb(var(--on-bg));
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Outfit;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background: rgb(var(--bg));
|
||||||
|
}
|
||||||
|
|
||||||
|
.librebold {
|
||||||
|
font-family: "Libre Frannklin", "Helvejtica Neue", helvetica, arial, sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
background: rgb(var(--bb));
|
||||||
|
flex: 0 0 16vh;
|
||||||
|
max-width: 100px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
box-shadow: 0px 0px 4px black;
|
||||||
|
z-index: 22;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shrinked { max-width: 50px; }
|
||||||
|
.shrinked .icn-text { display:none; }
|
||||||
|
|
||||||
|
@media (max-height: 480px) {
|
||||||
|
.menu {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.menu.inner {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex-grow: 1;
|
||||||
|
background: black;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.hei {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.fix{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
align-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
.main-logo{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
div#container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.menu{
|
||||||
|
box-shadow: none;
|
||||||
|
border-top: 1px solid gray;
|
||||||
|
order:1;
|
||||||
|
max-width: unset;
|
||||||
|
xheight: 80px;
|
||||||
|
flex: 0 0 65px;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
font-size:15px
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-holder svg {
|
||||||
|
height:36px;
|
||||||
|
}
|
||||||
|
.menu-drawer {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px !important;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 65px;
|
||||||
|
height: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------- Menu & Tab ---------------------- */
|
||||||
|
|
||||||
|
.topmenu {
|
||||||
|
position: fixed;
|
||||||
|
height:100px;
|
||||||
|
background: white;
|
||||||
|
top: 0px;
|
||||||
|
transition: top 0.5s;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-down .topmenu {
|
||||||
|
top: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-up .topmenu {
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------- Grid Layout ---------------------- */
|
||||||
|
|
||||||
|
.container {
|
||||||
|
/* first breakpoint*/
|
||||||
|
--w1:1200px;
|
||||||
|
--n:8;
|
||||||
|
/* second breakpoint*/
|
||||||
|
--w2:800px;
|
||||||
|
--m:4;
|
||||||
|
/* third breakpoint*/
|
||||||
|
--w3:400px;
|
||||||
|
--p:2;
|
||||||
|
|
||||||
|
xdisplay:grid;
|
||||||
|
grid-template-columns:
|
||||||
|
repeat(auto-fill,
|
||||||
|
minmax(clamp(clamp(clamp(
|
||||||
|
100%/(var(--n) + 1) + 0.1%,
|
||||||
|
(var(--w1) - 100vw)*1000,
|
||||||
|
100%/(var(--m) + 1) + 0.1%),
|
||||||
|
(var(--w2) - 100vw)*1000,
|
||||||
|
100%/(var(--p) + 1) + 0.1%),
|
||||||
|
(var(--w3) - 100vw)*1000,
|
||||||
|
100%), 1fr));
|
||||||
|
gap:10px;
|
||||||
|
}
|
||||||
|
.container > div {
|
||||||
|
xmin-height:100px;
|
||||||
|
xbackground:white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head {
|
||||||
|
--w1:100;
|
||||||
|
--n:1;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.extra {
|
||||||
|
/* first breakpoint*/
|
||||||
|
--w1:900px;
|
||||||
|
--n:8;
|
||||||
|
/* second breakpoint*/
|
||||||
|
--w2:500px;
|
||||||
|
--m:4;
|
||||||
|
/* third breakpoint*/
|
||||||
|
--w3:300px;
|
||||||
|
--p:2;
|
||||||
|
padding:50px;
|
||||||
|
}
|
||||||
|
.extra > div {
|
||||||
|
background:green;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* nav */
|
||||||
|
.main-info { height: 50px; }
|
||||||
|
.main-menu {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: scroll;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 50px;
|
||||||
|
border-bottom: 1px solid gray;
|
||||||
|
transition: scrollLeft 0.5s;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
text-align: center;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-menu::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.main-menu {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-sel {
|
||||||
|
display: inline-flex;
|
||||||
|
height: 32px;
|
||||||
|
padding: 0px 40px 14px 40px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
box-sizing: unset;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.menu-line {
|
||||||
|
height: 4px;
|
||||||
|
background: white;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-sel.selected {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-marker {
|
||||||
|
position: relative;
|
||||||
|
height: 4px;
|
||||||
|
width: 10%;
|
||||||
|
left: 0px;
|
||||||
|
transition: left 0.5s, width 0.3s;
|
||||||
|
border-radius: 29px 29px 0px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-holder {
|
||||||
|
text-align: center;
|
||||||
|
background: none;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
.icon-holder svg {
|
||||||
|
padding-top: 25%;
|
||||||
|
width:50%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.top-logo {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
.top-logo {
|
||||||
|
display:inline-block;
|
||||||
|
width: 72px;
|
||||||
|
float: left;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
.icon-holder svg {
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
.icon-holder {
|
||||||
|
text-align: center;
|
||||||
|
height: 80px;
|
||||||
|
padding-top: 9px;
|
||||||
|
background: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
#snackbar-container {
|
||||||
|
bottom: 64px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.chat-fixed{
|
||||||
|
display: flex;
|
||||||
|
order: 1;
|
||||||
|
position: unset;
|
||||||
|
}
|
||||||
|
.chat-float{
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-chat {
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
width: 330px;
|
||||||
|
min-width: 330px;
|
||||||
|
z-index: 20;
|
||||||
|
background: #efe;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-game {
|
||||||
|
position: fixed;
|
||||||
|
z-index:1000;
|
||||||
|
width: 244px;
|
||||||
|
height: 156px;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 20px;
|
||||||
|
background: black;
|
||||||
|
box-shadow: 4px 4px 14px black
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
.menu-chat {
|
||||||
|
height: calc(100% - 65px);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.chat-fixed{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.active-game {
|
||||||
|
position: fixed;
|
||||||
|
z-index:1000;
|
||||||
|
width: 244px;
|
||||||
|
height: 156px;
|
||||||
|
bottom: 68px;
|
||||||
|
left: 2px;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {height:100%;}
|
||||||
|
#wrapper {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@property --posX {
|
||||||
|
syntax: '<number>'; /* <- defined as type number for the transition to work */
|
||||||
|
initial-value: 0;
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
@property --posY {
|
||||||
|
syntax: '<number>'; /* <- defined as type number for the transition to work */
|
||||||
|
initial-value: 0;
|
||||||
|
inherits: false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@property --gradient-angle {
|
||||||
|
syntax: '<angle>';
|
||||||
|
inherits: false;
|
||||||
|
initial-value: 0deg;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-gradient {
|
||||||
|
from { --gradient-angle: 0deg; }
|
||||||
|
to { --gradient-angle: 360deg; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.square img{ width:100%; z-index:3; position: relative;
|
||||||
|
background: linear-gradient(var(--gradient-angle), #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
z-index:2;
|
||||||
|
animation: rainbow 18s linear infinite, rainotate 21s linear infinite;
|
||||||
|
}
|
||||||
|
.square {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square:before, .square:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -2px;
|
||||||
|
top: -2px;
|
||||||
|
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094,
|
||||||
|
#0000ff, #00ff00,#ffff00, #ff0000);
|
||||||
|
background-size: 400%;
|
||||||
|
width: calc(100% + 4px);
|
||||||
|
height: calc(100% + 4px);
|
||||||
|
z-index: 1;
|
||||||
|
animation: steam 40s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes steam {
|
||||||
|
0% {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 400% 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.square:after {
|
||||||
|
filter: blur(50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0%{background-position:0% 82%; --gradient-angle: 0deg;}
|
||||||
|
50%{background-position:100% 19%}
|
||||||
|
100%{background-position:0% 82%; --gradient-angle: 360deg;}
|
||||||
|
}
|
||||||
|
@keyframes rainotate {
|
||||||
|
0%{--gradient-angle: 0deg;}
|
||||||
|
100%{--gradient-angle: 360deg;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.logoold {
|
||||||
|
box-shadow: #a4f95757 0px 0px 30px 4px;
|
||||||
|
xheight: 100vh;
|
||||||
|
z-index:2;
|
||||||
|
margin: 0;
|
||||||
|
--x: calc(var(--posX, 0) * 1%);
|
||||||
|
--y: calc(var(--posY, 0) * 1%);
|
||||||
|
background-image: linear-gradient(229deg, rgb(211 255 215), rgb(255 9 9)), radial-gradient( 90% 100% at calc( 50% + var(--x)) calc( 0% + var(--y)), rgb(200 200 200), rgb(99 59 141)), radial-gradient(100% 100% at calc( 80% - var(--x)) calc( 0% - var(--y)), rgb(250 255 000), rgb(89 175 175)), radial-gradient(150% 108% at calc(100% + var(--x)) calc( 0% + var(--y)), rgb(020 175 125), rgb(0 255 255)), radial-gradient(90% 100% at calc(100% - var(--x)) calc(30% - var(--y)), rgb(255 235 247), rgb(000 200 255)), linear-gradient(60deg, rgb(255 000 000), rgb(120 086 255));
|
||||||
|
background-blend-mode: overlay, overlay, difference, difference, difference, normal;
|
||||||
|
xwidth: 84vw;
|
||||||
|
xmax-width: 75vh;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
animation: gradient-animation 16s ease infinite, gradient 7.545s ease infinite;
|
||||||
|
|
||||||
|
object-fit: contain;
|
||||||
|
max-width:100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient-animation {
|
||||||
|
0% {
|
||||||
|
xbackground-position: 0% 50%;
|
||||||
|
--posX: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
xbackground-position: 100% 50%;
|
||||||
|
--posX: 100;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
xbackground-position: 0% 50%;
|
||||||
|
--posX: 00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes gradient {
|
||||||
|
0% {
|
||||||
|
xbackground-position: 0% 50%;
|
||||||
|
--posY: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
xbackground-position: 100% 50%;
|
||||||
|
--posY: 100;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
xbackground-position: 0% 50%;
|
||||||
|
--posY: 00;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo{
|
||||||
|
|
||||||
|
}
|
||||||
|
.center{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
xpadding-bottom: 110px;
|
||||||
|
height: 70vh;
|
||||||
|
}
|
||||||
|
.main{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.padder{
|
||||||
|
flex: 1 1;
|
||||||
|
background: rgb(var(--bg));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.logo-right {
|
||||||
|
padding: 20px 0px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
justify-content: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead-btn {
|
||||||
|
border: 4px solid white;
|
||||||
|
border-radius: 26px;
|
||||||
|
padding: 10px 10px;
|
||||||
|
font-family: arial;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 400px) {
|
||||||
|
.logo-right {
|
||||||
|
padding: 20px 0px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap:12px;
|
||||||
|
justify-content: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead-btn {
|
||||||
|
border: 4px solid white;
|
||||||
|
border-radius: 26px;
|
||||||
|
padding: 10px 10px;
|
||||||
|
font-family: arial;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content-wrapper {
|
||||||
|
display:block;
|
||||||
|
z-index:2;
|
||||||
|
}
|
||||||
+7
File diff suppressed because one or more lines are too long
+7
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
+40
@@ -0,0 +1,40 @@
|
|||||||
|
/* cyrillic-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Libre Franklin';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(https://www.brettspielwelt.de/p/fonts.gstatic.com/s/librefranklin/v20/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWkDdDJX-I.woff2) format('woff2');
|
||||||
|
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||||
|
}
|
||||||
|
/* cyrillic */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Libre Franklin';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(https://www.brettspielwelt.de/p/fonts.gstatic.com/s/librefranklin/v20/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWkBNDJX-I.woff2) format('woff2');
|
||||||
|
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
|
}
|
||||||
|
/* vietnamese */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Libre Franklin';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(https://www.brettspielwelt.de/p/fonts.gstatic.com/s/librefranklin/v20/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWkD9DJX-I.woff2) format('woff2');
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
/* latin-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Libre Franklin';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(https://www.brettspielwelt.de/p/fonts.gstatic.com/s/librefranklin/v20/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWkDtDJX-I.woff2) format('woff2');
|
||||||
|
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Libre Franklin';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url(https://www.brettspielwelt.de/p/fonts.gstatic.com/s/librefranklin/v20/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWkANDJ.woff2) format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
+1
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
+2
File diff suppressed because one or more lines are too long
+1016
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
+5
File diff suppressed because one or more lines are too long
BIN
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||||
|
|
||||||
|
## React Compiler
|
||||||
|
|
||||||
|
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
|
||||||
|
// Remove tseslint.configs.recommended and replace with this
|
||||||
|
tseslint.configs.recommendedTypeChecked,
|
||||||
|
// Alternatively, use this for stricter rules
|
||||||
|
tseslint.configs.strictTypeChecked,
|
||||||
|
// Optionally, add this for stylistic rules
|
||||||
|
tseslint.configs.stylisticTypeChecked,
|
||||||
|
|
||||||
|
// Other configs...
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also install [eslint-plugin-react-x](https://npmx.dev/package/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://npmx.dev/package/eslint-plugin-react-dom) for React-specific lint rules:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import reactX from 'eslint-plugin-react-x'
|
||||||
|
import reactDom from 'eslint-plugin-react-dom'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
// Enable lint rules for React
|
||||||
|
reactX.configs['recommended-typescript'],
|
||||||
|
// Enable lint rules for React DOM
|
||||||
|
reactDom.configs.recommended,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
```
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>wizard_website</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+2761
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"name": "wizard_website",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^19.2.8",
|
||||||
|
"react-dom": "^19.2.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^10.0.1",
|
||||||
|
"@types/node": "^24.13.3",
|
||||||
|
"@types/react": "^19.2.18",
|
||||||
|
"@types/react-dom": "^19.2.7",
|
||||||
|
"@vitejs/plugin-react": "^6.1.1",
|
||||||
|
"eslint": "^10.10.0",
|
||||||
|
"eslint-plugin-react-hooks": "^7.1.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.5.6",
|
||||||
|
"globals": "^17.12.0",
|
||||||
|
"typescript": "~6.0.2",
|
||||||
|
"typescript-eslint": "^8.69.0",
|
||||||
|
"vite": "^8.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
@@ -0,0 +1,184 @@
|
|||||||
|
.counter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.base,
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
inset-inline: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
width: 170px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework {
|
||||||
|
z-index: 1;
|
||||||
|
top: 34px;
|
||||||
|
height: 28px;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||||
|
scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vite {
|
||||||
|
z-index: 0;
|
||||||
|
top: 107px;
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||||
|
scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 32px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 32px 0 0;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-h);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--social-bg);
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.button-icon {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
flex: 1 1 calc(50% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer {
|
||||||
|
height: 88px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticks {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4.5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import heroImg from './assets/hero.png'
|
||||||
|
import reactLogo from './assets/react.svg'
|
||||||
|
import viteLogo from './assets/vite.svg'
|
||||||
|
import './App.css'
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [count, setCount] = useState(0)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section id="center">
|
||||||
|
<div className="hero">
|
||||||
|
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
||||||
|
<img src={reactLogo} className="framework" alt="React logo" />
|
||||||
|
<img src={viteLogo} className="vite" alt="Vite logo" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1>Get started</h1>
|
||||||
|
<p>
|
||||||
|
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="counter"
|
||||||
|
onClick={() => setCount((count) => count + 1)}
|
||||||
|
>
|
||||||
|
Count is {count}
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="ticks"></div>
|
||||||
|
|
||||||
|
<section id="next-steps">
|
||||||
|
<div id="docs">
|
||||||
|
<svg className="icon" role="presentation" aria-hidden="true">
|
||||||
|
<use href="/icons.svg#documentation-icon"></use>
|
||||||
|
</svg>
|
||||||
|
<h2>Documentation</h2>
|
||||||
|
<p>Your questions, answered</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://vite.dev/" target="_blank">
|
||||||
|
<img className="logo" src={viteLogo} alt="" />
|
||||||
|
Explore Vite
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://react.dev/" target="_blank">
|
||||||
|
<img className="button-icon" src={reactLogo} alt="" />
|
||||||
|
Learn more
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="social">
|
||||||
|
<svg className="icon" role="presentation" aria-hidden="true">
|
||||||
|
<use href="/icons.svg#social-icon"></use>
|
||||||
|
</svg>
|
||||||
|
<h2>Connect with us</h2>
|
||||||
|
<p>Join the Vite community</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||||
|
<svg
|
||||||
|
className="button-icon"
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use href="/icons.svg#github-icon"></use>
|
||||||
|
</svg>
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://chat.vite.dev/" target="_blank">
|
||||||
|
<svg
|
||||||
|
className="button-icon"
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use href="/icons.svg#discord-icon"></use>
|
||||||
|
</svg>
|
||||||
|
Discord
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://x.com/vite_js" target="_blank">
|
||||||
|
<svg
|
||||||
|
className="button-icon"
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use href="/icons.svg#x-icon"></use>
|
||||||
|
</svg>
|
||||||
|
X.com
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||||
|
<svg
|
||||||
|
className="button-icon"
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use href="/icons.svg#bluesky-icon"></use>
|
||||||
|
</svg>
|
||||||
|
Bluesky
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div className="ticks"></div>
|
||||||
|
<section id="spacer"></section>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,111 @@
|
|||||||
|
:root {
|
||||||
|
--text: #6b6375;
|
||||||
|
--text-h: #08060d;
|
||||||
|
--bg: #fff;
|
||||||
|
--border: #e5e4e7;
|
||||||
|
--code-bg: #f4f3ec;
|
||||||
|
--accent: #aa3bff;
|
||||||
|
--accent-bg: rgba(170, 59, 255, 0.1);
|
||||||
|
--accent-border: rgba(170, 59, 255, 0.5);
|
||||||
|
--social-bg: rgba(244, 243, 236, 0.5);
|
||||||
|
--shadow:
|
||||||
|
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
||||||
|
|
||||||
|
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
--mono: ui-monospace, Consolas, monospace;
|
||||||
|
|
||||||
|
font: 18px/145% var(--sans);
|
||||||
|
letter-spacing: 0.18px;
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--bg);
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--text: #9ca3af;
|
||||||
|
--text-h: #f3f4f6;
|
||||||
|
--bg: #16171d;
|
||||||
|
--border: #2e303a;
|
||||||
|
--code-bg: #1f2028;
|
||||||
|
--accent: #c084fc;
|
||||||
|
--accent-bg: rgba(192, 132, 252, 0.15);
|
||||||
|
--accent-border: rgba(192, 132, 252, 0.5);
|
||||||
|
--social-bg: rgba(47, 48, 58, 0.5);
|
||||||
|
--shadow:
|
||||||
|
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#social .button-icon {
|
||||||
|
filter: invert(1) brightness(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
width: 1126px;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
border-inline: 1px solid var(--border);
|
||||||
|
min-height: 100svh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
font-family: var(--heading);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-h);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 56px;
|
||||||
|
letter-spacing: -1.68px;
|
||||||
|
margin: 32px 0;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 36px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 118%;
|
||||||
|
letter-spacing: -0.24px;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
.counter {
|
||||||
|
font-family: var(--mono);
|
||||||
|
display: inline-flex;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--text-h);
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 135%;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: var(--code-bg);
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023", "DOM"],
|
||||||
|
"module": "esnext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"allowArbitraryExtensions": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"module": "nodenext",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user