2021-04-16 01:00:00 +02:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title>{{ $littlelink_name }} 🔗 {{ config('app.name') }} </title>
|
2021-07-06 10:49:29 +02:00
|
|
|
|
<meta name="description" content="{{ $userinfo->littlelink_description }}">
|
|
|
|
|
|
<meta name="author" content="{{ $userinfo->name }}">
|
2021-04-16 01:00:00 +02:00
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
2022-02-12 14:59:07 +01:00
|
|
|
|
|
|
|
|
|
|
<!--#### BEGIN Meta Tags social media preview images ####-->
|
|
|
|
|
|
<!-- This shows a preview for title, description and avatar image of users profiles if shared on social media sites -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Facebook Meta Tags -->
|
2022-02-27 19:33:19 +01:00
|
|
|
|
<meta property="og:url" content="{{ url('') }}/@littlelink_name">
|
2022-02-12 14:59:07 +01:00
|
|
|
|
<meta property="og:type" content="website">
|
2022-04-13 13:05:01 +02:00
|
|
|
|
<meta property="og:title" content="{{ $userinfo->name }}">
|
2022-02-12 14:59:07 +01:00
|
|
|
|
<meta property="og:description" content="{{ $userinfo->littlelink_description }}">
|
2022-02-14 12:54:51 +01:00
|
|
|
|
@if(file_exists(base_path("img/$littlelink_name" . ".png" )))
|
2022-02-12 14:59:07 +01:00
|
|
|
|
<meta property="og:image" content="{{ asset("img/$littlelink_name" . ".png") }}">
|
|
|
|
|
|
@else
|
2022-02-20 13:12:25 +01:00
|
|
|
|
<meta property="og:image" content="{{ asset('littlelink/images/logo.svg') }}">
|
2022-02-12 14:59:07 +01:00
|
|
|
|
@endif
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Twitter Meta Tags -->
|
|
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
2022-02-27 19:33:19 +01:00
|
|
|
|
<meta property="twitter:domain" content="{{ url('') }}/@littlelink_name">
|
|
|
|
|
|
<meta property="twitter:url" content="{{ url('') }}/@littlelink_name">
|
2022-02-12 14:59:07 +01:00
|
|
|
|
<meta name="twitter:title" content="{{ $userinfo->littlelink_name }}">
|
|
|
|
|
|
<meta name="twitter:description" content="{{ $userinfo->littlelink_description }}">
|
2022-02-14 12:54:51 +01:00
|
|
|
|
@if(file_exists(base_path("img/$littlelink_name" . ".png" )))
|
2022-02-12 14:59:07 +01:00
|
|
|
|
<meta name="twitter:image" content="{{ asset("img/$littlelink_name" . ".png") }}">
|
|
|
|
|
|
@else
|
2022-02-20 13:12:25 +01:00
|
|
|
|
<meta name="twitter:image" content="{{ asset('littlelink/images/logo.svg') }}">
|
2022-02-12 14:59:07 +01:00
|
|
|
|
@endif
|
|
|
|
|
|
|
|
|
|
|
|
<!--#### END Meta Tags social media preview images ####-->
|
2022-04-11 13:56:36 +02:00
|
|
|
|
|
|
|
|
|
|
<!-- Custom icons font-awesome -->
|
2022-04-13 19:08:09 +02:00
|
|
|
|
<script src="https://kit.fontawesome.com/c4a5e06183.js" crossorigin="anonymous"></script>
|
2022-04-11 13:56:36 +02:00
|
|
|
|
|
2021-07-06 10:49:29 +02:00
|
|
|
|
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
|
2021-04-16 01:00:00 +02:00
|
|
|
|
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
|
|
|
|
|
|
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
|
|
|
|
|
|
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
|
2022-02-12 19:24:01 +01:00
|
|
|
|
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
|
2022-02-17 22:09:58 +01:00
|
|
|
|
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
|
2022-03-29 23:08:06 +02:00
|
|
|
|
<link rel="stylesheet" href="{{ asset('littlelink/css/share.button.css') }}">
|
2022-02-20 13:20:21 +01:00
|
|
|
|
@if(file_exists(base_path("littlelink/images/avatar.png" )))
|
|
|
|
|
|
<link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
|
|
|
|
|
|
@else
|
|
|
|
|
|
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
|
|
|
|
|
|
@endif
|
2021-07-06 10:49:29 +02:00
|
|
|
|
<style>
|
|
|
|
|
|
.container { max-width: 1080px !important; }
|
|
|
|
|
|
.button-title {
|
|
|
|
|
|
color: white !important;
|
|
|
|
|
|
background: #505050 !important;
|
|
|
|
|
|
height: auto !important;
|
|
|
|
|
|
line-height: 28px !important;
|
|
|
|
|
|
width: auto !important;
|
|
|
|
|
|
padding: 10px !important;
|
|
|
|
|
|
min-width: 300px !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
2022-03-29 23:08:06 +02:00
|
|
|
|
|
2022-02-18 10:10:13 +01:00
|
|
|
|
<!-- begin dark mode detection -->
|
|
|
|
|
|
<script src="{{ asset('littlelink/js/js.cookie.min.js') }}"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// code to set the `color_scheme` cookie
|
|
|
|
|
|
var $color_scheme = Cookies.get("color_scheme");
|
|
|
|
|
|
function get_color_scheme() {
|
|
|
|
|
|
return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
|
|
|
|
|
|
}
|
|
|
|
|
|
function update_color_scheme() {
|
|
|
|
|
|
Cookies.set("color_scheme", get_color_scheme());
|
|
|
|
|
|
}
|
|
|
|
|
|
// read & compare cookie `color-scheme`
|
|
|
|
|
|
if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
|
|
|
|
|
|
update_color_scheme();
|
|
|
|
|
|
// detect changes and change the cookie
|
|
|
|
|
|
if (window.matchMedia)
|
|
|
|
|
|
window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
|
Fixed dark mode not applying on first visit
This 'bug' was caused due to the way the dark mode was applied. The dark mode detection detects the preferred theme style from the client and then saves the preferred type with a cookie, all with JavaScript. Then a simple PHP if-else statement loads either the dark or light mode CSS theme, depending on the cookie.
The problem here was that the cookie would only be detected if the page was refreshed, so once the cookie was set, the dark mode was applied every time without a problem. But the first time a user visited the site and the preferred theme was set to dark mode, the page would still display the white version until the page was refreshed.
Now, I could have changed how the page applies the dark mode, however I decided against that and went with this commit instead.
Now I'm not really experienced with JavaScript at all, so this definitely could have been solved in a more elegant way, but this is what I did:
I added a bit to the JavaScript that sets and reads the cookie. When the page finished loading, a simple if statement is run that requires the following conditions:
The URL contains a '#' and the color scheme equals 'dark' and the cookie isn't set yet.
After these conditions are met, '#dark' is added to the URL and the page will be refreshed.
This refresh is only performed without the cookie, thus only refreshing the page on the first visit if the dark mode would be applied.
The '#dark' is only added to the URL to fail the first requirement of the if statement, preventing the page from being reloaded in an infinite loop. Otherwise, the '#dark' part of the URL fulfills no purpose and only the '#' part is required, so it doesn't even matter what comes after the hash. I just chose this for clarification.
If the dark mode cookie is blocked by the user, the page will be set to light mode and refreshed every time they visit but the '#dark' will still be added to the URL, preventing the infinite refresh-loop.
2022-03-03 10:49:10 +01:00
|
|
|
|
// reloads page to apply the dark mode cookie
|
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
|
if(!window.location.hash && get_color_scheme() == "dark" && (get_color_scheme() != $color_scheme)) {
|
|
|
|
|
|
window.location = window.location + '#dark';
|
|
|
|
|
|
window.location.reload();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-02-18 10:10:13 +01:00
|
|
|
|
</script>
|
|
|
|
|
|
<?php // loads dark mode CSS if dark mode detected
|
|
|
|
|
|
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
|
|
|
|
|
|
@if ($color_scheme == 'dark')
|
|
|
|
|
|
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
|
|
|
|
|
|
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
|
|
|
|
|
|
@else
|
|
|
|
|
|
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
|
|
|
|
|
|
@endif
|
|
|
|
|
|
<!-- end dark mode detection -->
|
2021-04-16 01:00:00 +02:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2022-03-29 23:08:06 +02:00
|
|
|
|
|
|
|
|
|
|
<?php ////begin share button//// ?>
|
|
|
|
|
|
<?php
|
|
|
|
|
|
//Get browser type
|
|
|
|
|
|
$arr_browsers = ["Opera", "Edg", "Chrome", "Safari", "Firefox", "MSIE", "Trident"];
|
|
|
|
|
|
|
|
|
|
|
|
$agent = $_SERVER['HTTP_USER_AGENT'];
|
|
|
|
|
|
|
|
|
|
|
|
$user_browser = '';
|
|
|
|
|
|
foreach ($arr_browsers as $browser) {
|
|
|
|
|
|
if (strpos($agent, $browser) !== false) {
|
|
|
|
|
|
$user_browser = $browser;
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
switch ($user_browser) {
|
|
|
|
|
|
case 'MSIE':
|
|
|
|
|
|
$user_browser = 'Internet Explorer';
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
|
|
case 'Trident':
|
|
|
|
|
|
$user_browser = 'Internet Explorer';
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
|
|
|
|
case 'Edg':
|
|
|
|
|
|
$user_browser = 'Microsoft Edge';
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function get_operating_system() {
|
|
|
|
|
|
$u_agent = $_SERVER['HTTP_USER_AGENT'];
|
|
|
|
|
|
$operating_system = 'NULL';
|
|
|
|
|
|
|
|
|
|
|
|
//get operating-system type
|
|
|
|
|
|
if (preg_match('/iphone/i', $u_agent)) {
|
|
|
|
|
|
$operating_system = 'mobile';
|
|
|
|
|
|
} elseif (preg_match('/ipod/i', $u_agent)) {
|
|
|
|
|
|
$operating_system = 'mobile';
|
|
|
|
|
|
} elseif (preg_match('/ipad/i', $u_agent)) {
|
|
|
|
|
|
$operating_system = 'mobile';
|
|
|
|
|
|
} elseif (preg_match('/android/i', $u_agent)) {
|
|
|
|
|
|
$operating_system = 'mobile';
|
|
|
|
|
|
} elseif (preg_match('/blackberry/i', $u_agent)) {
|
|
|
|
|
|
$operating_system = 'mobile';
|
|
|
|
|
|
} elseif (preg_match('/webos/i', $u_agent)) {
|
|
|
|
|
|
$operating_system = 'mobile';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return $operating_system;
|
|
|
|
|
|
}
|
|
|
|
|
|
?>
|
|
|
|
|
|
|
|
|
|
|
|
@if($user_browser === 'Chrome' or get_operating_system() == 'mobile')
|
|
|
|
|
|
<script src="{{ asset('littlelink/js/jquery.min.js') }}"></script>
|
|
|
|
|
|
<div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical" id='share-share-button'><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg">Share</a></div></div>
|
|
|
|
|
|
<span class="copy-icon" role="button">
|
|
|
|
|
|
</span>
|
|
|
|
|
|
@else
|
|
|
|
|
|
<span class="copy-icon" role="button">
|
|
|
|
|
|
<div align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg">Share</a></div></div>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
@endif
|
|
|
|
|
|
<div class="toastdiv">
|
|
|
|
|
|
<span class="toastbox" role="alert"></span>
|
|
|
|
|
|
<script src="{{ asset('littlelink/js/share.button.js') }}"></script>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<?php ////end share button//// ?>
|
|
|
|
|
|
|
2021-04-16 01:00:00 +02:00
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row">
|
2021-07-06 11:42:39 +02:00
|
|
|
|
<div class="column" style="margin-top: 5%">
|
2021-04-16 01:00:00 +02:00
|
|
|
|
<!-- Your Image Here -->
|
2022-02-14 12:54:51 +01:00
|
|
|
|
@if(file_exists(base_path("img/$littlelink_name" . ".png" )))
|
2022-02-22 12:48:43 +01:00
|
|
|
|
<img class="rounded-avatar fadein" src="{{ asset("img/$littlelink_name" . ".png") }}" width="100px" height="100px">
|
2022-02-20 15:42:45 +01:00
|
|
|
|
@elseif(file_exists(base_path("littlelink/images/avatar.png" )))
|
2022-02-22 12:48:43 +01:00
|
|
|
|
<img class="rounded-avatar fadein" src="{{ asset('littlelink/images/avatar.png') }}" srcset="{{ asset('littlelink/images/avatar@2x.png 2x') }}" width="100px" height="100px">
|
2022-02-20 13:12:25 +01:00
|
|
|
|
@else
|
2022-02-22 12:48:43 +01:00
|
|
|
|
<img class="rounded-avatar fadein" src="{{ asset('littlelink/images/logo.svg') }}" srcset="{{ asset('littlelink/images/avatar@2x.png 2x') }}" width="100px" height="100px">
|
2021-04-16 01:00:00 +02:00
|
|
|
|
@endif
|
|
|
|
|
|
|
|
|
|
|
|
@foreach($information as $info)
|
|
|
|
|
|
<!-- Your Name -->
|
2022-04-13 13:05:01 +02:00
|
|
|
|
<h1 class="fadein">{{ $info->name }}</h1>
|
2021-04-16 01:00:00 +02:00
|
|
|
|
|
|
|
|
|
|
<!-- Short Bio -->
|
2022-02-22 12:48:43 +01:00
|
|
|
|
<p class="fadein">{{ $info->littlelink_description }}</p>
|
2021-04-16 01:00:00 +02:00
|
|
|
|
|
2022-03-29 23:08:06 +02:00
|
|
|
|
@endforeach
|
2021-04-16 01:00:00 +02:00
|
|
|
|
<!-- Buttons -->
|
2022-02-17 22:09:58 +01:00
|
|
|
|
<?php $initial=1; // <-- Effectively sets the initial loading time of the buttons. This value should be left at 1. ?>
|
2021-04-16 01:00:00 +02:00
|
|
|
|
@foreach($links as $link)
|
2021-05-22 15:37:18 +02:00
|
|
|
|
@php $linkName = str_replace('default ','',$link->name) @endphp
|
2021-07-06 10:49:29 +02:00
|
|
|
|
@if($link->button_id === 0)
|
2022-02-17 22:09:58 +01:00
|
|
|
|
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-title button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank">
|
|
|
|
|
|
{{ $link->title }}</a></div>
|
2022-04-07 15:56:02 +02:00
|
|
|
|
@elseif($link->name === "custom" and $link->custom_css === "")
|
2022-04-13 23:47:27 +02:00
|
|
|
|
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><i style="color: {{$link->custom_icon}}" class="icon hvr-icon fa {{$link->custom_icon}}"></i>{{ $link->title }}</a></div>
|
2022-04-07 15:56:02 +02:00
|
|
|
|
@elseif($link->name === "custom" and $link->custom_css != "")
|
2022-04-13 23:47:27 +02:00
|
|
|
|
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button hvr-grow hvr-icon-wobble-vertical" style="{{ $link->custom_css }}" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><i style="color: {{$link->custom_icon}}" class="icon hvr-icon fa {{$link->custom_icon}}"></i>{{ $link->title }}</a></div>
|
2022-03-17 21:19:30 +01:00
|
|
|
|
@elseif($link->name === "buy me a coffee")
|
|
|
|
|
|
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-coffee button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}coffee.svg">Buy me a Coffee</a></div>
|
2022-03-18 14:59:45 +01:00
|
|
|
|
@elseif($link->name === "custom_website")
|
2022-03-18 15:30:44 +01:00
|
|
|
|
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-custom_website button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link->link}}">{{ $link->title }}</a></div>
|
2021-07-06 10:49:29 +02:00
|
|
|
|
@else
|
2022-02-17 22:09:58 +01:00
|
|
|
|
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ ucfirst($linkName) }}</a></div>
|
2021-07-06 10:49:29 +02:00
|
|
|
|
@endif
|
2021-04-16 01:00:00 +02:00
|
|
|
|
@endforeach
|
|
|
|
|
|
|
|
|
|
|
|
@include('layouts.footer')
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
2022-02-12 14:59:07 +01:00
|
|
|
|
</html>
|
