add 烟花 斗图优化

src/main/java/com/quinn/config/SecurityConfig.java

@@ -31,7 +31,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter {
                 .antMatchers("/register","/login","/toLogin","/checkLogin","/checkRegister").permitAll()
                 .antMatchers("/source","/source/view/*").permitAll()
                 .antMatchers("/blog","/blog/read/*").permitAll()
-                .antMatchers("/guess","/favor").permitAll()
+                .antMatchers("/guess","/favor","/firework").permitAll()
                 .antMatchers("/search/**").permitAll()
                 .antMatchers("/about").permitAll()
                 .antMatchers("/user/donate").permitAll()

src/main/java/com/quinn/controller/AboutController.java

@@ -5,6 +5,7 @@ import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.quinn.common.ExpBucket;
 import com.quinn.intergration.BucketImage;
+import com.quinn.intergration.TodayLove;
 import com.quinn.pojo.About;
 import com.quinn.service.AboutService;
 import com.quinn.utils.QuinnUtils;
@@ -33,6 +34,8 @@ public class AboutController extends BaseModelController {
 
     @Resource
     AboutService aboutService;
+    @Resource
+    TodayLove todayLove;
 
     @GetMapping("/about")
     public String userIndexBlog(HttpServletRequest request,Model model){
@@ -51,9 +54,16 @@ public class AboutController extends BaseModelController {
         return "cimi/guess";
     }
 
+    @GetMapping("/firework")
+    public String firework(){
+        return "firework/index";
+    }
+
     // 列表展示
     @GetMapping("/favor")
     public String sourceList(Model model) throws IOException {
+        // 每日情话
+        model.addAttribute("LoveList",todayLove.getTodayLoveStr());
         MyPageParam pageParam = new MyPageParam(1,24);
         List<ExpBucket> recordList = aboutService.listExp(null,pageParam);
         model.addAttribute("recordList",recordList);
@@ -63,6 +73,8 @@ public class AboutController extends BaseModelController {
 
     @PostMapping("/favor")
     public String blogListPage(FindNavReq findNavReq, Model model) throws IOException {
+        // 每日情话
+        model.addAttribute("LoveList",todayLove.getTodayLoveStr());
         int page = findNavReq.getPageNum();
         int limit = findNavReq.getLimit();
         if (findNavReq.getPageNum() < 1){
@@ -73,6 +85,7 @@ public class AboutController extends BaseModelController {
         // 结果
         model.addAttribute("recordList",recordList);
         model.addAttribute("pageParam",pageParam);
+        model.addAttribute("findBucket",findNavReq.getFindWhat());
         return "page/favor::user_table_refresh";
     }
 

src/main/java/com/quinn/controller/LoginController.java

@@ -37,15 +37,11 @@ public class LoginController {
     UserService userService;
     @Autowired
     UserInfoService userInfoService;
-    @Resource
-    TodayLove todayLove;
 
     @GetMapping({"/","/index","/source/view/index",
             "/blog/read/index"
     })
     public String index(Model model) throws IOException {
-        // 每日情话
-        model.addAttribute("LoveList",todayLove.getTodayLoveStr());
         return "index";
     }
 

src/main/resources/static/firework/css/style.css

@@ -0,0 +1,336 @@
+/*
+此源码是基于 XgpNwb 的二次修改
+Github：https://github.com/NianBroken/Firework_Simulator
+Gitee：https://gitee.com/nianbroken/Firework_Simulator
+*/
+* {
+  position: relative;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+html {
+  background-color: #000;
+}
+
+body {
+  overflow: hidden;
+  color: rgba(255, 255, 255, 0.5);
+  font-family: "Russo One", arial, sans-serif;
+  line-height: 1.25;
+  letter-spacing: 0.06em;
+}
+
+.hide {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.remove {
+  display: none !important;
+}
+
+.blur {
+  filter: blur(12px);
+}
+
+.container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading-init {
+  width: 100%;
+  align-self: center;
+  text-align: center;
+  text-transform: uppercase;
+}
+.loading-init__header {
+  font-size: 2.2em;
+}
+.loading-init__status {
+  margin-top: 1em;
+  font-size: 0.8em;
+  opacity: 0.75;
+}
+
+.stage-container {
+  overflow: hidden;
+  box-sizing: initial;
+  border: 1px solid #222;
+  margin: -1px;
+}
+@media (max-width: 840px) {
+  .stage-container {
+    border: none;
+    margin: 0;
+  }
+}
+
+.canvas-container {
+  width: 100%;
+  height: 100%;
+  transition: filter 0.3s;
+}
+.canvas-container canvas {
+  position: absolute;
+  mix-blend-mode: lighten;
+  transform: translateZ(0);
+}
+
+.controls {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  padding-bottom: 50px;
+  display: flex;
+  justify-content: space-between;
+  transition: opacity 0.3s, visibility 0.3s;
+}
+@media (min-width: 840px) {
+  .controls {
+    visibility: visible;
+  }
+  .controls.hide:hover {
+    opacity: 1;
+  }
+}
+
+.menu {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.42);
+  transition: opacity 0.3s, visibility 0.3s;
+}
+.menu__inner-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.3s;
+}
+.menu__header {
+  margin-top: auto;
+  margin-bottom: 8px;
+  padding-top: 16px;
+  font-size: 2em;
+  text-transform: uppercase;
+}
+.menu__subheader {
+  margin-bottom: auto;
+  padding-bottom: 12px;
+  font-size: 0.86em;
+  opacity: 0.8;
+}
+.menu form {
+  width: 100%;
+  max-width: 400px;
+  padding: 0 10px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.menu .form-option {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  transition: opacity 0.3s;
+}
+.menu .form-option label {
+  display: block;
+  width: 50%;
+  padding-right: 12px;
+  text-align: right;
+  text-transform: uppercase;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.menu .form-option--select select {
+  display: block;
+  width: 50%;
+  height: 30px;
+  font-size: 1rem;
+  font-family: "Russo One", arial, sans-serif;
+  color: rgba(255, 255, 255, 0.5);
+  letter-spacing: 0.06em;
+  background-color: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+.menu .form-option--select select option {
+  background-color: black;
+}
+.menu .form-option--checkbox input {
+  display: block;
+  width: 26px;
+  height: 26px;
+  margin: 0;
+  opacity: 0.5;
+}
+@media (max-width: 840px) {
+  .menu .form-option select, .menu .form-option input {
+    outline: none;
+  }
+}
+
+.close-menu-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+/*Language translation of this project into Chinese by Nianbroken*/
+.btn {
+  opacity: 0.16;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: default;
+  transition: opacity 0.3s;
+}
+.btn--bright {
+  opacity: 0.5;
+}
+@media (min-width: 840px) {
+  .btn:hover {
+    opacity: 0.32;
+  }
+  .btn--bright:hover {
+    opacity: 0.75;
+  }
+}
+.btn svg {
+  display: block;
+  margin: auto;
+}
+
+.credits {
+  margin-top: auto;
+  margin-bottom: 10px;
+  padding-top: 6px;
+  font-size: 0.8em;
+  opacity: 0.75;
+  text-align: center;
+}
+.credits a {
+  color: rgba(255, 255, 255, 0.5);
+  text-decoration: none;
+}
+.credits a:hover, .credits a:active {
+  color: rgba(255, 255, 255, 0.75);
+  text-decoration: underline;
+}
+
+.help-modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  visibility: hidden;
+  transition-property: visibility;
+  transition-duration: 0.25s;
+}
+.help-modal__overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: ease-in;
+  transition-duration: 0.25s;
+}
+/*Language translation of this project into Chinese by Nianbroken*/
+.help-modal__dialog {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 400px;
+  max-height: calc(100vh - 100px);
+  margin: 10px;
+  padding: 20px;
+  border-radius: 0.3em;
+  background-color: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transform: scale(0.9, 0.9);
+  transition-property: opacity, transform;
+  transition-timing-function: ease-in;
+  transition-duration: 0.25s;
+}
+@media (min-width: 840px) {
+  .help-modal__dialog {
+    font-size: 1.25rem;
+    max-width: 500px;
+  }
+}
+.help-modal__header {
+  font-size: 1.75em;
+  text-transform: uppercase;
+  text-align: center;
+}
+.help-modal__body {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  margin: 1em 0;
+  padding: 1em 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.25);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.75);
+}
+.help-modal__close-btn {
+  flex-shrink: 0;
+  outline: none;
+  border: none;
+  border-radius: 2px;
+  padding: 0.25em 0.75em;
+  margin-top: 0.36em;
+  font-family: "Russo One", arial, sans-serif;
+  font-size: 1em;
+  color: rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  background-color: rgba(255, 255, 255, 0.25);
+  transition: color 0.3s, background-color 0.3s;
+}
+.help-modal__close-btn:hover, .help-modal__close-btn:active, .help-modal__close-btn:focus {
+  color: #FFF;
+  background-color: #09F;
+}
+.help-modal.active {
+  visibility: visible;
+  transition-duration: 0.4s;
+}
+.help-modal.active .help-modal__overlay {
+  opacity: 1;
+  transition-timing-function: ease-out;
+  transition-duration: 0.4s;
+}
+.help-modal.active .help-modal__dialog {
+  opacity: 1;
+  transform: scale(1, 1);
+  transition-timing-function: ease-out;
+  transition-duration: 0.4s;
+}

src/main/resources/static/firework/js/MyMath.js

@@ -0,0 +1,66 @@
+/*
+此源码是基于 XgpNwb 的二次修改
+Github：https://github.com/NianBroken/Firework_Simulator
+Gitee：https://gitee.com/nianbroken/Firework_Simulator
+*/
+const MyMath = (function MyMathFactory(Math) {
+
+	const MyMath = {};
+
+
+	// degree/radian conversion constants
+	MyMath.toDeg = 180 / Math.PI;
+	MyMath.toRad = Math.PI / 180;
+	MyMath.halfPI = Math.PI / 2;
+	MyMath.twoPI = Math.PI * 2;
+
+	// Pythagorean Theorem distance calculation
+	MyMath.dist = (width, height) => {
+		return Math.sqrt(width * width + height * height);
+	};
+	
+	// Pythagorean Theorem point distance calculation
+	// Same as above, but takes coordinates instead of dimensions.
+	// The language of this project was translated into Chinese by Nianbroken
+	MyMath.pointDist = (x1, y1, x2, y2) => {
+		const distX = x2 - x1;
+		const distY = y2 - y1;
+		return Math.sqrt(distX * distX + distY * distY);
+	};
+	
+	// Returns the angle (in radians) of a 2D vector
+	MyMath.angle = (width, height) => ( MyMath.halfPI + Math.atan2(height, width) );
+
+	// Returns the angle (in radians) between two points
+	// Same as above, but takes coordinates instead of dimensions.
+	MyMath.pointAngle = (x1, y1, x2, y2) => ( MyMath.halfPI + Math.atan2(y2 - y1, x2 - x1) );
+
+	// Splits a speed vector into x and y components (angle needs to be in radians)
+	MyMath.splitVector = (speed, angle) => ({
+		x: Math.sin(angle) * speed,
+		y: -Math.cos(angle) * speed
+	});
+
+	// Generates a random number between min (inclusive) and max (exclusive)
+	MyMath.random = (min, max) => Math.random() * (max - min) + min;
+	
+	// Generates a random integer between and possibly including min and max values
+	MyMath.randomInt = (min, max) => ((Math.random() * (max - min + 1)) | 0) + min;
+
+	// Returns a random element from an array, or simply the set of provided arguments when called
+	MyMath.randomChoice = function randomChoice(choices) {
+		if (arguments.length === 1 && Array.isArray(choices)) {
+			return choices[(Math.random() * choices.length) | 0];
+		}
+		return arguments[(Math.random() * arguments.length) | 0];
+	};
+	
+	// Clamps a number between min and max values
+	MyMath.clamp = function clamp(num, min, max) {
+		return Math.min(Math.max(num, min), max);
+	};
+
+
+	return MyMath;
+
+})(Math);

src/main/resources/static/firework/js/Stage.js

@@ -0,0 +1,270 @@
+/*
+此源码是基于 XgpNwb 的二次修改
+Github：https://github.com/NianBroken/Firework_Simulator
+Gitee：https://gitee.com/nianbroken/Firework_Simulator
+*/
+const Ticker = (function TickerFactory(window) {
+	'use strict';
+
+	const Ticker = {};
+
+
+	// public
+	// will call function reference repeatedly once registered, passing elapsed time and a lag multiplier as parameters
+	Ticker.addListener = function addListener(callback) {
+		if (typeof callback !== 'function') throw('Ticker.addListener() requires a function reference passed for a callback.');
+
+		listeners.push(callback);
+
+		// start frame-loop lazily
+		if (!started) {
+			started = true;
+			queueFrame();
+		}
+	};
+
+	// private
+	let started = false;
+	let lastTimestamp = 0;
+	let listeners = [];
+
+	// queue up a new frame (calls frameHandler)
+	function queueFrame() {
+		if (window.requestAnimationFrame) {
+			requestAnimationFrame(frameHandler);
+		} else {
+			webkitRequestAnimationFrame(frameHandler);
+		}
+	}
+
+	function frameHandler(timestamp) {
+		let frameTime = timestamp - lastTimestamp;
+		lastTimestamp = timestamp;
+		// make sure negative time isn't reported (first frame can be whacky)
+		if (frameTime < 0) {
+			frameTime = 17;
+		}
+		// - cap minimum framerate to 15fps[~68ms] (assuming 60fps[~17ms] as 'normal')
+		else if (frameTime > 68) {
+			frameTime = 68;
+		}
+
+		// fire custom listeners
+		listeners.forEach(listener => listener.call(window, frameTime, frameTime / 16.6667));
+
+		// always queue another frame
+		queueFrame();
+	}
+
+
+	return Ticker;
+
+})(window);
+
+
+
+const Stage = (function StageFactory(window, document, Ticker) {
+	'use strict';
+  
+  // Track touch times to prevent redundant mouse events.
+	let lastTouchTimestamp = 0;
+
+	// Stage constructor (canvas can be a dom node, or an id string)
+	function Stage(canvas) {
+		if (typeof canvas === 'string') canvas = document.getElementById(canvas);
+
+		// canvas and associated context references
+		this.canvas = canvas;
+		this.ctx = canvas.getContext('2d');
+    
+    // Prevent gestures on stages (scrolling, zooming, etc)
+    this.canvas.style.touchAction = 'none';
+
+		// physics speed multiplier: allows slowing down or speeding up simulation (must be manually implemented in physics layer)
+		this.speed = 1;
+
+		// devicePixelRatio alias (should only be used for rendering, physics shouldn't care)
+		// avoids rendering unnecessary pixels that browser might handle natively via CanvasRenderingContext2D.backingStorePixelRatio
+		// Language translation of this project into Chinese by Nianbroken
+		this.dpr = Stage.disableHighDPI ? 1 : ((window.devicePixelRatio || 1) / (this.ctx.backingStorePixelRatio || 1));
+
+		// canvas size in DIPs and natural pixels
+		this.width = canvas.width;
+		this.height = canvas.height;
+		this.naturalWidth = this.width * this.dpr;
+		this.naturalHeight = this.height * this.dpr;
+
+		// size canvas to match natural size
+		if (this.width !== this.naturalWidth) {
+			this.canvas.width = this.naturalWidth;
+			this.canvas.height = this.naturalHeight;
+			this.canvas.style.width = this.width + 'px';
+			this.canvas.style.height = this.height + 'px';
+		}
+
+		// To any known illigitimate users...
+		const badDomains = ['bla'+'ckdiam'+'ondfirew'+'orks'+'.de'];
+		const hostname = document.location.hostname;
+		if (badDomains.some(d => hostname.includes(d))) {
+			const delay = 60000 * 3; // 3 minutes
+			setTimeout(() => {
+				const html = `<sty`+`le>
+`+`				`+`		bo`+`dy { bac`+`kgrou`+`nd-colo`+`r: #000;`+` padd`+`ing: `+`20px; text-`+`align:`+` center; col`+`or: `+`#ddd`+`; mi`+`n-he`+`ight`+`: 10`+`0vh;`+` dis`+`play`+`: fl`+`ex; `+`flex`+`-dir`+`ecti`+`on: `+`colu`+`mn; `+`just`+`ify-`+`cont`+`ent:`+` cen`+`ter;`+` ali`+`gn-i`+`tems`+`: ce`+`nter`+`; ov`+`erfl`+`ow: `+`visi`+`ble;`+` }
+	`+`				`+`	h1 `+`{ fo`+`nt-s`+`ize:`+` 1.2`+`em;`+`}
+		`+`				`+`p { `+`marg`+`in-t`+`op: `+`1em;`+` max`+`-wid`+`th: `+`36em`+`; }
+`+`				`+`		a `+`{ co`+`lor:`+` #ff`+`f; tex`+`t-dec`+`orati`+`on: u`+`nderl`+`ine; }`+`
+			`+`		</`+`styl`+`e>
+	`+`				`+`<h1>`+`Hi! `+`Sorr`+`y to`+` int`+`erru`+`pt t`+`he f`+`irew`+`orks`+`.</h`+`1>
+	`+`				`+`<p>M`+`y na`+`me i`+`s Ca`+`leb.`+` Des`+`pite`+` wha`+`t th`+`is s`+`ite `+`clai`+`ms, `+`I de`+`sign`+`ed a`+`nd b`+`uilt`+` thi`+`s so`+`ftwa`+`re m`+`ysel`+`f. I`+`'ve `+`spen`+`t a `+`coup`+`le h`+`undr`+`ed h`+`ours`+` of `+`my o`+`wn t`+`ime, `+`over`+` tw`+`o ye`+`ars, `+`maki`+`ng i`+`t.</`+`p>
+	`+`				`+`<p>T`+`he o`+`wner`+` of `+`this`+` sit`+`e cl`+`earl`+`y do`+`esn'`+`t re`+`spec`+`t my`+` wor`+`k, a`+`nd h`+`as l`+`abel`+`ed i`+`t as`+` the`+`ir o`+`wn.<`+`/p>
+`+`				`+`	<p>`+`If y`+`ou w`+`ere `+`enjo`+`ying`+` the`+` sho`+`w, p`+`leas`+`e ch`+`eck `+`out `+`<a h`+`ref=`+`"htt`+`ps:/`+`/cod`+`epen`+`.io/`+`Mill`+`erTi`+`me/f`+`ull/`+`XgpN`+`wb">`+`my&n`+`bsp;`+`offi`+`cial`+`&nbs`+`p;ve`+`rsio`+`n&nb`+`sp;h`+`ere<`+`/a>!`+`</p>
+`+`				`+`	<p>I`+`f you`+`'re th`+`e ow`+`ner, <a`+` href="m`+`ailt`+`o:cal`+`ebdotmi`+`ller@`+`gmai`+`l.co`+`m">cont`+`act m`+`e</a>`+`.</p>`;
+				document.body.innerHTML = html;
+			}, delay);
+		}
+
+		Stage.stages.push(this);
+
+		// event listeners (note that 'ticker' is also an option, for frame events)
+		this._listeners = {
+			// canvas resizing
+			resize: [],
+			// pointer events
+			pointerstart: [],
+			pointermove: [],
+			pointerend: [],
+			lastPointerPos: {x:0, y:0}
+		};
+	}
+
+	// track all Stage instances
+	Stage.stages = [];
+
+	// allow turning off high DPI support for perf reasons (enabled by default)
+	// Note: MUST be set before Stage construction.
+	// Each stage tracks its own DPI (initialized at construction time), so you can effectively allow some Stages to render high-res graphics but not others.
+	// Language translation of this project into Chinese by Nianbroken
+	Stage.disableHighDPI = false;
+
+	// events
+	Stage.prototype.addEventListener = function addEventListener(event, handler) {
+		try {
+			if (event === 'ticker') {
+				Ticker.addListener(handler);
+			}else{
+				this._listeners[event].push(handler);
+			}
+		}
+		catch (e) {
+			throw('Invalid Event')
+		}
+	};
+
+	Stage.prototype.dispatchEvent = function dispatchEvent(event, val) {
+		const listeners = this._listeners[event];
+		if (listeners) {
+			listeners.forEach(listener => listener.call(this, val));
+		}else{
+			throw('Invalid Event');
+		}
+	};
+
+	// resize canvas
+	Stage.prototype.resize = function resize(w, h) {
+		this.width = w;
+		this.height = h;
+		this.naturalWidth = w * this.dpr;
+		this.naturalHeight = h * this.dpr;
+		this.canvas.width = this.naturalWidth;
+		this.canvas.height = this.naturalHeight;
+		this.canvas.style.width = w + 'px';
+		this.canvas.style.height = h + 'px';
+
+		this.dispatchEvent('resize');
+	};
+
+	// utility function for coordinate space conversion
+	Stage.windowToCanvas = function windowToCanvas(canvas, x, y) {
+		const bbox = canvas.getBoundingClientRect();
+		return {
+				x: (x - bbox.left) * (canvas.width / bbox.width),
+				y: (y - bbox.top) * (canvas.height / bbox.height)
+			   };
+	};
+	// handle interaction
+	Stage.mouseHandler = function mouseHandler(evt) {
+    // Prevent mouse events from firing immediately after touch events
+    if (Date.now() - lastTouchTimestamp < 500) {
+      return;
+    }
+
+		let type = 'start';
+		if (evt.type === 'mousemove') {
+			type = 'move';
+		}else if (evt.type === 'mouseup') {
+			type = 'end';
+		}
+
+		Stage.stages.forEach(stage => {
+			const pos = Stage.windowToCanvas(stage.canvas, evt.clientX, evt.clientY);
+			stage.pointerEvent(type, pos.x / stage.dpr, pos.y / stage.dpr);
+		});
+	};
+	Stage.touchHandler = function touchHandler(evt) {
+    lastTouchTimestamp = Date.now();
+    
+    // Set generic event type
+		let type = 'start';
+		if (evt.type === 'touchmove') {
+			type = 'move';
+		}else if (evt.type === 'touchend') {
+			type = 'end';
+		}
+	
+    // Dispatch "pointer events" for all changed touches across all stages.
+		Stage.stages.forEach(stage => {
+      // Safari doesn't treat a TouchList as an iteratable, hence Array.from()
+      for (let touch of Array.from(evt.changedTouches)) {
+        let pos;
+        if (type !== 'end') {
+          pos = Stage.windowToCanvas(stage.canvas, touch.clientX, touch.clientY);
+          stage._listeners.lastPointerPos = pos;
+          // before touchstart event, fire a move event to better emulate cursor events
+		  // Language translation of this project into Chinese by Nianbroken
+          if (type === 'start') stage.pointerEvent('move', pos.x / stage.dpr, pos.y / stage.dpr);
+        }else{
+          // on touchend, fill in position information based on last known touch location
+          pos = stage._listeners.lastPointerPos;
+        }
+        stage.pointerEvent(type, pos.x / stage.dpr, pos.y / stage.dpr);
+      }
+		});
+	};
+
+	// dispatch a normalized pointer event on a specific stage
+	Stage.prototype.pointerEvent = function pointerEvent(type, x, y) {
+		// build event oject to dispatch
+		const evt = {
+			type: type,
+			x: x,
+			y: y
+		};
+
+		// whether pointer event was dispatched over canvas element
+		evt.onCanvas = (x >= 0 && x <= this.width && y >= 0 && y <= this.height);
+
+		// dispatch
+		this.dispatchEvent('pointer'+type, evt);
+	};
+
+	document.addEventListener('mousedown', Stage.mouseHandler);
+	document.addEventListener('mousemove', Stage.mouseHandler);
+	document.addEventListener('mouseup', Stage.mouseHandler);
+	document.addEventListener('touchstart', Stage.touchHandler);
+	document.addEventListener('touchmove', Stage.touchHandler);
+	document.addEventListener('touchend', Stage.touchHandler);
+
+
+	return Stage;
+
+})(window, document, Ticker);

src/main/resources/static/firework/js/fscreen.js

@@ -0,0 +1,69 @@
+/*
+此源码是基于 XgpNwb 的二次修改
+Github：https://github.com/NianBroken/Firework_Simulator
+Gitee：https://gitee.com/nianbroken/Firework_Simulator
+*/
+(function(global) {
+  'use strict';
+  
+  var key = {
+    fullscreenEnabled: 0,
+    fullscreenElement: 1,
+    requestFullscreen: 2,
+    exitFullscreen: 3,
+    fullscreenchange: 4,
+    fullscreenerror: 5
+  };
+
+  var webkit = ['webkitFullscreenEnabled', 'webkitFullscreenElement', 'webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitfullscreenchange', 'webkitfullscreenerror'];
+
+  var moz = ['mozFullScreenEnabled', 'mozFullScreenElement', 'mozRequestFullScreen', 'mozCancelFullScreen', 'mozfullscreenchange', 'mozfullscreenerror'];
+
+  var ms = ['msFullscreenEnabled', 'msFullscreenElement', 'msRequestFullscreen', 'msExitFullscreen', 'MSFullscreenChange', 'MSFullscreenError'];
+
+  // so it doesn't throw if no window or document
+  // The language of this project was translated into Chinese by Nianbroken
+  var doc = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};
+
+  var vendor = 'fullscreenEnabled' in doc && Object.keys(key) || webkit[0] in doc && webkit || moz[0] in doc && moz || ms[0] in doc && ms || [];
+
+  var fscreen = {
+    requestFullscreen: function requestFullscreen(element) {
+      return element[vendor[key.requestFullscreen]]();
+    },
+    requestFullscreenFunction: function requestFullscreenFunction(element) {
+      return element[vendor[key.requestFullscreen]];
+    },
+    get exitFullscreen() {
+      return doc[vendor[key.exitFullscreen]].bind(doc);
+    },
+    addEventListener: function addEventListener(type, handler, options) {
+      return doc.addEventListener(vendor[key[type]], handler, options);
+    },
+    removeEventListener: function removeEventListener(type, handler) {
+      return doc.removeEventListener(vendor[key[type]], handler);
+    },
+    get fullscreenEnabled() {
+      return Boolean(doc[vendor[key.fullscreenEnabled]]);
+    },
+    set fullscreenEnabled(val) {},
+    get fullscreenElement() {
+      return doc[vendor[key.fullscreenElement]];
+    },
+    set fullscreenElement(val) {},
+    get onfullscreenchange() {
+      return doc[('on' + vendor[key.fullscreenchange]).toLowerCase()];
+    },
+    set onfullscreenchange(handler) {
+      return doc[('on' + vendor[key.fullscreenchange]).toLowerCase()] = handler;
+    },
+    get onfullscreenerror() {
+      return doc[('on' + vendor[key.fullscreenerror]).toLowerCase()];
+    },
+    set onfullscreenerror(handler) {
+      return doc[('on' + vendor[key.fullscreenerror]).toLowerCase()] = handler;
+    }
+  };
+  
+  global.fscreen = fscreen;
+})(window);

src/main/resources/static/js/main.js

@@ -0,0 +1,48 @@
+var iUp = (function () {
+	var t = 0,
+		d = 150,
+		clean = function () {
+			t = 0;
+		},
+		up = function (e) {
+			setTimeout(function () {
+				$(e).addClass("up")
+			}, t);
+			t += d;
+		},
+		down = function (e) {
+			$(e).removeClass("up");
+		},
+		toggle = function (e) {
+			setTimeout(function () {
+				$(e).toggleClass("up")
+			}, t);
+			t += d;
+		};
+	return {
+		clean: clean,
+		up: up,
+		down: down,
+		toggle: toggle
+	}
+})();
+
+$(document).ready(function () {
+	$(".iUp").each(function (i, e) {
+		iUp.up(e);
+	});
+});
+
+$('.btn-mobile-menu__icon').click(function () {
+	if ($('.navigation-wrapper').css('display') == "block") {
+		$('.navigation-wrapper').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
+			$('.navigation-wrapper').toggleClass('visible animated bounceOutUp');
+			$('.navigation-wrapper').off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');
+		});
+		$('.navigation-wrapper').toggleClass('animated bounceInDown animated bounceOutUp');
+
+	} else {
+		$('.navigation-wrapper').toggleClass('visible animated bounceInDown');
+	}
+	$('.btn-mobile-menu__icon').toggleClass('social iconfont icon-list social iconfont icon-angleup animated fadeIn');
+});

src/main/resources/static/wangedit/js/wang.init.js

@@ -11,9 +11,18 @@ const E = window.wangEditor
 const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
 E.i18nChangeLanguage(LANG)
 
+// 标题 DOM 容器
+const headerContainer = document.getElementById('header-container')
+headerContainer.addEventListener('mousedown', event => {
+    if (event.target.tagName !== 'LI') return
+    event.preventDefault()
+    const id = event.target.id
+    editor.scrollToElem(id) // 滚动到标题
+})
+
 const editorConfig = {
     placeholder: '请输入...',
-    scroll: false, // 禁止编辑器滚动
+    scroll: true,
     MENU_CONF: {
         uploadImage: {
             fieldName: 'your-fileName',
@@ -39,6 +48,14 @@ const editorConfig = {
         // 当编辑器选区、内容变化时，即触发
         const html = editor.getHtml()
         $('#content-textarea').val(html)
+
+        // 刷新标题
+        const headers = editor.getElemsByTypePrefix('header')
+        headerContainer.innerHTML = headers.map(header => {
+            const text = E.SlateNode.string(header)
+            const { id, type } = header
+            return `<li id="${id}" type="${type}">${text}</li>`
+        }).join('')
     }
 }
 

src/main/resources/templates/blog/editor.html

@@ -14,59 +14,90 @@
             font-size: .875rem;
             color: #6c757d;
         }
+        #header-container {
+            list-style-type: none;
+        }
+
+        #header-container li {
+            color: #333;
+            margin: 10px 0;
+            cursor: pointer;
+        }
+
+        #header-container li:hover {
+            text-decoration: underline;
+        }
+
+        #header-container li[type="header1"] {
+            font-size: 20px;
+            font-weight: bold;
+        }
+
+        #header-container li[type="header2"] {
+            font-size: 16px;
+            padding-left: 15px;
+            font-weight: bold;
+        }
+
+        #header-container li[type="header3"] {
+            font-size: 14px;
+            padding-left: 30px;
+        }
+
+        #header-container li[type="header4"] {
+            font-size: 12px;
+            padding-left: 45px;
+        }
+
+        #header-container li[type="header5"] {
+            font-size: 12px;
+            padding-left: 60px;
+        }
     </style>
 </head>
 <body>
