<!DOCTYPE html>
<html>
<title>FOTOSHOOT STUDIO DK </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
<div>
<hr>
body {font-family: "Times New Roman", Georgia, Serif;}
h1, h2, h3, h4, h5, h6 {
font-family: "Playfair Display";
letter-spacing: 5px;
font-size: 12px;
}
img.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 200px;
}
.glow {
font-size: 80px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
* {box-sizing: border-box;}
.img-comp-container {
position: relative;
height: 200px; /*should be the same height as the images*/
}
.img-comp-img {
position: absolute;
width: auto;
height: auto;
overflow: hidden;
}
.img-comp-img img {
display: block;
vertical-align: middle;
}
.img-comp-slider {
position: absolute;
z-index: 9;
cursor: ew-resize;
/*set the appearance of the slider:*/
width: 40px;
height: 40px;
background-color: #2196F3;
opacity: 0.7;
border-radius: 50%;
}
:root {
--bc: #f7f5f2;
--primary: #f7ea08;
--secondary: #ff3fb4;
--tertiary: #ff441a;
--white: #ffffff;
--black: #000000;
/* Gray Colors */
--gray: #6c757d;
--gray-light: #fcf1ec;
--gray-extra-dark: #343a40;
/* Sizes */
--heading: 3.4rem;
--heading-large: 7.5rem;
--heading-medium: 2rem;
--paragraph: 1.1rem;
/* Fonts */
--font-main: "Poppins";
}
html, body {
margin: 0;
font-family: var(--font-main);
background-color: var(--bc);
}
.column {
width: 100%;
height: 855px;
display: flex;
justify-content: center;
align-items: center;
}
.magazine {
margin: 0 1.5em;
height: 80%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 3px 8px 15px 0 rgba(0, 0, 0, .225);
}
.magazine-note {
top: -4em;
width: 100%;
padding: 1em;
border-radius: 5em;
position: absolute;
text-align: center;
color: var(--black);
font-weight: 600;
font-size: var(--paragraph);
text-transform: uppercase;
z-index: 10;
}
.magazine img {
height: 100%;
}
.magazine-content {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.text-overlay {
position: absolute;
pointer-events: none;
z-index: 2;
}
.magazine-content h1 {
top: 0;
margin: 0;
width: 98%;
line-height: 1.05em;
display: flex;
justify-content: space-between;
align-items: center;
font-size: calc(var(--heading-large) + 1rem);
color: var(--white);
font-family: 'Playfair Display', serif;
font-weight: 500;
transform: scale(1, 1.5);
}
#ariana-top {
transform: scale(1.095, 1.095);
}
#ariana {
margin: .15em 0 0 0;
color: var(--secondary);
transform: scale(1, 1.95);
}
#vogue {
width: 95%;
font-weight: 600;
line-height: .85em;
color: var(--tertiary);
transform: scale(1, 1);
}
#vogue span {
transform: scale(1.1, 1.25);
}
.magazine-title {
font-family: 'Playfair Display', serif;
}
.magazine-bottom {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
z-index: 3;
}
#magazine-bottom-ari {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
#magazine-bottom-ari h1 {
display: inline-block;
margin: 3.7em 0 0 0;
line-height: .6em;
font-weight: 200;
letter-spacing: -.1em;
text-align: center;
font-family: var(--font-main);
color: var(--gray-extra-dark);
text-transform: uppercase;
font-size: calc(var(--heading));
transform: scale(1, 1);
}
#magazine-bottom-ari .ari-bottom {
margin: .25em 0 0 0;
color: var(--secondary);
}
#magazine-bottom-ari2 {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
#magazine-bottom-ari2 .bottom h1 {
display: inline-block;
margin: 0;
line-height: .9em;
font-weight: 200;
letter-spacing: -.1em;
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: calc(var(--heading) + .65em);
transform: scale(1, 1);
}
#magazine-bottom-ari2 .bottom {
bottom: .75em;
position: absolute;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.magazine-left {
width: 100%;
height: 100%;
}
.magazine-left h2 {
margin: 1.4em 0 0 0;
line-height: .6em;
color: var(--primary);
text-transform: uppercase;
font-size: calc(var(--heading) - .2rem);
transform: scale(1, 1.4);
}
.left-inner {
margin: 0 0 0 1.9em;
}
.left-inner p {
margin: 1em 0 0 0;
color: var(--gray-light);
font-size: calc(var(--paragraph) - .35em);
font-family: 'Playfair Display', serif;
text-transform: uppercase;
font-style: italic;
}
.left-inner h3 {
margin: 0;
line-height: 1.2em;
color: var(--white);
text-transform: uppercase;
font-size: calc(var(--paragraph) + .25em);
font-weight: 600;
transform: scale(1, 1.4);
}
.left-inner h4 {
margin: 0;
line-height: 1.2em;
color: var(--white);
text-transform: uppercase;
font-size: calc(var(--paragraph) - .1em);
font-weight: 600;
transform: scale(1, 1.4);
}
.left-inner h5 {
margin: 0;
line-height: 1.2em;
color: var(--white);
text-transform: uppercase;
font-size: calc(var(--paragraph) - .3em);
font-weight: 500;
transform: scale(1, 1.4);
}
.left-inner h6 {
margin: 0;
line-height: 1.2em;
color: var(--gray-light);
text-transform: uppercase;
font-size: calc(var(--paragraph) - .7em);
font-weight: 500;
transform: scale(1, 1.4);
opacity: .6;
}
.left-inner .space {
margin: 7em 0 0 0;
}
.left-inner .yellowbird {
margin: 4.3em 0 0 0;
color: var(--primary);
}
.left-inner .small-space {
margin: .5em 0 0 0;
}
.magazine-right {
width: 100%;
height: 100%;
text-align: right;
}
.right-inner {
margin: 0 .8em 0 0;
display: flex;
justify-content: flex-end;
flex-direction: column;
align-items: flex-end;
}
.right-inner .top {
margin: 1.2em 0 0 0;
}
.right-inner h2 {
margin: 0;
line-height: 1.1em;
color: var(--primary);
text-transform: uppercase;
font-size: calc(var(--paragraph) - .05em);
transform: scale(1, 1.3);
}
.right-inner p {
margin: 0;
color: var(--gray-light);
font-size: calc(var(--paragraph) - .25em);
font-family: 'Playfair Display', serif;
text-transform: uppercase;
font-style: italic;
}
.right-inner h3 {
margin: 0;
line-height: 1.2em;
color: var(--white);
text-transform: uppercase;
font-size: calc(var(--paragraph) + .15em);
font-weight: 600;
transform: scale(1, 1.3);
}
.right-inner h4 {
margin: 0;
line-height: 1.2em;
color: var(--white);
text-transform: uppercase;
font-size: calc(var(--paragraph) - .15em);
font-weight: 600;
transform: scale(1, 1.3);
}
.right-inner .line {
line-height: 1em;
font-size: calc(var(--paragraph) - .35em);
}
.right-inner .plus {
margin: 2.25em 0 0 0;
width: 40px;
height: 40px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.right-inner .plus .vert {
width: .3em;
height: 100%;
background-color: var(--primary);
position: absolute;
}
.right-inner .plus .horiz {
width: 100%;
height: .3em;
background-color: var(--primary);
position: absolute;
}
.right-inner .large {
font-size: calc(var(--heading) - 1.5rem);
}
.magazine-original {
margin: 0 1.5em;
height: 80%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 3px 8px 42.5px 0 rgba(0, 0, 0, .225);
}
.magazine-original img {
height: 100%;
}
/* Selection */
::selection {
color: var(--white);
background: var(--primary);
}
#col2 img::selection {
color: var(--white);
background: var(--secondary);
}
#col2 .magazine-note::selection {
color: var(--white);
background: var(--secondary);
}
#ariana span::selection {
color: var(--white);
background: var(--secondary);
}
#magazine-bottom-ari h1::selection {
color: var(--white);
background: var(--secondary);
}
#vogue span::selection {
color: var(--white);
background: var(--tertiary);
}
.bottom h1::selection {
color: var(--white);
background: var(--tertiary);
}
#col3 img::selection {
color: var(--white);
background: var(--tertiary);
}
#col3 .magazine-note::selection {
color: var(--white);
background: var(--tertiary);
}
/* Scrollbar */
::-webkit-scrollbar-track {
background-color: var(--bc);
}
::-webkit-scrollbar {
width: 8px;
background-color: var(--bc);
}
::-webkit-scrollbar-thumb {
background-color: var(--tertiary);
}
.panel {
padding-bottom: 10px;
}
#cam {
border: 1px;
border-color: black;
border-style: solid;
}
#photo {
border: 1px;
border-color: black;
border-style: dashed;
}
@import url('https://fonts.googleapis.com/css?family=Sarala');
body {
width: 100vw;
height: 100vh;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: #000;
font-family: Sarala, Arial, sans-serif;
font-size: 22px;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
#container {
max-width: 80vw;
max-height: 80vh;
position: relative;
}
#player {
width: 100%;
border: 2px solid #111;
box-shadow: 0 0 50px #111;
}
#capture-button {
display: block;
position: absolute;
width: 50px;
height: 50px;
bottom: 20px;
left: 50%;
margin-left: -25px;
border-radius: 50%;
background-color: #ff0000;
border: 2px solid #fff;
cursor: pointer;
transition: all .15s ease-in-out;
opacity: 0.5;
outline: none;
&:hover {
transform: scale(1.1);
}
&:active {
background-color: #00ff00;
}
}
#output {
display: none;
}
body {
display: flex;
justify-content: center;
}
.web-camera-container {
margin-top: 2rem;
margin-bottom: 2rem;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
border-radius: 4px;
width: 500px;
.camera-button {
margin-bottom: 2rem;
}
.camera-box {
.camera-shutter {
opacity: 0;
width: 450px;
height: 337.5px;
background-color: #fff;
position: absolute;
&.flash {
opacity: 1;
}
}
}
.camera-shoot {
margin: 1rem 0;
button {
height: 60px;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
img {
height: 35px;
object-fit: cover;
}
}
}
.camera-loading {
overflow: hidden;
height: 100%;
position: absolute;
width: 100%;
min-height: 150px;
margin: 3rem 0 0 -1.2rem;
ul {
height: 100%;
position: absolute;
width: 100%;
z-index: 999999;
margin: 0;
}
.loader-circle {
display: block;
height: 14px;
margin: 0 auto;
top: 50%;
left: 100%;
transform: translateY(-50%);
transform: translateX(-50%);
position: absolute;
width: 100%;
padding: 0;
li {
display: block;
float: left;
width: 10px;
height: 10px;
line-height: 10px;
padding: 0;
position: relative;
margin: 0 0 0 4px;
background: #999;
animation: preload 1s infinite;
top: -50%;
border-radius: 100%;
&:nth-child(2) {
animation-delay: .2s;
}
&:nth-child(3) {
animation-delay: .4s;
}
}
}
}
@keyframes preload {
0% {
opacity: 1
}
50% {
opacity: .4
}
100% {
opacity: 1
}
}
}
.hidden {
display: none;
}
.highlight {
background-color: #eee;
font-size: 1.2em;
margin: 0 0 30px 0;
padding: 0.2em 1.5em;
}
.warning {
color: red;
font-weight: 400;
}
div#errorMsg p {
color: #F00;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
a {
color: #6fa8dc;
font-weight: 300;
text-decoration: none;
}
a:hover {
color: #3d85c6;
text-decoration: underline;
}
a#viewSource {
display: block;
margin: 1.3em 0 0 0;
border-top: 1px solid #999;
padding: 1em 0 0 0;
}
div#links a {
display: block;
line-height: 1.3em;
margin: 0 0 1.5em 0;
}
div.outputSelector {
margin: -1.3em 0 2em 0;
}
@media screen and (min-width: 1000px) {
/* hack! to detect non-touch devices */
div#links a {
line-height: 0.8em;
}
}
h1 a {
font-weight: 300;
margin: 0 10px 0 0;
white-space: nowrap;
}
audio {
max-width: 100%;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 1em;
word-break: break-word;
}
button {
background-color: #d84a38;
border: none;
border-radius: 2px;
color: white;
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
margin: 0 0 1em 0;
padding: 0.5em 0.7em 0.6em 0.7em;
}
button:active {
background-color: #cf402f;
}
button:hover {
background-color: #cf402f;
}
button[disabled] {
color: #ccc;
}
button[disabled]:hover {
background-color: #d84a38;
}
canvas {
background-color: #ccc;
max-width: 100%;
width: 100%;
}
code {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
div#container {
margin: 0 auto 0 auto;
max-width: 40em;
padding: 1em 1.5em 1.3em 1.5em;
}
div#links {
padding: 0.5em 0 0 0;
}
h1 {
border-bottom: 1px solid #ccc;
font-family: 'Roboto', sans-serif;
font-weight: 500;
margin: 0 0 0.8em 0;
padding: 0 0 0.2em 0;
}
h2 {
color: #444;
font-size: 1em;
font-weight: 500;
line-height: 1.2em;
margin: 0 0 0.8em 0;
}
h3 {
border-top: 1px solid #eee;
color: #666;
font-weight: 500;
margin: 20px 0 10px 0;
padding: 10px 0 0 0;
white-space: nowrap;
}
html {
/* avoid annoying page width change
when moving from the home page */
overflow-y: scroll;
}
img {
border: none;
max-width: 100%;
}
input[type=radio] {
position: relative;
top: -1px;
}
p {
color: #444;
font-weight: 300;
line-height: 1.6em;
}
p#data {
border-top: 1px dotted #666;
font-family: Courier New, monospace;
line-height: 1.3em;
max-height: 1000px;
overflow-y: auto;
padding: 1em 0 0 0;
}
p.borderBelow {
border-bottom: 1px solid #aaa;
padding: 0 0 20px 0;
}
section p:last-of-type {
margin: 0;
}
section {
border-bottom: 1px solid #eee;
margin: 0 0 30px 0;
padding: 0 0 20px 0;
}
section:last-of-type {
border-bottom: none;
padding: 0 0 1em 0;
}
select {
margin: 0 1em 1em 0;
position: relative;
top: -1px;
}
h1 span {
white-space: nowrap;
}
strong {
font-weight: 500;
}
textarea {
font-family: 'Roboto', sans-serif;
}
video {
background: #fff;
margin: 0 0 20px 0;
width: 100%;
}
@media screen and (max-width: 650px) {
.highlight {
font-size: 1em;
margin: 0 0 20px 0;
padding: 0.2em 1em;
}
h1 {
font-size: 24px;
}
}
@media screen and (max-width: 550px) {
button:active {
background-color: darkRed;
}
h1 {
font-size: 22px;
}
}
@media screen and (max-width: 450px) {
h1 {
font-size: 20px;
}
}
button {
margin: 0 3px 10px 0;
padding-left: 2px;
padding-right: 2px;
width: 99px;
}
button:last-of-type {
margin: 0;
}
p.borderBelow {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
}
video {
height: auto;
margin: 0 12px 20px 0;
vertical-align: top;
min-width: 100%;
}
video:last-of-type {
margin: 0 0 20px 0;
}
video#videoRecorder {
margin: 0 20px 20px 0;
}
@media screen and (max-width: 500px) {
button {
font-size: 0.8em;
width: calc(33% - 5px);
}
}
@media screen and (max-width: 720px) {
video {
height: calc((50vw - 48px) * 3 / 4);
margin: 0 10px 10px 0;
width: calc(50vw - 48px);
}
video#videoRecorder {
margin: 0 10px 10px 0;
}
}
#log, .log {
font-size: 10px;
margin-bottom: 20px;
}
#camera, #camera--view, #camera--sensor, #camera--output{
position: fixed;
height: 30em;
width: 50em;
object-fit: cover;
}
#camera--view, #camera--sensor, #camera--output{
transform: scaleX(-1);
filter: FlipH;
}
#camera--trigger{
color: #fff;
background-color: #2c3e50;
border-color: #2c3e50;
display: inline-block;
font-weight: 600;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
text-align: center;
position: fixed;
bottom: 2em;
left: calc(50% - 100px);
}
.taken{
height: 300px!important;
width: 500px!important;
transition: all 0.5s ease-in;
border: solid 3px white;
box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
top: 20px;
right: 20px;
z-index: 2;
}
.hidden {
display: none;
}
.highlight {
background-color: #eee;
font-size: 1.2em;
margin: 0 0 30px 0;
padding: 0.2em 1.5em;
}
.warning {
color: red;
font-weight: 400;
}
div#errorMsg p {
color: #F00;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
a {
color: #6fa8dc;
font-weight: 300;
text-decoration: none;
}
a:hover {
color: #3d85c6;
text-decoration: underline;
}
a#viewSource {
display: block;
margin: 1.3em 0 0 0;
border-top: 1px solid #999;
padding: 1em 0 0 0;
}
div#links a {
display: block;
line-height: 1.3em;
margin: 0 0 1.5em 0;
}
div.outputSelector {
margin: -1.3em 0 2em 0;
}
@media screen and (min-width: 1000px) {
/* hack! to detect non-touch devices */
div#links a {
line-height: 0.8em;
}
}
h1 a {
font-weight: 300;
margin: 0 10px 0 0;
white-space: nowrap;
}
audio {
max-width: 100%;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 1em;
word-break: break-word;
}
button {
background-color: #d84a38;
border: none;
border-radius: 2px;
color: white;
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
margin: 0 0 1em 0;
padding: 0.5em 0.7em 0.6em 0.7em;
}
button:active {
background-color: #cf402f;
}
button:hover {
background-color: #cf402f;
}
button[disabled] {
color: #ccc;
}
button[disabled]:hover {
background-color: #d84a38;
}
canvas {
background-color: #ccc;
max-width: 100%;
width: 100%;
}
code {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
div#container {
margin: 0 auto 0 auto;
max-width: 40em;
padding: 1em 1.5em 1.3em 1.5em;
}
div#links {
padding: 0.5em 0 0 0;
}
h1 {
border-bottom: 1px solid #ccc;
font-family: 'Roboto', sans-serif;
font-weight: 500;
margin: 0 0 0.8em 0;
padding: 0 0 0.2em 0;
}
h2 {
color: #444;
font-size: 1em;
font-weight: 500;
line-height: 1.2em;
margin: 0 0 0.8em 0;
}
h3 {
border-top: 1px solid #eee;
color: #666;
font-weight: 500;
margin: 20px 0 10px 0;
padding: 10px 0 0 0;
white-space: nowrap;
}
html {
/* avoid annoying page width change
when moving from the home page */
overflow-y: scroll;
}
img {
border: none;
max-width: 100%;
}
input[type=radio] {
position: relative;
top: -1px;
}
p {
color: #444;
font-weight: 300;
line-height: 1.6em;
}
p#data {
border-top: 1px dotted #666;
font-family: Courier New, monospace;
line-height: 1.3em;
max-height: 1000px;
overflow-y: auto;
padding: 1em 0 0 0;
}
p.borderBelow {
border-bottom: 1px solid #aaa;
padding: 0 0 20px 0;
}
section p:last-of-type {
margin: 0;
}
section {
border-bottom: 1px solid #eee;
margin: 0 0 30px 0;
padding: 0 0 20px 0;
}
section:last-of-type {
border-bottom: none;
padding: 0 0 1em 0;
}
select {
margin: 0 1em 1em 0;
position: relative;
top: -1px;
}
h1 span {
white-space: nowrap;
}
strong {
font-weight: 500;
}
textarea {
font-family: 'Roboto', sans-serif;
}
video {
background: #222;
margin: 0 0 20px 0;
width: 100%;
}
@media screen and (max-width: 650px) {
.highlight {
font-size: 1em;
margin: 0 0 20px 0;
padding: 0.2em 1em;
}
h1 {
font-size: 24px;
}
}
@media screen and (max-width: 550px) {
button:active {
background-color: darkRed;
}
h1 {
font-size: 22px;
}
}
@media screen and (max-width: 450px) {
h1 {
font-size: 20px;
}
}
button {
margin: 0 3px 10px 0;
padding-left: 2px;
padding-right: 2px;
width: 99px;
}
button:last-of-type {
margin: 0;
}
p.borderBelow {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
}
video {
height: auto;
margin: 0 12px 20px 0;
vertical-align: top;
min-width: 100%;
}
video:last-of-type {
margin: 0 0 20px 0;
}
video#videoRecorder {
margin: 0 20px 20px 0;
}
@media screen and (max-width: 500px) {
button {
font-size: 0.8em;
width: calc(33% - 5px);
}
}
@media screen and (max-width: 720px) {
video {
height: calc((50vw - 48px) * 3 / 4);
margin: 0 10px 10px 0;
width: calc(50vw - 48px);
}
video#videoRecorder {
margin: 0 10px 10px 0;
}
}
#log, .log {
font-size: 10px;
margin-bottom: 20px;
}
/* begin external css: flickity.css
/*! Flickity v2.0.4
* https://npmcdn.com/flickity@2/dist/flickity.css
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: white;
background: hsla(0, 0%, 100%, 0.75);
cursor: pointer;
/* vertically center */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.flickity-prev-next-button:hover { background: white; }
.flickity-prev-next-button:focus {
outline: none;
box-shadow: 0 0 0 5px #09F;
}
.flickity-prev-next-button:active {
opacity: 0.6;
}
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */ */
/* .flickity-rtl .flickity-prev-next-button.previous { */
/* left: auto; */
/* right: 10px; */
/* } */
/* .flickity-rtl .flickity-prev-next-button.next { */
/* right: auto; */
/* left: 10px; */
/* } */
.flickity-prev-next-button:disabled {
opacity: 0.3;
cursor: auto;
}
.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow {
fill: #333;
}
/* ---- page dots ---- */
/* .flickity-page-dots { */
/* position: absolute; */
/* width: 100%; */
/* bottom: -25px; */
/* padding: 0; */
/* margin: 0; */
/* list-style: none; */
/* text-align: center; */
/* line-height: 1; */
/* } */
/* */
/* .flickity-rtl .flickity-page-dots { direction: rtl; } */
/* */
/* .flickity-page-dots .dot { */
/* display: inline-block; */
/* width: 10px; */
/* height: 10px; */
/* margin: 0 8px; */
/* background: #333; */
/* border-radius: 50%; */
/* opacity: 0.25; */
/* cursor: pointer; */
/* } */
/* */
/* .flickity-page-dots .dot.is-selected { */
/* opacity: 1; */
/* } */
/* end external css: flickity.css */
/*! Flickity v2.0.4
https://flickity.metafizzy.co
---------------------------------------------- */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: #FAFAFA;
}
.carousel-main {
margin-bottom: 8px;
}
.carousel-cell {
width: 100%;
height: 504px;
margin-right: 8px;
background: #8C8;
border-radius: 5px;
/* counter-increment: carousel-cell; */
}
/* cell number */
/* .carousel-cell:before { */
/* display: block; */
/* text-align: center; */
/* content: counter(carousel-cell); */
/* line-height: 200px; */
/* font-size: 80px; */
/* color: white; */
/* } */
.carousel-nav .carousel-cell {
height: 90px;
width: 120px;
}
/* .carousel-nav .carousel-cell:before { */
/* font-size: 50px; */
/* line-height: 80px; */
/* } */
/* .carousel-nav .carousel-cell.is-nav-selected { */
/* background: #ED2; */
/* } */
/* Atelierbram edit */
.carousel-main img {
display: block;
margin: 0 auto;
}
.container {
max-width: 672px;
margin: 0 auto;
}
h1 {
text-align: center;
}
/*phone camera 2/3*/
.panel {
padding-bottom: 10px;
}
#cam {
border: 1px;
border-color: black;
border-style: solid;
}
#photo {
border: 1px;
border-color: black;
border-style: dashed;
}
/*phone camera 2/3 slut*/
</style>
<script>
function initComparisons() {
var x, i;
/*find all elements with an "overlay" class:*/
x = document.getElementsByClassName("img-comp-overlay");
for (i = 0; i < x.length; i++) {
/*once for each "overlay" element:
pass the "overlay" element as a parameter when executing the compareImages function:*/
compareImages(x[i]);
}
function compareImages(img) {
var slider, img, clicked = 0, w, h;
/*get the width and height of the img element*/
w = img.offsetWidth;
h = img.offsetHeight;
/*set the width of the img element to 50%:*/
img.style.width = (w / 2) + "px";
/*create slider:*/
slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider");
/*insert slider*/
img.parentElement.insertBefore(slider, img);
/*position the slider in the middle:*/
slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
/*execute a function when the mouse button is pressed:*/
slider.addEventListener("mousedown", slideReady);
/*and another function when the mouse button is released:*/
window.addEventListener("mouseup", slideFinish);
/*or touched (for touch screens:*/
slider.addEventListener("touchstart", slideReady);
/*and released (for touch screens:*/
window.addEventListener("touchend", slideFinish);
function slideReady(e) {
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*the slider is now clicked and ready to move:*/
clicked = 1;
/*execute a function when the slider is moved:*/
window.addEventListener("mousemove", slideMove);
window.addEventListener("touchmove", slideMove);
}
function slideFinish() {
/*the slider is no longer clicked:*/
clicked = 0;
}
function slideMove(e) {
var pos;
/*if the slider is no longer clicked, exit this function:*/
if (clicked == 0) return false;
/*get the cursor's x position:*/
pos = getCursorPos(e)
/*prevent the slider from being positioned outside the image:*/
if (pos < 0) pos = 0;
if (pos > w) pos = w;
/*execute a function that will resize the overlay image according to the cursor:*/
slide(pos);
}
function getCursorPos(e) {
var a, x = 0;
e = (e.changedTouches) ? e.changedTouches[0] : e;
/*get the x positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x coordinate, relative to the image:*/
x = e.pageX - a.left;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
return x;
}
function slide(x) {
/*resize the image:*/
img.style.width = x + "px";
/*position the slider:*/
slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}
}
}
/*
Please try with devices with camera!
*/
/*
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos
*/
// reference to the current media stream
var mediaStream = null;
// Prefer camera resolution nearest to 1280x720.
var constraints = {
audio: false,
video: {
width: {ideal: 640},
height: {ideal: 480},
facingMode: "environment"
}
};
async function getMediaStream(constraints) {
try {
mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
let video = document.getElementById('cam');
video.srcObject = mediaStream;
video.onloadedmetadata = (event) => {
video.play();
};
} catch (err) {
console.error(err.message);
}
};
async function switchCamera(cameraMode) {
try {
// stop the current video stream
if (mediaStream != null && mediaStream.active) {
var tracks = mediaStream.getVideoTracks();
tracks.forEach(track => {
track.stop();
})
}
// set the video source to null
document.getElementById('cam').srcObject = null;
// change "facingMode"
constraints.video.facingMode = cameraMode;
// get new media stream
await getMediaStream(constraints);
} catch (err) {
console.error(err.message);
alert(err.message);
}
}
function takePicture() {
let canvas = document.getElementById('canvas');
let video = document.getElementById('cam');
let photo = document.getElementById('photo');
let context = canvas.getContext('2d');
const height = video.videoHeight;
const width = video.videoWidth;
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
function clearPhoto() {
let canvas = document.getElementById('canvas');
let photo = document.getElementById('photo');
let context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
document.getElementById('switchFrontBtn').onclick = (event) => {
switchCamera("user");
}
document.getElementById('switchBackBtn').onclick = (event) => {
switchCamera("environment");
}
document.getElementById('snapBtn').onclick = (event) => {
takePicture();
event.preventDefault();
}
clearPhoto();
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(err0r) {
console.log("Something went wrong!");
});
}
</script>
<body oncontextmenu="return false;">
<BODY onselectstart="return false;" ondragstart="return false;" background-color="#ffffff">
<h2 ></h2>
<p></p>
<p><b></b></p>
<p></p>
<!-- Navbar (sit on top) -->
<!--
<div class="w3-top" color="000000">
<div class="w3-bar w3-white w3-padding w3-card" style="letter-spacing:4px;" >
<a href="#home" class="w3-bar-item w3-button">FOTOSHOOT STUDIO DK</a>
<!-- Right-sided navbar links. Hide them on small screens -->
<!-- <div class="w3-right w3-hide-small">
<a href="#about" class="w3-bar-item w3-button">About</a>
<a href="#menu" class="w3-bar-item w3-button">Shop</a>
<a href="#contact" class="w3-bar-item w3-button">Take a picture online</a>
</div>
</div>
</div> -->
<h2></h2>
<p></p>
<div>
<div id="container">
<h1><strong>FOTOSHOOT STUDIO DK </strong><br/>
<br/> <i>PhotoBooth (online) </i><p> </h1>
<p>Take a picture/selfie by clicking the "red button/cirkel" or book a visit in our photo-studio and get professional high quality photos now. <br/>
<p>(Downloadable picture/image) <br/> <strong>fotoshootstudio.dk </strong></p>
</a>
<video id="player" autoplay></video>
<button id="capture-button" title="Take a picture"></button>
</div>
<canvas id="output"></canvas>
<script>
const player = document.getElementById('player');
const captureButton = document.getElementById('capture-button');
const outputCanvas = document.getElementById('output');
const context = outputCanvas.getContext('2d');
navigator.mediaDevices
.getUserMedia({ video: true })
.then((stream) => {
player.srcObject = stream;
}).catch(error => {
console.error('Can not get an access to a camera...', error);
});
captureButton.addEventListener('click', () => {
// Get the real size of the picture
const imageWidth = player.offsetWidth;
const imageHeight = player.offsetHeight;
// Make our hidden canvas the same size
outputCanvas.width = imageWidth;
outputCanvas.height = imageHeight;
// Draw captured image to the hidden canvas
context.drawImage(player, 0, 0, imageWidth, imageHeight);
// A bit of magic to save the image to a file
const downloadLink = document.createElement('a');
downloadLink.setAttribute('download', `capture-${new Date().getTime()}.png`);
outputCanvas.toBlob((blob) => {
downloadLink.setAttribute('href', URL.createObjectURL(blob));
downloadLink.click();
});
});
</script>
<!--phone camera 1/3-->
<!--
<div class="panel">
<button id="switchFrontBtn">Front Camera</button>
<button id="switchBackBtn">Back Camera</button>
<button id="snapBtn">Snap</button>
</div>
<div style="width:100%">
<!-- add autoplay muted playsinline for iOS -->
<!-- <video id="cam" autoplay muted playsinline>Not available</video>
<canvas id="canvas" style="display:none"></canvas>
<img id="photo" alt="The screen capture will appear in this box.">
</div>
<!--phone camera 1/3 slut-->
<!-- <script>
/*phone camera 3/3*/
/*
Please try with devices with camera!
*/
/*
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
https://developers.google.com/web/updates/2015/07/mediastream-deprecations?hl=en#stop-ended-and-active
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos
*/
// reference to the current media stream
var mediaStream = null;
// Prefer camera resolution nearest to 1280x720.
var constraints = {
audio: false,
video: {
width: {ideal: 640},
height: {ideal: 480},
facingMode: "environment"
}
};
async function getMediaStream(constraints) {
try {
mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
let video = document.getElementById('cam');
video.srcObject = mediaStream;
video.onloadedmetadata = (event) => {
video.play();
};
} catch (err) {
console.error(err.message);
}
};
async function switchCamera(cameraMode) {
try {
// stop the current video stream
if (mediaStream != null && mediaStream.active) {
var tracks = mediaStream.getVideoTracks();
tracks.forEach(track => {
track.stop();
})
}
// set the video source to null
document.getElementById('cam').srcObject = null;
// change "facingMode"
constraints.video.facingMode = cameraMode;
// get new media stream
await getMediaStream(constraints);
} catch (err) {
console.error(err.message);
alert(err.message);
}
}
function takePicture() {
let canvas = document.getElementById('canvas');
let video = document.getElementById('cam');
let photo = document.getElementById('photo');
let context = canvas.getContext('2d');
const height = video.videoHeight;
const width = video.videoWidth;
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
function clearPhoto() {
let canvas = document.getElementById('canvas');
let photo = document.getElementById('photo');
let context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
document.getElementById('switchFrontBtn').onclick = (event) => {
switchCamera("user");
}
document.getElementById('switchBackBtn').onclick = (event) => {
switchCamera("environment");
}
document.getElementById('snapBtn').onclick = (event) => {
takePicture();
event.preventDefault();
}
clearPhoto();
/*phone camera 3/3 slut*/
</script>
</div>
<!--
<!--camera2 uden download-->
<!--
<main id="camera">
<canvas id="camera--sensor"></canvas>
<video id="camera--view" autoplay playsinline></video>
<img src="//:0" alt="" id="camera--output">
<button id="camera--trigger">Take a picture</button>
</main>
<script>
var constraints = { video: { facingMode: "environment" }, audio: false };
var track = null;
const cameraView = document.querySelector("#camera--view"),
cameraOutput = document.querySelector("#camera--output"),
cameraSensor = document.querySelector("#camera--sensor"),
cameraTrigger = document.querySelector("#camera--trigger");
function cameraStart() {
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(stream) {
track = stream.getTracks()[0];
cameraView.srcObject = stream;
})
.catch(function(error) {
console.error("Oops. Something is broken.", error);
});
}
cameraTrigger.onclick = function() {
cameraSensor.width = cameraView.videoWidth;
cameraSensor.height = cameraView.videoHeight;
cameraSensor.getContext("2d").drawImage(cameraView, 0, 0);
cameraOutput.src = cameraSensor.toDataURL("image/webp");
cameraOutput.classList.add("taken");
};
window.addEventListener("load", cameraStart, false);
</script>
-->
<!--
<div class="panel">
<button id="switchFrontBtn">Front Camera</button>
<button id="switchBackBtn">Back Camera</button>
<button id="snapBtn">Snap</button>
</div>
<div style="width:100%">
<!-- add autoplay muted playsinline for iOS -->
<!--
<video id="cam" autoplay muted playsinline>Not available</video>
<canvas id="canvas" style="display:none"></canvas>
<img id="photo" alt="The screen capture will appear in this box.">
</div>
-->
<!--
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(err0r) {
console.log("Something went wrong!");
});
}
</script>
-->
<hr>
<!-- SLIDESHOW -->
<!--
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
</style>
<body>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
-->
<!-- Footer -->
<!--
<footer class="w3-center w3-light-grey w3-padding-32">
<p>All rights reserved | DK STORM MODE | dkstormmode.dk <a href="https://www.dkstormmode.dk" title="" target="_blank" class="w3-hover-text-green"></a></p>
</footer>
</div>
-->
</body>
</html>