<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='normalize.css' rel='stylesheet' type='text/css'>
  <link href="https://fonts.laysense.com/css/5000/zh-cn/harmonyossans/harmonyossans.css" rel="preload" as="style" onload="this.rel='stylesheet'">
  <link id="theme_css" rel="stylesheet" href="sakura.css">
  <style>
  .pmnet { font-family: DOUYUFont;} 
  html {font-family: HarmonyOSSans;}
  .animbox {
		    margin: 50px auto;
		    width: 200px;
		    text-align: center;
		}
		/*设置各竖条的共有样式*/
		.animbox > div {
		    background-color: #279fcf;
		    width: 4px;
		    height: 35px;
		    border-radius: 2px;
		    margin: 2px;
		    animation-fill-mode: both;
		    display: inline-block;
		    animation: anim 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
		}
		/*设置动画延迟*/
		.animbox > :nth-child(2), .animbox > :nth-child(4) {
		    animation-delay: 0.25s !important;
		}

		.animbox > :nth-child(1), .animbox > :nth-child(5) {
		    animation-delay: 0.5s !important;
		}
		/*定义动画*/
		@keyframes anim {
		    0% {  transform: scaley(1); }
		    80% {  transform: scaley(0.3); }
		    90% {  transform: scaley(1);   }
		}
  
        /* 开关 - 滑块周围的框 */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* 隐藏默认 HTML 复选框 */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* 滑块 */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 background-color: #2fbc47;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* 圆形滑块 */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
  </style>
  <title>SPQR短链接服务-罗马元老院与罗马人民SPQR.TOP</title>
  <meta name="keywords" content="短链接,短网址,链接缩短,网址缩短,SPQR,罗马元老院,元老院">
  <meta name="description" content="SPQR.top提供免费的短链接、网址缩短服务,SPQR是罗马元老院与罗马人民的缩写">

</head>

<body>
  <script>
    //切换深色模式
  if(window.matchMedia('(prefers-color-scheme: dark)').matches){
    document.getElementById('theme_css').href = 'sakura-dark.css'; 
  }
  
  </script>
  <main>
    <h1>SPQR.top 免费短链接服务 </h1><hr />
    <p>可以将很长的网址链接缩短成以SPQR.top开头弘扬罗马元老院与人民精神的短链接。</p>
    <a href="//laysense.cn" target="_blank_laysense">由[<span class="pmnet">来笙</span>]维护</a>

    <blockquote>
      SPQR.top 代表 SPQR(罗马元老院与人民) 宇宙第一
      <br />
      SPQR是拉丁语Senatus Populusque Romanus(罗马元老院与罗马人民)的缩写
      <br />
      <img src="https://wallpapercave.com/wp/wp2471066.jpg" alt="SPQR" style=" max-height: 200px;">
      <br />
      <span style="color: coral;">严禁将本服务用于违法目的。</span>
    </blockquote>
    
    <blockquote>
        登陆后，您可以使用自定义短链接后缀，以及302直链功能。<br />
        未备案的域名必须登陆后才能缩短，且不支持302直链<br />
        <?php if($user==null){ 
          echo '<span><a href="/!/login" target="_blank_login">[登陆]</a></span>';
         }else{
         echo '<span>你好,'.$realname.'。<a href="/!/my" target="_blank_login">[查看我缩短的域名]</a><a href="/!/logout">[登出]</a></span>'; 
         }
         ?>

    </blockquote>
    <section>
        
        <h4>缩短一个网址</h4>
        <hr />
        <form action="new_apply.php" method="POST">
            <p style="display: <?=htmlspecialchars($display)?>;">JS跳转 <label class="switch">
                <input id="type" type="checkbox" name="type">
                <span class="slider round"></span>
              </label>                302直链[需登录]
            </p>
            <p>
                <label for="name">需要缩短的网址链接</label> 
                <input required="required" name="url" id="url" placeholder="https://baidu.cn/" type="url" style="width:80%">
            </p>
            <p style="display: <?=htmlspecialchars($display)?>;">
                <label for="password">自定义短链接后缀[需登录,留空则由系统生成]</label> 
                https://SPQR.top/<input name="link" id="link"  type="text" style="width:30%">
            </p>
            <div id="load" class="animbox" style="display: none;">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <p style="color: blueviolet;" id="notice"></p>
            <p style="color: skyblue;" id="notice2"></p>

        </form>
        <p>
            <button onclick="short()" value="缩短网址" style="width:50%">缩短网址</button>
            <br />
            点击缩短代表您同意并接受<a href="https://www.pmnet.gq/PMNETTOS" target="_blank_tos">TOS</a>
        </p>
    </section>
  </main>
  <footer>
    <hr/>
    ©<a href="https://laysense.cn">laysense.cn</a> 2024 Made with <a href="https://oxal.org/projects/sakura">sakura.css</a>
  </footer> 
    <script src="jquery-3.6.3.min.js"></script>
     <script>
        function short(){
            var url = $("#url").val();
            var link = $("#link").val();
            var type = $("#type").prop('checked');

            $.ajax({  
                type: "POST",  
                url: '/!/short',
                data: {'url':url,'link':link,'type':type},  
                async: true,  
                dataType: 'json',
                cache: false,
                beforeSend: function () {
                  $('#notice2').html('');
                    $('#notice').html('正在进行缩短');
                    $('#load').show();
                },
	            success: function (data) {
	                if (data.code == 200) {
	                    $('#notice').html(`短链接为<a href="javascript:copyToClipboard('`+data.link+`')">`+data.link+'</a>,点击复制');
	                } else {
                        $('#notice').html(data.msg);
	                }
                    $('#load').hide();
	            },
            clearForm: true,
	        resetForm: false
            });
        }
        async function copyToClipboard(text) {
    try {
        await navigator.clipboard.writeText(text);
        $('#notice2').html('复制成功');
    } catch (err) {
        $('#notice2').html('复制失败', err);
    }
}

    </script>


</body>

</html>