mjbow/moira_db
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

260706_004030

Browse Source
This commit is contained in:
Maciej J. Bowszys 2026-07-06 00:40:30 +02:00
parent 9f2167265e
commit b9ea10d87f
7 changed files with 287 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
website/static/film/view/styles.css
View File

@ -0,0 +1,204 @@
body{
margin: 0;
width: 100%;
}
*{
font-family: "Kode Mono", monospace;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
/*overflow-x: hidden;*/
}
b{
font-family: "Kode Mono", monospace;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
/*overflow-x: hidden;*/
}
#sectHeader, #sectFilmInfo, #sectFilmDesc{
width: 100%;
}
#sectHeader{
height: 10vh;
display: flex;
flex-direction: row;
align-items: center;
}
#sectHeader_logo{
height: 95%;
aspect-ratio: 1/1;
background-image: url("/icons/moira_db_192.png");
background-repeat: no-repeat;
background-size: contain;
}
#sectHeader_pageInfo{
height: 100%;
padding-left: 5vw;
display: flex;
flex-direction: column;
justify-content: center;
}
#sectHeader_pageInfo_pageTypeName{
font-size: 1.5em;
}
#sectFilmInfo{
display: flex;
flex-direction: column;
}
#sectFilmInfo_top{
width: 100%;
display: flex;
flex-direction: row;
}
#sectFilmInfo_top_left{
width: 50%;
--sectFilmInfo_top_left_HEIGHT: min(calc(50vw * 192 / 108), 60vh);
height: var(--sectFilmInfo_top_left_HEIGHT);
display: flex;
flex-direction: column;
}
.sectFilmInfo_top_left_title{
width: 100%;
height: calc(var(--sectFilmInfo_top_left_HEIGHT) / 3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(var(--sectFilmInfo_top_left_HEIGHT) / 24);
}
.sectFilmInfo_top_left_title > div{
width: 100%;
height: calc(var(--sectFilmInfo_top_left_HEIGHT) / 8);
display: flex;
flex-direction: row;
align-items: center;
position: relative;
overflow: hidden;
}
.marquee_text0, .marquee_text1{
width: 100%;
position: absolute;
padding-left: 100%;
}
.marquee_text0 > *, .marquee_text1 > *{
width: fit-content;
position: relative;
white-space: nowrap;
animation: marquee_scroll 12s linear infinite;
}
.sectFilmInfo_top_left_title_line0 > .marquee_text1 > *{
animation-delay: 6s;
}
.sectFilmInfo_top_left_title_line1 > .marquee_text0 > *{
animation-delay: 3s;
}
.sectFilmInfo_top_left_title_line1 > .marquee_text1 > *{
animation-delay: 9s;
}
@keyframes marquee_scroll{
0%{
transform: translateX(0);
}
100%{
transform: translateX(-200%);
}
}
#sectFilmInfo_top_right{
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#sectFilmInfo_top_right_poster{
width: 100%;
max-height: 60vh;
aspect-ratio: 108/192;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
#sectFilmInfo_bttm{
width: 100%;
display: flex;
flex-direction: row;
}
#sectFilmInfo_bttm_left{
width: 50%;
display: flex;
flex-direction: column;
}
#sectFilmInfo_bttm_right{
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
#sectFilmDesc{
padding: 5px;
}
.sectDivider, .sectDivider_empty{
width: 100%;
height: 5vh;
margin-top: 10px;
margin-bottom: 10px;
}
.sectDivider{
background-image: url("/img/divider.png");
background-size: contain;
background-repeat: repeat-x;
}

BIN
website/static/icons/favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 234 B

After

Width:  |  Height:  |  Size: 629 B

BIN
website/static/icons/moira_db_192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 994 B

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
website/static/icons/moira_db_512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
website/static/icons/moira_db_64.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 343 B

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
website/static/img/divider.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 707 B

88
website/templates/film/view/index.html
View File

@ -9,16 +9,94 @@
<link rel="shortcut icon" type="image/png" href="/icons/favicon.png"/>
<link rel="manifest" href="/manifest.json"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./styles.css">
<script src="./script.js"></script>
</head>
<body>
<div>
<h1 id="filmInfo_title">{{.Title_orig}}</h1>
<h3 id="filmInfo_year">{{.Year}}</h3></br>
<p id="filmInfo_desc">{{.Desc}}</p></br>
<img id="filmInfo_img" width="300" src="{{.Img}}"/>
<div id="sectHeader">
<div id="sectHeader_logo"></div>
<div id="sectHeader_pageInfo">
<span id="sectHeader_pageInfo_pageType">LIST</span>
<span id="sectHeader_pageInfo_pageTypeName"><b>film_dump_watchlist</b></span>
</div>
</div>
<div class="sectDivider"></div>
<div id="sectFilmInfo">
<div id="sectFilmInfo_top">
<div id="sectFilmInfo_top_left">
<div class="sectFilmInfo_top_left_title">
<div class="sectFilmInfo_top_left_title_line0">
<div class="marquee_text0"><h1><b>{{.Title_orig}} |&nbsp</b></h1></div>
<div class="marquee_text1"><h1><b>{{.Title_orig}} |&nbsp</b></h1></div>
</div>
<div class="sectFilmInfo_top_left_title_line1">
<div class="marquee_text0"><h1><b>{{.Title_orig}} |&nbsp</b></h1></div>
<div class="marquee_text1"><h1><b>{{.Title_orig}} |&nbsp</b></h1></div>
</div>
</div>
<div class="sectFilmInfo_top_left_title">
<div class="sectFilmInfo_top_left_title_line0">
<div class="marquee_text0"><h1><b>{{.Title_PL}} |&nbsp</b></h1></div>
<div class="marquee_text1"><h1><b>{{.Title_PL}} |&nbsp</b></h1></div>
</div>
<div class="sectFilmInfo_top_left_title_line1">
<div class="marquee_text0"><h1><b>{{.Title_PL}} |&nbsp</b></h1></div>
<div class="marquee_text1"><h1><b>{{.Title_PL}} |&nbsp</b></h1></div>
</div>
</div>
<div class="sectFilmInfo_top_left_title">
<div class="sectFilmInfo_top_left_title_line0">
<div class="marquee_text0"><h1><b>{{.Title_EN}} |&nbsp</b></h1></div>
<div class="marquee_text1"><h1><b>{{.Title_EN}} |&nbsp</b></h1></div>
</div>
<div class="sectFilmInfo_top_left_title_line1">
<div class="marquee_text0"><h1><b>{{.Title_EN}} |&nbsp</b></h1></div>
<div class="marquee_text1"><h1><b>{{.Title_EN}} |&nbsp</b></h1></div>
</div>
</div>
</div>
<div id="sectFilmInfo_top_right">
<div id="sectFilmInfo_top_right_poster" style='background-image: url("{{.Img}}");'></div>
</div>
</div>
<div id="sectFilmInfo_bttm">
<div id="sectFilmInfo_bttm_left">
</div>
<div id="sectFilmInfo_bttm_right">
<div id="sectFilmInfo_bttm_right_yearHldr">
<h2>{{.Year}}</h2>
</div>
</div>
</div>
<!--img id="filmInfo_img" width="300" src="{{.Img}}"/-->
</div>
<div class="sectDivider"></div>
<div id="sectFilmDesc">
<p id="filmInfo_desc">{{.Desc}}</p></br>
</div>
<div class="sectDivider"></div>
<div class="sectDivider_empty"></div>
<div class="sectDivider"></div>
<div class="sectDivider"></div>
</body>
</html>