-
 <!-- 导航栏 -->
-<div th:replace="~{common/header::header(activeUrl='blog')}"></div>
-<main role="main" class="container mt-3 p-3 bg-white rounded">
-    <div class="row">
-        <div class="col-md-12 blog-main">
-            <div class="col-md-12 order-md-1">
-                <h4 class="mb-3">编辑论坛</h4>
-
-                <form id="editForm" class="needs-validation" th:action="@{/blog/editor}" method="post">
-                    <!-- 隐藏域 -->
-                    <input type="hidden" name="bid" th:value="${blog.getBid()}">
-
-                    <div class="row">
-                        <div class="col-md-10 mb-3">
-                            <label for="title">论坛标题</label>
-                            <input required th:value="${blog.getTitle()}" maxlength="30" name="title" type="text" class="form-control" id="title">
-                        </div>
-
-                        <div class="col-md-2 mb-3">
-                            <label for="categoryId">权限</label>
-                            <select name="categoryId" class="custom-select d-block w-100" id="categoryId" required>
-                                <option th:each="category:${categoryList}"
-                                        th:selected="${blog.getCategoryId() == category.getId()}"
-                                        th:value="${category.getId()}" th:text="${category.getCategory()}">
-                                </option>
-                            </select>
-                        </div>
-
-                        <div class="col-md-12 mb-3">
-                            <p>论坛详情</p>
-                            <div id="blog-content">
-								<div id="editor-toolbar"></div>
-								<div id="editor-text-area" style="border: 1px solid lightgrey"></div>
-								<textarea id="content-textarea" name="content" th:text="${blog.getContent()}" style="display: none;" minlength="30" required></textarea>
-                                <textarea id="contentText-textarea" name="contentJson" style="display: none;"></textarea>
-                            </div>
-                        </div>
-
+<main role="main" class="bg-white">
+    <div class="blog-main">
+        <div class="col-md-12">
+            <form id="editForm" class="needs-validation" th:action="@{/blog/editor}" method="post">
+                <!-- 隐藏域 -->
+                <input id="bid" type="hidden" name="bid" th:value="${blog.getBid()}">
+                <div class="row">
+                    <div class="col-md-9 mb-3">
+                        <label for="title">论坛标题</label>
+                        <input required th:value="${blog.getTitle()}" maxlength="30" name="title" type="text" class="form-control" id="title">
                     </div>
 
-                    <button class="btn btn-primary btn-lg btn-block" onclick="talkWith()" type="button">提交修改</button>
-                </form>
-            </div>
+                    <div class="col-md-3 mb-3">
+                        <label for="categoryId">权限</label>
+                        <select name="categoryId" class="custom-select d-block w-100" id="categoryId" required>
+                            <option th:each="category:${categoryList}"
+                                    th:selected="${blog.getCategoryId() == category.getId()}"
+                                    th:value="${category.getId()}" th:text="${category.getCategory()}">
+                            </option>
+                        </select>
+                    </div>
+
+                    <div class="col-md-12 mb-3">
+                        <div class="row" id="blog-content">
+                            <div class="col-md-12" id="editor-toolbar"></div>
+                            <div class="col-md-10" id="editor-text-area" style="height: 538px;border-right: 1px dashed lightgrey;"></div>
+                            <div class="col-md-2">
+                                <!-- 标题目录 -->
+                                <ul id="header-container"></ul>
+                            </div>
+                        </div>
+                        <textarea id="content-textarea" name="content" th:text="${blog.getContent()}" style="display: none;"></textarea>
+                        <textarea id="contentText-textarea" name="contentJson" style="display: none;"></textarea>
+                    </div>
+                </div>
+                <button class="btn btn-primary btn-block" type="button" onclick="talkWith()" >保存</button>
+                <button class="btn btn-dark btn-block" type="button" onclick="back()" >返回</button>
+            </form>
         </div>
     </div>
 </main>
-
-<div th:replace="~{common/footer::footer}"></div>
-
 <a class="to-top badge badge-light">返回顶部</a>
 <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
 <script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
@@ -77,7 +108,7 @@
 <script th:src="@{/wangedit/js/wang.min.js}"></script>
 <script th:src="@{/wangedit/js/wang.init.js}"></script>
 <script th:src="@{/layer/mobile/layer.js}"></script>
-<script th:src="@{/js/axios.js}"></script>
+<script th:src="@{/layer/layer.js}"></script>
 <script type="text/javascript">
     function talkWith(){
         var title = $('#title').val();
@@ -102,6 +133,14 @@
         this.disabled = true;
         $('#editForm').submit();
     }
+    function back(){
+        layer.confirm('尚未保存文章，确定返回么？',{icon: 0, title:'提示'}, function(index){
+            //do something
+            var bid = $('#bid').val();
+            window.location.href='/blog/read/'+bid;
+            layer.close(index);
+        });
+    }
 </script>
 </body>
 </html>

src/main/resources/templates/blog/write.html

@@ -14,58 +14,90 @@
             font-size: .875rem;
             color: #6c757d;
         }
+        #header-container {
+            list-style-type: none;
+        }
+
+        #header-container li {
+            color: #333;
+            margin: 10px 0;
+            cursor: pointer;
+        }
+
+        #header-container li:hover {
+            text-decoration: underline;
+        }
+
+        #header-container li[type="header1"] {
+            font-size: 20px;
+            font-weight: bold;
+        }
+
+        #header-container li[type="header2"] {
+            font-size: 16px;
+            padding-left: 15px;
+            font-weight: bold;
+        }
+
+        #header-container li[type="header3"] {
+            font-size: 14px;
+            padding-left: 30px;
+        }
+
+        #header-container li[type="header4"] {
+            font-size: 12px;
+            padding-left: 45px;
+        }
+
+        #header-container li[type="header5"] {
+            font-size: 12px;
+            padding-left: 60px;
+        }
     </style>
 </head>
 <body>
 
