Merge pull request 'home-page(rem)' (#32) from home-page(rem) into master
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Reviewed-on: #32pull/47/head
commit
1cf4347a5b
@ -0,0 +1,31 @@
|
||||
kind: pipeline
|
||||
type: docker
|
||||
name: HyperSet
|
||||
|
||||
trigger:
|
||||
event:
|
||||
- push
|
||||
|
||||
steps:
|
||||
|
||||
- name: hyperset-build
|
||||
image: plugins/docker
|
||||
settings:
|
||||
dockerfile: Dockerfile
|
||||
context: .
|
||||
registry: hub.codefirst.iut.uca.fr
|
||||
repo: hub.codefirst.iut.uca.fr/remi.arnal/hyper-set
|
||||
username:
|
||||
from_secret: registry_username
|
||||
password:
|
||||
from_secret: registry_password
|
||||
|
||||
- name: hyperset-deployment
|
||||
image: hub.codefirst.iut.uca.fr/thomas.bellembois/codefirst-dockerproxy-clientdrone:latest
|
||||
environment:
|
||||
IMAGENAME: hub.codefirst.iut.uca.fr/remi.arnal/hyper-set:latest
|
||||
CONTAINERNAME: hyperset
|
||||
COMMAND: create
|
||||
OVERWRITE: true
|
||||
ADMINS: aurianjault,raphaellacote,bastienjacquelin,remiarnal
|
||||
depends_on : [hyperset-build]
|
||||
@ -0,0 +1,2 @@
|
||||
FROM httpd
|
||||
COPY ./ /usr/local/apache2/htdocs/
|
||||
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HyperSet</title>
|
||||
<base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/">
|
||||
<link rel="stylesheet" type="text/css" href="./styles/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="./styles/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<ul id="nav-bar">
|
||||
<li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
|
||||
<li><a href="./views/cards.html">Card Test</a></li>
|
||||
<li><a href="./views/tutorial.html">Tutorial</a></li>
|
||||
<li><a href="./views/leaderboard.html">Leaderboard</a></li>
|
||||
<li><a href="./views/about.html">About</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<div id="master">
|
||||
<div id="left" class="column">
|
||||
<h1>HyperSet</h1>
|
||||
<span id="slogan">Find all the Sets !</span>
|
||||
|
||||
<div id="random-set">
|
||||
<!-- cards added by script at page load -->
|
||||
</div>
|
||||
|
||||
<div id="info">
|
||||
<span>Connected players: 1345</span>
|
||||
<span>Total Played Games: 1,455,876</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="right" class="column">
|
||||
<button class="action-button">Join Public Game</button>
|
||||
<button class="action-button">New Public Game</button>
|
||||
<button class="action-button">New Private Game</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,23 @@
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 10rem;
|
||||
min-width: 20rem;
|
||||
padding: 3em;
|
||||
margin: 1.7rem; /* for better display */
|
||||
border: 0.3em solid black;
|
||||
border-radius: 2em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
#main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@ -0,0 +1,110 @@
|
||||
/* Nav Bar */
|
||||
#nav-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
list-style-type: none;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#nav-bar li {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#nav-bar li a {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
font-family: var(--font);
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
padding: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
#nav-bar li a:hover {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
|
||||
#master {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 3em;
|
||||
height: calc(100vh - 5rem - 7em);
|
||||
}
|
||||
|
||||
#left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 60%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 40%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50%;
|
||||
padding: 1.2em;
|
||||
padding-top: 2.1rem;
|
||||
background-color: white;
|
||||
border: 0.2rem solid black;
|
||||
border-radius: 0.5em;
|
||||
font-family: var(--font);
|
||||
font-size: 1.5em;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
transform: scale(1.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: black;
|
||||
font-size: 5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#slogan {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1.5em;
|
||||
color: black;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#random-set {
|
||||
height: 40vh;
|
||||
background-color: white;
|
||||
border: 0.5rem solid black;
|
||||
}
|
||||
|
||||
#info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: auto;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
:root {
|
||||
--font : Helvetica;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
font-family: var(--font);
|
||||
}
|
||||
@ -0,0 +1,223 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HyperSet</title>
|
||||
<base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/">
|
||||
<link rel="stylesheet" type="text/css" href="./styles/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="./styles/card.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<svg width="200" height="400" style="position: fixed; z-index: -1">
|
||||
<defs>
|
||||
<path
|
||||
id="squiggle"
|
||||
d="m67.892902,12.746785c43.231313,-6.717223 107.352741,6.609823 121.028973,58.746408c13.676233,52.136585 -44.848649,161.467192 -45.07116,204.650732c4.566246,56.959708 83.805481,87.929227 22.329944,105.806022c-61.475536,17.876795 -126.122496,-1.855045 -143.73294,-41.933823c-17.610444,-40.07878 49.274638,-120.109409 46.14822,-188.091997c-3.126418,-67.982588 -21.873669,-70.257464 -49.613153,-80.177084c-27.739485,-9.919618 5.678801,-52.283035 48.910115,-59.000258z"
|
||||
/>
|
||||
<path
|
||||
id="oval"
|
||||
d="m11.49999,95.866646c0,-44.557076 37.442923,-81.999998 82.000002,-81.999998l12.000015,0c44.557076,0 81.999992,37.442923 81.999992,81.999998l0,206.133354c0,44.557098 -37.442917,82 -81.999992,82l-12.000015,0c-44.557079,0 -82.000002,-37.442902 -82.000002,-82l0,-206.133354z"
|
||||
/>
|
||||
<path
|
||||
id="diamond"
|
||||
d="m98.544521,10.311863l-87.830189,189.330815l88.201143,189.644391l88.942329,-190.362741l-89.313283,-188.612465z"
|
||||
/>
|
||||
<path
|
||||
id="star"
|
||||
d="m 153.53055,282.69958 -53.612735,-28.26169 -53.675199,28.1429 10.311217,-59.72213 -43.352051,-42.35147 59.985437,-8.6486 26.882141,-54.31757 26.76179,54.37694 59.9662,8.78146 -43.44577,42.25534 z"
|
||||
/>
|
||||
<path
|
||||
id="triangle"
|
||||
d="M 185.39061,360.66757 14.609416,360.51258 100.06241,42.356689 Z"
|
||||
/>
|
||||
<pattern
|
||||
id="pattern-stripe"
|
||||
width="2"
|
||||
height="20"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect width="2" height="8" fill="#fff" />
|
||||
</pattern>
|
||||
|
||||
<pattern
|
||||
id="pattern-grid"
|
||||
width="30"
|
||||
height="30"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect width="7.5" height="30" fill="#fff" />
|
||||
<rect width="30" height="7.5" fill="#fff" />
|
||||
</pattern>
|
||||
|
||||
<pattern
|
||||
id="pattern-dot"
|
||||
width="40"
|
||||
height="40"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<circle cx="18" cy="18" r="12" fill="#fff" />
|
||||
</pattern>
|
||||
|
||||
<mask id="mask-stripe">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="200"
|
||||
height="400"
|
||||
fill="url(#pattern-stripe)"
|
||||
/>
|
||||
</mask>
|
||||
|
||||
<mask id="mask-dot">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="200"
|
||||
height="400"
|
||||
fill="url(#pattern-dot)"
|
||||
/>
|
||||
</mask>
|
||||
|
||||
<mask id="mask-grid">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="200"
|
||||
height="400"
|
||||
fill="url(#pattern-grid)"
|
||||
/>
|
||||
</mask>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<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">
|
||||
<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" fill="#800080" mask="url(#mask-grid)"></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-dot)"></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" stroke="#800080" fill="none" stroke-width="18"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue