roomPage.html css + idk
continuous-integration/drone/push Build is passing Details

pull/84/head
remrem 2 years ago
parent 5a68199adb
commit 0e5f32f673

@ -6,17 +6,21 @@ body {
section { section {
display: flex; display: flex;
padding: 3em;
flex-direction: column; flex-direction: column;
height: 100vh; height: calc(100vh - 6em);
width: 50vw;
} }
#right-section { #left-section {
background-color: aqua; background-color: white;
width: 70vw;
} }
#left-section { #right-section {
display: flex;
justify-content: space-between;
background-color: white; background-color: white;
width: 30vw;
} }
button { button {
@ -24,6 +28,7 @@ button {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 1.2em; padding: 1.2em;
margin-bottom: 1em;
background-color: white; background-color: white;
border: 0.2rem solid black; border: 0.2rem solid black;
border-radius: 0.5em; border-radius: 0.5em;
@ -32,13 +37,17 @@ button {
} }
#or { #or {
display: flex;
text-align: center;
justify-content: center;
font-family: var(--font); font-family: var(--font);
font-size: 4rem; font-size: 4rem;
font-weight: bolder; font-weight: bolder;
color: black; color: black;
margin: 1em;
} }
.sub-title { .subtitle {
font-family: var(--font); font-family: var(--font);
font-size: 1.6em; font-size: 1.6em;
font-weight: bold; font-weight: bold;
@ -47,3 +56,26 @@ button {
input[type="checkbox"] { input[type="checkbox"] {
} }
.group {
margin-bottom: 5em;
}
.param {
margin-top: 1em;
}
#players {
display: flex;
flex-direction: column;
}
#players span {
margin-top: 1em;
font-size: large;
}
#start {
bottom: 3vh;
right: 3vw;
}

@ -115,105 +115,6 @@
</svg> </svg>
<div id="main"> <div id="main">
<!-- <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-dot)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#squiggle" fill="#008002" mask="url(#mask-grid)"></use>
<use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18" "></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#triangle" fill="#0000FF" mask="url(#mask-stripe)"></use>
<use href="#triangle" stroke="#0000FF" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-stripe)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-dot)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#star" fill="#FFA500" mask="url(#mask-grid)"></use>
<use href="#star" stroke="#FFA500" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#diamond" fill="#ff0000" mask="url(#mask-stripe)"></use>
<use href="#diamond" stroke="#ff0000" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" fill="#800080" mask="url(#mask-stripe)"></use>
<use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
</svg>
</div>
<div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
<svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
</svg>
</div> -->
<div class="card"> <div class="card">
<svg class="item" height="160" width="80" viewBox="0 0 200 400"> <svg class="item" height="160" width="80" viewBox="0 0 200 400">
<use href="#oval" stroke="#800080" fill="#800080" stroke-width="40"></use> <use href="#oval" stroke="#800080" fill="#800080" stroke-width="40"></use>

@ -11,42 +11,58 @@
<section id="left-section"> <section id="left-section">
<button>Orignal Set Game</button> <button>Orignal Set Game</button>
<div>
<label>Private</label>
<input type='checkbox' />
</div>
<span id="or">OR</span> <span id="or">OR</span>
<span class="sub-title">Card number to make a set</span> <div class="group">
<div id='card-param'> <span class="subtitle">Game parameters</span>
<input type='checkbox' /> <span>3</span> <div id="game-param">
<input type='checkbox' /> <span>4</span> <label id="chrono-slider-label">js</label><br>
<input type='checkbox' /> <span>5</span> <input type="range" min="1" max="8" value="1" class="slider" id="chrono-slider"><br>
<label id="player-slider-label">js</label><br>
<input type="range" min="0" max="20" value="0" class="slider" id="player-slider"><br>
<span>HyperSet</span> <input type='checkbox' /><br>
</div>
</div> </div>
<span class="sub-title">Attributes to play with</span> <div class="group">
<div id='attributes-param'> <span class="subtitle">Card number to make a set</span>
<input type='checkbox' /> <span>number</span> <div id='card-param' class="param">
<input type='checkbox' /> <span>color</span> <input type='checkbox' /> <span>3</span>
<input type='checkbox' /> <span>shape</span> <input type='checkbox' /> <span>4</span>
<input type='checkbox' /> <span>filling</span> <input type='checkbox' /> <span>5</span>
<input type='checkbox' /> <span>outline (c'est nul)</span> </div>
</div> </div>
</section>
<section id="right-section">
<span>Game parameters</span>
<span>Private</span> <input type='checkbox' /> <div class="group">
<span>JE SUIS UN SLIDER</span> <span class="subtitle">Attributes to play with</span>
<div id='attributes-param' class="param">
<input type='checkbox' /> <span>number</span>
<input type='checkbox' /> <span>color</span>
<input type='checkbox' /> <span>shape</span>
<input type='checkbox' /> <span>filling</span>
<input type='checkbox' /> <span>outline (honnêtement c'est nul)</span>
</div>
</div>
<span>HyperSet</span> <input type='checkbox' /> </section>
<div id="players"> <section id="right-section">
<span>List of player in room:</span> <div>
<span>Aurianus</span> <span class="subtitle">List of players waiting in the room:</span>
<span>Basuw</span> <div id="players">
<span>Raph</span> <span>Aurianus</span>
<span>Remrem</span> <span>Basuw</span>
<span>Raph</span>
<span>Remrem</span>
</div>
</div> </div>
<button>START</button> <button id="start">START</button>
</section> </section>
</body> </body>

Loading…
Cancel
Save