-<!-- 导航栏 -->
-<div th:replace="~{common/header::header(activeUrl='blog')}"></div>
-
-<main role="main" class="container mt-3 p-3 bg-white rounded">
-    <div class="row">
-        <div class="col-md-12 blog-main">
-            <div class="col-md-12 order-md-1">
-                <h4 class="mb-3">发布文章</h4>
-
-                <form id="editForm" class="needs-validation" th:action="@{/blog/write}" method="post">
-                    <!-- 隐藏域 -->
-                    <input type="hidden" name="authorId" th:value="${session.loginUser.getUid()}">
-                    <input type="hidden" name="authorName" th:value="${session.loginUser.getUsername()}">
-                    <div class="row">
-                        <div class="col-md-10 mb-3">
-                            <label for="title">文章标题</label>
-                            <input type="text" name="title" maxlength="30" class="form-control" id="title" placeholder="请输入标题" required>
-                        </div>
-
-                        <div class="col-md-2 mb-3">
-                            <label for="categoryId">权限</label>
-                            <select name="categoryId" class="custom-select d-block w-100" id="categoryId" required>
-                                <option th:each="category:${categoryList}"
-                                        th:value="${category.getId()}" th:text="${category.getCategory()}">
-                                </option>
-                            </select>
-                        </div>
-
-                        <div class="col-md-12 mb-3">
-                            <p>文章内容</p>
-                            <div id="blog-content">
-								<div id="editor-toolbar"></div>
-								<div id="editor-text-area" style="border: 1px solid lightgrey"></div>
-								<textarea id="content-textarea" name="content" style="display: none;"></textarea>
-								<textarea id="contentText-textarea" name="contentJson" style="display: none;"></textarea>
-                            </div>
-                        </div>
-
+<main role="main" class="bg-white">
+    <div class="blog-main">
+        <div class="col-md-12">
+            <form id="editForm" class="needs-validation" th:action="@{/blog/write}" method="post">
+                <!-- 隐藏域 -->
+                <input type="hidden" name="authorId" th:value="${session.loginUser.getUid()}">
+                <input type="hidden" name="authorName" th:value="${session.loginUser.getUsername()}">
+                <div class="row">
+                    <div class="col-md-9 mb-3">
+                        <label for="title">文章标题</label>
+                        <input type="text" name="title" maxlength="30" class="form-control" id="title" placeholder="请输入标题" required>
                     </div>
 
-                    <button class="btn btn-primary btn-lg btn-block" type="button" onclick="talkWith()" >发布文章</button>
-                </form>
-            </div>
+                    <div class="col-md-3 mb-3">
+                        <label for="categoryId">权限</label>
+                        <select name="categoryId" class="custom-select d-block w-100" id="categoryId" required>
+                            <option th:each="category:${categoryList}"
+                                    th:value="${category.getId()}" th:text="${category.getCategory()}">
+                            </option>
+                        </select>
+                    </div>
+
+                    <div class="col-md-12 mb-3">
+                        <div class="row" id="blog-content">
+                            <div class="col-md-12" id="editor-toolbar"></div>
+                            <div class="col-md-10" id="editor-text-area" style="height: 538px;border-right: 1px dashed lightgrey;"></div>
+                            <div class="col-md-2">
+                                <!-- 标题目录 -->
+                                <ul id="header-container"></ul>
+                            </div>
+                        </div>
+                        <textarea id="content-textarea" name="content" style="display: none;"></textarea>
+                        <textarea id="contentText-textarea" name="contentJson" style="display: none;"></textarea>
+                    </div>
+                </div>
+                <button class="btn btn-primary btn-block" type="button" onclick="talkWith()" >保存</button>
+                <button class="btn btn-dark btn-block" type="button" onclick="back()" >返回</button>
+            </form>
         </div>
     </div>
 </main>
-<div th:replace="~{common/footer::footer}"></div>
-
 <a class="to-top badge badge-light">返回顶部</a>
 <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
 <script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
