Commit 0a60f1b6 authored by UtopiaXC's avatar UtopiaXC

📧 邮件模板

parent 8378f151
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
class VerityLinkMail extends Mailable
{
use Queueable, SerializesModels;
protected $link;
/**
* Create a new message instance.
*
* @return void
*/
public function __construct($link)
{
//
$this->$link=$link;
}
/**
* Build the message.
*
* @return $this
*/
public function build()
{
return $this->view('email.verify_link');
}
}
......@@ -69,5 +69,5 @@ class DefaultSiteProfile
{
const WEB_TITLE = 'Utopia 开放平台';
const SITE_URL = 'http://localhost';
const WEB_FOOTER='Copyright ©2021 <a href="https://www.utopiaxc.cn/">UtopiaXC</a> All Rights Reserved. | Powered By <a href="https://github.com/UtopiaXC/Utopia-Open-Platform" target="_blank">Utopia Open Platform</a>';
const WEB_FOOTER='Copyright ©2021 <a target="_blank" href="https://www.utopiaxc.cn/">UtopiaXC</a> All Rights Reserved | Powered By <a href="https://github.com/UtopiaXC/Utopia-Open-Platform" target="_blank">Utopia Open Platform</a>';
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Material VCard</title>
<style>
@import url(https://fonts.googleapis.cn/css?family=Open+Sans:400,300,700);
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
background-color: #eaeaea;
font-family: Open Sans;
font-weight: 300;
line-height: 1.8;
background-size: cover;
background-repeat: no-repeat;
}
.contact {
position: absolute;
top: 30px;
left: 50px;
z-index: 6;
color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
letter-spacing: 3px;
font-size: 12px;
font-weight: 700;
padding: 5px 15px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.1);
line-height: 1;
cursor: pointer;
text-shadow: 0 1px 0px rgba(255, 255, 255, 0.1);
}
.contact-form {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
z-index: 5;
padding: 80px 50px;
transform: translate3d(-100%, 0, 0);
transition: 0.3s ease;
border-radius: 5px;
}
.contact-form.active {
transform: translate3d(0, 0, 0);
}
.contact-form .close {
color: rgba(0, 0, 0, 0.7);
position: absolute;
right: 30px;
top: 30px;
}
.cards {
margin: auto;
background: #fefefe;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 3px 5px 20px rgba(0, 0, 0, 0.2);
width: 768px;
height: 550px;
position: relative;
display: flex;
align-items: flex-end;
padding: 30px;
}
.cards .card {
display: inline-block;
margin-right: 20px;
}
.cards .card-toggle {
z-index: 4;
position: relative;
width: 48px;
height: 48px;
border-radius: 50%;
display: block;
text-align: center;
line-height: 1.8;
font-size: 24px;
cursor: pointer;
border: 2px solid transparent;
transition: 0.3s ease;
}
.cards .card-toggle.active {
color: white;
border-color: white;
}
.cards .card-content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: -webkit-clip-path 1s ease;
padding: 100px 0 0;
overflow: hidden;
border-radius: 5px;
}
.cards .card-content .row {
display: table;
width: 100%;
height: 100%;
}
.cards .card-content .col {
width: 50%;
height: 100%;
display: table-cell;
transition: 0.3s ease 0.3s;
transform: translate3d(0, 0, 0);
vertical-align: top;
}
.cards .card-content .col h2 {
font-weight: 300;
font-size: 3em;
line-height: 1;
margin: 0 0 30px;
}
.cards .card-content .col h2 strong {
font-weight: 700;
display: block;
}
.cards .card-content .col img {
max-width: 90%;
width: 100%;
}
.cards .card-content .col.left {
transform: translate3d(0, 0, 0);
opacity: 0;
padding-left: 50px;
}
.cards .card-content .col.right {
transform: translate3d(100px, 0, 0);
opacity: 0;
padding-left: 30px;
}
.cards .card.active .col {
transform: translate3d(0, 0, 0);
opacity: 1;
}
.cards #overview .card-toggle {
position: absolute;
top: 30px;
right: 30px;
opacity: 1;
color: white;
}
.cards #overview .card-content {
background-color: #efefef;
-webkit-clip-path: circle(0% at 91.5% 75px);
}
.cards #overview.active .card-toggle {
opacity: 0;
}
.cards #overview.active .card-content {
-webkit-clip-path: circle(270% at 91.5% 75px);
}
.cards #overview .right {
background-size: contain;
}
.cards #dribbble .card-content, .cards #behance .card-content, .cards #linkedin .card-content, .cards #twitter .card-content {
color: white;
}
.cards #dribbble .card-content p, .cards #behance .card-content p, .cards #linkedin .card-content p, .cards #twitter .card-content p {
color: rgba(255, 255, 255, 0.8);
}
.cards #dribbble .card-content {
background-color: #F46899;
-webkit-clip-path: circle(0% at 76px 88%);
clip-path: circle(0% at 50px 88%);
}
.cards #dribbble.active .card-content {
-webkit-clip-path: circle(270% at 76px 88%);
clip-path: circle(270% at 50px 88%);
}
.cards #behance .card-content {
background-color: #2F98D1;
-webkit-clip-path: circle(0% at 150px 88%);
clip-path: circle(0% at 150px 88%);
}
.cards #behance.active .card-content {
-webkit-clip-path: circle(270% at 150px 88%);
clip-path: circle(270% at 150px 88%);
}
.cards #linkedin .card-content {
background-color: #03679B;
-webkit-clip-path: circle(0% at 220px 88%);
clip-path: circle(0% at 220px 88%);
}
.cards #linkedin.active .card-content {
-webkit-clip-path: circle(270% at 220px 88%);
clip-path: circle(270% at 220px 88%);
}
.cards #twitter .card-content {
background-color: #7FD0ED;
-webkit-clip-path: circle(0% at 292px 88%);
clip-path: circle(0% at 292px 88%);
}
.cards #twitter.active .card-content {
-webkit-clip-path: circle(270% at 292px 88%);
clip-path: circle(270% at 292px 88%);
}
form .control {
position: relative;
margin-bottom: 10px;
padding-top: 20px;
}
form .control label {
position: absolute;
top: 30px;
left: 0;
transition: 0.3s ease;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
font-size: 14px;
}
form .control.submit {
text-align: right;
}
form input, form textarea {
width: 100%;
border: none;
border-bottom: 1px solid #e3e3e3;
outline: none;
padding: 10px 0;
}
form .filled label, form input:focus + label, form textarea:focus + label {
top: 0;
font-size: 12px;
}
form textarea {
height: 100px;
}
form input[type=submit] {
width: auto;
background-color: #F06292;
padding: 10px 40px;
color: white;
border-radius: 40px;
}
</style>
</head>
<body>
<div class="cards">
<div class="contact">Utopia Open Platform</div>
<div class="card active" id="overview">
<div class="card-content">
<div class="row">
<div class="left col">
<h2>Personal <strong>Social Card</strong></h2>
<p>Click one of the social icons below to switch between card or click Contact Me link to show the contact form card. <br /><em>Make sure you're running this experiment in the latest Chrome browser.</em></p>
</div>
<div class="right col">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@php
$site_profile=app('request')->get(HeaderKey::SITE_PROFILE);
@endphp
@extends('root.root')
@section('page_header')
......@@ -9,7 +17,7 @@
<div class='loader'>
<div class='spinner-grow text-primary' role='status'><span class='sr-only'>Loading...</span></div>
</div>
<div class="page-container">
<div class="page-container" style="min-height: calc(100vh - 50px);">
@yield("page_header")
<div class="page-content">
<div class="main-wrapper">
......@@ -17,6 +25,11 @@
</div>
</div>
</div>
<footer style="text-align: center; height: 50px;">
<div>
{!! $site_profile[SiteProfileTypeEnum::WEB_FOOTER] !!}
</div>
</footer>
</body>
@endsection
......
......@@ -10,7 +10,6 @@
<meta name="author" content="@yield('author')">
@include('style.style')
</head>
@yield('body')
@include('script.scripts')
@yield('script')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment