First commit
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
<!-- BEGIN get_combined -->
|
||||
{get_combined_scripts load='footer'}
|
||||
<!-- END get_combined -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{$lang_info.code}" dir="{$lang_info.direction}">
|
||||
<head>
|
||||
{if $SHOW_MOBILE_APP_BANNER}
|
||||
<meta name="apple-itunes-app" content="app-id=472225196">
|
||||
{/if}
|
||||
<meta charset="{$CONTENT_ENCODING}">
|
||||
<meta name="generator" content="Piwigo (aka PWG), see piwigo.org">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>{if $PAGE_TITLE!=l10n('Home') && $PAGE_TITLE!=$GALLERY_TITLE}{$PAGE_TITLE} | {/if}{$GALLERY_TITLE}</title>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="{$ROOT_URL}{$themeconf.icon_dir}/favicon.ico">
|
||||
|
||||
{strip}
|
||||
{foreach from=$themes item=theme}
|
||||
{if $theme.load_css}
|
||||
{combine_css path="themes/`$theme.id`/theme.css" order=-10}
|
||||
{/if}
|
||||
{if !empty($theme.local_head)}
|
||||
{include file=$theme.local_head load_css=$theme.load_css}
|
||||
{/if}
|
||||
{/foreach}
|
||||
|
||||
{combine_script id="jquery" load="header"}
|
||||
{/strip}
|
||||
|
||||
<!-- BEGIN get_combined -->
|
||||
{get_combined_css}
|
||||
|
||||
{get_combined_scripts load='header'}
|
||||
<!-- END get_combined -->
|
||||
|
||||
{if not empty($head_elements)}
|
||||
{foreach from=$head_elements item=elt}
|
||||
{$elt}
|
||||
{/foreach}
|
||||
{/if}
|
||||
</head>
|
||||
|
||||
<body id="{$BODY_ID}" class="{foreach from=$BODY_CLASSES item=class}{$class} {/foreach}" data-infos='{$BODY_DATA}'>
|
||||
|
||||
<div id="the_page">
|
||||
@@ -0,0 +1,123 @@
|
||||
{combine_css id='standard_pages_css' path="themes/standard_pages/skins/{$STD_PGS_SELECTED_SKIN}.css" order=100}
|
||||
{combine_css path="themes/default/vendor/fontello/css/gallery-icon.css" order=-10}
|
||||
|
||||
<script>
|
||||
var selected_language = `{$language_options[$current_language]}`;
|
||||
var url_logo_light = `{$ROOT_URL}themes/standard_pages/images/piwigo_logo.svg`;
|
||||
var url_logo_dark = `{$ROOT_URL}themes/standard_pages/images/piwigo_logo_dark.svg`;
|
||||
</script>
|
||||
{combine_script id='standard_pages_js' load='async' require='jquery' path='themes/standard_pages/js/standard_pages.js'}
|
||||
|
||||
<container id="mode" class="light">
|
||||
|
||||
<section id="header-options">
|
||||
<div>
|
||||
<i class="gallery-icon-moon toggle-mode" id="toggle_mode_light" onclick="toggle_mode('dark')"></i>
|
||||
<i class="gallery-icon-sun toggle-mode" id="toggle_mode_dark" onclick="toggle_mode('light')"></i>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{$HELP_LINK}" target="_blank">{'Help'|translate}</a>
|
||||
{if isset($errors['login_page_error'])}
|
||||
<div class="error_block_container">
|
||||
{foreach from=$errors['login_page_error'] item=error}
|
||||
<div class="error_block">
|
||||
<i class="gallery-icon-cancel"></i>
|
||||
<p>{$error}</p>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{if 'none' != $STD_PGS_SELECTED_LOGO}
|
||||
<section id="logo-section">
|
||||
{if 'piwigo_logo' == $STD_PGS_SELECTED_LOGO}
|
||||
<img id="piwigo-logo" src="{$ROOT_URL}themes/standard_pages/images/piwigo_logo.svg">
|
||||
{else if 'custom_logo' == $STD_PGS_SELECTED_LOGO}
|
||||
<img id="custom-logo" src="{$STD_PGS_SELECTED_LOGO_PATH}">
|
||||
{else if 'gallery_title'}
|
||||
<h1>{$GALLERY_TITLE}</h1>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<section id="login-form">
|
||||
<div class="">
|
||||
<h1 class="">
|
||||
{'Login'|translate}
|
||||
</h1>
|
||||
|
||||
<form class="properties" action="{$F_LOGIN_ACTION}" method="post" name="login_form">
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="username">{'Username'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-user"></i>
|
||||
<input type="text" class="" type="text" name="username" id="username" size="25" autofocus data-required="true">
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="password">{'Password'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-lock"></i>
|
||||
<input type="password" class="" name="password" id="password" size="25">
|
||||
<i class="gallery-icon-eye togglePassword"></i>
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
{if $authorize_remembering }
|
||||
<div class="column-flex">
|
||||
<div class="row-flex remember-me-container">
|
||||
<label for="remember_me">
|
||||
<input tabindex="3" type="checkbox" name="remember_me" id="remember_me" value="1">
|
||||
<span class="gallery-icon-checkmark"></span>
|
||||
{'Auto login'|@translate}</label>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="column-flex">
|
||||
<input type="hidden" name="redirect" value="{$U_REDIRECT|@urlencode}">
|
||||
<input tabindex="4" type="submit" name="login" value="{'Login'|translate}" class="btn btn-main ">
|
||||
{if isset($errors['login_form_error'])}
|
||||
<p class="error-message" style="display:block;bottom:-20px;"><i class="gallery-icon-attention-circled"></i> {$errors['login_form_error']}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="secondary-links">
|
||||
|
||||
{if isset($U_REGISTER)}
|
||||
<p>{'Don\'t have an account yet ?'|translate} <a href="register.php" title="{'Register'|translate}">{'Create an account'|translate}</a></p>
|
||||
<span id="separator"></span>
|
||||
{/if}
|
||||
<a href="password.php" title="{'Forgot your password?'|translate}">{'Forgot your password?'|translate}</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a href="index.php" id="return-to-gallery"><i class="gallery-icon-left"></i> {'Return to the gallery'|translate}</a>
|
||||
|
||||
{if count($language_options) > 1}
|
||||
<section id="language-switch">
|
||||
<div id="lang-select">
|
||||
<span id="other-languages">
|
||||
{foreach from=$language_options key=code item=lang}
|
||||
<span id="lang={$code}" onclick="setCookie('lang','{$code}',30)">{$lang}</span>
|
||||
{/foreach}
|
||||
</span>
|
||||
<div id="selected-language-container">
|
||||
<i class="gallery-icon-left-chevron"></i><span id="selected-language">{$language_options[$current_language]}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
</container>
|
||||
@@ -0,0 +1,181 @@
|
||||
{combine_css id='standard_pages_css' path="themes/standard_pages/skins/{$STD_PGS_SELECTED_SKIN}.css" order=100}
|
||||
{combine_css path="themes/default/vendor/fontello/css/gallery-icon.css" order=-10}
|
||||
|
||||
<script>
|
||||
var selected_language = `{$language_options[$current_language]}`;
|
||||
var url_logo_light = `{$ROOT_URL}themes/standard_pages/images/piwigo_logo.svg`;
|
||||
var url_logo_dark = `{$ROOT_URL}themes/standard_pages/images/piwigo_logo_dark.svg`;
|
||||
</script>
|
||||
{combine_script id='standard_pages_js' load='async' require='jquery' path='themes/standard_pages/js/standard_pages.js'}
|
||||
|
||||
<container id="mode" class="light">
|
||||
|
||||
<section id="header-options">
|
||||
<div>
|
||||
<i class="gallery-icon-moon toggle-mode" id="toggle_mode_light" onclick="toggle_mode('dark')"></i>
|
||||
<i class="gallery-icon-sun toggle-mode" id="toggle_mode_dark" onclick="toggle_mode('light')"></i>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{$HELP_LINK}" target="_blank">{'Help'|translate}</a>
|
||||
{if isset($errors['password_page_error'])}
|
||||
<div class="error_block_container">
|
||||
{foreach from=$errors['password_page_error'] item=error}
|
||||
<div class="error_block">
|
||||
<i class="gallery-icon-cancel"></i>
|
||||
<p>{$error}</p>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{if 'none' != $STD_PGS_SELECTED_LOGO}
|
||||
<section id="logo-section">
|
||||
{if 'piwigo_logo' == $STD_PGS_SELECTED_LOGO}
|
||||
<img id="piwigo-logo" src="{$ROOT_URL}themes/standard_pages/images/piwigo_logo.svg">
|
||||
{else if 'custom_logo' == $STD_PGS_SELECTED_LOGO}
|
||||
<img id="custom-logo" src="{$STD_PGS_SELECTED_LOGO_PATH}">
|
||||
{else if 'gallery_title'}
|
||||
<h1>{$GALLERY_TITLE}</h1>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
|
||||
<section id="password-form">
|
||||
<div class="">
|
||||
|
||||
{if $action eq 'lost' or $action eq 'reset' or $action eq 'lost_code'}
|
||||
<h1 class="">{if !isset($is_first_login)}{'Forgot your password?'|translate}{else}{'Welcome !'|translate}<br>{'It\'s your first login !'|translate}{/if}</h1>
|
||||
<form id="lostPassword" class="properties" action="{$form_action}?action={$action}{if isset($key)}&key={$key}{/if}" method="post">
|
||||
|
||||
<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
|
||||
{if $action eq 'lost'}
|
||||
|
||||
<p class="form-instructions">{'Please enter your username or email address.'|@translate} {'You will receive a link to create a new password via email.'|@translate}</p>
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="username">{'Username or email'|@translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-user-2"></i>
|
||||
<input type="text" id="username_or_email" name="username_or_email" size="100" maxlength="100"{if isset($username_or_email)} value="{$username_or_email}"{/if} autofocus data-required="true">
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<input tabindex="4" type="submit" name="submit" value="{'Change my password'|@translate}" class="btn btn-main ">
|
||||
{if isset($errors['password_form_error'])}
|
||||
<p class="error-message" style="display:block;bottom:-20px;"><i class="gallery-icon-attention-circled"></i> {$errors['password_form_error']}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{elseif $action eq 'reset'}
|
||||
<p class="intro-paragraph">
|
||||
{if !isset($is_first_login)}
|
||||
{'Hello <em>%s</em>, enter your new password below.'|@translate:$username}
|
||||
{else}
|
||||
{'Let\'s set your password below.'|translate}
|
||||
{/if}
|
||||
</p>
|
||||
|
||||
{if isset($is_first_login)}
|
||||
<div class="column-flex">
|
||||
<label for="username">{'Username'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-user-2"></i>
|
||||
<input type="text" class="" type="text" name="username" id="username" size="25" value={$username} disabled >
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="password">{if isset($is_first_login)}{'Password'|translate}{else}{'New password'|translate}{/if}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-lock"></i>
|
||||
<input type="password" class="" name="use_new_pwd" id="use_new_pwd" size="25" autofocus >
|
||||
<i class="gallery-icon-eye togglePassword"></i>
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="passwordConf">{if isset($is_first_login)}{'Confirm Password'|translate}{else}{'Confirm new password'|translate}{/if}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-lock"></i>
|
||||
<input type="password" name="passwordConf" id="passwordConf" >
|
||||
<i class="gallery-icon-eye togglePassword"></i>
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<input tabindex="4" type="submit" name="submit" {if !isset($is_first_login)}value="{'Confirm my new password'|@translate}"{else}value="{'Set my password'|@translate}"{/if} class="btn btn-main ">
|
||||
</div>
|
||||
|
||||
{elseif $action eq 'lost_code'}
|
||||
<span class="success-message"><i class="gallery-icon-ok-circled"></i>{'If your account exists, a verification code has been sent to your email address.'|translate}</span>
|
||||
<div class="column-flex">
|
||||
<label for="user_code">{'Verification code'|@translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-user-2"></i>
|
||||
<input type="text" id="user_code" name="user_code" size="100" maxlength="100" autofocus>
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<input tabindex="4" type="submit" name="submit" value="{'Verify'|@translate}" class="btn btn-main">
|
||||
{if isset($errors['password_form_error'])}
|
||||
<p class="error-message" style="display:block;bottom:-20px;"><i class="gallery-icon-attention-circled"></i> {$errors['password_form_error']}</p>
|
||||
{/if}
|
||||
<p style="font-size: 12px;">{"If you do not receive the email, please contact your webmaster."|translate}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
|
||||
<div class="secondary-links">
|
||||
<p>{'Return to <a href="identification.php" title="Sign in">Sign in</a>'|translate}</p>
|
||||
</div>
|
||||
{else}
|
||||
{if $action eq 'lost_end'}
|
||||
<span class="success-message"><i class="gallery-icon-ok-circled"></i>{'An email has been sent with a link to reset your password'|translate}</span>
|
||||
<p>{'Check your inbox.'|translate}</p>
|
||||
{elseif $action eq 'reset_end'}
|
||||
{if isset($is_first_login)}{assign var="string" value=""}{else}{assign var="string" value="reset"}{/if}
|
||||
<span class="success-message"><i class="gallery-icon-ok-circled"></i>
|
||||
{if isset($is_first_login)}
|
||||
{'Your password was successfully set'|translate}
|
||||
{else}
|
||||
{'Your password was successfully reset'|translate}
|
||||
{/if}
|
||||
</span>
|
||||
<a href="identification.php" title="{'Login'|translate}" class="btn-main">{'Login'|translate}</a>
|
||||
{else}
|
||||
<p>{'An error has occured please got back to <a href="identification.php" title="Sign in">Sign in</a> or <a href="register.php">Register</a>'|translate}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a href="index.php" id="return-to-gallery"><i class="gallery-icon-left-chevron"></i> {'Return to the gallery'|translate}</a>
|
||||
|
||||
{if count($language_options) > 1}
|
||||
<section id="language-switch">
|
||||
<div id="lang-select">
|
||||
<span id="other-languages">
|
||||
{foreach from=$language_options key=code item=lang}
|
||||
<span id="lang={$code}" onclick="setCookie('lang','{$code}',30)">{$lang}</span>
|
||||
{/foreach}
|
||||
</span>
|
||||
<div id="selected-language-container">
|
||||
<i class="gallery-icon-left-chevron"></i><span id="selected-language">{$language_options[$current_language]}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
|
||||
</container>
|
||||
@@ -0,0 +1,495 @@
|
||||
{combine_css id='standard_pages_css' path="themes/standard_pages/skins/{$STD_PGS_SELECTED_SKIN}.css" order=100}
|
||||
{combine_css path="themes/default/vendor/fontello/css/gallery-icon.css" order=-10}
|
||||
{combine_css path="admin/themes/default/fontello/css/fontello.css" order=-11}
|
||||
|
||||
<script>
|
||||
var selected_language = `{$language_options[$language_selection]}`;
|
||||
var url_logo_light = `{$ROOT_URL}themes/standard_pages/images/piwigo_logo.svg`;
|
||||
var url_logo_dark = `{$ROOT_URL}themes/standard_pages/images/piwigo_logo_dark.svg`;
|
||||
</script>
|
||||
{combine_script id='standard_pages_js' load='async' require='jquery' path='themes/standard_pages/js/standard_pages.js'}
|
||||
{combine_script id='standard_profile_js' load='footer' require='jquery' path='themes/standard_pages/js/profile.js'}
|
||||
{combine_script id='common' load='footer' require='jquery' path='admin/themes/default/js/common.js'}
|
||||
{footer_script}
|
||||
let user = {
|
||||
username: "{$USERNAME}",
|
||||
email: "{$EMAIL}",
|
||||
nb_image_page: $('input[name="nb_image_page"]').val(),
|
||||
theme: $('select[name="theme"]').val(),
|
||||
language: $('select[name="language"]').val(),
|
||||
recent_period: $('input[name="recent_period"]').val(),
|
||||
opt_album: $('#opt_album').is(':checked'),
|
||||
opt_comment: $('#opt_comment').is(':checked'),
|
||||
opt_hits: $('#opt_hits').is(':checked')
|
||||
}
|
||||
|
||||
const canUpdatePreferences = {if $ALLOW_USER_CUSTOMIZATION}true{else}false{/if};
|
||||
const canUpdatePassword = {if not $SPECIAL_USER}true{else}false{/if};
|
||||
const standardSaveSelector = [];
|
||||
const preferencesDefaultValues = {
|
||||
nb_image_page: {$DEFAULT_USER_VALUES['nb_image_page']},
|
||||
recent_period: {$DEFAULT_USER_VALUES['recent_period']},
|
||||
opt_album: {$DEFAULT_USER_VALUES['expand']},
|
||||
opt_comment: {$DEFAULT_USER_VALUES['show_nb_comments']},
|
||||
opt_hits: {$DEFAULT_USER_VALUES['show_nb_hits']},
|
||||
};
|
||||
const selected_date = "{$API_SELECTED_EXPIRATION}";
|
||||
const can_manage_api = {($API_CAN_MANAGE) ? "true" : "false"};
|
||||
|
||||
const str_copy_key_id = "{"ID copied."|translate|escape:javascript}";
|
||||
const str_copy_key_secret = "{"Secret copied. Keep it in a safe place."|translate|escape:javascript}";
|
||||
const str_cant_copy = "{"Impossible to copy automatically. Please copy manually."|translate|escape:javascript}";
|
||||
const str_api_added = "{"The api key has been successfully created."|translate|escape:javascript}";
|
||||
const str_revoked = "{"Revoked"|translate|escape:javascript}";
|
||||
const str_show_expired = "{"Show expired keys"|translate|escape:javascript}";
|
||||
const str_hide_expired = "{"Hide expired keys"|translate|escape:javascript}";
|
||||
const str_handle_error = "{"An error has occured"|translate|escape:javascript}";
|
||||
const str_expires_in = "{"Expires in"|translate|escape:javascript}";
|
||||
const str_expires_on = "{"Expired on"|translate|escape:javascript}";
|
||||
const str_revoke_key = "{'Do you really want to revoke the "%s" API key?'|translate|escape:javascript}";
|
||||
const str_api_revoked = "{"API Key has been successfully revoked."|translate|escape:javascript}";
|
||||
const str_api_edited = "{"API Key has been successfully edited."|translate|escape:javascript}";
|
||||
const no_time_elapsed = "{"right now"|translate|escape:javascript}";
|
||||
const str_must_not_empty = "{'must not be empty'|translate|escape:javascript}";
|
||||
{/footer_script}
|
||||
|
||||
<container id="mode" class="light">
|
||||
<section id="header-options">
|
||||
<div>
|
||||
<i class="gallery-icon-moon toggle-mode" id="toggle_mode_light" onclick="toggle_mode('dark')"></i>
|
||||
<i class="gallery-icon-sun toggle-mode" id="toggle_mode_dark" onclick="toggle_mode('light')"></i>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{$HELP_LINK}" target="_blank">{'Help'|translate}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{if 'none' != $STD_PGS_SELECTED_LOGO}
|
||||
<section id="logo-section">
|
||||
{if 'piwigo_logo' == $STD_PGS_SELECTED_LOGO}
|
||||
<img id="piwigo-logo" src="{$ROOT_URL}themes/standard_pages/images/piwigo_logo.svg">
|
||||
{else if 'custom_logo' == $STD_PGS_SELECTED_LOGO}
|
||||
<img id="custom-logo" src="{$STD_PGS_SELECTED_LOGO_PATH}">
|
||||
{else if 'gallery_title'}
|
||||
<h1>{$GALLERY_TITLE}</h1>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<a href="{$U_HOME}" id="return-to-gallery"><i class="gallery-icon-left"></i> {'Return to the gallery'|translate}</a>
|
||||
|
||||
{* ACCOUNT *}
|
||||
<section id="account-section" class="profile-section">
|
||||
<div class="title display-section" data-display="account-display">
|
||||
<div class="column-flex">
|
||||
<h1>{'Account'|translate}</h1>
|
||||
<p>{'Manage your account'|translate}</p>
|
||||
</div>
|
||||
<i class="gallery-icon-up-open display-btn close"></i>
|
||||
</div>
|
||||
<div class="form" id="account-display">
|
||||
<div class="column-flex first">
|
||||
<label>{'Username'|translate}</label>
|
||||
<div class="row-flex input-container username">
|
||||
<i class="gallery-icon-user"></i>
|
||||
<p id="username">{$USERNAME}</p>
|
||||
<input id="pwg_token" type="hidden" value="{$PWG_TOKEN}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-flex">
|
||||
<label for="email">{'Email address'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="icon-mail-alt"></i>
|
||||
<input type="email" name="mail_address" id="email" value="{$EMAIL}" />
|
||||
</div>
|
||||
<p id="email_error" class="error-message"><i class="gallery-icon-attention-circled"></i>
|
||||
{'must not be empty'|translate}</p>
|
||||
</div>
|
||||
<div class="save">
|
||||
<button class="btn btn-main" id="save_account">{'Submit'|translate}</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{* PREFERENCES *}
|
||||
{if $ALLOW_USER_CUSTOMIZATION}
|
||||
<section id="preferences-section" class="profile-section">
|
||||
<div class="title display-section" data-display="preferences-display">
|
||||
<div class="column-flex">
|
||||
<h1>{'Preferences'|translate}</h1>
|
||||
<p>{'Choose how you want to see your gallery'|translate}</p>
|
||||
</div>
|
||||
<i class="gallery-icon-up-open display-btn close" ></i>
|
||||
</div>
|
||||
<div class="form" id="preferences-display">
|
||||
<div class="column-flex first">
|
||||
<label for="nb_image_page">{'Number of photos per page'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="icon-picture"></i>
|
||||
<input type="number" size="4" maxlength="3" name="nb_image_page" id="nb_image_page"
|
||||
value="{$NB_IMAGE_PAGE}" />
|
||||
</div>
|
||||
<p id="error_nb_image" class="error-message"><i class="gallery-icon-attention-circled"></i>
|
||||
{'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<label>{'Theme'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="icon-brush"></i>
|
||||
{html_options name=theme options=$template_options selected=$template_selection}
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<label>{'Language'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="icon-language"></i>
|
||||
{html_options name=language options=$language_options selected=$language_selection}
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="recent_period">{'Recent period'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="icon-calendar"></i>
|
||||
<input type="number" size="3" maxlength="2" name="recent_period" id="recent_period"
|
||||
value="{$RECENT_PERIOD}" />
|
||||
</div>
|
||||
<p id="error_period" class="error-message"><i class="gallery-icon-attention-circled"></i>
|
||||
{'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
{* OPTIONS *}
|
||||
<label class="options-title">{'Options'|translate}</label>
|
||||
<div class="column-flex input-container preferences-options">
|
||||
<div class="row-flex option">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="opt_album" {if "true" === $EXPAND}checked{/if}>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<p>{'Expand all albums'|@translate}</p>
|
||||
</div>
|
||||
|
||||
{if $ACTIVATE_COMMENTS}
|
||||
<div class="row-flex option">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="opt_comment" {if "true" === $NB_COMMENTS}checked{/if}>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<p>{'Show number of comments'|@translate}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="row-flex option">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="opt_hits" {if "true" === $NB_HITS}checked{/if}>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<p>{'Show number of hits'|@translate}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reset">
|
||||
<button class="btn btn-main btn-secondary"
|
||||
id="default_preferences">{'Reset to default values'|translate}</button>
|
||||
<div class="save">
|
||||
<button class="btn btn-main btn-secondary" id="reset_preferences">{'Reset'|translate}</button>
|
||||
<button class="btn btn-main" id="save_preferences">{'Submit'|translate}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{* PASSWORD *}
|
||||
{if not $SPECIAL_USER}
|
||||
<section id="password-section" class="profile-section">
|
||||
<div class="title display-section" data-display="password-display">
|
||||
<div class="column-flex">
|
||||
<h1>{'Password'|translate}</h1>
|
||||
<p>{'Change your password'|translate}</p>
|
||||
</div>
|
||||
<i class="gallery-icon-up-open display-btn close" ></i>
|
||||
</div>
|
||||
<div class="form" id="password-display">
|
||||
<div class="column-flex">
|
||||
<label for="password">{'Password'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-lock"></i>
|
||||
<input type="password" class="" name="password" id="password" size="25" />
|
||||
<i class="gallery-icon-eye togglePassword"></i>
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="password_new">{'New password'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-lock"></i>
|
||||
<input type="password" class="" name="new-password" id="password_new" size="25" />
|
||||
<i class="gallery-icon-eye togglePassword"></i>
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="password_conf">{'Confirm my new password'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-lock"></i>
|
||||
<input type="password" class="" name="password_conf" id="password_conf" size="25" />
|
||||
<i class="gallery-icon-eye togglePassword"></i>
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="save">
|
||||
<button class="btn btn-main" id="save_password">{'Submit'|translate}</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{* API KEY *}
|
||||
<section id="apikey-section" class="profile-section">
|
||||
<div class="title display-section" data-display="apikey-display">
|
||||
<div class="column-flex">
|
||||
<h1>{'API Keys'|translate}</h1>
|
||||
<p>{'Create API Keys to secure your acount'|translate}</p>
|
||||
</div>
|
||||
<i class="gallery-icon-up-open display-btn close"></i>
|
||||
</div>
|
||||
|
||||
<div class="form" id="apikey-display">
|
||||
<div class="api-cant-manage" id="cant_manage_api">
|
||||
<p>{'To manage your API keys, please log in with your username/password.'|translate|escape:html}</p>
|
||||
</div>
|
||||
|
||||
<div class="new-apikey can-manage">
|
||||
<button class="btn btn-main" id="new_apikey">{'New API Key'|translate}</button>
|
||||
</div>
|
||||
<div class="api-list can-manage">
|
||||
<div class="api-list-head api-tab">
|
||||
<div aria-hidden="true"></div>
|
||||
<p>{'API Key name'|translate}</p>
|
||||
<p>{'Created at'|translate}</p>
|
||||
<p>{'Last use'|translate}</p>
|
||||
<p id="api_expires_in">{'Expires in'|translate}</p>
|
||||
<div aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="api-list-body" id="api_key_list">
|
||||
|
||||
<div class="api-tab-line border-line template-api" id="api_line">
|
||||
<div class="api-icon-collapse">
|
||||
<i class="gallery-icon-up-open icon-collapse close" data-api=""></i>
|
||||
</div>
|
||||
<p class="api_name"></p>
|
||||
<p class="api_creation"></p>
|
||||
<p class="api_last_use"></p>
|
||||
<p class="api_expiration"></p>
|
||||
<div class="api-icon-action row-flex" data-api="" data-pkid="">
|
||||
<i class="icon-pencil edit-mode"></i>
|
||||
<i class="icon-trash-1 delete-mode"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="api-tab-collapse border-line template-api" style="display: none;" id="api_collapse">
|
||||
<div aria-hidden="true"></div>
|
||||
<div class="keys">
|
||||
<div class="row-flex key">
|
||||
<i class="gallery-icon-hash"></i>
|
||||
<p class="api_key"></p>
|
||||
<i class="icon-clone" data-copy="" data-success=""></i>
|
||||
<p id="" class="api-copy api-hide success-message">{"ID copied."|translate|escape:html}</p>
|
||||
</div>
|
||||
<div class="row-flex key">
|
||||
<i class="icon-user-secret"></i>
|
||||
<p>{"The secret key can no longer be displayed."|translate}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="new-apikey">
|
||||
<button class="btn btn-link" id="show_expired_list" data-show="false">{'Show expired keys'|translate}</button>
|
||||
</div>
|
||||
<div class="api-list-body" id="api_key_list_expired">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{* API KEY MODAL *}
|
||||
<div class="bg-modal" id="api_modal">
|
||||
<div class="body-modal">
|
||||
<a class="icon-cancel close-modal" id="close_api_modal"></a>
|
||||
|
||||
<div id="generate_keyapi">
|
||||
<div class="head-modal">
|
||||
<p class="title-modal">{'Generate API Key'|translate}</p>
|
||||
<p class="subtitle-modal">{'Create a new API key to secure your account.'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="column-flex first">
|
||||
<label for="api_key_name">{'API Key name'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="icon-key"></i>
|
||||
<input type="text" id="api_key_name" />
|
||||
</div>
|
||||
<p id="error_api_key_name" class="error-message"><i class="gallery-icon-attention-circled"></i>
|
||||
{'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="row-flex section-expiration">
|
||||
<div class="column-flex">
|
||||
<label>{'Duration'|translate}</label>
|
||||
<div class="row-flex input-container api-expiration">
|
||||
<i class="gallery-icon-calendar"></i>
|
||||
{html_options name=api_expiration options=$API_EXPIRATION}
|
||||
</div>
|
||||
<p id="error_api_key_date" class="error-message"><i class="gallery-icon-attention-circled"></i>
|
||||
{'you must choose a date'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex" id="api_custom_date">
|
||||
<label for="api_expiration_date">{'Custom date'|translate}</label>
|
||||
<div class="row-flex input-container api-expiration">
|
||||
<input type="date" id="api_expiration_date" name="api_expiration_custom" min="{$API_CURRENT_DATE}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="api-mail-infos">{$API_EMAIL_INFOS}</p>
|
||||
|
||||
<div class="save">
|
||||
<button class="btn btn-cancel" id="cancel_apikey">{'Cancel'|translate}</button>
|
||||
<button class="btn btn-main" id="save_apikey">{'Generate key'|translate}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="retrieves_keyapi">
|
||||
<div class="head-modal">
|
||||
<p class="title-modal">{'Generate API Key'|translate}</p>
|
||||
<p class="subtitle-modal">{'Save your ID and secret'|translate}</p>
|
||||
<p class="modal-secret">{'The secret will no longer be displayed. You must copy it to continue.'|translate}
|
||||
<p>
|
||||
</div>
|
||||
|
||||
<div class="modal-input-keys">
|
||||
<p id="api_id_copy_success" class="api-copy api-hide success-message">
|
||||
{"ID copied."|translate|escape:html}</p>
|
||||
</div>
|
||||
<div class="input-modal input-modal-id row-flex">
|
||||
<i class="gallery-icon-hash"></i>
|
||||
<input type="text" id="api_id_key" />
|
||||
<i class="icon-clone" id="api_id_copy"></i>
|
||||
</div>
|
||||
|
||||
<div class="modal-input-keys">
|
||||
<p id="api_key_copy_success" class="modal-input-key api-copy api-hide success-message">
|
||||
{"Secret copied. Keep it in a safe place."|translate|escape:html}</p>
|
||||
</div>
|
||||
<div class="input-modal input-modal-key row-flex">
|
||||
<i class="icon-user-secret"></i>
|
||||
<input type="text" id="api_secret_key" />
|
||||
<i class="icon-clone" id="api_secret_copy"></i>
|
||||
</div>
|
||||
|
||||
<div class="save">
|
||||
<button class="btn btn-main" id="done_apikey" disabled>{'Done'|translate}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{* API KEY MODAL EDIT *}
|
||||
<div class="bg-modal" id="api_modal_edit">
|
||||
<div class="body-modal">
|
||||
<a class="icon-cancel close-modal" id="close_api_modal_edit"></a>
|
||||
|
||||
<div>
|
||||
<div class="head-modal">
|
||||
<p class="title-modal">{'Edit API Key'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex first">
|
||||
<label for="api_key_edit">{'API Key name'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="icon-key"></i>
|
||||
<input type="text" id="api_key_edit" />
|
||||
</div>
|
||||
<p id="error_api_key_edit" class="error-message"><i class="gallery-icon-attention-circled"></i>
|
||||
{'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="save">
|
||||
<button class="btn btn-main" id="save_api_edit">{'Save'|translate}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{* API KEY MODAL REVOKE *}
|
||||
<div class="bg-modal" id="api_modal_revoke">
|
||||
<div class="body-modal">
|
||||
<a class="icon-cancel close-modal" id="close_api_modal_revoke"></a>
|
||||
|
||||
<div>
|
||||
<div class="head-modal">
|
||||
<p class="title-modal" id="api_modal_revoke_title"></p>
|
||||
</div>
|
||||
|
||||
<div class="save">
|
||||
<button class="btn btn-cancel" id="cancel_api_revoke">{'Cancel'|translate}</button>
|
||||
<button class="btn btn-main btn-revoked" id="revoke_api_key">{'Revoke'|translate}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{if isset($PLUGINS_PROFILE)}
|
||||
{foreach from=$PLUGINS_PROFILE item=plugin_block key=k_block}
|
||||
<section id="{$k_block}-section" class="profile-section">
|
||||
<div class="title display-section" data-display="{$k_block}-display">
|
||||
<div class="column-flex">
|
||||
<h1>{$plugin_block.name}</h1>
|
||||
<p>{$plugin_block.desc}</p>
|
||||
</div>
|
||||
<i class="gallery-icon-up-open display-btn close" ></i>
|
||||
</div>
|
||||
<div class="form plugins" id="{$k_block}-display">
|
||||
{include file=$plugin_block.template}
|
||||
{if $plugin_block.standard_show_save}
|
||||
<div class="save">
|
||||
<button class="btn btn-main" id="save_{$k_block}">{'Submit'|translate}</button>
|
||||
</div>
|
||||
{footer_script}
|
||||
standardSaveSelector.push('#save_{$k_block}');
|
||||
{/footer_script}
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
{/foreach}
|
||||
{/if}
|
||||
|
||||
{if count($language_options) > 1}
|
||||
<section id="language-switch">
|
||||
<div id="lang-select">
|
||||
<span id="other-languages">
|
||||
{foreach from=$language_options key=code item=lang}
|
||||
<span id="lang={$code}" onclick="setCookie('lang','{$code}',30)">{$lang}</span>
|
||||
{/foreach}
|
||||
</span>
|
||||
<div id="selected-language-container">
|
||||
<i class="gallery-icon-left-chevron"></i><span
|
||||
id="selected-language">{$language_options[$language_selection]}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
{include file='toaster.tpl'}
|
||||
</container>
|
||||
@@ -0,0 +1,125 @@
|
||||
{combine_css id='standard_pages_css' path="themes/standard_pages/skins/{$STD_PGS_SELECTED_SKIN}.css" order=100}
|
||||
{combine_css path="themes/default/vendor/fontello/css/gallery-icon.css" order=-10}
|
||||
|
||||
<script>
|
||||
var selected_language = `{$language_options[$current_language]}`;
|
||||
var url_logo_light = `{$ROOT_URL}themes/standard_pages/images/piwigo_logo.svg`;
|
||||
var url_logo_dark = `{$ROOT_URL}themes/standard_pages/images/piwigo_logo_dark.svg`;
|
||||
</script>
|
||||
{combine_script id='standard_pages_js' load='async' require='jquery' path='themes/standard_pages/js/standard_pages.js'}
|
||||
|
||||
<container id="mode" class="light">
|
||||
|
||||
<section id="header-options">
|
||||
<div>
|
||||
<i class="gallery-icon-moon toggle-mode" id="toggle_mode_light" onclick="toggle_mode('dark')"></i>
|
||||
<i class="gallery-icon-sun toggle-mode" id="toggle_mode_dark" onclick="toggle_mode('light')"></i>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{$HELP_LINK}" target="_blank">{'Help'|translate}</a>
|
||||
{if isset($errors['register_page_error'])}
|
||||
<div class="error_block_container">
|
||||
{foreach from=$errors['register_page_error'] item=error}
|
||||
<div class="error_block">
|
||||
<i class="gallery-icon-cancel"></i>
|
||||
<p>{$error}</p>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{if 'none' != $STD_PGS_SELECTED_LOGO}
|
||||
<section id="logo-section">
|
||||
{if 'piwigo_logo' == $STD_PGS_SELECTED_LOGO}
|
||||
<img id="piwigo-logo" src="{$ROOT_URL}themes/standard_pages/images/piwigo_logo.svg">
|
||||
{else if 'custom_logo' == $STD_PGS_SELECTED_LOGO}
|
||||
<img id="custom-logo" src="{$STD_PGS_SELECTED_LOGO_PATH}">
|
||||
{else if 'gallery_title'}
|
||||
<h1>{$GALLERY_TITLE}</h1>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
|
||||
<section id="register-form">
|
||||
<div class="">
|
||||
<h1 class="">
|
||||
{'Create an account'|translate}
|
||||
</h1>
|
||||
|
||||
<form class="properties" method="post" action="{$F_ACTION}" name="register_form" autocomplete="off">
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="mail_address">{'Email address'|translate}{if not $obligatory_user_mail_address} ({'useful when password forgotten'|@translate}){/if}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-user-2"></i>
|
||||
<input type="email" name="mail_address" id="login" value="{$F_EMAIL}"{if $obligatory_user_mail_address}data-required="true"{/if}>
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="username">{'Username'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-user-2"></i>
|
||||
<input type="text" name="login" id="login" value="{$F_LOGIN}" data-required="true">
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="password">{'Password'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-lock"></i>
|
||||
<input type="password" class="" name="password" id="password" size="25" data-required="true">
|
||||
<i class="gallery-icon-eye togglePassword"></i>
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<label for="password">{'Confirm Password'|translate}</label>
|
||||
<div class="row-flex input-container">
|
||||
<i class="gallery-icon-lock"></i>
|
||||
<input type="password" class="" name="password_conf" id="password_conf" size="25" data-required="true">
|
||||
<i class="gallery-icon-eye togglePassword"></i>
|
||||
</div>
|
||||
<p class="error-message"><i class="gallery-icon-attention-circled"></i> {'must not be empty'|translate}</p>
|
||||
</div>
|
||||
|
||||
<div class="column-flex">
|
||||
<input type="hidden" name="key" value="{$F_KEY}" >
|
||||
<input tabindex="4" type="submit" name="submit" value="{'Register'|translate}" class="btn btn-main ">
|
||||
{if isset($errors['register_form_error'])}
|
||||
<p class="error-message" style="display:block;bottom:-20px;"><i class="gallery-icon-attention-circled"></i> {$errors['register_form_error']}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="secondary-links">
|
||||
<p>{'Already have an account ?'|translate} <a href="identification.php" title="{'Login'|translate}">{'Login'|translate}</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a href="index.php" id="return-to-gallery"><i class="gallery-icon-left"></i> {'Return to the gallery'|translate}</a>
|
||||
|
||||
{if count($language_options) > 1}
|
||||
<section id="language-switch">
|
||||
<div id="lang-select">
|
||||
<span id="other-languages">
|
||||
{foreach from=$language_options key=code item=lang}
|
||||
<span id="lang={$code}" onclick="setCookie('lang','{$code}',30)">{$lang}</span>
|
||||
{/foreach}
|
||||
</span>
|
||||
<div id="selected-language-container">
|
||||
<i class="gallery-icon-left-chevron"></i><span id="selected-language">{$language_options[$current_language]}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
</container>
|
||||
@@ -0,0 +1,59 @@
|
||||
{combine_script id='toaster_js' load='async' require='jquery' path='themes/standard_pages/js/toaster.js'}
|
||||
{html_style}
|
||||
.toast.template-pwg-toaster {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toaster {
|
||||
position: fixed;
|
||||
right: 15px;
|
||||
max-width: 300px;
|
||||
top: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
width: fit-content;
|
||||
align-self: flex-end;
|
||||
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.toast i:before {
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.light .toast.success {
|
||||
background-color: #D6FFCF;
|
||||
color: #4CA530;
|
||||
}
|
||||
|
||||
.light .toast.error {
|
||||
background-color: #F8D7DC;
|
||||
color: #EB3D33;
|
||||
}
|
||||
|
||||
.dark .toast.success {
|
||||
background-color: #4EA590;
|
||||
color: #AAF6E4;
|
||||
}
|
||||
|
||||
.dark .toast.error {
|
||||
background-color: #BE4949;
|
||||
color: #FFC8C8;
|
||||
}
|
||||
{/html_style}
|
||||
<div class="toaster" id="pwg_toaster">
|
||||
<div class="toast template-pwg-toaster" id="toast_template">
|
||||
<i class="toast_icon"></i>
|
||||
<p class="toast_text"></p>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user