Implement selecting template for collage #14
5
main.go
5
main.go
@ -53,7 +53,10 @@ func main() {
|
|||||||
|
|
||||||
if localAssets {
|
if localAssets {
|
||||||
httpFileServer := http.FileServer(http.Dir("web"))
|
httpFileServer := http.FileServer(http.Dir("web"))
|
||||||
http.Handle("/", httpFileServer)
|
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
|
||||||
|
w.Header().Add("Cache-Control", "no-cache")
|
||||||
|
httpFileServer.ServeHTTP(w, r)
|
||||||
|
})
|
||||||
} else {
|
} else {
|
||||||
fs, err := fs.Sub(webFS, "web")
|
fs, err := fs.Sub(webFS, "web")
|
||||||
|
|
||||||
|
83
web/index.css
Normal file
83
web/index.css
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
background-color: lightyellow;
|
||||||
|
height: calc(100vh - 20px);
|
||||||
|
}
|
||||||
|
.controls {
|
||||||
|
background-color: lightgrey;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex: 30%;
|
||||||
|
}
|
||||||
|
.imagebox {
|
||||||
|
padding: 2rem;
|
||||||
|
flex: 70%;
|
||||||
|
}
|
||||||
|
.image-surface {
|
||||||
|
overflow: hidden;
|
||||||
|
margin: auto;
|
||||||
|
border: 1px solid;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.showbuton {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// paper sizes
|
||||||
|
.letter-portrait {
|
||||||
|
aspect-ratio: 85 / 110;
|
||||||
|
}
|
||||||
|
.letter-landscape {
|
||||||
|
aspect-ratio: 110 / 85;
|
||||||
|
}
|
||||||
|
.fiveseven-portrait {
|
||||||
|
aspect-ratio: 5 / 7;
|
||||||
|
}
|
||||||
|
.fiveseven-landscape {
|
||||||
|
aspect-ratio: 7 / 5;
|
||||||
|
}
|
||||||
|
.foursix-portrait {
|
||||||
|
aspect-ratio: 4 / 6;
|
||||||
|
}
|
||||||
|
.foursix-landscape {
|
||||||
|
aspect-ratio: 6 / 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.half-landscape {
|
||||||
|
display:flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.half-landscape .collage-img {
|
||||||
|
flex: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.one-two {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas:
|
||||||
|
"one two"
|
||||||
|
"one three";
|
||||||
|
}
|
||||||
|
.one-two .img1{
|
||||||
|
grid-area: one;
|
||||||
|
}
|
||||||
|
|
||||||
|
.letter-portrait .collage-img {
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
.letter-landscape-2 {
|
||||||
|
display:flex;
|
||||||
|
// width: 80vh;
|
||||||
|
height: 100%;
|
||||||
|
// margin: auto;
|
||||||
|
aspect-ratio: 110 / 85;
|
||||||
|
// aspect-ratio: 7 / 5;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.letter-landscape-2 .img1 {
|
||||||
|
flex: 60%;
|
||||||
|
}
|
||||||
|
.letter-landscape-2 .img2 {
|
||||||
|
flex: 40%;
|
||||||
|
}
|
@ -6,97 +6,13 @@
|
|||||||
<script src="http://localhost:35729/livereload.js"></script>
|
<script src="http://localhost:35729/livereload.js"></script>
|
||||||
<script src="croppie.js"></script>
|
<script src="croppie.js"></script>
|
||||||
<script src="index.js"></script>
|
<script src="index.js"></script>
|
||||||
|
<link rel="stylesheet" href="index.css" />
|
||||||
<!--
|
<!--
|
||||||
width: 3264px;
|
width: 3264px;
|
||||||
height: 4224px;
|
height: 4224px;
|
||||||
width: 8.5in;
|
width: 8.5in;
|
||||||
height: 11in;
|
height: 11in;
|
||||||
-->
|
-->
|
||||||
<style>
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
background-color: lightyellow;
|
|
||||||
height: calc(100vh - 20px);
|
|
||||||
}
|
|
||||||
.controls {
|
|
||||||
background-color: lightgrey;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 30%;
|
|
||||||
}
|
|
||||||
.imagebox {
|
|
||||||
padding: 2rem;
|
|
||||||
flex: 70%;
|
|
||||||
}
|
|
||||||
.image-surface {
|
|
||||||
overflow: hidden;
|
|
||||||
margin: auto;
|
|
||||||
border: 2px solid;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.showbuton {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// paper sizes
|
|
||||||
.letter-portrait {
|
|
||||||
aspect-ratio: 85 / 110;
|
|
||||||
}
|
|
||||||
.letter-landscape {
|
|
||||||
aspect-ratio: 110 / 85;
|
|
||||||
}
|
|
||||||
.fiveseven-portrait {
|
|
||||||
aspect-ratio: 5 / 7;
|
|
||||||
}
|
|
||||||
.fiveseven-landscape {
|
|
||||||
aspect-ratio: 7 / 5;
|
|
||||||
}
|
|
||||||
.foursix-portrait {
|
|
||||||
aspect-ratio: 4 / 6;
|
|
||||||
}
|
|
||||||
.foursix-landscape {
|
|
||||||
aspect-ratio: 6 / 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.half-landscape {
|
|
||||||
display:flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.half-landscape .collage-img {
|
|
||||||
flex: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.one-two {
|
|
||||||
display: grid;
|
|
||||||
grid-template-areas:
|
|
||||||
"one two"
|
|
||||||
"one three";
|
|
||||||
}
|
|
||||||
.one-two .img1{
|
|
||||||
grid-area: one;
|
|
||||||
}
|
|
||||||
|
|
||||||
.letter-portrait .collage-img {
|
|
||||||
height: 50%;
|
|
||||||
}
|
|
||||||
.letter-landscape-2 {
|
|
||||||
display:flex;
|
|
||||||
// width: 80vh;
|
|
||||||
height: 100%;
|
|
||||||
// margin: auto;
|
|
||||||
aspect-ratio: 110 / 85;
|
|
||||||
// aspect-ratio: 7 / 5;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
.letter-landscape-2 .img1 {
|
|
||||||
flex: 60%;
|
|
||||||
}
|
|
||||||
.letter-landscape-2 .img2 {
|
|
||||||
flex: 40%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body onload="main()">
|
<body onload="main()">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
Loading…
Reference in New Issue
Block a user