260706_004030

website/static/film/view/styles.css

@@ -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;
+}

website/templates/film/view/index.html

@@ -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>
+        <div id="sectHeader">
-            <h1 id="filmInfo_title">{{.Title_orig}}</h1>
+            <div id="sectHeader_logo"></div>
-            <h3 id="filmInfo_year">{{.Year}}</h3></br>
+
-            <p id="filmInfo_desc">{{.Desc}}</p></br>
+            <div id="sectHeader_pageInfo">
-            <img id="filmInfo_img" width="300" src="{{.Img}}"/>
+                <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>