Jump to content

About Login screen with alternating background

CarlosLima

By CarlosLima
in Web App CSS

 Share
Go to solution Solved by rechigo,

Recommended Posts

CarlosLima

CarlosLima   148

Posted
  • Author
Posted

Hi,

Your script was wonderful, really beautiful work, thank you for that.

 

In the web browser on a pc or tablet / iPad monitor (horizontal screens) it was perfect, however, on a mobile phone (vertical screen) the images do not fit well.

 

Do you see any chance of adding it to your script so that we can add vertical images (1080x1920) or even the images be resized for vertical screens too?

 

Not being possible, no problem, but it would be a great step forward to customize the login screen.

 

Thanks

Link to comment
Share on other sites
  • 1 month later...
infinityvod

infinityvod   1

Posted
Posted
Hi everyone...

 

I did everything, but how do I change the ids on the login page and manual login page?

Link to comment
Share on other sites
muppet4k

muppet4k   10

Posted
Posted

Hi,

 

where can i find the index.html on my emby nas system?

 

Which folder are the files?

 

Thank you

Oliver

 

Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted
1 hour ago, muppet4k said:

Hi,

 

where can i find the index.html on my emby nas system?

 

Which folder are the files?

 

Thank you

Oliver

 

Look at your server log near the top you will see the application path.

Link to comment
Share on other sites
muppet4k

muppet4k   10

Posted
Posted
11 hours ago, Happy2Play said:

Look at your server log near the top you will see the application path.

okay i found it but my index.html looks different: 

    <meta property="og:url" content="https://emby.media">

    <meta property="og:description" content="Energize your media.">

    <meta property="og:type" content="article">

    <meta property="fb:app_id" content="1618309211750238">

    <link rel="apple-touch-icon" href="touchicon.png">

    <link rel="apple-touch-icon" sizes="72x72" href="touchicon72.png">

    <link rel="apple-touch-icon" sizes="114x114" href="touchicon114.png">

    <link rel="apple-touch-startup-image" href="css/images/iossplash.png">

    <link rel="shortcut icon" href="favicon.ico">

    <meta name="msapplication-TileImage" content="touchicon144.png">

    <meta name="msapplication-TileColor" content="#333333">

    <meta name="theme-color" content="#43A047">



    <title>Emby</title>



    <style>

        .preload {

            background-color: #000;

        }



        .app-splash {

            background-image: url(modules/themes/logowhite.png);

            background-position: center top;

            background-repeat: no-repeat;

            background-size: contain;

            position: fixed;

            top: 30%;

            left: 30%;

            right: 30%;

            height: 20%;

        }



        @media (orientation: landscape) {



            .app-splash {

                left: 37.5%;

                right: 37.5%;

            }

        }

    </style>



</head>

<body>

    <div class="backdropContainer"></div>

    <div class="backgroundContainer"></div>

    <div class="mainDrawer"></div>

    <div class="skinHeader focuscontainer-x"></div>

    <div class="mainAnimatedPages skinBody">



        <div class="app-splash"></div>

    </div>

    <script src="apploader.js" defer></script>

</body>

</html>

        

  


 

 

Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted
3 hours ago, muppet4k said:

okay i found it but my index.html looks different: 


    <meta property="og:url" content="https://emby.media">

    <meta property="og:description" content="Energize your media.">

    <meta property="og:type" content="article">

    <meta property="fb:app_id" content="1618309211750238">

    <link rel="apple-touch-icon" href="touchicon.png">

    <link rel="apple-touch-icon" sizes="72x72" href="touchicon72.png">

    <link rel="apple-touch-icon" sizes="114x114" href="touchicon114.png">

    <link rel="apple-touch-startup-image" href="css/images/iossplash.png">

    <link rel="shortcut icon" href="favicon.ico">

    <meta name="msapplication-TileImage" content="touchicon144.png">

    <meta name="msapplication-TileColor" content="#333333">

    <meta name="theme-color" content="#43A047">



    <title>Emby</title>



    <style>

        .preload {

            background-color: #000;

        }



        .app-splash {

            background-image: url(modules/themes/logowhite.png);

            background-position: center top;

            background-repeat: no-repeat;

            background-size: contain;

            position: fixed;

            top: 30%;

            left: 30%;

            right: 30%;

            height: 20%;

        }



        @media (orientation: landscape) {



            .app-splash {

                left: 37.5%;

                right: 37.5%;

            }

        }

    </style>



