<!DOCTYPE html>
<!-- elements.html -->
<html lang="en" class="dark">
<!-- layouts.tw-ui-app -->
<head>
<!-- metas.charset -->
<meta charset="utf-8" >
<!-- metas.viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" >
<meta name="csrf-token" content="32d4JDUqyTLpTxf72FbtdhzSkaGisBtMdoIphXGe">
<!-- Global Meta Types -->
<meta name="twitter:card" content="summary" />
<meta property="og:type" content="article" />
<!-- Global Meta Authors -->
<meta name="twitter:site" content="@DousicSocialApp" />
<!-- metas.og-url -->
<meta property="og:url" content="https://dousic.media" />
<!-- Global Meta IDs -->
<meta property="og:site_name" content="Dousic Media Web App" />
<meta property="fb:admins" content="" />
<!-- metas.favicons -->
<link rel="shortcut icon" href="https://dousic.media/imgs/favicons/dousic-favicon.ico">
<!-- filepond cdn -->
<link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
<!-- Global CSS -->
<link rel="stylesheet" href="https://dousic.media/css/app.css">
<link rel="stylesheet" href="https://dousic.media/css/global.css">
<!-- Livewire Styles -->
<style >
[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {
display: none;
}
[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {
display:none;
}
[wire\:offline] {
display: none;
}
[wire\:dirty]:not(textarea):not(input):not(select) {
display: none;
}
input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
animation-duration: 50000s;
animation-name: livewireautofill;
}
@keyframes livewireautofill { from {} }
</style>
<!-- metas.fontawesome -->
<!--script src="https://kit.fontawesome.com/c5d4fc47ef.js" crossorigin="anonymous" data-auto-replace-svg="nest"></script-->
<script src="https://kit.fontawesome.com/351da3d4f8.js" crossorigin="anonymous"></script>
<!-- metas.google-fonts -->
<link href="https://fonts.googleapis.com/css?family=Kanit:200,400,800|Lato|Roboto+Mono&display=swap" rel="stylesheet" >
<!-- Page Specific Title Tags -->
<title>Login to your Dousic.Media account</title>
<meta name="twitter:title" content="Login to your Dousic.Media account" />
<meta property="og:title" content="Login to your Dousic.Media account" />
<!-- Page Specific Description Tags -->
<meta name="description" content="Dousic Media is a content creation and consumption ecosystem where artists, creatives, producers, and fans can empower each other to create and consume original independent content in more financially sustainable ways." />
<meta name="twitter:description" content="Dousic Media is a content creation and consumption ecosystem where artists, creatives, producers, and fans can empower each other to create and consume original independent content in more financially sustainable ways." />
<meta property="og:description" content="Dousic Media is a content creation and consumption ecosystem where artists, creatives, producers, and fans can empower each other to create and consume original independent content in more financially sustainable ways." />
<!-- Page Specific Keywords Tag -->
<meta name="keywords" content="" />
<!-- Page Specific Author Tags -->
<meta name="author" content="" />
<meta name="twitter:creator" content="" />
<!-- Page Specific Share Images data -->
<!-- Twitter images must be at least 120x120px -->
<meta name="twitter:image" content="" />
<!-- Facebook images should be 1200x630px -->
<meta property="og:image" content="" />
<!-- Scripts -->
<script src="https://dousic.media/js/app.js" defer></script>
<script>
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia(
'(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head>
<!-- elements.body -->
<body class="antialiased min-h-screen">
<!-- preloaders.full-page-tailwind -->
<div id="full-page-tailwind-preloader" class="loader-background fixed top-0 left-0 right-0 bottom-0 w-full h-screen bg-trueGray-900 text-gray-100 transition-opacity duration-200 ease-in-out" style="z-index: 9999;">
</div>
<div x-data="{"show":true,"style":"success","message":null}"
:class="{ 'bg-indigo-500': style == 'success', 'bg-red-700': style == 'danger' }"
style="display: none;"
x-show="show && message"
x-init="
document.addEventListener('banner-message', event => {
style = event.detail.style;
message = event.detail.message;
show = true;
});
">
<div class="max-w-screen-xl mx-auto py-2 px-3 sm:px-6 lg:px-8">
<div class="flex items-center justify-between flex-wrap">
<div class="w-0 flex-1 flex items-center min-w-0">
<span class="flex p-2 rounded-lg" :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger' }">
<svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
<p class="ml-3 font-medium text-sm text-white truncate" x-text="message"></p>
</div>
<div class="flex-shrink-0 sm:ml-3">
<button
type="button"
class="-mr-1 flex p-2 rounded-md focus:outline-none sm:-mr-2 transition ease-in-out duration-150"
:class="{ 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger' }"
aria-label="Dismiss"
x-on:click="show = false">
<svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- App Alerts -->
<div class="wrapper">
<main class="page !pt-0">
<section class="page__auth auth">
<div class="auth__container">
<div class="auth__wrapper">
<!-- auth.login -->
<div class="auth-content auth__content">
<div class="logo-auth auth__logo">
<div class="logo-auth__image logo-auth-ibg-contain">
<img src="https://dousic.media/images/dousic-horizontal-dark.png" alt="Dousic Media Group LLC" />
</div>
<!-- <h1 class="logo-auth__name">Dousic</h1> -->
</div>
<h3 class="auth-content__subtitle">Welcome to your media ecosystem!</h3>
<p class="auth-content__text">Dousic Media is a content creation and consumption ecosystem
where artists, creatives, producers, and fans can empower each other to create and
consume original independent content in more financially sustainable ways.</p>
<div class="socials-follow auth-content__socials">
<b class="socials-follow__title">Follow us on</b>
<div class="socials-follow__body">
<a href="" class="socials-follow__item">
<i class="socials-follow__icon fa-brands fa-facebook-f"></i>
</a>
<a href="" class="socials-follow__item">
<i class="fa-brands fa-linkedin-in"></i>
</a>
<a href="" class="socials-follow__item">
<i class="socials-follow__icon fa-brands fa-twitter"></i>
</a>
<a href="" class="socials-follow__item">
<i class="socials-follow__icon fa-brands fa-google"></i>
</a>
<a href="" class="socials-follow__item">
<i class="socials-follow__icon fa-brands fa-youtube"></i>
</a>
</div>
</div>
</div>
<div class="auth-form auth__form">
<div class="auth-form__wrapper">
<div class="auth-form-socials auth-form__header">
<b class="auth-form-socials__title">Continue with</b>
<div class="auth-form-socials__body">
<a href="https://dousic.media/auth/apple" class="auth-form-socials__item bg-[#000000]">
<i class="auth-form-socials__icon fa-brands fa-apple"></i>
</a>
<a href="https://dousic.media/auth/facebook" class="auth-form-socials__item bg-[#3B5998]">
<i class="auth-form-socials__icon fa-brands fa-facebook-f"></i>
</a>
<a href="https://dousic.media/auth/google" class="auth-form-socials__item bg-[#DB4437]">
<i class="auth-form-socials__icon fa-brands fa-google"></i>
</a>
<a href="https://dousic.media/auth/twitter" class="auth-form-socials__item bg-[#00ACEE]">
<i class="auth-form-socials__icon fa-brands fa-twitter"></i>
</a>
</div>
<div class="auth-form-socials__divider">
<div class="auth-form-socials__divider--line"></div>
<span class="auth-form-socials__divider--text">or</span>
<div class="auth-form-socials__divider--line"> </div>
</div>
</div>
<div class="auth-form__body">
<form class="form space-y-5" action="https://dousic.media/login" autocomplete="off" method="post">
<input type="hidden" name="_token" value="32d4JDUqyTLpTxf72FbtdhzSkaGisBtMdoIphXGe"> <div class="form__group form-group">
<div class="form-group">
<div class="form-group__row">
<input class="form-group__input" type="email" id="email" name="email" placeholder="Account Email" required />
<div class="form-group__actions">
<div class="form-group__button">
<button class="popover-icon" data-popover-target="f7b89a5a-980b-43ea-94e2-c5558aec8fc9" data-popover-placement="bottom-end" type="button">
<i class="fa-regular fa-circle-question"></i>
</button>
<div data-popover id="f7b89a5a-980b-43ea-94e2-c5558aec8fc9" role="tooltip" class="popover invisible opacity-0">
<div class="popover__wrapper">
<p class="popover__text">
An account email is required.
Please use the email address used when creating your Dousic Media account.
</p>
</div>
<div data-popper-arrow></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form__group">
<div class="form-group">
<div class="form-group__row">
<input class="form-group__input" type="password" id="password" name="password" placeholder="Account Password" required />
<div class="form-group__actions">
<button type="button" class="form-group__button" data-toggle-password-trigger="enabled">
<i class="form-group__icon fa-solid fa-eye"></i>
</button>
<div class="form-group__button">
<button class="popover-icon" data-popover-target="8355e3bb-b929-4f98-baac-f6e82ab673a8" data-popover-placement="bottom-end" type="button">
<i class="fa-regular fa-circle-question"></i>
</button>
<div data-popover id="8355e3bb-b929-4f98-baac-f6e82ab673a8" role="tooltip" class="popover invisible opacity-0">
<div class="popover__wrapper">
<p class="popover__text">
An account email is required.
Please use the email address used when creating your Dousic Media account.
</p>
</div>
<div data-popper-arrow></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form__checkbox">
<div class="checkbox">
<input class="checkbox__input" name="remember" type="checkbox" id="09896b5e-a442-48d4-b82d-c3c7ec686bb8" />
<label for="09896b5e-a442-48d4-b82d-c3c7ec686bb8" class="">
Remember me
</label>
</div>
</div>
<div class="form__checkbox">
<a href="https://dousic.media/forgot-password" class="auth-form-extra__link">Forgot password?</a>
</div>
<div class="form__submit">
<button class="button form__button primary" type="submit">
Sign In
</button>
</div>
</form>
</div>
<div class="auth-form-extra">
<div class="auth-form-extra__wrapper">
<span class="auth-form-extra__text mr-2">Don’t have an account yet?</span>
<a href="https://dousic.media/register" class="auth-form-extra__link"> Register now!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<footer class="footer">
<div class="footer__container">
<div class="footer__wrapper">
<div class="footer__copyright">
© 2025 <strong>Dousic Media</strong> Group LLC
</div>
<div class="footer__nav">
<a href="privacy-policy"class="footer__link">
Privacy Policy
</a>
<a href="terms-of-service" class="footer__link">
Terms of Service
</a>
</div>
</div>
</div>
</footer>
<!-- App Modals -->
<!-- App JavaScript -->
<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false" ></script>
<script data-turbo-eval="false" data-turbolinks-eval="false" >
if (window.livewire) {
console.warn('Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.')
}
window.livewire = new Livewire();
window.livewire.devTools(true);
window.Livewire = window.livewire;
window.livewire_app_url = '';
window.livewire_token = '32d4JDUqyTLpTxf72FbtdhzSkaGisBtMdoIphXGe';
/* Make sure Livewire loads first. */
if (window.Alpine) {
/* Defer showing the warning so it doesn't get buried under downstream errors. */
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function() {
console.warn("Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire\'s scripts are loaded before Alpine.\\n\\n Reference docs for more info: http://laravel-livewire.com/docs/alpine-js")
})
});
}
/* Make Alpine wait until Livewire is finished rendering to do its thing. */
window.deferLoadingAlpine = function (callback) {
window.addEventListener('livewire:load', function () {
callback();
});
};
let started = false;
window.addEventListener('alpine:initializing', function () {
if (! started) {
window.livewire.start();
started = true;
}
});
document.addEventListener("DOMContentLoaded", function () {
if (! started) {
window.livewire.start();
started = true;
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.2/flowbite.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="https://dousic.media/js/app.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script src="https://dousic.media/js/tw-app-global.js"></script>
<script>
(function () {
let passwordToggles = document.querySelectorAll('[data-toggle-password-trigger="enabled"]');
for (var i = 0; i < passwordToggles.length; i++) {
passwordToggles[i].addEventListener('click', function(e){
e.preventDefault();
let input = this.parentNode.parentNode.querySelector('input');
let icon = this.querySelector('svg');
if (input.type === 'text') {
input.type = 'password';
icon.setAttribute('data-icon', 'eye');
} else if (input.type === 'password') {
input.type = 'text';
icon.setAttribute('data-icon', 'eye-slash');
}
});
}
})();
</script>
<script>
(function() {
const preloader = document.getElementById('full-page-tailwind-preloader');
setTimeout(function(){
preloader.classList.add('opacity-0');
setTimeout(function(){
document.body.classList.remove('overflow-hidden');
preloader.remove();
}, 200);
}, 200 * 2);
})();
</script>
</body>
</html>