The Neu Clock

[Brian0404]

I was surffing through internet when I found this clean and minimal clock but the only problem I am encountering is that the code is in HTML, CSS,
and JS the link to the clock is here https://codepen.io/MananTank/pen/bGdOedL
Can someone help me I don't know what to do

[CyberTheWorm]

It's not a Rainmeter skin, you will need to create a webpage with the HTML, CSS and JS.

[ikarus1969]

Hi!
i have made a relatively quick and relatively dirty skin for it. There's plenty room of optimizing in the sense of design and you can play around with ActionTimer to make smooth transitions from one second/minute/hour to another. I will do that myself but i won't stop you from find out things by yourself and discover the beauty of Rainmeter.

GIF 02.05.2021 10-26-18.gif

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1

[Variables]
SKIN.W=460
SKIN.H=560

CSOnly.Offset=2
Offset.Links=(4 * #CSOnly.Offset#)
Offset.Rechts=#Offset.Links#
Offset.Oben=#Offset.Links#
Offset.Unten=#Offset.Links#

CSOnly.Border_WH=8
CSOnly.Border.X=(#WORKAREAX# + 0.5 * #CSOnly.Border_WH#)
CSOnly.Border.Y=(#WORKAREAY# + 0.5 * #CSOnly.Border_WH#)
CSOnly.Border.W=(#SKIN.W# - #CSOnly.Border_WH#)
CSOnly.Border.H=(#SKIN.H# - #CSOnly.Border_WH#)

SKIN.BG.X=(#CSOnly.Border.X# + 0.5 * #CSOnly.Border_WH#)
SKIN.BG.Y=(#CSOnly.Border.Y# + 0.5 * #CSOnly.Border_WH#)
SKIN.BG.W=(#CSOnly.Border.W# - #CSOnly.Border_WH#)
SKIN.BG.H=(#CSOnly.Border.H# - #CSOnly.Border_WH#)

SKIN.BG.X.Mitte=(#SKIN.BG.X# + 0.5 * #SKIN.BG.W#)
SKIN.BG.X.Rechts=(#SKIN.BG.X# + #SKIN.BG.W#)

Canvas.Y.Unten=(#SKIN.BG.Y# + #SKIN.BG.H#)
Canvas.H=(#Canvas.Y.Unten# - #SKIN.BG.Y#)

SKIN.BG.Y.Mitte=(#SKIN.BG.Y# + 0.5 * #Canvas.H#)

Font.Face.NumValues=Victor Mono

CS.SW=2
CS.R=20
CS.D=(2 * #CS.R#)
CS.X=(#SKIN.BG.X# + #Offset.Links# + #CS.R#)
CS.Y=#SKIN.BG.Y.Mitte#

HH.1.Mitte.X=(#CS.X#         +     #CS.R#)
HH.2.Mitte.X=(#HH.1.Mitte.X# + 3 * #CS.R#)
MM.1.Mitte.X=(#HH.2.Mitte.X# + 4 * #CS.R#)
MM.2.Mitte.X=(#MM.1.Mitte.X# + 3 * #CS.R#)
SS.1.Mitte.X=(#MM.2.Mitte.X# + 4 * #CS.R#)
SS.2.Mitte.X=(#SS.1.Mitte.X# + 3 * #CS.R#)



; --------------------------------------------------------------------------------
; Measures
; --------------------------------------------------------------------------------
[Measure_Zeit_HH]
Measure=TIME
Format=%H

[Measure_Zeit_MM]
Measure=TIME
Format=%M

[Measure_Zeit_SS]
Measure=TIME
Format=%S
; --------------------------------------------------------------------------------

[Measure_Zeit_HH_T]
Measure=CALC
Formula=FLOOR(Measure_Zeit_HH / 10)

[Measure_Zeit_HH_O]
Measure=CALC
Formula=Measure_Zeit_HH - 10 * Measure_Zeit_HH_T
; --------------------------------------------------------------------------------

[Measure_Zeit_MM_T]
Measure=CALC
Formula=FLOOR(Measure_Zeit_MM / 10)

[Measure_Zeit_MM_O]
Measure=CALC
Formula=Measure_Zeit_MM - 10 * Measure_Zeit_MM_T
; --------------------------------------------------------------------------------

[Measure_Zeit_SS_T]
Measure=CALC
Formula=FLOOR(Measure_Zeit_SS / 10)

[Measure_Zeit_SS_O]
Measure=CALC
Formula=Measure_Zeit_SS - 10 * Measure_Zeit_SS_T



; --------------------------------------------------------------------------------
; Styles
; --------------------------------------------------------------------------------
[Style_Digit_Stripe]
Y=0R
InlineSetting= Face   | #Font.Face.NumValues#
InlineSetting2=Size   | 14
InlineSetting3=Color  | FFFFFFFF
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1

[Style_Digit]
Y=(#CS.Y# - 2)
InlineSetting= Face   | #Font.Face.NumValues#
InlineSetting2=Size   | 16
InlineSetting3=Color  | 004080FF
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1


; --------------------------------------------------------------------------------
; Meters
; --------------------------------------------------------------------------------
[Meter_BG]
Meter=SHAPE
Shape=Rectangle #CSOnly.Border.X#, #CSOnly.Border.Y#, #CSOnly.Border.W#, #CSOnly.Border.H# | Extend Format_Border
Format_Border=StrokeWidth #CSOnly.Border_WH# | Stroke Color FFFFFF80 | Fill Color FFFFFF00

Shape2=Rectangle #SKIN.BG.X#, #SKIN.BG.Y#, #SKIN.BG.W#, #SKIN.BG.H# | Extend Format_BG
Format_BG=StrokeWidth 0 | Fill Color FFFFFFFF

Shape3=Path Path_Inset | Extend Format_Inset
Path_Inset=(#SKIN.BG.X# + 0.5), (#SKIN.BG.Y# + #SKIN.BG.H#) | LineTo (#SKIN.BG.X# + 0.5), #SKIN.BG.Y# | LineTo (#SKIN.BG.X.Rechts# - 0.5), #SKIN.BG.Y#
Format_Inset=Stroke Color 000000FF

AntiAlias=1
DynamicVariables=1
UpdateDivider=-1

[Meter_HH_T_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#HH.1.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_HH_T] * [Meter_HH_T_Stripe_0:H]), (#CS.D# - 6), (3 * [Meter_HH_T_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=16 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_HH_T_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#HH.1.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_HH_T] * [Meter_HH_T_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_HH_T_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#HH.1.Mitte.X#

[Meter_HH_T_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#HH.1.Mitte.X#

[Meter_HH_T_BG]
Meter=SHAPE
Shape=Ellipse #HH.1.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_HH_T]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_HH_T
X=#HH.1.Mitte.X#
; --------------------------------------------------------------------------------

[Meter_HH_O_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#HH.2.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_HH_O] * [Meter_HH_O_Stripe_0:H]), (#CS.D# - 6), (10 * [Meter_HH_O_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=5 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_HH_O_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#HH.2.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_HH_O] * [Meter_HH_O_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_HH_O_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_3]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="3"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_4]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="4"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_5]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="5"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_6]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="6"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_7]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="7"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_8]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="8"
X=#HH.2.Mitte.X#

[Meter_HH_O_Stripe_9]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="9"
X=#HH.2.Mitte.X#

[Meter_HH_O_BG]
Meter=SHAPE
Shape=Ellipse #HH.2.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_HH_O]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_HH_O
X=#HH.2.Mitte.X#
; --------------------------------------------------------------------------------

[Meter_MM_T_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#MM.1.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_MM_T] * [Meter_MM_T_Stripe_0:H]), (#CS.D# - 6), (6 * [Meter_MM_T_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=8 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_MM_T_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#MM.1.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_MM_T] * [Meter_MM_T_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_MM_T_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#MM.1.Mitte.X#

[Meter_MM_T_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#MM.1.Mitte.X#

[Meter_MM_T_Stripe_3]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="3"
X=#MM.1.Mitte.X#

[Meter_MM_T_Stripe_4]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="4"
X=#MM.1.Mitte.X#

[Meter_MM_T_Stripe_5]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="5"
X=#MM.1.Mitte.X#

[Meter_MM_T_BG]
Meter=SHAPE
Shape=Ellipse #MM.1.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_MM_T]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_MM_T
X=#MM.1.Mitte.X#
; --------------------------------------------------------------------------------

[Meter_MM_O_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#MM.2.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_MM_O] * [Meter_MM_O_Stripe_0:H]), (#CS.D# - 6), (10 * [Meter_MM_O_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=5 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_MM_O_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#MM.2.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_MM_O] * [Meter_MM_O_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_MM_O_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_3]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="3"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_4]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="4"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_5]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="5"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_6]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="6"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_7]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="7"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_8]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="8"
X=#MM.2.Mitte.X#

[Meter_MM_O_Stripe_9]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="9"
X=#MM.2.Mitte.X#

[Meter_MM_O_BG]
Meter=SHAPE
Shape=Ellipse #MM.2.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_MM_O]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_MM_O
X=#MM.2.Mitte.X#
; --------------------------------------------------------------------------------

[Meter_SS_T_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#SS.1.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_SS_T] * [Meter_SS_T_Stripe_0:H]), (#CS.D# - 6), (6 * [Meter_SS_T_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=8 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_SS_T_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#SS.1.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_SS_T] * [Meter_SS_T_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_SS_T_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#SS.1.Mitte.X#

[Meter_SS_T_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#SS.1.Mitte.X#

[Meter_SS_T_Stripe_3]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="3"
X=#SS.1.Mitte.X#

[Meter_SS_T_Stripe_4]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="4"
X=#SS.1.Mitte.X#

[Meter_SS_T_Stripe_5]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="5"
X=#SS.1.Mitte.X#

[Meter_SS_T_BG]
Meter=SHAPE
Shape=Ellipse #SS.1.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_SS_T]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_SS_T
X=#SS.1.Mitte.X#
; --------------------------------------------------------------------------------

[Meter_SS_O_Stripe_BG]
Meter=SHAPE
Shape=Rectangle (#SS.2.Mitte.X# - (#CS.R# - 3)), (#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_SS_O] * [Meter_SS_O_Stripe_0:H]), (#CS.D# - 6), (10 * [Meter_SS_O_Stripe_0:H] + 8), 12, 12 | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=5 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_SS_O_Stripe_0]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="0"
X=#SS.2.Mitte.X#
Y=((#CS.Y# - (#CS.R# - 4) - [Measure_Zeit_SS_O] * [Meter_SS_O_Stripe_0:H]) + ((#CS.R# - 4) - 2))

[Meter_SS_O_Stripe_1]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="1"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_2]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="2"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_3]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="3"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_4]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="4"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_5]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="5"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_6]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="6"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_7]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="7"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_8]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="8"
X=#SS.2.Mitte.X#

[Meter_SS_O_Stripe_9]
Meter=STRING
MeterStyle=Style_Digit_Stripe
Text="9"
X=#SS.2.Mitte.X#

[Meter_SS_O_BG]
Meter=SHAPE
Shape=Ellipse #SS.2.Mitte.X#, #CS.Y#, #CS.R#, #CS.R# | Extend Format_BG

Format_BG=StrokeWidth #CS.SW# | Stroke LinearGradient LG_BG_S | Fill Color CCE5FFFF

LG_BG_S=45 | 004080FF ; 0.3 | 80BFFFFF ; 0.7
AntiAlias=1
DynamicVariables=1

[Meter_SS_O]
Meter=STRING
MeterStyle=Style_Digit
MeasureName=Measure_Zeit_SS_O
X=#SS.2.Mitte.X#