</head>

<body>

    <div class="backdropContainer"></div>

    <div class="backgroundContainer"></div>

    <div class="mainDrawer"></div>

    <div class="skinHeader focuscontainer-x"></div>

    <div class="mainAnimatedPages skinBody">



        <div class="app-splash"></div>

    </div>

    <script src="apploader.js" defer></script>

</body>

</html>

        

  



 

 

Sorry what is the issue?  You add the script to just above </body> and add page ids to login.html and/or manuallogin.html.  As note you may have to update the script to the page id applied to those pages.

Link to comment
Share on other sites
avense

avense   0

Posted
Posted 
<script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js"></script>
    <script>
        (async function () {
            var backgroundList = ["https://i.pinimg.com/564x/79/df/19/79df1999e95fe782ded56073983b733b.jpg", "https://1.bp.blogspot.com/-frGePQZe7SI/XRPEY2LS7jI/AAAAAAAAAPk/M5RyYwpIzAMAlC0rhIQkBf_L0u1PonXKQCLcBGAs/s640/CAPA-DVD-FILME-BRIGTHBURN-O-FILHO-DAS-TREVAS-2019-25-06.jpg", "http://fotos.sapo.pt/awHbwZ1nzWuB3DKwb0z8/", "https://s3.amazonaws.com/muzeez/uploads/galleries/large/galleriesFiles/5jo8goeaNWNeePa5q-1-esqueceram-de-mim.jpg"];
            var backgroundChangeIntervalSeconds = 2;
            
            // promisify image loading
            var loadImage = function loadImage(source) {
                return new Promise(function (resolve) {
                var image = new Image();
                image.src = source;

                image.onload = function () {
                    return resolve();
                };
                });
            };

            var setBackground = function setBackground() {
                // create an array from the nodeList of loginPages
                var loginPages = Array.from(document.querySelectorAll("#manualloginPage")); // only proceed if there are login pages that are visible               

                if (loginPages.filter(function (page) {
                return page.classList.contains("hide");
                }).length < loginPages.length) {
                // go through each login page and apply the styling
                loginPages.forEach(function (page) {
                    return page.style = "\n                            background: url(".concat(backgroundList[Math.floor(Math.random() * backgroundList.length)], ") no-repeat center center fixed; \n                            -webkit-background-size: cover; \n                            -moz-background-size: cover; \n                            -o-background-size: cover; \n                            transition: background-image 0.5s ease-in-out; \n                            -webkit-transition: background-image 0.5s ease-in-out;\n                        ");
                });
                }
            };

            document.arrive("#manualloginPage", setBackground); // preload all images

            for (var _i = 0, _backgroundList = backgroundList; _i < _backgroundList.length; _i++) {
                var backgroundImg = _backgroundList[_i];
                await loadImage(backgroundImg);
            } // update via interval we set 


            setInterval(setBackground, backgroundChangeIntervalSeconds * 1000);
            })();
    </script>

Dont work for me.


where is my mistake?

Link to comment
Share on other sites
Happy2Play

Happy2Play   8281

