The Credit Module was created by
C-take,
physicslike,
sinazugawa and
7happy7 for the Japanese wiki, adapted by
Dr_Grom for the German wiki, and adapted by
Croquembouche and
Rimple for the English wiki (as the Info module).
The Info module is an alternative to the rating module that allows you to add arbitrary out-of-universe text to your page. It appears in a modal that only appears when the reader clicks a little info button next to the rating module.
Typically this is used to include information such as the SCP title, commentary, licensing information and crit attribution that would normally be out of place in a fictional article.
Usage
At the top of your page, insert the following code instead of the Rating Module and the [[>]] things. Remove any lines that aren't needed, and between each [[include …]], feel free to add your own.
[[include :scp-wiki:info:start]]
**SCP-XXXX:** TITLE
**NAME OF TALE/GOI-FORMAT**
**Author:** [[*user AUTHOR]]
**Original:** LINK TO ORIGINAL
**Translator:** [[*user TRANSLATOR]]
**Image:** Put any licensing information for images here
Add anything else you'd like the reader to know
[[include :scp-wiki:info:end]]
If your article does not have a rating module, then use the following [[include]]'s instead of the ones above.
[[include :scp-wiki:info:start-standalone]]
[[include :scp-wiki:info:end-standalone]]
Warning: When previewing the page using the "Preview" button, the credits module will not be displayed correctly until the page has been Saved. This is normal.
Note: Multipage ListPages modules are not supported. Use perPage="250" to maximise the number of articles you can list per page.
์ ๋ณด ๋ชจ๋ CSS ์คํ์ผ๋ง (์๋ณธ)
@import url('https://cdnjs.cloudflare.com/ajax/libs/cc-icons/1.2.1/css/cc-icons.min.css'); #u-credit-view, #u-credit-otherwise { width: 100%; height: 100%; top: 0px; bottom: 0; left: 0; right: 0; position: fixed; display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; z-index: 10; } #u-credit-view:not(:target), #u-credit-otherwise:not(:target) { opacity: 0; display: none; } #u-credit-view:target, #u-credit-otherwise:target { opacity: 1; animation-duration: 0.3s; animation-name: fade-in; -moz-animation-duration: 0.5s; -moz-animation-name: fade-in; -webkit-animation-duration: 0.5s; -webkit-animation-name: fade-in; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @-moz-keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @-webkit-keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } .fader{ position: absolute; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; } .fader iframe, .fader a { position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; } .modalcontainer{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 600px; max-width: 95vw !important; height: 350px; margin: auto; pointer-events: auto !important; } .modalbox{ /*min-width: 400px;*/ background: #fefefe; background:linear-gradient(#eee 51px,#fefefe 51px,#fefefe); border: #333 solid 1px; border-radius: 5px; box-shadow: 0 2px 6px rgba(102, 0, 0, .5); padding:4px; max-height: 50vh; pointer-events: auto !important; } #u-credit-otherwise .modalbox { background:linear-gradient(#eee 51px,#fefefe 51px,#fefefe); } .modalbox .credit { margin: 2em; } .modalbox .credit p { /*margin: 0;*/ } .modalbox .credit:not(:first-child) { margin-top: 0; } .modalbox .credit:not(:last-child) { margin-bottom: 0; } .modalbox .credit.otherwise { overflow-y: auto; height: 30vh; } #u-credit-view .credit-back { display:none; } #u-credit-otherwise .creditBottomRate { display:none; } @media (max-width: 767px) { #u-credit-view { height: 100%; top: 0; } .modalcontainer{ /*min-width: 300px;*/ } .modalbox{ /*min-width: 300px;*/ } } #u-credit-view-button { display: block; text-align: right; } .creditRate { display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; flex-direction: row; align-items: center; float:right; margin-bottom:10px; margin-right:2em; } .creditRate p{ display:inline; padding: 0; margin:0; line-height: 0; } .creditRate .page-rate-widget-box { margin:0; padding:0; } .creditRate .heritage-rating-module { float:right; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-direction: row; flex-direction: row; vertical-align: top; margin:0; } .creditRate .heritage-rating-module .page-rate-widget-box{ margin:0; } .creditRate .audio-img-block { top: 0; } .rate-box-with-credit-button{ background-color: #633; border: solid 1px #633; border-radius: 5px; box-shadow: 1px 1px 3px rgba(0,0,0,.5); } .rate-box-with-credit-button .page-rate-widget-box .cancel { border-right: 0; } .rate-box-with-credit-button .page-rate-widget-box{ box-shadow: none; } .rate-box-with-credit-button .creditButton { display: inline-block; } .creditRate .rateBox{ display:inline-block; } .creditRate .rateBox p{ display:inline; margin:0; padding:0; } .creditButton p{ font-size: 0.8em; } .creditButton p a{ width: 17px; margin-left: -5px; padding-top: 0.5px; color: #ffffff; border-left: solid 1px #966; text-align: center; text-decoration: none; font-size: 12px; } .creditButton p a:hover { color: #3498db; } .heritage-rating-module .creditButton p a{ margin-left: 1px; margin-right: -5px; padding-left: 1px; padding-top: 1.5px; color: #ffffff; font-size: 13px; } .heritage-rating-module .creditButton p a:hover { color: #ccc066; } .modalbox .page-rate-widget-box { margin-right: 0; } .credit-back .back a { display: none; } .credit-back .back a::before { content: "Zurรผck"; } .creditButtonStandalone p a{ display: block; width: 17px; height: 17px; line-height: 17px; border-radius: 50%; color: #ffffff; text-align: center; background: #744; box-shadow: 0 0 3px gray; font-size: 12px; } .creditButtonStandalone p a:hover { background: #3498db; } /* Give a little expandability to the box */ .credit.first { height: 30vh; overflow-y: auto; } /* Add a lil X to close the box */ .close-credits { position: absolute; top: 1.5em; right: 1.5em; width: 1em; }
์ ๋ณด ๋ชจ๋ "start" iframe (์๋ณธ)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="content-language" content="ja,jp-ja"/> <meta charset="UTF-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> /*! * jQuery JavaScript Library v3.2.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzlejs.com/ * * Copyright JS Foundation and other contributors * Released under the MIT license * https://jquery.org/license * * Date: 2017-03-20T18:59Z */ //--------------------------- //ProjectName: Credit Module //FunctionName: Back Module //CreatedBy C-take , sinazugawa //License MIT //--------------------------- $(function() { var ua = navigator.userAgent.toLowerCase(); var bReload= true; if ( ( ua.indexOf("applewebkit") >= 0 || ua.indexOf("firefox") >= 0 ) && ua.indexOf("edge") == -1 ) bReload= false; $('.fader').on("click",closeCredit); function closeCredit() { if ( bReload ) { history.go(-1); parent.location.href = document.referrer.split('#')[0]; } else { history.go(-1); } $('.fader').off("click"); setTimeout(function(){ $('.fader').on("click",closeCredit); },1200); } }); </script> <style> .fader { width: 100%; height: 100%; position: fixed; } </style> </head> <body> <div class='fader'></div> </body> </html>
์ ๋ณด ๋ชจ๋ "end" iframe (์๋ณธ)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="content-language" content="ja,jp-ja"/> <meta charset="UTF-8"/> <link rel="stylesheet" href="/component:theme/code/1"> <style> body{ background:transparent; padding:0; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> /*! * jQuery JavaScript Library v3.2.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzlejs.com/ * * Copyright JS Foundation and other contributors * Released under the MIT license * https://jquery.org/license * * Date: 2017-03-20T18:59Z */ //--------------------------- //ProjectName: Credit Module //FunctionName: Back Module //CreatedBy C-take , sinazugawa //License MIT //--------------------------- $(function() { var ua = navigator.userAgent.toLowerCase(); var bReload= true; if ( ( ua.indexOf("applewebkit") >= 0 || ua.indexOf("firefox") >= 0 ) && ua.indexOf("edge") == -1 ) bReload= false; $('.back').click(closeCredit); function closeCredit() { if ( bReload ) { history.go(-1); parent.location.href = document.referrer.split('#')[0]; } else { history.go(-1); } return false; } }); </script> </head> <body> <div style="width: 100%; text-align: center;"> <a class="back" style="cursor: pointer;">๋์๊ฐ๊ธฐ</span> </div> </body> </html>
์ ๋ณด ๋ชจ๋ "otherwise" iframe (์๋ณธ)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="content-language" content="ja,jp-ja"/> <meta charset="UTF-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> /*! * jQuery JavaScript Library v3.2.1 * https://jquery.com/ * * Includes Sizzle.js * https://sizzlejs.com/ * * Copyright JS Foundation and other contributors * Released under the MIT license * https://jquery.org/license * * Date: 2017-03-20T18:59Z */ //--------------------------- //ProjectName: Credit Module //FunctionName: Back Module //CreatedBy C-take , sinazugawa //License MIT //--------------------------- $(function() { var ua = navigator.userAgent.toLowerCase(); var bReload= true; if ( ( ua.indexOf("applewebkit") >= 0 || ua.indexOf("firefox") >= 0 ) && ua.indexOf("edge") == -1 ) bReload= false; $('.fader').click(closeCredit); function closeCredit() { if ( bReload ) { history.go(-2); parent.location.href = document.referrer.split('#')[0]; } else { history.go(-2); } } }); </script> <style> .fader { width: 100%; height: 100%; position: fixed; } </style> </head> <body> <div class='fader'></div> </body> </html>
์ ๋ณด ๋ชจ๋ 'โ' ๋ซ๊ธฐ iframe ๋ฒํผ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko" style="padding:0;margin:0;"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta http-equiv="content-language" content="ja,jp-ja"/> <meta charset="UTF-8"/> <link rel="stylesheet" href="/component:theme/code/1"> <style> body{ background:transparent; padding:0; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function() { var ua = navigator.userAgent.toLowerCase(); var bReload= true; if ( ( ua.indexOf("applewebkit") >= 0 || ua.indexOf("firefox") >= 0 ) && ua.indexOf("edge") == -1 ) bReload= false; $('.back').click(closeCredit); function closeCredit() { if ( bReload ) { history.go(-1); parent.location.href = document.referrer.split('#')[0]; } else { history.go(-1); } return false; } }); </script> </head> <body style="padding:0;margin:0;"> <div style="width: 100%; text-align: center;"> <a class="back" style="cursor: pointer;">โ</span> </div> </body> </html>