@@ -76,6 +108,7 @@
 <script th:src="@{/wangedit/js/wang.min.js}"></script>
 <script th:src="@{/wangedit/js/wang.init.js}"></script>
 <script th:src="@{/layer/mobile/layer.js}"></script>
+<script th:src="@{/layer/layer.js}"></script>
 <script type="text/javascript">
     function talkWith(){
         var title = $('#title').val();
@@ -101,6 +134,14 @@
         this.disabled = true;
         $('#editForm').submit();
     }
+
+    function back(){
+        layer.confirm('尚未保存文章，确定返回么？',{icon: 0, title:'提示'}, function(index){
+            //do something
+            window.location.href='/blog';
+            layer.close(index);
+        });
+    }
 </script>
 </body>
 </html>

src/main/resources/templates/common/footer.html

@@ -2,8 +2,8 @@
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
 <footer class="container" th:fragment="footer">
-    <footer class="my-5 text-muted text-center text-smal">
-        <p class="badge badge-pill badge-light">©QUINN</p><a class="badge badge-pill badge-light text-decoration-none" target="_blank" href = 'https://beian.miit.gov.cn'>浙ICP备2020031991号</a>
+    <footer class="my-5 text-muted text-center">
+        <a class="text-light text-decoration-none" target="_blank" href='https://beian.miit.gov.cn'>©QUINN 浙ICP备2020031991号</a>
     </footer>
 </footer>
 </html>

src/main/resources/templates/common/header.html

@@ -3,7 +3,7 @@
       xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
 
 <!-- 导航栏 -->
-<nav th:fragment="header" class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
+<nav th:fragment="header" class="navbar sticky-top navbar-expand-md navbar-light bg-light">
     <div class="container">
         <!--标题-->
         <a class="navbar-brand">
@@ -28,12 +28,12 @@
                 <li th:class="${activeUrl=='source'?'nav-item active':'nav-item'}">
                     <a class="nav-link" th:href="@{/source}">资源</a>
                 </li>
-                <li th:class="${activeUrl=='favor'?'nav-item active':'nav-item'}">
-                    <a class="nav-link" th:href="@{/favor}">斗图</a>
-                </li>
-                <li th:class="${activeUrl=='guess'?'nav-item active':'nav-item'}">
-                    <a class="nav-link" th:href="@{/guess}">词谜</a>
-                </li>
+<!--                <li th:class="${activeUrl=='favor'?'nav-item active':'nav-item'}">-->
+<!--                    <a class="nav-link" th:href="@{/favor}">斗图</a>-->
+<!--                </li>-->
+<!--                <li th:class="${activeUrl=='guess'?'nav-item active':'nav-item'}">-->
+<!--                    <a class="nav-link" th:href="@{/guess}">词谜</a>-->
+<!--                </li>-->
                 <li th:class="${activeUrl=='about'?'nav-item active':'nav-item'}">
                     <a class="nav-link" th:href="@{/about}">关于</a>
                 </li>

src/main/resources/templates/firework/index.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+	<head>
+		<meta charset="UTF-8">
+		<title>烟花秀-Quinn</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<link rel="stylesheet" th:href="@{/firework/css/style.css}">
+	</head>
+	<body>
+		<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
+			<svg xmlns="http://www.w3.org/2000/svg">
+				<symbol id="icon-play" viewBox="0 0 24 24">
+					<path d="M8 5v14l11-7z" />
+				</symbol>
+				<symbol id="icon-pause" viewBox="0 0 24 24">
+					<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+				</symbol>
+				<symbol id="icon-close" viewBox="0 0 24 24">
+					<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+					/>
+				</symbol>
+				<symbol id="icon-settings" viewBox="0 0 24 24">
+					<path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+					/>
+				</symbol>
+				<symbol id="icon-sound-on" viewBox="0 0 24 24">
+					<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
+					/>
+				</symbol>
+				<symbol id="icon-sound-off" viewBox="0 0 24 24">
+					<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"
+					/>
+				</symbol>
+				<symbol id="icon-home" viewBox="0 0 16 16">
+					<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
+				</symbol>
+			</svg>
+		</div>
+		<!-- App -->
+		<div class="container">
+			<div class="loading-init">
+				<div class="loading-init__header">
+					惊喜将至
+				</div>
+				<div class="loading-init__status">
+					好的，可以准备点火了...
+				</div>
+			</div>
+			<div class="stage-container remove">
+				<div class="canvas-container">
+					<canvas id="trails-canvas">
+					</canvas>
+					<canvas id="main-canvas">
+					</canvas>
+				</div>
+				<div class="controls">
+					<a class="btn home-btn" href="/index">
+						<svg fill="white" width="24" height="24">
+							<use href="#icon-home" xlink:href="#icon-pause">
+							</use>
+						</svg>
+					</a>
+				</div>
+				<div class="menu hide">
+					<div class="menu__inner-wrap">
+						<div class="btn btn--bright close-menu-btn">
+							<svg fill="white" width="24" height="24">
+								<use href="#icon-close" xlink:href="#icon-close">
+								</use>
+							</svg>
+						</div>
+						<div class="menu__header">
+							设置
+						</div>
+						<div class="menu__subheader">
+							若想了解更多信息 请点击任意标签
+						</div>
+						<form>
+							<div class="form-option form-option--select">
+								<label class="shell-type-label">
+									烟花类型
+								</label>
+								<select class="shell-type">
+								</select>
+							</div>
+							<div class="form-option form-option--select">
+								<label class="shell-size-label">
+									烟花大小
+								</label>
+								<select class="shell-size">
+								</select>
+							</div>
+							<div class="form-option form-option--select">
+								<label class="quality-ui-label">
+									画质
+								</label>
+								<select class="quality-ui">
+								</select>
+							</div>
+							<div class="form-option form-option--select">
+								<label class="sky-lighting-label">
+									照亮天空
+								</label>
+								<select class="sky-lighting">
+								</select>
+							</div>
+							<div class="form-option form-option--select">
+								<label class="scaleFactor-label">
+									缩放
+								</label>
+								<select class="scaleFactor">
+								</select>
+							</div>
+							<div class="form-option form-option--checkbox">
+								<label class="auto-launch-label">
+									自动放烟花
+								</label>
+								<input class="auto-launch" type="checkbox" />
+							</div>
+							<div class="form-option form-option--checkbox form-option--finale-mode">
+								<label class="finale-mode-label">
+									同时放更多的烟花
+								</label>
+								<input class="finale-mode" type="checkbox" />
+							</div>
+							<div class="form-option form-option--checkbox">
+								<label class="hide-controls-label">
+									隐藏控制按钮
+								</label>
+								<input class="hide-controls" type="checkbox" />
+							</div>
+							<div class="form-option form-option--checkbox form-option--fullscreen">
+								<label class="fullscreen-label">
+									全屏
+								</label>
+								<input class="fullscreen" type="checkbox" />
+							</div>
+							<div class="form-option form-option--checkbox">
+								<label class="long-exposure-label">
+									保留烟花的火花
+								</label>
+								<input class="long-exposure" type="checkbox" />
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+			<div class="help-modal">
+				<div class="help-modal__overlay">
+				</div>
+				<div class="help-modal__dialog">
+					<div class="help-modal__header">
+					</div>
+					<div class="help-modal__body">
+					</div>
+<!--					<button type="button" class="help-modal__close-btn">-->
+<!--						关闭-->
+<!--					</button>-->
+				</div>
+			</div>
+		</div>
+		<script th:src="@{/firework/js/fscreen.js}"></script>
+		<script th:src="@{/firework/js/Stage.js}"></script>
+		<script th:src="@{/firework/js/MyMath.js}"></script>
+		<script th:src="@{/firework/js/script.js}"></script>
+	</body>
+
+</html>

src/main/resources/templates/index.html

@@ -6,140 +6,143 @@
     <title>首页-Quinn</title>
     <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
     <link rel="stylesheet" th:href="@{/css/backgroud.css}">
-    <script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
+    <link rel="stylesheet" th:href="@{/css/vno.css}">
+    <link rel="stylesheet" th:href="@{/css/iconfont.css}">
 </head>