Posted
Posted
2 hours ago, avense said: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js"></script>
    <script>
        (async function () {
            var backgroundList = ["https://i.pinimg.com/564x/79/df/19/79df1999e95fe782ded56073983b733b.jpg", "https://1.bp.blogspot.com/-frGePQZe7SI/XRPEY2LS7jI/AAAAAAAAAPk/M5RyYwpIzAMAlC0rhIQkBf_L0u1PonXKQCLcBGAs/s640/CAPA-DVD-FILME-BRIGTHBURN-O-FILHO-DAS-TREVAS-2019-25-06.jpg", "http://fotos.sapo.pt/awHbwZ1nzWuB3DKwb0z8/", "https://s3.amazonaws.com/muzeez/uploads/galleries/large/galleriesFiles/5jo8goeaNWNeePa5q-1-esqueceram-de-mim.jpg"];
            var backgroundChangeIntervalSeconds = 2;
            
            // promisify image loading
            var loadImage = function loadImage(source) {
                return new Promise(function (resolve) {
                var image = new Image();
                image.src = source;

                image.onload = function () {
                    return resolve();
                };
                });
            };

            var setBackground = function setBackground() {
                // create an array from the nodeList of loginPages
                var loginPages = Array.from(document.querySelectorAll("#manualloginPage")); // only proceed if there are login pages that are visible               

                if (loginPages.filter(function (page) {
                return page.classList.contains("hide");
                }).length < loginPages.length) {
                // go through each login page and apply the styling
                loginPages.forEach(function (page) {
                    return page.style = "\n                            background: url(".concat(backgroundList[Math.floor(Math.random() * backgroundList.length)], ") no-repeat center center fixed; \n                            -webkit-background-size: cover; \n                            -moz-background-size: cover; \n                            -o-background-size: cover; \n                            transition: background-image 0.5s ease-in-out; \n                            -webkit-transition: background-image 0.5s ease-in-out;\n                        ");
                });
                }
            };

            document.arrive("#manualloginPage", setBackground); // preload all images

            for (var _i = 0, _backgroundList = backgroundList; _i < _backgroundList.length; _i++) {
                var backgroundImg = _backgroundList[_i];
                await loadImage(backgroundImg);
            } // update via interval we set 


            setInterval(setBackground, backgroundChangeIntervalSeconds * 1000);
            })();
    </script>

Dont work for me.


where is my mistake?

I copied this code and applied to index.html and ensured my manualogin.html had id="manualloginPage".  Script backdrop images appeared.  So I would have to guess on your manuallogin.html.

Link to comment
Share on other sites
  • 2 weeks later...
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

The script that rotates the images on the login screen is spectacular, really beautiful.
Would it be possible to try to advance it?
The idea would be to apply an exchange effect to the images, as shown on this page.
Thank you now.

https://cominca-stays.com/

Link to comment
Share on other sites
  • 2 years later...
chef

chef   3745

Posted
Posted

Hi,

A while ago I wrote this plugin which adds script tags to the index.html in emby.

It then copies the JavaScript file into emby's dashboard-ui folder if the file doesn't exist after an update.

The JavaScript file can contain whatever you want to load into emby.

I attached a bunch of events to the DOM using a mutation observer. This allowed me to know what pages where being loaded into the DOM (since emby made it difficult to actually know what 'mainaninatedpages' where being loaded).

 

Now, I no longer have to keep editing code after an update. This plugin does it for me.

 

The code to check out is this:

https://github.com/chefbennyj1/Emby.DashboardExtras/blob/master/DashboardExtras/ServerEntryPoint.cs#L57

 

This could be useful here. It would load the JavaScript file, and alter the index.html for you automatically.

 

  • Thanks 1
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted (edited)

Hi,
Thank you so much for your effort and advancement. As far as I can understand your plugin has received an update to allow more features.
I didn't understand, however, how should I switch to using your plugin now in the stable EmbyServer 4750 version.
Is it possible for you to paste the new plugin below so that I can add it to the index.html file?
And a detail, the place to add inside the index file is still the same?
Thank you very much for your work.

 

Edited by CarlosLima
Link to comment
Share on other sites
chef

chef   3745

Posted
Posted
On 6/29/2022 at 9:57 AM, CarlosLima said:

Hi,
Thank you so much for your effort and advancement. As far as I can understand your plugin has received an update to allow more features.
I didn't understand, however, how should I switch to using your plugin now in the stable EmbyServer 4750 version.
Is it possible for you to paste the new plugin below so that I can add it to the index.html file?
And a detail, the place to add inside the index file is still the same?
Thank you very much for your work.

 

Hey @CarlosLima, sorry for the delay.

I'll have to take a look at this plugin again if you were interested in having a more generic type of library that was able to load JavaScript files into emby.

currently it looks only one specific JavaScript file existing and then copies it from inside the plugin.

I can do that. It would just take some time to alter the code and figure out a good way to load external JavaScript files.

🤟

 

  • Thanks 1
Link to comment
Share on other sites
CarlosLima

CarlosLima   148

Posted
  • Author
Posted

Hi,
Don't worry about time. We all have a lot to do always.
That would be greatly appreciated and I'm sure it would be fantastic. I'm using your current script and I think it's spectacular.
Thank you so much.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...