Implement selecting template for collage #14
5
main.go
5
main.go
@ -53,7 +53,10 @@ func main() {
|
||||
|
||||
if localAssets {
|
||||
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 {
|
||||
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="croppie.js"></script>
|
||||
<script src="index.js"></script>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
<!--
|
||||
width: 3264px;
|
||||
height: 4224px;
|
||||
width: 8.5in;
|
||||
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>
|
||||
<body onload="main()">
|
||||
<div class="container">
|
||||
|
Loading…
Reference in New Issue
Block a user