-<style>
-    #register{
-        background: url(/images/menu/register.png) no-repeat;
-        background-size: 100% 100%;
-        height: 400px;
-    }
-    .invertedContent p{
-        text-align: center;
-        background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;text-shadow: 2px -2px black, 1px -1px white;font-weight: bold;-webkit-text-fill-color: transparent;-webkit-background-clip: text
-    }
-    #fastLink{
-        font-size: 20px;
-    }
-    .typed-cursor{
-        opacity: 1;
-        -webkit-animation: blink 0.7s infinite;
-        -moz-animation: blink 0.7s infinite;
-        animation: blink 0.7s infinite;
-    }
-    @keyframes blink{
-        0% { opacity:1; }
-        50% { opacity:0; }
-        100% { opacity:1; }
-    }
-    @-webkit-keyframes blink{
-        0% { opacity:1; }
-        50% { opacity:0; }
-        100% { opacity:1; }
-    }
-    @-moz-keyframes blink{
-        0% { opacity:1; }
-        50% { opacity:0; }
-        100% { opacity:1; }
-    }
-</style>
 <body>
-
-<div th:replace="~{common/header::header(activeUrl='index.html')}"></div>
-<main role="main">
-    <div class="container">
-        <div class="jumbotron jumbotron-fluid mt-5">
-            <div class="container">
-                <h2 style="margin: 0;padding: 0;text-align: center;color: #3A3A3A;font-size: 30px;">
-                    <span style="width: 20px;height: 20px;background: #00C6FF;display: inline-block;position: relative;left: 10px;top: 5px;">
-                    </span>
-                    <i style="width: 20px;height: 20px;z-index: 2;background: #FFB900;display: inline-block;position: relative;left: -30px;top: 10px;">
-                    </i>
-                    <strong style="position: relative;">QUINN</strong>
-                    <b style="width: 20px;height: 20px;background: #00C6FF;display: inline-block;position: relative;left: 40px;top: 5px;">
-                    </b>
-                    <em style="width: 20px;height: 20px;background: #FFB900;display: inline-block;position: relative;left: 0px;top: 10px;">
-                    </em>
-                </h2>
-                <p style="margin: 0;padding: 0;text-align: center;color: #969696;	font-size: 14px;">
-                    私人博客平台
-                </p>
-                <br/>
-                <div class="lead invertedContent">
-                    <p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb-fill" viewBox="0 0 16 16">
-                        <path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm3 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1-.5-.5z"/>
-                    </svg>欢迎访问</p>
-                    <div class="row">
-                        <div class="col-md-3"></div>
-                        <span class="element"></span>
-                        <div class="col-md-3"></div>
-                    </div>
+<main>
+<span class="mobile btn-mobile-menu">
+    <i class="social iconfont icon-list btn-mobile-menu__icon"></i>
+    <i class="social iconfont icon-angleup btn-mobile-close__icon hidden"></i>
+</span>
+<header id="panel" class="panel-cover">
+    <div class="panel-main">
+        <div class="panel-main__inner panel-inverted">
+            <div class="panel-main__content">
+                <div class="ih-item effect">
+                    <h2 style="margin: 0;padding: 0;text-align: center;color: #ffffff;font-size: 30px;">
+                            <span style="width: 20px;height: 20px;background: #00C6FF;display: inline-block;position: relative;left: 10px;top: 5px;">
+                            </span>
+                        <i style="width: 20px;height: 20px;z-index: 2;background: #FFB900;display: inline-block;position: relative;left: -30px;top: 10px;">
+                        </i>
+                        <strong style="position: relative;">QUINN</strong>
+                        <b style="width: 20px;height: 20px;background: #00C6FF;display: inline-block;position: relative;left: 40px;top: 5px;">
+                        </b>
+                        <em style="width: 20px;height: 20px;background: #FFB900;display: inline-block;position: relative;left: 0px;top: 10px;">
+                        </em>
+                    </h2>
+                    <p style="margin: 0;padding: 0;text-align: center;color: #969696;	font-size: 14px;">
+                        分享&交流
+                    </p>
                 </div>
-                <div id="fastLink" class="row">
-                    <div class="col-md-3"></div>
-                    <div class="ml-2 col-md-2">
-                        <a th:href="@{/blog/read/1}" class="text-dark font-weight-bold text-decoration-none">
-                            <p class= "badge badge-pill badge-dark">注册说明
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-postcard-fill" viewBox="0 0 16 16">
-                                    <path d="M11 8h2V6h-2v2Z"/>
-                                    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm8.5.5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7ZM2 5.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5ZM2.5 7a.5.5 0 0 0 0 1H6a.5.5 0 0 0 0-1H2.5ZM2 9.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5Zm8-4v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5Z"/>
-                                </svg>
-                            </p>
-                        </a>
+                <div class="panel-cover__title panel-title iUp">
+                    <br/>
+                </div>
+                <p class="panel-cover__subtitle panel-subtitle iUp">免费资源分享、开源技术交流</p>
+                <hr class="panel-cover__divider iUp" />
+                <p id="description" class="panel-cover__description iUp">
+                    拒绝内卷，拒绝内耗！
+                    <br/>
+                    <strong id="showTime"></strong>
+                </p>
+                <div class="navigation-wrapper iUp">
+                    <div>
+                        <nav class="cover-navigation cover-navigation--primary">
+                            <ul class="navigation">
+                                <li class="navigation__item">
+                                    <a href="/blog" class="blog-button">博客</a>
+                                </li>
+                                <li class="navigation__item">
+                                    <a href="/favor" class="blog-button">斗图</a>
+                                </li>
+                                <li class="navigation__item">
+                                    <a href="/guess" class="blog-button">词谜</a>
+                                </li>
+                                <li class="navigation__item">
+                                    <a href="/firework" class="blog-button">看烟花</a>
+                                </li>
+                                <li class="navigation__item">
+                                    <a href="/about" class="blog-button">关于</a>
+                                </li>
+                            </ul>
+                        </nav>
                     </div>
-                    <div class="ml-2 col-md-2">
-                        <a th:href="@{/blog/read/2}" class="text-dark font-weight-bold text-decoration-none">
-                            <p class="badge badge-pill badge-success">网站建设
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-postcard-fill" viewBox="0 0 16 16">
-                                    <path d="M11 8h2V6h-2v2Z"/>
-                                    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm8.5.5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7ZM2 5.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5ZM2.5 7a.5.5 0 0 0 0 1H6a.5.5 0 0 0 0-1H2.5ZM2 9.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5Zm8-4v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5Z"/>
-                                </svg>
-                            </p>
-                        </a>
+                    <div class="iUp">
+                        <nav class="cover-navigation navigation--social">
+                            <ul class="navigation">
+<!--                                <li class="navigation__item">-->
+<!--                                    <a href="https://github.com/dmego/" title="github" target="_blank">-->
+<!--                                        <i class='social iconfont icon-github'></i>-->
+<!--                                        <span class="label">github</span>-->
+<!--                                    </a>-->
+<!--                                </li>-->
+                                <li class="navigation__item">
+                                    <a href="https://blog.csdn.net/qq_25391375" title="cnblogs" target="_blank">
+                                        <i class='social iconfont icon-cnblogs'></i>
+                                        <span class="label">cnblogs</span>
+                                    </a>
+                                </li>
+                                <li class="navigation__item">
+                                    <a href="https://www.zhihu.com/people/quinn-admin" title="zhihu" target="_blank">
+                                        <i class='social iconfont icon-zhihu'></i>
+                                        <span class="label">zhihu</span>
+                                    </a>
+                                </li>
+                                <li class="navigation__item">
+                                    <a href="mailto:quinn.admin@88.com" title="email">
+                                        <i class='social iconfont icon-email'></i>
+                                        <span class="label">email</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </nav>
                     </div>
-                    <div class="ml-2 col-md-2">
-                        <a th:href="@{/blog/read/3}" class="text-dark font-weight-bold text-decoration-none">
-                            <p class="badge badge-pill badge-warning">建议反馈
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-postcard-fill" viewBox="0 0 16 16">
-                                    <path d="M11 8h2V6h-2v2Z"/>
-                                    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm8.5.5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7ZM2 5.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5ZM2.5 7a.5.5 0 0 0 0 1H6a.5.5 0 0 0 0-1H2.5ZM2 9.5a.5.5 0 0 0 .5.5H6a.5.5 0 0 0 0-1H2.5a.5.5 0 0 0-.5.5Zm8-4v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5Z"/>
-                                </svg>
-                            </p>
-                        </a>
-                    </div>
-                    <div class="col-md-3"></div>
                 </div>
             </div>
         </div>
