Initial import
This commit is contained in:
Flatlogic Bot
commit
f55942bf0d
0
admin/index.html
Normal file
0
admin/index.html
Normal file
151
css/component.css
Normal file
151
css/component.css
Normal file
@ -0,0 +1,151 @@
|
||||
/* General styles for the modal */
|
||||
|
||||
/*
|
||||
Styles for the html/body for special modal where we want 3d effects
|
||||
Note that we need a container wrapping all content on the page for the
|
||||
perspective effects (not including the modals and the overlay).
|
||||
*/
|
||||
.md-perspective,
|
||||
.md-perspective body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.md-perspective body {
|
||||
background: #d4c6a1;
|
||||
-webkit-perspective: 600px;
|
||||
-moz-perspective: 600px;
|
||||
perspective: 600px;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.md-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
max-width: 1400px;
|
||||
min-width: 1200px;
|
||||
height: auto;
|
||||
z-index: 2000;
|
||||
visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-moz-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.md-show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.md-overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
background: rgba(145,120,30,0.8);
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.md-show ~ .md-overlay {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Content styles */
|
||||
.md-content {
|
||||
color: #fff;
|
||||
background: #544c37;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.md-content h3 {
|
||||
margin: 0;
|
||||
padding: 0.4em;
|
||||
text-align: center;
|
||||
font-size: 2.4em;
|
||||
font-weight: 300;
|
||||
opacity: 0.8;
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.md-content > div {
|
||||
padding: 15px 40px 30px;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.md-content > div p {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.md-content > div ul {
|
||||
margin: 0;
|
||||
padding: 0 0 30px 20px;
|
||||
}
|
||||
|
||||
.md-content > div ul li {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.md-content button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* Individual modal styles with animations/transitions */
|
||||
|
||||
/* Effect 1: Fade in and scale up */
|
||||
.md-effect-1 .md-content {
|
||||
-webkit-transform: scale(0.7);
|
||||
-moz-transform: scale(0.7);
|
||||
-ms-transform: scale(0.7);
|
||||
transform: scale(0.7);
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s;
|
||||
-moz-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.md-show.md-effect-1 .md-content {
|
||||
-webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slit {
|
||||
50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
|
||||
100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@-moz-keyframes slit {
|
||||
50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
|
||||
100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slit {
|
||||
50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
|
||||
100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
|
||||
}
|
||||
153
css/default.css
Normal file
153
css/default.css
Normal file
@ -0,0 +1,153 @@
|
||||
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
body, html { font-size: 100%; padding: 0; margin: 0; }
|
||||
|
||||
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||
.clearfix:before, .clearfix:after { content: " "; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
|
||||
|
||||
/* Header Style */
|
||||
.main,
|
||||
.container > header {
|
||||
margin: 0 auto;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.container > header {
|
||||
text-align: center;
|
||||
background: #d94839;
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
.container > header h1 {
|
||||
font-size: 2.625em;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.container > header span {
|
||||
display: block;
|
||||
font-size: 60%;
|
||||
opacity: 0.7;
|
||||
padding: 0 0 0.6em 0.1em;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main {
|
||||
max-width: 69em;
|
||||
}
|
||||
|
||||
.column {
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 0 2em;
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.column:nth-child(2) {
|
||||
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.column p {
|
||||
font-weight: 300;
|
||||
font-size: 2em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* To Navigation Style */
|
||||
.codrops-top {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
font-size: 0.69em;
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
.codrops-top a {
|
||||
padding: 0 1em;
|
||||
letter-spacing: 0.1em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.codrops-top a:hover {
|
||||
color: #e74c3c;
|
||||
background: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.codrops-top span.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.codrops-top span.right a {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.codrops-icon:before {
|
||||
margin: 0 4px;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.codrops-icon-drop:before {
|
||||
content: "\e001";
|
||||
}
|
||||
|
||||
.codrops-icon-prev:before {
|
||||
content: "\e004";
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: 0.6em 1.2em;
|
||||
background: #c0392b;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 3px 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #A5281B;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 46.0625em) {
|
||||
.column {
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
min-height: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.column p {
|
||||
text-align: left;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.column:nth-child(2) {
|
||||
box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 25em) {
|
||||
|
||||
.codrops-icon span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
0
css/index.html
Normal file
0
css/index.html
Normal file
52
css/styles-modal.css
Normal file
52
css/styles-modal.css
Normal file
@ -0,0 +1,52 @@
|
||||
.txt-line-height-1 {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.txt-jaune {
|
||||
color: #fcba03;
|
||||
}
|
||||
|
||||
.div-inlinebck {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.div-witdh-30p {
|
||||
max-width: 33%;
|
||||
min-width: 33%;
|
||||
}
|
||||
|
||||
.div-height-120px {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.div-height-150px {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.div-margin-top-10px {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.div-border-left {
|
||||
border-left: 1px solid white;
|
||||
}
|
||||
|
||||
.div-background-positive {
|
||||
background: linear-gradient(to top, rgba(0,0,100,0), rgba(0,0,100,0.5));
|
||||
}
|
||||
|
||||
.div-background-neutral {
|
||||
background: linear-gradient(to top, rgba(180,100,0,0), rgba(180,100,0,0.5));
|
||||
}
|
||||
|
||||
.div-background-negative {
|
||||
background: linear-gradient(to top, rgba(100,0,0,0), rgba(100,0,0,0.5));
|
||||
}
|
||||
312
css/styles.css
Normal file
312
css/styles.css
Normal file
@ -0,0 +1,312 @@
|
||||
@font-face {
|
||||
font-family: 'Electrolize';
|
||||
src: url('../fonts/Electrolize-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Electrolize, Arial, sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #a29b78 !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: -50%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* Utilitaires texte */
|
||||
.txt-s05 { font-size: 5px; }
|
||||
.txt-s10 { font-size: 10px; }
|
||||
.txt-s12 { font-size: 12px; }
|
||||
.txt-s15 { font-size: 15px; }
|
||||
.txt-s20 { font-size: 20px; }
|
||||
.txt-s22 { font-size: 22px; }
|
||||
.txt-s25 { font-size: 25px; }
|
||||
.txt-s40 { font-size: 40px; }
|
||||
.padding5 { padding: 5px; }
|
||||
.padding15 { padding: 15px; }
|
||||
.padding25 { padding: 25px; }
|
||||
.padding50 { padding: 50px; }
|
||||
.padding-left50 { padding-left: 50px !important; }
|
||||
.txt-bold { font-weight: bold; }
|
||||
.txt-italic { font-style: italic; }
|
||||
.txt-justify { text-align: justify; text-justify: inter-word; }
|
||||
.txt-center { text-align: center !important; }
|
||||
.txt-center input { display: inline-block !important; text-align: center !important; }
|
||||
.txt-underline { text-decoration: underline; }
|
||||
.float-right { float: right; }
|
||||
.float-left { float: left; }
|
||||
.txt-or { color: #a29b78; }
|
||||
.txt-jaune { color: #fcba03; }
|
||||
.v-hidden { visibility: hidden; }
|
||||
.small-caps { font-variant-caps: small-caps; }
|
||||
|
||||
.ul-style {
|
||||
line-height: 30px;
|
||||
/* padding-left: 50px !important; */
|
||||
/* border-left: 4px solid #a29b78; */
|
||||
}
|
||||
|
||||
/* Vidéo plein écran en arrière-plan */
|
||||
.video-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -5; /* derrière tout */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-container iframe {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 0;
|
||||
pointer-events: none; /* la vidéo n’intercepte pas les clics */
|
||||
}
|
||||
|
||||
/* Ajustements pour conserver le recadrage 16/9 sans bandes */
|
||||
@media (min-aspect-ratio: 16/9) {
|
||||
.video-container iframe { height: 56.25vw; }
|
||||
}
|
||||
@media (max-aspect-ratio: 16/9) {
|
||||
.video-container iframe { width: 177.78vh; }
|
||||
}
|
||||
|
||||
/* Voile noir par-dessus la vidéo */
|
||||
.black-filter {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Conteneur principal (si besoin de couches au-dessus) */
|
||||
.container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 0; /* au-dessus de la vidéo */
|
||||
}
|
||||
|
||||
/* Logos centrés */
|
||||
.center-page-bops {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto;
|
||||
z-index: 2;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.center-page-infos {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto;
|
||||
z-index: 2;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.assets-div-menu {
|
||||
position: fixed;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
transform: translate(0px, 0px);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
z-index: 100;
|
||||
width: 300px;
|
||||
display: flex; /* Active le mode Flexbox */
|
||||
flex-direction: column; /* Aligne les liens les uns sous les autres */
|
||||
align-items: center; /* Centre verticalement */
|
||||
gap: 2px;
|
||||
justify-content: center;
|
||||
border: solid 3px rgb(155 145 60 / 25%);
|
||||
border-radius: 10px;
|
||||
padding: 5px 0px 5px 0px;
|
||||
}
|
||||
|
||||
.connexion-div-menu {
|
||||
position: fixed;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
transform: translate(0px, 0px);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
z-index: 100;
|
||||
width: 300px;
|
||||
height: 35px;
|
||||
display: flex; /* Active le mode Flexbox */
|
||||
align-items: center; /* Centre verticalement */
|
||||
justify-content: center;
|
||||
border: solid 3px rgb(155 145 60 / 25%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.center-div-menu {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto;
|
||||
z-index: 3;
|
||||
width: 1050px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.center-div-menu-flex {
|
||||
display: flex; /* Active l'affichage en ligne */
|
||||
justify-content: center; /* Centre les items horizontalement */
|
||||
align-items: center; /* Centre verticalement */
|
||||
gap: 10px; /* Espace entre les divs (modifiable) */
|
||||
}
|
||||
|
||||
.center-div-menu .menu-item {
|
||||
min-height: 40px; /* hauteur de chaque div */
|
||||
/* background: #ccc; /* juste pour visualiser, tu peux retirer */
|
||||
/* border-radius: 5px; */
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.center-div-menu .menu-item:hover {
|
||||
min-height: 40px; /* hauteur de chaque div */
|
||||
/* background: #ccc; /* juste pour visualiser, tu peux retirer */
|
||||
/* border-radius: 5px; */
|
||||
border-bottom: 4px solid #a29b78;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.center-div-menu .menu-item:hover a {
|
||||
color: #a29b78 !important;
|
||||
}
|
||||
|
||||
.menu-item-we {
|
||||
min-width: 20px; /* largeur de chaque div (modifiable) */
|
||||
min-height: 40px; /* hauteur de chaque div */
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.center-page-bops {
|
||||
background-image: url("../img/logo-org.png");
|
||||
z-index: 2;
|
||||
animation: spin-horizontal 5s linear infinite;
|
||||
}
|
||||
|
||||
/* Animation de rotation horizontale infinie */
|
||||
@keyframes spin-horizontal {
|
||||
0% { transform: translate(-50%, -50%) rotateY(0deg); }
|
||||
50% { transform: translate(-50%, -50%) rotateY(0deg); }
|
||||
100% { transform: translate(-50%, -50%) rotateY(360deg); }
|
||||
}
|
||||
|
||||
/* Contrôles audio en haut à droite */
|
||||
.audio-controls {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 10;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.audio-controls button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.audio-controls input[type="range"] {
|
||||
width: 120px;
|
||||
cursor: pointer;
|
||||
accent-color: #fcba03; /* facultatif si supporté */
|
||||
}
|
||||
|
||||
.vol-label {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* facultatif si supporté */
|
||||
.connexion-champ {
|
||||
height: 30px;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
border: solid 0px rgb(155 145 60 / 100%);
|
||||
border-radius: 5px;
|
||||
color: rgb(255 255 255 / 100%);
|
||||
}
|
||||
|
||||
.connexion-bouton {
|
||||
height: 30px;
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
border-top: solid 0px rgb(155 145 60 / 100%);
|
||||
border-left: solid 3px rgb(155 145 60 / 100%);
|
||||
border-right: solid 3px rgb(155 145 60 / 100%);
|
||||
border-bottom: solid 0px rgb(155 145 60 / 100%);
|
||||
border-radius: 5px;
|
||||
color: rgb(255 255 255 / 100%);
|
||||
padding: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
.connexion-bouton:hover {
|
||||
background-color: rgb(0 0 0 / 20%);
|
||||
cursor: pointer;
|
||||
}
|
||||
111
css/switch.css
Normal file
111
css/switch.css
Normal file
@ -0,0 +1,111 @@
|
||||
/* ===========================
|
||||
SE Switcher (SE1 / SE2)
|
||||
=========================== */
|
||||
|
||||
.se-switch {
|
||||
--se-bg: hsl(220 14% 18% / 0.6);
|
||||
--se-border: hsl(220 14% 28% / 0.6);
|
||||
--se-hover: hsl(220 14% 24% / 0.8);
|
||||
--se-active-bg: #a29b78; /* couleur actif */
|
||||
--se-active-text: #fff;
|
||||
--se-text: #fff;
|
||||
--se-radius: 999px;
|
||||
--se-gap: 4px;
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--se-gap);
|
||||
padding: 2px;
|
||||
border: 1px solid var(--se-border);
|
||||
border-radius: var(--se-radius);
|
||||
background: var(--se-bg);
|
||||
backdrop-filter: saturate(120%) blur(6px);
|
||||
-webkit-backdrop-filter: saturate(120%) blur(6px);
|
||||
line-height: 1;
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.se-switch__btn {
|
||||
display: inline-block;
|
||||
min-width: 2.8rem; /* compact mais lisible */
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--se-radius);
|
||||
text-decoration: none;
|
||||
font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
|
||||
color: var(--se-text);
|
||||
border: 1px solid transparent;
|
||||
transition: background-color .18s ease, border-color .18s ease, transform .04s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.se-switch__btn:hover,
|
||||
.se-switch__btn:focus-visible {
|
||||
background: var(--se-hover);
|
||||
border-color: var(--se-border);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* État actif de base */
|
||||
.se-switch__btn.is-active,
|
||||
.se-switch__btn[aria-current="page"] {
|
||||
background: var(--se-active-bg);
|
||||
color: var(--se-active-text);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* 🔒 Verrouillage fort de l'actif au survol/focus :
|
||||
- Empêche toute règle globale de type a:hover { color: ... } de prendre le dessus
|
||||
- Neutralise aussi un éventuel soulignement global */
|
||||
.se-switch__btn.is-active,
|
||||
.se-switch__btn.is-active:hover,
|
||||
.se-switch__btn.is-active:focus,
|
||||
.se-switch__btn.is-active:focus-visible,
|
||||
.se-switch__btn[aria-current="page"],
|
||||
.se-switch__btn[aria-current="page"]:hover,
|
||||
.se-switch__btn[aria-current="page"]:focus,
|
||||
.se-switch__btn[aria-current="page"]:focus-visible {
|
||||
background: var(--se-active-bg) !important;
|
||||
color: var(--se-active-text) !important;
|
||||
border-color: transparent !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Optionnel : si tu veux empêcher TOUT effet hover sur l'actif (y compris le curseur "main") */
|
||||
.se-switch__btn.is-active,
|
||||
.se-switch__btn[aria-current="page"] {
|
||||
cursor: default;
|
||||
/* Décommente la ligne suivante pour désactiver totalement le hover et le clic sur l'actif :
|
||||
pointer-events: none; */
|
||||
}
|
||||
|
||||
.se-switch__btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
/* Ajustements en thèmes clairs/sombres selon préférences système */
|
||||
@media (prefers-color-scheme: light) {
|
||||
.se-switch {
|
||||
--se-bg: hsl(0 0% 100% / 0.7);
|
||||
--se-border: hsl(220 12% 80%);
|
||||
--se-hover: hsl(220 16% 95%);
|
||||
--se-active-bg: hsl(201 100% 38%);
|
||||
--se-text: hsl(220 25% 18%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Variante compacte si besoin : ajouter la classe .se-switch--sm au conteneur */
|
||||
.se-switch.se-switch--sm .se-switch__btn {
|
||||
padding: 4px 10px;
|
||||
min-width: 2.4rem;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.switch-center {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 40px;
|
||||
}
|
||||
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
fonts/Electrolize-Regular.ttf
Normal file
BIN
fonts/Electrolize-Regular.ttf
Normal file
Binary file not shown.
0
fonts/index.html
Normal file
0
fonts/index.html
Normal file
BIN
img/Thumbs.db
Normal file
BIN
img/Thumbs.db
Normal file
Binary file not shown.
BIN
img/fl_exploration.png
Normal file
BIN
img/fl_exploration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
img/fl_security.png
Normal file
BIN
img/fl_security.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
img/icon08a.png
Normal file
BIN
img/icon08a.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
img/icon08b.png
Normal file
BIN
img/icon08b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
img/icon09a.png
Normal file
BIN
img/icon09a.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
img/icon09b.png
Normal file
BIN
img/icon09b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
img/icon10.png
Normal file
BIN
img/icon10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
img/icon_bops.png
Normal file
BIN
img/icon_bops.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
img/icon_close.png
Normal file
BIN
img/icon_close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
0
img/index.html
Normal file
0
img/index.html
Normal file
BIN
img/logo-org.png
Normal file
BIN
img/logo-org.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
img/logo-org.psd
Normal file
BIN
img/logo-org.psd
Normal file
Binary file not shown.
BIN
img/logo_re_ct.png
Normal file
BIN
img/logo_re_ct.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
172
index-en.php
Normal file
172
index-en.php
Normal file
@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="keywords" content="BlackOps Agency, Star Citizen, Advocacy, UEE, Sécurité, Exploration, Renseignement, Patrouilles, Chasses de primes, Investigation, Neutralisation de menaces, Assistance humanitaire, Abordages, Réseaux anti-toxicité, Formation tactique, Entraînements, Coopération, Zones UEE, Systèmes inexplorés, Lore Star Citizen, Missions multi-joueurs, Protocole Arkange, Protocole Vigilance, Respect des lois impériales, Justice interstellaire, Criminalité galactique, Piraterie, XenoThreat, Vanduul, Sécurité spatiale, Leadership BlackOps, Collaboration stratégique, Combat spatial, Star Citizen gameplay, Exploration stratégique, Missions BlackOps Agency, Réputation UEE, Gestion des conflits, BlackOps, Agency, Recrutement Star Citizen, Zones de guerre, Star Citizen immersion.">
|
||||
|
||||
<title>Rapid Emergency & Action Combat Team / Star Citizen</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/default.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/switch.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/styles-modal.css" />
|
||||
<script src="js/modernizr.custom.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="connexion-div-menu md-trigger" data-modal="modal-Login"><a href="#">Connexion</a></div>
|
||||
|
||||
<div class="se-switch switch-center" role="group" aria-label="Choix entre FR et EN">
|
||||
<a class="se-switch__btn" href="index.php" data-site="se1">🇫🇷</a>
|
||||
<a class="se-switch__btn is-active" href="index-en.php" data-site="se2" aria-current="page">🇬🇧</a>
|
||||
</div>
|
||||
|
||||
<div class="md-modal md-effect-1" id="modal-Login">
|
||||
<div class="md-content">
|
||||
<h3>
|
||||
<img class="float-left" src="img/icon_bops.png" width="48" height="48" alt="" />
|
||||
LOGIN INTERFACE
|
||||
<a class="frame-icon-close md-close float-right" href="#"><img src="img/icon_close.png" width="48" height="48" alt="" /></a>
|
||||
</h3>
|
||||
<div>
|
||||
<p class="txt-center">Enter your credentials to access the secure area.*</p>
|
||||
<form>
|
||||
<div>
|
||||
<p class="txt-center"><input class="connexion-champ" id="idr" type="text" name="username" placeholder="RID" /></p>
|
||||
<p class="txt-center"><input class="connexion-champ" id="pwr" type="password" name="password" placeholder="PASSWORD" /></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="txt-center"><input class="connexion-bouton" type="submit" value="Authenticate" /></p>
|
||||
</div>
|
||||
</form>
|
||||
<p class="txt-center txt-s10">* Access under high surveillance. By confirming your credentials, you agree to the R.E.A.C.T. Initiative security protocols. Any breach of protocol is subject to sanctions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md-modal md-effect-1" id="modal-About">
|
||||
<div class="md-content">
|
||||
<h3>
|
||||
<img class="float-left" src="img/icon_bops.png" width="48" height="48" alt="" />
|
||||
MORE INFORMATIONS
|
||||
<a class="frame-icon-close md-close float-right" href="#"><img src="img/icon_close.png" width="48" height="48" alt="" /></a>
|
||||
</h3>
|
||||
<div>
|
||||
<img class="float-left" src="img/fl_security.png" width="300" height="460" alt="" />
|
||||
<p>La sécurité et la protection des intérêts impériaux sont des priorités absolues pour l’agence.</p>
|
||||
<p>En tant que garante de l’ordre dans les zones sous juridiction de l’UEE, l’agence BOPS s'engage à prévenir, neutraliser et répondre efficacement à toutes les formes de menaces, qu'elles soient internes ou externes aux territoires de l'Empire.</p>
|
||||
<p>Cette mission repose sur une approche combinant vigilance, réactivité et expertise tactique, afin d’assurer la stabilité, la sécurité des citoyens et le respect des lois impériales.</p>
|
||||
<p>Chaque opération est conçue pour inspirer confiance aux populations locales tout en projetant une image de force et de discipline au sein de l’univers connu.</p>
|
||||
<p class="ul-style">
|
||||
— Surveillance active des secteurs critiques pour dissuader les menaces potentielles.</br>
|
||||
— Protection rapprochée de convois, personnalités importantes ou cargaisons sensibles.</br>
|
||||
— Neutralisation de vaisseaux hostiles ou suspects, avec récupération d’actifs stratégiques.</br>
|
||||
— Ciblage et capture ou élimination de fugitifs dangereux, conformément aux lois impériales.</br>
|
||||
— Protection des civils en détresse et aide aux infrastructures endommagées.</br>
|
||||
— Collecte et analyse d’informations sur des activités suspectes, incidents ou organisations hostiles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-page-bops"></div>
|
||||
|
||||
<div class="center-div-menu">
|
||||
<div class="padding50">
|
||||
|
||||
<p class="txt-center txt-bold txt-s40 small-caps padding25 txt-or">Rapid Emergency & Action Combat Team</p>
|
||||
<!-- <p class="txt-center txt-bold txt-italic txt-s20 padding15 txt-or"><span class="padding5">SÉCURITÉ</span> —— <span class="padding5">INTELLIGENCE</span> —— <span class="padding5">SAUVETAGE</span></p> -->
|
||||
<p class="txt-justify padding5">Founded to combat extreme criminality across the Verse. R.E.A.C.T. is an independent operational label, uniting dedicated pilots from all horizons to neutralize threats where the law is failing.</p>
|
||||
<p class="txt-center txt-bold txt-s22 padding25 txt-or">—————— R.E.A.C.T. is not an organization, but a tactical standard ——————</p>
|
||||
<p class="txt-justify padding5">It is a cross-org initiative designed for players who share the same vision: protecting citizens and NPCs from hostile entities. Wearing the R.E.A.C.T. badge doesn’t mean leaving your organization; it means joining a rapid response network.</p>
|
||||
</div>
|
||||
<div class="center-div-menu-flex txt-bold">
|
||||
<div class="menu-item md-trigger" data-modal="modal-About"><a href="#">> MORE INFORMATIONS <</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="black-filter"></div>
|
||||
|
||||
<!-- Vidéo de fond -->
|
||||
<div class="video-container" aria-hidden="true">
|
||||
<iframe
|
||||
id="react-video"
|
||||
src="https://www.youtube-nocookie.com/embed/tFDqWOqm1G8?controls=0&autoplay=1&mute=1&playsinline=1&loop=1&playlist=tFDqWOqm1G8&cc_load_policy=0&iv_load_policy=3&modestbranding=1&rel=0&enablejsapi=1"
|
||||
title="Présentation R.E.A.C.T — YouTube"
|
||||
loading="lazy"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
|
||||
allowfullscreen
|
||||
referrerpolicy="strict-origin-when-cross-origin">
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
<div class="md-overlay"></div><!-- the overlay element -->
|
||||
|
||||
<!-- classie.js by @desandro: https://github.com/desandro/classie -->
|
||||
<script src="js/classie.js"></script>
|
||||
<script src="js/modalEffects.js"></script>
|
||||
|
||||
<!-- for the blur effect -->
|
||||
<!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
|
||||
<script>
|
||||
// this is important for IEs
|
||||
var polyfilter_scriptpath = '/js/';
|
||||
</script>
|
||||
<script src="js/cssParser.js"></script>
|
||||
<script src="js/css-filters-polyfill.js"></script>
|
||||
|
||||
<script>
|
||||
// On ajoute dynamiquement l'origine à l'URL de l'iframe (recommandé par l'API YouTube)
|
||||
(function attachOrigin(){
|
||||
const iframe = document.getElementById('react-video');
|
||||
const url = new URL(iframe.src);
|
||||
if (!url.searchParams.has('origin')) {
|
||||
url.searchParams.set('origin', window.location.origin);
|
||||
iframe.src = url.toString();
|
||||
}
|
||||
})();
|
||||
|
||||
// Utilitaires pour parler au lecteur via postMessage (API YouTube)
|
||||
function ytCommand(func, args = []) {
|
||||
const iframe = document.getElementById('react-video');
|
||||
if (!iframe || !iframe.contentWindow) return;
|
||||
iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', func, args }), '*');
|
||||
}
|
||||
|
||||
// Au premier geste utilisateur : on remet le son et on met le volume à 50 %
|
||||
function enableSoundOnce() {
|
||||
ytCommand('unMute');
|
||||
ytCommand('setVolume', [50]);
|
||||
|
||||
// Masquer le bouton
|
||||
const btn = document.getElementById('unmute-btn');
|
||||
if (btn) btn.style.display = 'none';
|
||||
|
||||
// Retirer les écouteurs pour ne pas répéter l’action
|
||||
window.removeEventListener('pointerdown', enableSoundOnce);
|
||||
window.removeEventListener('keydown', enableSoundOnce);
|
||||
window.removeEventListener('touchstart', enableSoundOnce, { passive: true });
|
||||
}
|
||||
|
||||
// Bouton dédié
|
||||
// document.getElementById('unmute-btn').addEventListener('click', enableSoundOnce);
|
||||
|
||||
// …ou n’importe quel premier geste sur la page
|
||||
//window.addEventListener('pointerdown', enableSoundOnce, { once: true });
|
||||
//window.addEventListener('keydown', enableSoundOnce, { once: true });
|
||||
//window.addEventListener('touchstart', enableSoundOnce, { once: true, passive: true });
|
||||
</script>
|
||||
<div class="footer txt-s12 txt-center">
|
||||
<p>
|
||||
<a href="https://robertsspaceindustries.com/en/orgs/REACT" target="_blank" title="Notre page RSI"><img src="img/icon09b.png" width="48" height="48" alt="" /></a>
|
||||
<a href="https://discord.gg/dAvST8E7Mq" target="_blank" title="Notre Discord"><img src="img/icon08b.png" width="48" height="48" alt="" /></a>
|
||||
<a href="https://robertsspaceindustries.com" target="_blank" title="RSI"><img src="img/icon10.png" width="48" height="48" alt="" /></a>
|
||||
</p>
|
||||
<p>Copyright © 2025-<?php echo date('Y'); ?> | www.react-sc.fr | All Rights Reserved.</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
176
index.php
Normal file
176
index.php
Normal file
@ -0,0 +1,176 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="keywords" content="BlackOps Agency, Star Citizen, Advocacy, UEE, Sécurité, Exploration, Renseignement, Patrouilles, Chasses de primes, Investigation, Neutralisation de menaces, Assistance humanitaire, Abordages, Réseaux anti-toxicité, Formation tactique, Entraînements, Coopération, Zones UEE, Systèmes inexplorés, Lore Star Citizen, Missions multi-joueurs, Protocole Arkange, Protocole Vigilance, Respect des lois impériales, Justice interstellaire, Criminalité galactique, Piraterie, XenoThreat, Vanduul, Sécurité spatiale, Leadership BlackOps, Collaboration stratégique, Combat spatial, Star Citizen gameplay, Exploration stratégique, Missions BlackOps Agency, Réputation UEE, Gestion des conflits, BlackOps, Agency, Recrutement Star Citizen, Zones de guerre, Star Citizen immersion.">
|
||||
|
||||
<title>Rapid Emergency & Action Combat Team / Star Citizen</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/default.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/switch.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/styles-modal.css" />
|
||||
<script src="js/modernizr.custom.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="assets-div-menu">
|
||||
<a href="#">Contenu à venir</a>
|
||||
</div>
|
||||
|
||||
<div class="connexion-div-menu md-trigger" data-modal="modal-Login"><a href="#">Connexion</a></div>
|
||||
|
||||
<div class="se-switch switch-center" role="group" aria-label="Choix entre FR et EN">
|
||||
<a class="se-switch__btn is-active" href="index.php" data-site="se1" aria-current="page">🇫🇷</a>
|
||||
<a class="se-switch__btn" href="index-en.php" data-site="se2">🇬🇧</a>
|
||||
</div>
|
||||
|
||||
<div class="md-modal md-effect-1" id="modal-Login">
|
||||
<div class="md-content">
|
||||
<h3>
|
||||
<img class="float-left" src="img/icon_bops.png" width="48" height="48" alt="" />
|
||||
INTERFACE DE CONNEXION
|
||||
<a class="frame-icon-close md-close float-right" href="#"><img src="img/icon_close.png" width="48" height="48" alt="" /></a>
|
||||
</h3>
|
||||
<div>
|
||||
<p class="txt-center">Entrer vos identifiants pour acceder à l'espace sécurisé.*</p>
|
||||
<form>
|
||||
<div>
|
||||
<p class="txt-center"><input class="connexion-champ" id="idr" type="text" name="username" placeholder="RID" /></p>
|
||||
<p class="txt-center"><input class="connexion-champ" id="pwr" type="password" name="password" placeholder="MOT DE PASSE" /></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="txt-center"><input class="connexion-bouton" type="submit" value="S'authentifier" /></p>
|
||||
</div>
|
||||
</form>
|
||||
<p class="txt-center txt-s10">* Accès sous haute surveillance. En confirmant vos identifiants, vous acceptez les protocoles de sécurité de l'initiative R.E.A.C.T. Toute infraction aux protocoles est passible de sanctions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md-modal md-effect-1" id="modal-About">
|
||||
<div class="md-content">
|
||||
<h3>
|
||||
<img class="float-left" src="img/icon_bops.png" width="48" height="48" alt="" />
|
||||
EN SAVOIR PLUS
|
||||
<a class="frame-icon-close md-close float-right" href="#"><img src="img/icon_close.png" width="48" height="48" alt="" /></a>
|
||||
</h3>
|
||||
<div>
|
||||
<img class="float-left" src="img/fl_security.png" width="300" height="460" alt="" />
|
||||
<p>La sécurité et la protection des intérêts impériaux sont des priorités absolues pour l’agence.</p>
|
||||
<p>En tant que garante de l’ordre dans les zones sous juridiction de l’UEE, l’agence BOPS s'engage à prévenir, neutraliser et répondre efficacement à toutes les formes de menaces, qu'elles soient internes ou externes aux territoires de l'Empire.</p>
|
||||
<p>Cette mission repose sur une approche combinant vigilance, réactivité et expertise tactique, afin d’assurer la stabilité, la sécurité des citoyens et le respect des lois impériales.</p>
|
||||
<p>Chaque opération est conçue pour inspirer confiance aux populations locales tout en projetant une image de force et de discipline au sein de l’univers connu.</p>
|
||||
<p class="ul-style">
|
||||
— Surveillance active des secteurs critiques pour dissuader les menaces potentielles.</br>
|
||||
— Protection rapprochée de convois, personnalités importantes ou cargaisons sensibles.</br>
|
||||
— Neutralisation de vaisseaux hostiles ou suspects, avec récupération d’actifs stratégiques.</br>
|
||||
— Ciblage et capture ou élimination de fugitifs dangereux, conformément aux lois impériales.</br>
|
||||
— Protection des civils en détresse et aide aux infrastructures endommagées.</br>
|
||||
— Collecte et analyse d’informations sur des activités suspectes, incidents ou organisations hostiles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-page-bops"></div>
|
||||
|
||||
<div class="center-div-menu">
|
||||
<div class="padding50">
|
||||
|
||||
<p class="txt-center txt-bold txt-s40 small-caps padding25 txt-or">Rapid Emergency & Action Combat Team</p>
|
||||
<!-- <p class="txt-center txt-bold txt-italic txt-s20 padding15 txt-or"><span class="padding5">SÉCURITÉ</span> —— <span class="padding5">INTELLIGENCE</span> —— <span class="padding5">SAUVETAGE</span></p> -->
|
||||
<p class="txt-justify padding5">Fondée pour combattre la criminalité extrême à travers l’Univers, la R.E.A.C.T. est un label opérationnel indépendant. Nous unissons des pilotes dévoués de tous horizons pour neutraliser les menaces là où la loi fait défaut.</p>
|
||||
<p class="txt-center txt-bold txt-s22 padding25 txt-or">—————— La R.E.A.C.T. n’est pas une organisation, mais un standard tactique ——————</p>
|
||||
<p class="txt-justify padding5">C’est une initiative inter-organisations conçue pour les joueurs qui partagent la même vision : protéger les citoyens et les PNJs des entités hostiles. Porter l’insigne R.E.A.C.T. ne signifie pas quitter votre organisation ; cela signifie rejoindre un réseau d'intervention rapide.</p>
|
||||
</div>
|
||||
<div class="center-div-menu-flex txt-bold">
|
||||
<div class="menu-item md-trigger" data-modal="modal-About"><a href="#">> EN SAVOIR PLUS <</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="black-filter"></div>
|
||||
|
||||
<!-- Vidéo de fond -->
|
||||
<div class="video-container" aria-hidden="true">
|
||||
<iframe
|
||||
id="react-video"
|
||||
src="https://www.youtube-nocookie.com/embed/tFDqWOqm1G8?controls=0&autoplay=1&mute=1&playsinline=1&loop=1&playlist=tFDqWOqm1G8&cc_load_policy=0&iv_load_policy=3&modestbranding=1&rel=0&enablejsapi=1"
|
||||
title="Présentation R.E.A.C.T — YouTube"
|
||||
loading="lazy"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
|
||||
allowfullscreen
|
||||
referrerpolicy="strict-origin-when-cross-origin">
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
<div class="md-overlay"></div><!-- the overlay element -->
|
||||
|
||||
<!-- classie.js by @desandro: https://github.com/desandro/classie -->
|
||||
<script src="js/classie.js"></script>
|
||||
<script src="js/modalEffects.js"></script>
|
||||
|
||||
<!-- for the blur effect -->
|
||||
<!-- by @derSchepp https://github.com/Schepp/CSS-Filters-Polyfill -->
|
||||
<script>
|
||||
// this is important for IEs
|
||||
var polyfilter_scriptpath = '/js/';
|
||||
</script>
|
||||
<script src="js/cssParser.js"></script>
|
||||
<script src="js/css-filters-polyfill.js"></script>
|
||||
|
||||
<script>
|
||||
// On ajoute dynamiquement l'origine à l'URL de l'iframe (recommandé par l'API YouTube)
|
||||
(function attachOrigin(){
|
||||
const iframe = document.getElementById('react-video');
|
||||
const url = new URL(iframe.src);
|
||||
if (!url.searchParams.has('origin')) {
|
||||
url.searchParams.set('origin', window.location.origin);
|
||||
iframe.src = url.toString();
|
||||
}
|
||||
})();
|
||||
|
||||
// Utilitaires pour parler au lecteur via postMessage (API YouTube)
|
||||
function ytCommand(func, args = []) {
|
||||
const iframe = document.getElementById('react-video');
|
||||
if (!iframe || !iframe.contentWindow) return;
|
||||
iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', func, args }), '*');
|
||||
}
|
||||
|
||||
// Au premier geste utilisateur : on remet le son et on met le volume à 50 %
|
||||
function enableSoundOnce() {
|
||||
ytCommand('unMute');
|
||||
ytCommand('setVolume', [50]);
|
||||
|
||||
// Masquer le bouton
|
||||
const btn = document.getElementById('unmute-btn');
|
||||
if (btn) btn.style.display = 'none';
|
||||
|
||||
// Retirer les écouteurs pour ne pas répéter l’action
|
||||
window.removeEventListener('pointerdown', enableSoundOnce);
|
||||
window.removeEventListener('keydown', enableSoundOnce);
|
||||
window.removeEventListener('touchstart', enableSoundOnce, { passive: true });
|
||||
}
|
||||
|
||||
// Bouton dédié
|
||||
// document.getElementById('unmute-btn').addEventListener('click', enableSoundOnce);
|
||||
|
||||
// …ou n’importe quel premier geste sur la page
|
||||
//window.addEventListener('pointerdown', enableSoundOnce, { once: true });
|
||||
//window.addEventListener('keydown', enableSoundOnce, { once: true });
|
||||
//window.addEventListener('touchstart', enableSoundOnce, { once: true, passive: true });
|
||||
</script>
|
||||
<div class="footer txt-s12 txt-center">
|
||||
<p>
|
||||
<a href="https://robertsspaceindustries.com/en/orgs/REACT" target="_blank" title="Notre page RSI"><img src="img/icon09b.png" width="48" height="48" alt="" /></a>
|
||||
<a href="https://discord.gg/dAvST8E7Mq" target="_blank" title="Notre Discord"><img src="img/icon08b.png" width="48" height="48" alt="" /></a>
|
||||
<a href="https://robertsspaceindustries.com" target="_blank" title="RSI"><img src="img/icon10.png" width="48" height="48" alt="" /></a>
|
||||
</p>
|
||||
<p>Copyright © 2025-<?php echo date('Y'); ?> | www.react-sc.fr | Tous droits réservés.</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
80
js/classie.js
Normal file
80
js/classie.js
Normal file
@ -0,0 +1,80 @@
|
||||
/*!
|
||||
* classie - class helper functions
|
||||
* from bonzo https://github.com/ded/bonzo
|
||||
*
|
||||
* classie.has( elem, 'my-class' ) -> true/false
|
||||
* classie.add( elem, 'my-new-class' )
|
||||
* classie.remove( elem, 'my-unwanted-class' )
|
||||
* classie.toggle( elem, 'my-class' )
|
||||
*/
|
||||
|
||||
/*jshint browser: true, strict: true, undef: true */
|
||||
/*global define: false */
|
||||
|
||||
( function( window ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// class helper functions from bonzo https://github.com/ded/bonzo
|
||||
|
||||
function classReg( className ) {
|
||||
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
|
||||
}
|
||||
|
||||
// classList support for class management
|
||||
// altho to be fair, the api sucks because it won't accept multiple classes at once
|
||||
var hasClass, addClass, removeClass;
|
||||
|
||||
if ( 'classList' in document.documentElement ) {
|
||||
hasClass = function( elem, c ) {
|
||||
return elem.classList.contains( c );
|
||||
};
|
||||
addClass = function( elem, c ) {
|
||||
elem.classList.add( c );
|
||||
};
|
||||
removeClass = function( elem, c ) {
|
||||
elem.classList.remove( c );
|
||||
};
|
||||
}
|
||||
else {
|
||||
hasClass = function( elem, c ) {
|
||||
return classReg( c ).test( elem.className );
|
||||
};
|
||||
addClass = function( elem, c ) {
|
||||
if ( !hasClass( elem, c ) ) {
|
||||
elem.className = elem.className + ' ' + c;
|
||||
}
|
||||
};
|
||||
removeClass = function( elem, c ) {
|
||||
elem.className = elem.className.replace( classReg( c ), ' ' );
|
||||
};
|
||||
}
|
||||
|
||||
function toggleClass( elem, c ) {
|
||||
var fn = hasClass( elem, c ) ? removeClass : addClass;
|
||||
fn( elem, c );
|
||||
}
|
||||
|
||||
var classie = {
|
||||
// full names
|
||||
hasClass: hasClass,
|
||||
addClass: addClass,
|
||||
removeClass: removeClass,
|
||||
toggleClass: toggleClass,
|
||||
// short names
|
||||
has: hasClass,
|
||||
add: addClass,
|
||||
remove: removeClass,
|
||||
toggle: toggleClass
|
||||
};
|
||||
|
||||
// transport
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( classie );
|
||||
} else {
|
||||
// browser global
|
||||
window.classie = classie;
|
||||
}
|
||||
|
||||
})( window );
|
||||
786
js/css-filters-polyfill.js
Normal file
786
js/css-filters-polyfill.js
Normal file
@ -0,0 +1,786 @@
|
||||
/*!
|
||||
* css-filters-polyfill.js
|
||||
*
|
||||
* Author: Christian Schepp Schaefer
|
||||
* Summary: A polyfill for CSS filter effects
|
||||
* License: MIT
|
||||
* Version: 0.22
|
||||
*
|
||||
* URL:
|
||||
* https://github.com/Schepp/
|
||||
*
|
||||
*/
|
||||
;(function(window){
|
||||
var polyfilter = {
|
||||
// Detect if we are dealing with IE <= 9
|
||||
// http://james.padolsey.com/javascript/detect-_ie-in-js-using-conditional-comments/
|
||||
_ie: (function(){
|
||||
var undef,
|
||||
v = 3,
|
||||
div = document.createElement('div'),
|
||||
all = div.getElementsByTagName('i');
|
||||
|
||||
while(
|
||||
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
|
||||
all[0]
|
||||
);
|
||||
|
||||
return v > 4 ? v : undef;
|
||||
}()),
|
||||
|
||||
_svg_cache: {},
|
||||
|
||||
_create_svg_element: function(tagname,attributes){
|
||||
var xmlns = 'http://www.w3.org/2000/svg';
|
||||
var elem = document.createElementNS(xmlns,tagname);
|
||||
for(key in attributes){
|
||||
elem.setAttributeNS(null,key,attributes[key]);
|
||||
}
|
||||
|
||||
return elem;
|
||||
},
|
||||
|
||||
_create_svg: function(id,filterelements){
|
||||
var xmlns = 'http://www.w3.org/2000/svg';
|
||||
var svg = document.createElementNS(xmlns,'svg');
|
||||
svg.setAttributeNS(null,'width','0');
|
||||
svg.setAttributeNS(null,'height','0');
|
||||
svg.setAttributeNS(null,'style','position:absolute');
|
||||
|
||||
var svg_filter = document.createElementNS(xmlns,'filter');
|
||||
svg_filter.setAttributeNS(null,'id',id);
|
||||
svg.appendChild(svg_filter);
|
||||
|
||||
for(var i = 0; i < filterelements.length; i++){
|
||||
svg_filter.appendChild(filterelements[i]);
|
||||
}
|
||||
|
||||
return svg;
|
||||
},
|
||||
|
||||
_pending_stylesheets: 0,
|
||||
|
||||
_stylesheets: [],
|
||||
|
||||
_development_mode: (function(){
|
||||
if(location.hostname === 'localhost' || location.hostname.search(/.local$/) !== -1 || location.hostname.search(/\d+\.\d+\.\d+\.\d+/) !== -1){
|
||||
if(window.console) console.log('Detected localhost or IP address. Assuming you are a developer. Caching of stylesheets is disabled.');
|
||||
return true;
|
||||
}
|
||||
if(window.console) console.log('Caching of stylesheets is enabled. You need to refresh twice to see any changes.');
|
||||
return false;
|
||||
})(),
|
||||
|
||||
process_stylesheets: function(){
|
||||
var xmlHttp = [];
|
||||
|
||||
// Check if path to library is correct, do that 2 secs. after this to not disturb initial processing
|
||||
window.setTimeout(function(){
|
||||
if (window.XMLHttpRequest) {
|
||||
var xmlHttpCheck = new XMLHttpRequest();
|
||||
} else if (window.ActiveXObject) {
|
||||
var xmlHttpCheck = new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
xmlHttpCheck.open('GET', window.polyfilter_scriptpath + 'htc/sepia.htc', true);
|
||||
xmlHttpCheck.onreadystatechange = function(){
|
||||
if(xmlHttp.readyState == 4 && xmlHttp.status != 200){
|
||||
alert('The configured path \r\rvar polyfilter_scriptpath = "' + window.polyfilter_scriptpath + '"\r\rseems wrong!\r\rConfigure the polyfill\'s correct absolute(!) script path before referencing the css-filters-polyfill.js, like so:\r\rvar polyfilter_scriptpath = "/js/css-filters-polyfill/";\r\rLeaving IE dead in the water is no option. You damn Mac user... ;)');
|
||||
}
|
||||
};
|
||||
try{
|
||||
xmlHttpCheck.send(null);
|
||||
} catch(e){}
|
||||
},2000);
|
||||
|
||||
|
||||
var stylesheets = document.querySelectorAll ? document.querySelectorAll('style,link[rel="stylesheet"]') : document.getElementsByTagName('*');
|
||||
|
||||
for(var i = 0; i < stylesheets.length; i++){
|
||||
(function(i){
|
||||
switch(stylesheets[i].nodeName){
|
||||
default:
|
||||
break;
|
||||
|
||||
case 'STYLE':
|
||||
polyfilter._stylesheets.push({
|
||||
media: stylesheets[i].media || 'all',
|
||||
content: stylesheets[i].innerHTML
|
||||
});
|
||||
break;
|
||||
|
||||
case 'LINK':
|
||||
if(stylesheets[i].rel === 'stylesheet'){
|
||||
var index = polyfilter._stylesheets.length;
|
||||
|
||||
polyfilter._stylesheets.push({
|
||||
media: stylesheets[i].media || 'all'
|
||||
});
|
||||
|
||||
polyfilter._pending_stylesheets++;
|
||||
|
||||
// Fetch external stylesheet
|
||||
var href = stylesheets[i].href;
|
||||
|
||||
// Use localStorage as cache for stylesheets, if available
|
||||
if(!polyfilter._development_mode && window.localStorage && window.localStorage.getItem('polyfilter_' + href)){
|
||||
polyfilter._pending_stylesheets--;
|
||||
polyfilter._stylesheets[index].content = localStorage.getItem('polyfilter_' + href);
|
||||
if(polyfilter._pending_stylesheets === 0){
|
||||
polyfilter.process();
|
||||
}
|
||||
}
|
||||
|
||||
// Always fetch stylesheets to reflect possible changes
|
||||
try{
|
||||
if(window.XMLHttpRequest) {
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
} else if(window.ActiveXObject) {
|
||||
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
xmlHttp.open('GET', href, true);
|
||||
xmlHttp.onreadystatechange = function(){
|
||||
if(xmlHttp.readyState === 4){
|
||||
if(xmlHttp.status === 0){
|
||||
if(window.console) console.log('Could not fetch external CSS via HTTP-Request ' + href + '. Probably because of cross origin.');
|
||||
if(!polyfilter._stylesheets[index].content){
|
||||
polyfilter._pending_stylesheets--;
|
||||
polyfilter._stylesheets[index].content = xmlHttp.responseText;
|
||||
if(polyfilter._pending_stylesheets === 0){
|
||||
polyfilter.process();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if(!polyfilter._stylesheets[index].content){
|
||||
polyfilter._pending_stylesheets--;
|
||||
polyfilter._stylesheets[index].content = xmlHttp.responseText;
|
||||
if(polyfilter._pending_stylesheets === 0){
|
||||
polyfilter.process();
|
||||
}
|
||||
}
|
||||
// Cache stylesheet in localStorage, if available
|
||||
if(!polyfilter._development_mode && window.localStorage){
|
||||
try{
|
||||
window.localStorage.setItem('polyfilter_' + href,polyfilter._stylesheets[index].content)
|
||||
}
|
||||
catch(e){
|
||||
if(window.console) console.log('Local storage quota have been exceeded. Caching of stylesheet ' + href + ' is not possible');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
try{
|
||||
xmlHttp.send(null);
|
||||
} catch(e){
|
||||
if(window.console) console.log('Could not fetch external CSS via HTTP-Request ' + href + '. Are you maybe testing using the file://-protocol?');
|
||||
if(!polyfilter._stylesheets[index].content){
|
||||
polyfilter._pending_stylesheets--;
|
||||
if(polyfilter._pending_stylesheets === 0){
|
||||
polyfilter.process();
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch(e){}
|
||||
}
|
||||
break;
|
||||
}
|
||||
})(i);
|
||||
}
|
||||
if(this._pending_stylesheets === 0){
|
||||
this.process();
|
||||
}
|
||||
},
|
||||
|
||||
_processDeclarations: function(rule){
|
||||
var newstyles = '';
|
||||
for(var k in rule.declarations){
|
||||
var declaration = rule.declarations[k];
|
||||
|
||||
if(declaration.property === 'filter'){
|
||||
|
||||
if(document.querySelectorAll){
|
||||
var elems = document.querySelectorAll(rule.mSelectorText);
|
||||
for(var k = 0; k < elems.length; k++){
|
||||
elems[k].style.polyfilterStore = declaration.valueText;
|
||||
}
|
||||
}
|
||||
|
||||
var gluedvalues = declaration.valueText;
|
||||
var values = gluedvalues.split(/\)\s+/),
|
||||
properties = {
|
||||
filtersW3C: [],
|
||||
filtersWebKit: [],
|
||||
filtersSVG: [],
|
||||
filtersIE: [],
|
||||
behaviorsIE: []
|
||||
};
|
||||
|
||||
for(idx in values){
|
||||
var value = values[idx] + ')';
|
||||
|
||||
currentproperties = polyfilter.convert(value);
|
||||
|
||||
for(key in currentproperties){
|
||||
if(typeof properties[key] !== 'undefined'){
|
||||
properties[key] = properties[key].concat(currentproperties[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
newstyles += rule.mSelectorText + '{';
|
||||
if(properties['filtersW3C'].length > 0){
|
||||
var filter =
|
||||
webkitFilter =
|
||||
mozFilter =
|
||||
oFilter =
|
||||
msFilter =
|
||||
properties['filtersW3C'].join(' ');
|
||||
|
||||
if(properties['filtersWebKit'] && properties['filtersWebKit'].length > 0){
|
||||
webkitFilter = properties['filtersWebKit'].join(' ');
|
||||
}
|
||||
|
||||
if(typeof this._ie === 'undefined'){
|
||||
newstyles += '-ms-filter:' + msFilter + ';';
|
||||
}
|
||||
|
||||
newstyles += '-webkit-filter:' + webkitFilter + ';';
|
||||
newstyles += '-moz-filter:' + mozFilter + ';';
|
||||
newstyles += '-o-filter:' + oFilter + ';';
|
||||
}
|
||||
if(properties['filtersSVG'].length > 0){
|
||||
if(properties['filtersSVG'][0] != 'none'){
|
||||
var id = gluedvalues.replace(/[^a-z0-9]/g,'');
|
||||
|
||||
if(typeof this._svg_cache[id] === 'undefined'){
|
||||
this._svg_cache[id] = this._create_svg(id,properties['filtersSVG']);
|
||||
|
||||
if(typeof XMLSerializer === 'undefined'){
|
||||
document.body.appendChild(this._svg_cache[id]);
|
||||
}
|
||||
else {
|
||||
var s = new XMLSerializer();
|
||||
var svgString = s.serializeToString(this._svg_cache[id]);
|
||||
if(svgString.search('SourceGraphic') != -1){
|
||||
document.body.appendChild(this._svg_cache[id]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(typeof XMLSerializer === 'undefined'){
|
||||
newstyles += 'filter: url(#' + id + ')';
|
||||
}
|
||||
else {
|
||||
var s = new XMLSerializer();
|
||||
var svgString = s.serializeToString(this._svg_cache[id]);
|
||||
|
||||
if(svgString.search('SourceGraphic') != -1){
|
||||
newstyles += 'filter: url(#' + id + ')';
|
||||
}
|
||||
else {
|
||||
newstyles += 'filter: url(\'data:image/svg+xml;utf8,' + svgString + '#' + id + '\')';
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
newstyles += 'filter: none;';
|
||||
}
|
||||
}
|
||||
if(typeof this._ie !== 'undefined'){
|
||||
if(properties['filtersIE'].length > 0){
|
||||
var filtersIE = properties['filtersIE'].join(' ');
|
||||
|
||||
newstyles += 'filter:' + filtersIE + ';';
|
||||
}
|
||||
if(properties['behaviorsIE'].length > 0){
|
||||
var behaviorsIE = properties['behaviorsIE'].join(' ');
|
||||
|
||||
newstyles += 'behavior:' + behaviorsIE + ';';
|
||||
}
|
||||
}
|
||||
newstyles += '}\r\n';
|
||||
}
|
||||
}
|
||||
return newstyles;
|
||||
},
|
||||
|
||||
// Absolute path to the .htc-files
|
||||
scriptpath:
|
||||
window.polyfilter_scriptpath ? window.polyfilter_scriptpath : (function(){
|
||||
alert('Please configure the polyfill\'s absolute(!) script path before referencing the css-filters-polyfill.js, like so:\r\nvar polyfilter_scriptpath = "/js/css-filters-polyfill/";');
|
||||
return './'
|
||||
})(),
|
||||
|
||||
// process stylesheets
|
||||
process: function(){
|
||||
var parser = new CSSParser();
|
||||
|
||||
for(var i = 0; i < this._stylesheets.length; i++){
|
||||
var newstyles = '';
|
||||
var sheet = parser.parse(this._stylesheets[i].content, false, true);
|
||||
if(sheet !== null) for(var j in sheet.cssRules){
|
||||
var rule = sheet.cssRules[j];
|
||||
|
||||
switch(rule.type){
|
||||
default:
|
||||
break;
|
||||
|
||||
case 1:
|
||||
newstyles += this._processDeclarations(rule);
|
||||
break;
|
||||
|
||||
case 4:
|
||||
newstyles += '@media ' + rule.media.join(',') + '{';
|
||||
for(var k in rule.cssRules){
|
||||
var mediarule = rule.cssRules[k];
|
||||
|
||||
newstyles += this._processDeclarations(mediarule);
|
||||
}
|
||||
newstyles += '}';
|
||||
break;
|
||||
}
|
||||
}
|
||||
var newstylesheet = document.createElement('style');
|
||||
newstylesheet.setAttribute('media',this._stylesheets[i].media);
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
newstylesheet.innerHTML = newstyles;
|
||||
document.getElementsByTagName('head')[0].appendChild(newstylesheet);
|
||||
}
|
||||
else {
|
||||
document.getElementsByTagName('head')[0].appendChild(newstylesheet);
|
||||
newstylesheet.styleSheet.cssText = newstyles;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
init: function(){
|
||||
if(Object.defineProperty){
|
||||
Object.defineProperty(CSSStyleDeclaration.prototype, 'polyfilter', {
|
||||
get: function(){
|
||||
return this.polyfilterStore;
|
||||
},
|
||||
set: function(gluedvalues){
|
||||
values = gluedvalues.split(/\)\s+/);
|
||||
var properties = {
|
||||
filtersW3C: [],
|
||||
filtersWebKit: [],
|
||||
filtersSVG: [],
|
||||
filtersIE: [],
|
||||
behaviorsIE: []
|
||||
}
|
||||
|
||||
for(idx in values){
|
||||
var value = values[idx] + ')';
|
||||
|
||||
currentproperties = polyfilter.convert(value);
|
||||
|
||||
for(key in currentproperties){
|
||||
if(typeof properties[key] !== 'undefined'){
|
||||
properties[key] = properties[key].concat(currentproperties[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(properties['filtersW3C'].length > 0){
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
this.msFilter =
|
||||
properties['filtersW3C'].join(' ');
|
||||
}
|
||||
|
||||
this.webkitFilter =
|
||||
this.mozFilter =
|
||||
this.oFilter =
|
||||
properties['filtersW3C'].join(' ');
|
||||
}
|
||||
if(properties['filtersWebKit'].length > 0){
|
||||
this.webkitFilter = properties['filtersWebKit'].join(' ');
|
||||
}
|
||||
if(properties['filtersSVG'].length > 0){
|
||||
if(properties['filtersSVG'][0] != 'none'){
|
||||
var id = gluedvalues.replace(/[^a-z0-9]/g,'');
|
||||
|
||||
if(typeof polyfilter._svg_cache[id] === 'undefined'){
|
||||
polyfilter._svg_cache[id] = polyfilter._create_svg(id,properties['filtersSVG']);
|
||||
|
||||
if(typeof XMLSerializer === 'undefined'){
|
||||
document.body.appendChild(polyfilter._svg_cache[id]);
|
||||
}
|
||||
else {
|
||||
var s = new XMLSerializer();
|
||||
var svgString = s.serializeToString(polyfilter._svg_cache[id]);
|
||||
if(svgString.search('SourceGraphic') != -1){
|
||||
document.body.appendChild(polyfilter._svg_cache[id]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(typeof XMLSerializer === 'undefined'){
|
||||
this.filter = 'url(#' + id + ')';
|
||||
}
|
||||
else {
|
||||
var s = new XMLSerializer();
|
||||
var svgString = s.serializeToString(polyfilter._svg_cache[id]);
|
||||
if(svgString.search('SourceGraphic') != -1){
|
||||
this.filter = 'url(#' + id + ')';
|
||||
}
|
||||
else {
|
||||
this.filter = 'url(\'data:image/svg+xml;utf8,' + svgString + '#' + id + '\')';
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.filter = 'none';
|
||||
}
|
||||
}
|
||||
if(typeof polyfilter._ie !== 'undefined'){
|
||||
if(properties['filtersIE'].length > 0){
|
||||
this.filter =
|
||||
properties['filtersIE'].join(' ');
|
||||
}
|
||||
else {
|
||||
this.filter = '';
|
||||
}
|
||||
if(properties['behaviorsIE'].length > 0){
|
||||
this.behavior =
|
||||
properties['behaviorsIE'].join(' ');
|
||||
}
|
||||
else {
|
||||
this.behavior = '';
|
||||
}
|
||||
}
|
||||
this.polyfilterStore = gluedvalues;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
convert: function(value){
|
||||
// None
|
||||
var fmatch = value.match(/none/i);
|
||||
if(fmatch !== null){
|
||||
var properties = this.filters.none();
|
||||
}
|
||||
// Grayscale
|
||||
var fmatch = value.match(/(grayscale)\(([0-9\.]+)\)/i);
|
||||
if(fmatch !== null){
|
||||
var amount = parseFloat(fmatch[2],10),
|
||||
properties = this.filters.grayscale(amount);
|
||||
}
|
||||
// Sepia
|
||||
var fmatch = value.match(/(sepia)\(([0-9\.]+)\)/i);
|
||||
if(fmatch !== null){
|
||||
var amount = parseFloat(fmatch[2],10),
|
||||
properties = this.filters.sepia(amount);
|
||||
}
|
||||
// Blur
|
||||
var fmatch = value.match(/(blur)\(([0-9]+)[px]*\)/i);
|
||||
if(fmatch !== null){
|
||||
var amount = parseInt(fmatch[2],10),
|
||||
properties = this.filters.blur(amount);
|
||||
}
|
||||
// Invert
|
||||
var fmatch = value.match(/(invert)\(([0-9\.]+)\)/i);
|
||||
if(fmatch !== null){
|
||||
var amount = parseFloat(fmatch[2],10),
|
||||
properties = this.filters.invert(amount);
|
||||
}
|
||||
// Brightness
|
||||
var fmatch = value.match(/(brightness)\(([0-9\.]+)%\)/i);
|
||||
if(fmatch !== null){
|
||||
var amount = parseFloat(fmatch[2],10),
|
||||
properties = this.filters.brightness(amount);
|
||||
}
|
||||
// Drop Shadow
|
||||
var fmatch = value.match(/(drop\-shadow)\(([0-9]+)[px]*\s+([0-9]+)[px]*\s+([0-9]+)[px]*\s+([#0-9]+)\)/i);
|
||||
if(fmatch !== null){
|
||||
var offsetX = parseInt(fmatch[2],10),
|
||||
offsetY = parseInt(fmatch[3],10),
|
||||
radius = parseInt(fmatch[4],10),
|
||||
color = fmatch[5],
|
||||
properties = this.filters.dropShadow(offsetX,offsetY,radius,color);
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// EFFECTS SECTION -------------------------------------------------------------------------------------------------------------
|
||||
|
||||
filters: {
|
||||
// None
|
||||
none: function(){
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['none'];
|
||||
|
||||
// Firefox
|
||||
properties['filtersSVG'] = ['none'];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = ['none'];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Grayscale
|
||||
grayscale: function(amount){
|
||||
amount = amount || 0;
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['grayscale(' + amount + ')'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feColorMatrix',{
|
||||
type: 'matrix',
|
||||
values: (0.2126 + 0.7874 * (1 - amount)) + ' '
|
||||
+ (0.7152 - 0.7152 * (1 - amount)) + ' '
|
||||
+ (0.0722 - 0.0722 * (1 - amount)) + ' 0 0 '
|
||||
+ (0.2126 - 0.2126 * (1 - amount)) + ' '
|
||||
+ (0.7152 + 0.2848 * (1 - amount)) + ' '
|
||||
+ (0.0722 - 0.0722 * (1 - amount)) + ' 0 0 '
|
||||
+ (0.2126 - 0.2126 * (1 - amount)) + ' '
|
||||
+ (0.7152 - 0.7152 * (1 - amount)) + ' '
|
||||
+ (0.0722 + 0.9278 * (1 - amount)) + ' 0 0 0 0 0 1 0'
|
||||
});
|
||||
properties['filtersSVG'] = [svg_fe1];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = amount >= 0.5 ? ['gray'] : [];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Sepia
|
||||
sepia: function(amount){
|
||||
amount = amount || 0;
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['sepia(' + amount + ')'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feColorMatrix',{
|
||||
type: 'matrix',
|
||||
values: (0.393 + 0.607 * (1 - amount)) + ' '
|
||||
+ (0.769 - 0.769 * (1 - amount)) + ' '
|
||||
+ (0.189 - 0.189 * (1 - amount)) + ' 0 0 '
|
||||
+ (0.349 - 0.349 * (1 - amount)) + ' '
|
||||
+ (0.686 + 0.314 * (1 - amount)) + ' '
|
||||
+ (0.168 - 0.168 * (1 - amount)) + ' 0 0 '
|
||||
+ (0.272 - 0.272 * (1 - amount)) + ' '
|
||||
+ (0.534 - 0.534 * (1 - amount)) + ' '
|
||||
+ (0.131 + 0.869 * (1 - amount)) + ' 0 0 0 0 0 1 0'
|
||||
});
|
||||
properties['filtersSVG'] = [svg_fe1];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = amount >= 0.5 ? ['gray','progid:DXImageTransform.Microsoft.Light()'] : [];
|
||||
properties['behaviorsIE'] = amount >= 0.5 ? ['url("' + polyfilter.scriptpath + 'htc/sepia.htc")'] : [];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Blur
|
||||
blur: function(amount){
|
||||
amount = Math.round(amount) || 0;
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['blur(' + amount + 'px)'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feGaussianBlur',{
|
||||
'in': 'SourceGraphic',
|
||||
stdDeviation: amount
|
||||
});
|
||||
properties['filtersSVG'] = [svg_fe1];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = ['progid:DXImageTransform.Microsoft.Blur(pixelradius=' + amount + ')'];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Invert
|
||||
invert: function(amount){
|
||||
amount = amount || 0;
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['invert(' + amount + ')'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feComponentTransfer',{});
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncR',{
|
||||
type: 'table',
|
||||
tableValues: amount + ' ' + (1 - amount)
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncG',{
|
||||
type: 'table',
|
||||
tableValues: amount + ' ' + (1 - amount)
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncB',{
|
||||
type: 'table',
|
||||
tableValues: amount + ' ' + (1 - amount)
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
properties['filtersSVG'] = [svg_fe1];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = amount >= 0.5 ? ['invert'] : [];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Brightness
|
||||
brightness: function(amount){
|
||||
amount = amount || 0;
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['brightness(' + amount + '%)'];
|
||||
|
||||
// WebKit "specialty"
|
||||
properties['filtersWebKit'] = ['brightness(' + (amount - 100) + '%)'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feComponentTransfer',{});
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncR',{
|
||||
type: 'linear',
|
||||
slope: amount / 100
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncG',{
|
||||
type: 'linear',
|
||||
slope: amount / 100
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
var svg_fe1sub = polyfilter._create_svg_element('feFuncB',{
|
||||
type: 'linear',
|
||||
slope: amount / 100
|
||||
});
|
||||
svg_fe1.appendChild(svg_fe1sub);
|
||||
properties['filtersSVG'] = [svg_fe1];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = ['progid:DXImageTransform.Microsoft.Light()'];
|
||||
properties['behaviorsIE'] = ['url("' + polyfilter.scriptpath + 'htc/brightness.htc")'];
|
||||
}
|
||||
|
||||
return properties;
|
||||
},
|
||||
|
||||
// Drop Shadow
|
||||
dropShadow: function(offsetX,offsetY,radius,color){
|
||||
offsetX = Math.round(offsetX) || 0;
|
||||
offsetY = Math.round(offsetY) || 0;
|
||||
radius = Math.round(radius) || 0;
|
||||
color = color || '#000000';
|
||||
|
||||
var properties = {};
|
||||
|
||||
if(typeof polyfilter._ie === 'undefined'){
|
||||
// Proposed spec
|
||||
properties['filtersW3C'] = ['drop-shadow(' + offsetX + 'px ' + offsetY + 'px ' + radius + 'px ' + color + ')'];
|
||||
|
||||
// Firefox
|
||||
// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
|
||||
var svg_fe1 = polyfilter._create_svg_element('feGaussianBlur',{
|
||||
'in': 'SourceAlpha',
|
||||
stdDeviation: radius
|
||||
});
|
||||
var svg_fe2 = polyfilter._create_svg_element('feOffset',{
|
||||
dx: offsetX + 1,
|
||||
dy: offsetY + 1,
|
||||
result: 'offsetblur'
|
||||
});
|
||||
var svg_fe3 = polyfilter._create_svg_element('feFlood',{
|
||||
'flood-color': color
|
||||
});
|
||||
var svg_fe4 = polyfilter._create_svg_element('feComposite',{
|
||||
in2: 'offsetblur',
|
||||
operator: 'in'
|
||||
});
|
||||
var svg_fe5 = polyfilter._create_svg_element('feMerge',{});
|
||||
var svg_fe5sub = polyfilter._create_svg_element('feMergeNode',{});
|
||||
svg_fe5.appendChild(svg_fe5sub);
|
||||
var svg_fe5sub = polyfilter._create_svg_element('feMergeNode',{
|
||||
'in': 'SourceGraphic'
|
||||
});
|
||||
svg_fe5.appendChild(svg_fe5sub);
|
||||
properties['filtersSVG'] = [svg_fe1,svg_fe2,svg_fe3,svg_fe4,svg_fe5];
|
||||
}
|
||||
else {
|
||||
// IE
|
||||
properties['filtersIE'] = ['progid:DXImageTransform.Microsoft.Glow(color=' + color + ',strength=0)','progid:DXImageTransform.Microsoft.Shadow(color=' + color + ',strength=0)'];
|
||||
properties['behaviorsIE'] = ['url("' + polyfilter.scriptpath + 'htc/drop-shadow.htc")'];
|
||||
}
|
||||
|
||||
return properties;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inialize, either via jQuery...
|
||||
if(window.jQuery){
|
||||
window.jQuery(document).ready(function(e) {
|
||||
polyfilter.process_stylesheets();
|
||||
});
|
||||
}
|
||||
// or via contentLoaded...
|
||||
else if(window.contentLoaded){
|
||||
contentLoaded(window,function(){
|
||||
polyfilter.process_stylesheets();
|
||||
});
|
||||
}
|
||||
// or on DOM ready / load
|
||||
else {
|
||||
if(window.addEventListener) // W3C standard
|
||||
{
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
polyfilter.process_stylesheets();
|
||||
}, false);
|
||||
}
|
||||
else if(window.attachEvent) // Microsoft
|
||||
{
|
||||
window.attachEvent('onload', function(){
|
||||
polyfilter.process_stylesheets();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Install style setters and getters
|
||||
polyfilter.init();
|
||||
})(window);
|
||||
5449
js/cssParser.js
Normal file
5449
js/cssParser.js
Normal file
File diff suppressed because it is too large
Load Diff
0
js/index.html
Normal file
0
js/index.html
Normal file
57
js/modalEffects.js
Normal file
57
js/modalEffects.js
Normal file
@ -0,0 +1,57 @@
|
||||
/**
|
||||
* modalEffects.js v1.0.0
|
||||
* http://www.codrops.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Copyright 2013, Codrops
|
||||
* http://www.codrops.com
|
||||
*/
|
||||
var ModalEffects = (function() {
|
||||
|
||||
function init() {
|
||||
|
||||
var overlay = document.querySelector( '.md-overlay' );
|
||||
|
||||
[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
|
||||
|
||||
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
|
||||
close = modal.querySelector( '.md-close' );
|
||||
|
||||
function removeModal( hasPerspective ) {
|
||||
classie.remove( modal, 'md-show' );
|
||||
|
||||
if( hasPerspective ) {
|
||||
classie.remove( document.documentElement, 'md-perspective' );
|
||||
}
|
||||
}
|
||||
|
||||
function removeModalHandler() {
|
||||
removeModal( classie.has( el, 'md-setperspective' ) );
|
||||
}
|
||||
|
||||
el.addEventListener( 'click', function( ev ) {
|
||||
classie.add( modal, 'md-show' );
|
||||
overlay.removeEventListener( 'click', removeModalHandler );
|
||||
overlay.addEventListener( 'click', removeModalHandler );
|
||||
|
||||
if( classie.has( el, 'md-setperspective' ) ) {
|
||||
setTimeout( function() {
|
||||
classie.add( document.documentElement, 'md-perspective' );
|
||||
}, 25 );
|
||||
}
|
||||
});
|
||||
|
||||
close.addEventListener( 'click', function( ev ) {
|
||||
ev.stopPropagation();
|
||||
removeModalHandler();
|
||||
});
|
||||
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
})();
|
||||
4
js/modernizr.custom.js
Normal file
4
js/modernizr.custom.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user