-        <div class="alert alert-danger mt-3" role="alert">
-            <span th:each="love:${LoveList}">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-square-heart-fill" viewBox="0 0 16 16">
-                  <path d="M2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm6 3.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z"/>
-                </svg>
-                [[${love}]]
-            </span>
-        </div>
-        <div id="register" class="mt-3">
-        </div>
+        <div class="panel-cover--overlay cover-slate"></div>
     </div>
+    <div class="remark power">
+        <a class="text-light text-decoration-none" target="_blank" href='https://beian.miit.gov.cn'>©QUINN 浙ICP备2020031991号</a>
+    </div>
+</header>
 </main>
-
-<div th:replace="~{common/footer::footer}"></div>
-<div class="to-top">
-    <img class="d-block pl-2" src="/images/logo/qrcode.png" width="50" height="50">
-    <a class="badge badge-light">返回顶部</a>
-</div>
 <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
+<script th:src="@{/js/main.js}"></script>
 <script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
-<script th:src="@{/js/toTop.js}"></script>
 <script th:src="@{/js/jquery-ui.min.js}"></script>
-<script th:src="@{/live/js/addlive2d.js}"></script>
 <script>
-    var typed = new Typed('.element', {
-        strings: ["Quinn注册流程，技术博客，交流反馈。可点击下方了解详情↓"], //输入内容, 支持html标签
-        typeSpeed: 120, //打字速度
-        backSpeed: 50 //回退速度
-    });
+    // var typed = new Typed('.element', {
+    //     strings: ["Quinn注册流程，技术博客，交流反馈。可点击下方了解详情↓"], //输入内容, 支持html标签
+    //     typeSpeed: 120, //打字速度
+    //     backSpeed: 50 //回退速度
+    // });
+    var t = null;
+    t = setTimeout(time, 1000);
+    function time() {
+        clearTimeout(t); //清除定时器
+        dt = new Date();
+        var y = dt.getFullYear();
+        var mt = dt.getMonth() + 1;
+        var day = dt.getDate();
+        var h = dt.getHours(); //获取时
+        var m = dt.getMinutes(); //获取分
+        var s = dt.getSeconds(); //获取秒
+        document.querySelector("#showTime").innerHTML =
+            y +
+            "年" +
+            mt +
+            "月" +
+            day +
+            "日-" +
+            h +
+            "时" +
+            m +
+            "分" +
+            s +
+            "秒";
+        t = setTimeout(time, 1000); //设定定时器，循环运行
+    }
 </script>
 </body>
 </html>

src/main/resources/templates/page/favor.html

@@ -3,53 +3,58 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>免费表情包-Quinn</title>
+    <title>表情包-Quinn</title>
     <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
-    <link rel="stylesheet" th:href="@{/css/backgroud.css}">
 </head>
-<div th:replace="~{common/header::header(activeUrl='favor')}"></div>
-<main role="main">
-    <div class="container">
-<!--        <div class="alert alert-primary mt-3" role="alert">-->
-<!--            选自@杨二-土味情话生成器。可以点<a target="_blank" class="text-danger font-weight-bold text-decoration-none" href="https://yangerxiao.com">此处</a>访问作者首页-->
-<!--        </div>-->
-<!--        <iframe height="1080px" width="100%" src="https://works.yangerxiao.com/honeyed-words-generator/"></iframe>-->
-        <div class="my-3 p-3 bg-white rounded shadow-sm">
-            <div th:fragment="user_table_refresh" th:id="id_user_table_refresh">
-                <div class="row border-bottom border-gray pb-2 mt-1">
-                    <div class="col-md-6">表情数据来源自GITHUB</div>
-                    <input id="findBucket" th:value="${findBucket}" class="col-md-3 form-control" placeholder="请输入要查询的表情">
-                    <button class="ml-2 col-md-2 btn-sm btn-primary" onclick="navChange(-777)" >找一找</button>
-                </div>
-            <div class="row">
-                <div class="col-md-3 small pl-2 border-bottom border-gray pb-2 pt-2" th:each="record:${recordList}">
-<!--                    <p th:text="${record.getName()}" class="badge badge-success"></p>-->
-                    <img width="200px" height="200px" th:src="${record.getUrl()}"/>
-                </div>
-            </div>
-            <!--分页-->
-            <nav aria-label="Page navigation example" class="mt-4">
-                    <ul class="pagination justify-content-center pagination-sm">
-                        <li th:class="${pageParam.hasPrevious()==true?'page-item':'page-item disabled'}">
-                            <a class="page-link" href="javascript:navChange(-1);" tabindex="">Previous</a>
-                        </li>
-                        <li class="page-item" th:if="${pageParam.hasPrevious()}">
-                            <a class="page-link" href="javascript:navChange(-1);" th:text="${pageParam.getCurrent()-1}"></a>
-                        </li>
-                        <li class="page-item active">
-                            <a id = "current" class="page-link" href="javascript:navChange(0);" th:text="${pageParam.getCurrent()}"></a>
-                        </li>
-                        <li class="page-item" th:if="${pageParam.hasNext()}">
-                            <a class="page-link" href="javascript:navChange(1);" th:text="${pageParam.getCurrent()+1}"></a>
-                        </li>
-                        <li th:class="${pageParam.hasNext()==true?'page-item':'page-item disabled'}">
-                            <a class="page-link" href="javascript:navChange(1);">Next</a>
-                        </li>
-                    </ul>
-                </nav>
-            </div>
+<body class="bg-dark">
+<main class="container">
+<div th:fragment="user_table_refresh" th:id="id_user_table_refresh">
+    <div class="alert alert-danger" role="alert">
+        <a href="/index" class="text-danger text-decoration-none">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
+                <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
+            </svg>
+        </a>
+        <span th:each="love:${LoveList}">
+             (* ￣3)(ε￣ *)：
+            [[${love}]]
+        </span>
+        <input id="findBucket" th:value="${findBucket}" class="mt-2 form-control" placeholder="请输入要查询的表情">
+        <button class="form-control mt-2" onclick="navChange(-777)" >
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search-heart" viewBox="0 0 16 16">
+                <path d="M6.5 4.482c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z"/>
+                <path d="M13 6.5a6.471 6.471 0 0 1-1.258 3.844c.04.03.078.062.115.098l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1.007 1.007 0 0 1-.1-.115h.002A6.5 6.5 0 1 1 13 6.5ZM6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z"/>
+            </svg>
+            找一找
+        </button>
+    </div>
+    <div class="row ml-2">
+        <div class="col-md-3 pl-2 pt-2 pb-2" th:each="record:${recordList}">
+            <img width="250px" height="250px" th:src="${record.getUrl()}"/>
         </div>
     </div>
+<!--分页-->
+<nav aria-label="Page navigation example" class="mt-4">
+        <ul class="pagination justify-content-center pagination-sm">
+            <li th:class="${pageParam.hasPrevious()==true?'page-item':'page-item disabled'}">
+                <a class="page-link" href="javascript:navChange(-1);" tabindex="">Previous</a>
+            </li>
+            <li class="page-item" th:if="${pageParam.hasPrevious()}">
+                <a class="page-link" href="javascript:navChange(-1);" th:text="${pageParam.getCurrent()-1}"></a>
+            </li>
+            <li class="page-item active">
+                <a id = "current" class="page-link" href="javascript:navChange(0);" th:text="${pageParam.getCurrent()}"></a>
+            </li>
+            <li class="page-item" th:if="${pageParam.hasNext()}">
+                <a class="page-link" href="javascript:navChange(1);" th:text="${pageParam.getCurrent()+1}"></a>
+            </li>
+            <li th:class="${pageParam.hasNext()==true?'page-item':'page-item disabled'}">
+                <a class="page-link" href="javascript:navChange(1);">Next</a>
+            </li>
+        </ul>
+    </nav>
+</div>
 </main>
 <div th:replace="~{common/footer::footer}"></div>
 <div class="to-top">